FULL STACK WEB

DEVELOPMENT
Everything Beginners to Expert Guide on Modern Full-Stack Web Development Using
Modern Web Development Tools

SAMMIE SMITH

TABLE OF CONTENTS
TABLE OF CONTENTS

CHAPTER ONE

INTRODUCTION
WHAT IS FULL STACK WEB DEVELOPMENT?
LAYERS OF FULL STACK DEVELOPMENT
 WHO IS A FULL STACK WEB DEVELOPER?
WHY ARE FULL-STACK WEB DEVELOPERS IN HIGH DEMAND AT PRESENT?
HOW TO BECOME A FULL STACK WEB DEVELOPER?
BASIC DATA STRUCTURES AND ALGORITHMS
CONCEPTS OF THE WEB EVERY DEVELOPER NEEDS TO KNOW
UNDERSTANDING THE TYPES OF WEB
UNDERSTANDING WEB DEVELOPMENT
A WEB DESIGNER AND A WEB DEVELOPER
TYPES OF WEB DEVELOPERS
UNDERSTANDING WEB TECHNOLOGY STACKS
FRONT-END, CLIENT-SIDE TECHNOLOGY STACK
BACK-END, SERVER-SIDE TECHNOLOGY STACK

CHAPTER TWO

WEB DEVELOPMENT FUNDAMENTALS

UNDERSTAND HOW WEBSITES WORK AND HOW HTML, CSS, AND JAVASCRIPT
CONTRIBUTE
UNDERSTAND HOW THE INTERNET WORKS
START CODING WITH HTML, CSS, AND JAVASCRIPT
LEARN AND UNDERSTAND GIT, GITHUB, AND VERSION CONTROL
What is GitHub?
Understanding Git Technology
What does distributed mean?
Understanding files states in Git
What is Version Control?
LEARN THE UNIX COMMAND LINE TO BECOME A POWER USER AND WRITE
BASH COMMANDS
Understanding the concept of Bash Command
What is Bash (Bourne Again Shell)?
What is a shell?
What is bash used for?
How does bash work?
LEARN KEY TROUBLESHOOTING AND DEBUGGING SKILLS TO APPLY TO
YOUR PROJECTS
How to Understand Why Bugs Occur
How to Fix or Remove Bugs

CHAPTER THREE
FRONT-END DEVELOPMENT
HTML IS THE STANDARD MARK-UP LANGUAGE FOR CREATING A WEB PAGE
A SIMPLE HTML DOCUMENT
What is an HTML Element?
UNDERSTANDING BASIC SOFTWARE TOOLS NEEDED
Install a text editor
Install a modern web browsers
LEARN THE ANATOMY OF HTML SYNTAX TO STRUCTURE YOUR WEBSITES
HTML Basic
HTML Forms
HTML Graphics
HTML Media
HTML APIs
UNDERSTAND THE HTML BOILERPLATE AND HTML DOCTYPES
THE DOCTYPE IN HTML
THE HTML ROOT ELEMENT
What are head tags in HTML?
What is UTF-8 character encoding?
What is the viewport meta tag in HTML?
What does X-UA-Compatible mean?
What are HTML title tags?
CSS stylesheet
Script tags in HTML
The HTML Doctypes
HOW TO STRUCTURE TEXT IN HTML
HOW TO STRUCTURE HTML LISTS TO CREATE UNORDERED AND ORDERED
LISTS
HOW TO INSERT IMAGES USING HTML
HOW TO CREATE HYPERLINKS USING ANCHOR TAGS
UNDERSTAND HOW TO USE HTML TABLES FOR CONTENT
HOW TO USE TABLES FOR LAYOUT
LEARN HTML BEST PRACTICES
UNDERSTAND HTML FORMS AND CREATE A SIMPLE CONTACT ME FORM
HTML DIVS AND HOW TO SEPARATE CONTENT FOR CSS STYLING

CHAPTER THREE

UNDERSTANDING C S S 3
UNDERSTANDING CASCADING STYLE SHEETS AND HOW YOU CAN USE THEM
TO STYLE YOUR WEBSITE
 LEARN HOW TO USE CSS SELECTORS AND ROPERTIES
CSS Properties
LEARN ABOUT HOW TO USE INLINE, INTERNAL, AND EXTERNAL CSS
The best use cases for each way of introducing CSS to HTML are discussed below.
HOW TO ADD INLINE CSS TO HTML
HOW TO ADD INTERNAL CSS TO HTML
HOW TO ADD AN EXTERNAL CSS FILE TO HTML
USING EXTERNAL CSS IS CONSIDERED THE BEST PRACTICE FOR A FEW
REASONS.
UNDERSTAND CSS CODING BEST PRACTICES
LEARN ABOUT CSS SIZING METHODS
LEARN THE ANATOMY OF CSS SYNTAX AND STRUCTURE
CSS SPECIFICITY AND IMPLEMENTING STYLE HIERARCHY
CLASS VS. IDS AND HOW TO TARGET EACH CSS DISPLAY AND HOW TO
IMPLEMENT LAYOUT
Class selector
ID selector
THE DIFFERENCE BETWEEN CLASS AND ID SELECTOR
HOW TO USE CSS STATIC, RELATIVE, AND ABSOLUTE POSITIONING SYSTEMS
FONT STYLING USING CSS AND WEB-SAFE FONTS
What Is a Web-Safe Font?
CENTERING ELEMENTS USING CSS
WEBSITE DESIGN FUNDAMENTALS AND TYPOGRAPHY
HOW TO USE CSS FLOAT AND CLEAR
HOW TO COMBINE CSS SELECTORS AND UNDERSTAND SELECTOR PRIORITY

CHAPTER FOUR

UNDERSTANDING BOOTSTRAP 4
HOW TO USE BALSAMIQ TO MOCKUP AND WIREFRAME WEBSITES
HOW TO CREATE MOCKUPS WITH BALSAMIQ
THE FUNDAMENTALS OF UI DESIGN FOR WEBSITES
CHOOSING INTERFACE ELEMENTS
BEST PRACTICES FOR DESIGNING AN INTERFACE
HOW TO DOWNLOAD BOOTSTRAP
UNDERSTANDING THE BOOTSTRAP GRID LAYOUT SYSTEM
HOW TO USE BOOTSTRAP CONTAINERS TO LAYOUT YOUR WEBSITE EASILY
 LEARN TO USE OTHER BOOTSTRAP COMPONENTS SUCH AS BUTTONS
Adding symbols using Font Awesome
Learn to use Bootstrap carousels
Learn to add Bootstrap cards to your website
Using Bootstrap navigation bars

CHAPTER FIVE

JAVASCRIPT
INTRODUCTION
THE FUNDAMENTALS OF CODE
APPLYING JAVASCRIPT (INTERNAL AND EXTERNAL)
Starting code with alerts and prompts
Understand Variables and Data Types in JavaScript
Data types
Variable naming in JS
Working with strings and numbers
Strings
Numbers
Randomization and logical operators, Loops, and Conditionals
Logical Operators
JavaScript Loops
Different Kinds of Loops
Conditionals
FUNCTIONS AND INVOCATION PATTERNS
Function Invocation
DISCUSSION OF ECMASCRIPT
Why ECMAScript:
LEARN INTERMEDIATE JAVASCRIPT
LEARN TO USE JS EXPRESSIONS, OPERATORS, STATEMENTS, AND
DECLARATIONS
OBJECT-ORIENTED PROGRAMMING
Benefits of OOP
Basic concepts of Object-oriented Programming
CREATING OBJECTS IN JAVASCRIPT
Class Implementation in JavaScript
JS Objects and Prototypes
THIS’, SCOPE AND CLOSURES
 REFACTORING AND DEBUGGING
Debugging
JavaScript Debuggers

CHAPTER SIX

DOCUMENT OBJECT MODEL (DOM)

LEARN THE TREE STRUCTURE OF HTML-BASED WEBSITES
TRAVERSE THROUGH THE DOCUMENT USING OBJECT NOTATION
SEPARATION OF CONCERNS AND CODING BEST PRACTICES
CODING BEST PRACTICES
MANIPULATE AND CHANGE THE HTML ELEMENTS USING YOUR
UNDERSTANDING OF THE DOM

CHAPTER SEVEN

JQUERY
UNDERSTANDING JQUERY
jQuery Features
INSTALLING AND USING THE JQUERY
WHY LEARN JQUERY?
LEARNING ABOUT JQUERY FUNCTIONALITY
DIFFERENCES BETWEEN JQUERY AND ANGULAR JAVASCRIPT
INTRODUCTION TO FUNCTIONS IN JQUERY
MANIPULATING TEXT, STYLES, AND ATTRIBUTES WITH JQUERY
CREATE ANIMATIONS AND CUSTOMIZATIONS WITH JQUERY
USE YOUR JQUERY KNOWLEDGE TO MAKE YOUR WEBSITE INTERACTIVE
jQuery Selectors
jQuery Methods
jQuery Events
RESPONDING TO USER-INITIATED EVENTS WITH JQUERY

CHAPTER EIGHT

GIT, GITHUB, AND VERSION CONTROL

WHAT IS A VERSION CONTROL SYSTEM?
WHAT IS A LOCAL VERSION CONTROL SYSTEM (LVCS)?
WHAT IS A CENTRALIZED VERSION CONTROL SYSTEM (CVCS)?
WHAT IS A DISTRIBUTED VERSION CONTROL SYSTEM (DVCS)?
What is Git?
 What is GitHub?
Why use GitHub
HOW TO SETUP GIT
HOW TO CONFIGURE GIT
HOW TO SETUP A GITHUB ACCOUNT
COMMONLY USED GIT COMMANDS
How to Use the git config Command
How to Use the git init Command
How to Use the git add Command
How to Use the git commit Command
How to Use the git clone Command
How to Use the git push Command
How to Use the git rm Command
How to Use the git branch Command
Git forking, branching, and cloning
How Forking it works
FORKING VS CLONING
BRANCHING IN THE FORKING WORKFLOW
FORK A REPOSITORY
CLONE YOUR FORK
EXPLORE THE COMPONENTS OF BACK-END DEVELOPMENT, WORKING WITH
AN MVC FRAMEWORK
UNDERSTAND THE WORKING OF THE MVC FRAMEWORK WITH AN EXAMPLE
Popular MVC Frameworks
HOW TO USE GITHUB WITH XCODE
CREATE A REPOSITORY ON GITHUB WITH XCODE
ADDING AN EXISTING REMOTE
BRANCHING WITH XCODE
COMMITTING TO GITHUB WITH XCODE

CHAPTER NINE

BACK-END DEVELOPMENT
INTRODUCTION
WHAT IS BACK-END DEVELOPMENT?
FRONT-END VS BACK-END DEVELOPMENT
BACK-END DEVELOPER TASKS AND RESPONSIBILITIES
TYPES OF BACK-END LANGUAGES
 BACK-END TOOLS, AND TECHNOLOGY
BACK-END DEVELOPER VS. BACK-END ENGINEER
COMMON SKILLS NEEDED FOR BACK-END DEVELOPMENT
COMMON BACK-END DEVELOPMENT JOBS

CHAPTER TEN

INTRODUCTION TO BACKEND TECHNOLOGY - NODE JS

WHAT IS [Link]?
FEATURES OF [Link]
WHO USES [Link]?
WHERE TO USE [Link]?
WHERE NOT TO USE [Link]?
[Link] - ENVIRONMENT SETUP
Text Editor
The [Link] binary installable
DOWNLOAD [Link] ARCHIVE
INSTALLATION ON UNIX/LINUX/MAC OS X, AND SUNOS
DOWNLOAD [Link]
Installation on Windows
GETTING STARTED
EXECUTING A FILE
[Link] - FIRST APPLICATION
CREATING [Link] APPLICATION
[Link] - REPL TERMINAL
STARTING REPL
Simple Expression
Use Variables
Multiline Expression
Underscore Variable
REPL COMMANDS
STOPPING REPL
WHY [Link]?
WHAT CAN [Link] DO?
WHAT IS A [Link] FILE?
COMMAND LINE INTERFACE
INITIATE THE [Link] FILE
WHAT IS SERVER-SIDE JAVASCRIPT?
BRIEF ORIGIN OF THE LANGUAGE
SERVER-SIDE JAVASCRIPT VS CLIENT-SIDE JAVASCRIPT
Client Side JavaScript
Server Side JavaScript
COMBINING SERVER-SIDE & CLIENT-SIDE JAVASCRIPT
USING NODE ON THE COMMAND LINE
Create A JavaScript File
Convert the JavaScript File into a NodeJs Command-Line Script
Make the JavaScript command-line file executable
Add code to our NodeJS command-line script file
Notes on the NPM link
NPM
INSTALLING MODULES USING NPM
GLOBAL VS LOCAL INSTALLATION
USING [Link]
Attributes of [Link]
UNINSTALLING A MODULE
UPDATING A MODULE
SEARCH A MODULE
CREATE A MODULE
[Link] CALLBACKS CONCEPT
BLOCKING CODE EXAMPLE
NON-BLOCKING CODE EXAMPLE
NODE JS EVENT-LOOP
EVENT-DRIVEN PROGRAMMING
JAVASCRIPT BUILD PROCESSES
EVENT LOOP AND EMITTERS
Nodejs setimmediate() vs settimeout()
Nodejs Event Emitter and its Working
FILE SYSTEM INTERACTION
FILE SERVER
FILE PATHS
MODULES
[Link] HTTP MODULE
[Link] AS A WEB SERVER
 Add an HTTP Header
READ THE QUERY STRING
LEARN NATIVE NODE DRIVERS
INSTALLING THE DRIVER

CHAPTER ELEVEN

EXPRESS JS
WHAT IS EXPRESS JS?
WHY EXPRESS JS?
UNDERSTAND HOW TO INSTALL AND USE EXPRESS IN NODE APPLICATIONS
What does Express code look like?
USING EXPRESS JS TO CREATE YOUR FIRST PROGRAM
WHAT ARE ROUTES?
CREATING NODE AND EXPRESS-BASED SERVERS
RESTFUL ROUTING WITH EXPRESS
UNDERSTAND AND USE MIDDLEWARE FOR NODE APPLICATIONS
TYPES OF MIDDLEWARE IN [Link]
WRITING EXPRESS MIDDLEWARE
Creating middleware

CHAPTER TWELVE

UNDERSTAND WHAT APIS ARE AND HOW THEY WORK

WHAT IS API?
HOW API ABSTRACTION ENABLES SPEED AND AGILITY
HOW DO APIS WORK?
SOAP APIs
REST APIs
WHAT DOES AN API DO?
A REAL EXAMPLE OF AN API
TYPES OF APIs
HTTP IN DEPTH
HTTP is a Hypertext Transfer Protocol
HTTP Versions
HTTP URLs
HTTP Requests
HTTP Request Verbs
 HTTP Headers
HTTP Responses
Response Headers
Status Codes
Tools to View HTTP Traffic
Using HTTP in Web Frameworks and Libraries
Receiving an HTTP Request with Express
Sending an HTTP Request with the Fetch API
POST Requests With Fetch
CALLING APIs
WHERE DOES AN API CALL GO?
HOW CAN API CALLS BE USED FOR AN ATTACK?
HOW TO SECURE APIS FROM INVALID API CALLS
READING API DOCUMENTATION
Method Details
BASIC API AUTHENTICATION
SERVER-TO-SERVER COMMUNICATION
CLIENT: TOKEN REQUEST AND RESPONSE
RESOURCE SERVER: TOKEN INTROSPECTION
JSON VS. XML, SENDING DATA OVER THE WIRE
What is JSON?
What is XML?
Key Difference
History of JSON
History of XML
Features of JSON
Features of XML
Difference between JSON and XML
JSON CODE VS XML CODE
UNDERSTAND REST AND GUIDING PRINCIPLES BEHIND API DESIGN
LEARN TO WORK WITH A MONGODB GUI ROBO 3T
Why Robo 3T?
Create Robo 3T User on MongoDB
All Database Users
Set Up a New Connection on Robo 3T
IMPLEMENTING GET, POST, PUT, PATCH, AND DELETE BY CREATING A PUBLIC
API FROM SCRATCH
The Get Method
The Post Method
The PUT Method
The Patch Method
 The DELETE Method
UNDERSTAND AND USE CHAINED ROUTE HANDLERS FROM EXPRESS.

CHAPTER THIRTEEN

EMBEDDED JAVASCRIPT (EJS)

WHAT IS A TEMPLATE ENGINE?
WHAT IS EJS?
WHEN TO USE EJS
WHY EJS?
GETTING STARTED
UNDERSTAND WHAT EJS DOES AND HOW TO USE IT WITH NODE AND
EXPRESS
TEMPLATING WITH EJS
RUNNING CODE IN EJS TEMPLATES
PASSING DATA FROM SERVER TO TEMPLATE AND VICE VERSA
CREATING LAYOUTS/PARTIALS WITH EJS
Installing packages
Let’s build our [Link]
EJS Partials

CHAPTER FOURTEEN

[Link]
LEARN FRONT-END DEVELOPMENT WITH REACT
Why should you learn React?
How to install React
UNDERSTAND WHEN AND HOW TO USE REACT COMPONENTS
LEARN TO PASS PROPS AND WORK WITH THEM
REACT PROPS VS. STATE
HOW TO PASS PROPS FROM CHILD TO PARENT COMPONENT
HOW TO SET PROPS TO STATE
LEARN TO WRITE JSX AND UNDERSTAND JSX SYNTAX
IMPERATIVE VS DECLARATIVE PROGRAMMING
HOW TO USE JSX
GETTING STARTED USING JSX IN YOUR SOFTWARE DEVELOPMENT
LEARN ABOUT THE REACT DOM
render() Function
 findDOMNode() Function
unmountComponentAtNode() Function
hydrate() Function
createPortal() Function
VIRTUAL DOM (VDOM) VS DOM
LEARN STATE MANAGEMENT IN REACT
The Four Kinds of React State to Manage
How to Manage Local State in React
How to Manage Global State in React
How to Manage Server State in React
How to Manage URL State in React
LEARN ABOUT REACT HOOKS
So How Do We Use Hooks?
The Benefits of Using Hooks
Five Important Rules for Hooks
Hooks for State and Effects
CLASS AND FUNCTIONAL COUNTER COMPONENT EXAMPLE WITH USESTATE
Call useState and useEffect as Much as You Want
LEARN ABOUT CONDITIONAL RENDERING IN REACT
See the screenshot below.
CONDITIONAL RENDERING WITH ENUMS
PREVENTING COMPONENT FORM RENDERING
UNDERSTAND THE DIFFERENCE BETWEEN CLASS AND FUNCTIONAL
COMPONENTS
DIFFERENCES BETWEEN CLASS COMPONENT AND FUNCTIONAL
COMPONENT
Class Component
Functional Component

CHAPTER FIFTEEN

DATABASE FUNDAMENTALS
WHAT IS A DATABASE?
WHAT IS DATABASE SOFTWARE?
WHAT IS STRUCTURED QUERY LANGUAGE (SQL)?
WHAT IS A DATABASE MANAGEMENT SYSTEM (DBMS)?
WHAT IS A MYSQL DATABASE?
TYPES OF DATABASES
DATA RELATIONSHIPS
Types of Relationships in DBMS
What is the Importance of Relationships in DBMS
 DESIGNING A DATA MODEL
Why do you need a data model?
How to Create a Data Model for your App Project
RELATIONAL DATABASES
What is a relational database?
RELATIONAL DATABASE MANAGEMENT SYSTEM
NON-RELATIONAL DATABASES
ADVANTAGES OF RELATIONAL DATABASES
RELATIONAL DATABASE USES
ALTERNATIVE DATABASES
MICROSOFT SQL
DATABASE PERFORMANCE ANALYZER
PostgreSQL
MongoDB
MariaDB
SQLite
ArangoDB
Oracle Database
SQL Server
ENTITY RELATIONSHIP MODELLING (ERM) AND OBJECT RELATIONAL
MAPPING (ORM)
ENHANCED ENTITY RELATIONSHIP (EER) MODEL
What is an ORM?
How does ORM work?
Types of ORMs

CHAPTER SIXTEEN

SQL DATABASES
WORKING WITH DATABASE SCHEMAS
What are database schemas?
Database schema types
CREATE-READ-UPDATE-DESTROY (CRUD)
What are CRUD operations?
Why is CRUD so important?
CREATE
READ
UPDATE
DELETE
DATABASE JOINS
Different types of JOINS in SQL Server
Basic SQL JOIN types
 INNER JOIN
OUTER JOIN
LEFT OUTER JOIN
RIGHT OUTER JOIN
SELF JOIN
CROSS JOIN
QUERYING SQL DATABASES

CHAPTER SEVENTEEN

NOSQL DATABASES WITH MONGODB AND MONGOOSE

SERIALIZATION
Why Is Data Serialization Important for Distributed Systems?
HOW TO MODEL NOSQL DATA
General Modeling Techniques
Hierarchy Modeling Techniques
DOCUMENT DATABASES (MONGODB)
CREATE-READ-UPDATE-DESTROY (CRUD) NOSQL BEST PRACTICES
What are CRUD operations?
Why is CRUD so important?
CRUD offers many benefits including:
MONGO SHELL AND COMMAND LINE USE
MONGODB MONGO SHELL FEATURES
INSTALLING THE MONGO SHELL
CONNECT TO MONGODB DATABASE
BASIC COMMANDS FOR MONGO SHELL
INSTALLING MONGODB
MAPPING RELATIONSHIPS WITH MONGODB
USING AN OBJECT-DATA MODELLING LIBRARY (MONGOOSE) TO WORK EASILY
WITH YOUR DATA
What is Mongoose?
How MongoDB Works
Mongoose Purpose
INSTALLING MONGOOSE AND CREATING THE PERSON SCHEMA

CHAPTER EIGHTEEN

DEPLOYMENT
UNDERSTAND HOSTING AND DEPLOYMENT
What is web hosting?
How do I get started with a website?
 How does web hosting work?
Self-hosting
Types of web hosting
What are the best web hosting services?
Hosting static websites with GitHub Pages
WHAT IS WEBSITE DEPLOYMENT?
Five Steps of Website Deployment
Backup, and Go Live
DEPLOYING SERVER-BASED APPLICATIONS WITH HEROKU
DEPLOYING DATABASES WITH MONGO ATLAS

CHAPTER NINETEEN

AUTHENTICATION AND SECURITY

UNDERSTAND THE NEED FOR AUTHENTICATION AND KEEPING USER DETAILS
SECURE
LEARN ABOUT ENCRYPTION AND USE ENCRYPTION TO KEEP YOUR
DATABASE SECURE
Why Do I Need Database Encryption?
HASHING PASSWORDS WITH BCRYPT
SESSIONS AND COOKIES
Session Tokens
Session Cookies
SETTING UP LOCAL AUTHENTICATION FROM SCRATCH
Linux or macOSWindows
Verifying authentication
IMPLEMENTING PASSPORT TO AUTHENTICATE USERS QUICKLY AND
EFFECTIVELY
UNDERSTAND AND USE ENVIRONMENT VARIABLES TO KEEP SECRET KEYS
SECURE
UNDERSTAND AND USE OAUTH TO LOG IN USERS USING GOOGLE AND
FACEBOOK
What is OAuth?
A hypothetical situation where OAuth fits perfectly
How does OAuth save you from the hassles of Signing Up?
How does OAuth work?

CONCLUSION

INDEX
 CHAPTER ONE

INTRODUCTION
The rise of the electronic computer, the World Wide Web, and the
Internet are the ultimate inventions of this age or century, and we are
fortunate to be witnesses of these inventions, working on the peak of
the trend that the influence of these inventions is having on the
human race.
Developers of different levels have typically worked in technological
companies, or within technological departments of different
organizations, but as the older developers are now getting old
because of a lack of upskilling and are now retiring, the modern
generation is finding expression and gaining employment in many
different areas in the tech world.
Also, web development is one of the skills that is highly sought after
in the world today. It's a skill that has continued to experience high
take-home currencies. Employment of web developers and digital
designers has been projected to grow 13 percent from 2020, to
2030. Web development, over the past years, had been reduced to
building just websites. But web development truly goes beyond just
building websites, to building apps, games, virtual assistance, and
other resources that run on the web. I would recommend that in
choosing a career in one of the good number of Tech skills you must
have seen or read about, Web Development is a wonderful start. All
of these factors have given rise to the “full stack” development.
This publication is focused on the modern Front-ends technology tools such as, HTML 5,
CSS 3, Bootstrap 4, JavaScript, jQuery, GIT, GITHUB, and Version Control for Modern Web
Development and Back-end technology tools such as, Node JS, Express, APIs, Embedded
JavaScript (EJS), React JS, Database Fundamentals, SQL Databases, NoSQL Databases,
MongoDB and Mongoose, Deployment + Authentication and Security for Modern Full-Stack
Web Development.
 WHAT IS FULL STACK WEB
DEVELOPMENT?
Full Stack web development involves the activities of both front-end
and back-end web development. Full Stack developers are
knowledgeable in every level and layer of how the web works. They
are also seen as Jack of all trades, understanding every system and
component that make up the web. They can build solutions to every
problem on the web. It requires the indebt knowledge of the different
scripting languages like HTML, CSS, and JavaScript, which makes
the web looks more attractive. It also requires in-depth knowledge of
high-level programming languages such as Java, Python, PHP, C++,
C#, Visual Basic, and so on to code a server side. Apart from these,
you also require experience in working with JavaScript frameworks
like Node JS, libraries, JQuery, and so on, APIs design, and
database application tools inclusive.

LAYERS OF FULL STACK DEVELOPMENT

Full Stack Web Development speaks of the development of both the
front end and back end of web applications or web applications. The
Full Stack web development process consists of three layers, which
include:
The presentation layer: This consists of the front end of
the application. This means the HTML, CSS, and
JavaScript that users interact with. Other application types
are mobile applications, desktop applications, and voice
interfaces. Nevertheless, sticking with strictly Web
applications, is where you’ll come across the Web page
that the client works with.
The logic layer: This consists of the back end of the
application. It should safely retrieve and place data
requested or given from the consuming client and pass it
along to the data layer. This often involves more
complicated tasks like authentication, authorization, API
design, or creating the logic to implement business logic.
 The database layer: The database layer, which is also
recognized as the data tier, stores all the information
connected to user profiles and transactions. Principally, it
consists of any data that needs to persist in being stored in
the data tier.

WHO IS A FULL STACK WEB DEVELOPER?

A Full Stack Web Developer is a developer who can work on both
ends of the web development process, i.e., front end and back end.
They are capable of performing the following tasks:
Writing optimized front-end code in HTML, CSS,
JavaScript, and Java.
In-depth understanding of the system’s infrastructure such
as how hardware and OS work.
Security and Networking in web development.
Designing APIs and writing backend code in Python, Java,
and PHP.
Client interactions and Project Management Skills.
Creating and querying databases.
So, it can be said that a full-stack web developer can build strategies
for every part of the web development process. They can get in-
depth knowledge of the various stacks through years of experience
in the technical field and the zeal to learn new technologies in the
market.
It is quite difficult to gather and possess these skills and that is the
reason why full-stack web developers are hugely in-demand in the
industry.

WHY ARE FULL-STACK WEB DEVELOPERS

IN HIGH DEMAND AT PRESENT?
The demand for full stack developers is high as likened to the
developers who are only specialized in one layer of a technology
stack. The main reason that has led to the great demand for full-
stack web development specialists is the persistent pace of
technologies. Also, technologies being used today are entirely
different as it was used to be ten years back.
Developers can keep up with the rapid changes in technology since
full-stack development requires a wide variety of abilities. They can
construct the full working prototype on their own because they are
familiar with every layer of the technology stack.
Organizations that need to create a Minimum Feasible Product as
quickly as possible while considering the needs of the client will
benefit from the capacity of full stack developers to operate across
various stacks.
Every full stack developer should be able to work on every layer of
the application and produce finished products in the shortest amount
of time. The market need for full-stack web developers has grown as
a result of their contribution to many stages of the development life
cycle. You must understand all the skills you require if you want to
work as a full-stack developer.

HOW TO BECOME A FULL STACK WEB

DEVELOPER?
Every full-stack developer should have practical knowledge and
capabilities for all areas which involve the building of software
applications. The screenshot below shows the full-stack
development tools that every potential full-stack developer or
individual desiring to be a full-stack developer should learn.
Image

Every developer must have in-depth knowledge of the following:

Programming Languages: Every developer needs to be
an expert in multiple programming languages like Java,
C#, PHP, Python, and many more. However most of the
core business developments are written in these
languages, therefore, every full stack developer needs to
master the syntax of languages and be conversant with
how to design, structure, and test projects based on those
programming languages.
Knowledge of development frameworks and third-party
libraries: A full-stack web developer should have a good
understanding of various web development frameworks
that support rapid application development. They should
know which web development framework can be suitable
for the type of application they want to build. The
 programming languages cited above are accompanied by
development frameworks and third-party libraries like Java
Spring, Angular, Django, PHP, and so on.
Front-end Technology: Front-end technologies play a
fundamental role in the development of every application.
In addition to the user interface and product structures, the
user experience is also one of the paramount benchmarks
to test the product’s accomplishment. Hence, a full-stack
web developer has to be professional in some of the
necessary front-end technologies like HTML5, JavaScript,
TypeScript, CSS, JS Frameworks, DOM Sass, HTTP, and
BootStrap.
Back-end Technology: Once you get a decent
understanding of front-end tools like JavaScript, CSS,
HTML, and others, you have to move on to the back-end
technologies to handle tasks such as database
management, user authentication, and application logic.
You may come across a good number of backend
technologies, but you will have to discover one that meets
the conditions of the project you are working on. [Link],
Python, Java, PHP, and Ruby are some of the trending
backend technologies which you can learn to implement
across numerous applications.
Database Management: Although, in becoming a full
stack web developer, you would also have to save the data
of the software application somewhere and use it at later
stages. As a full-stack web developer, you also need to
have a comprehensive understanding of the technologies
related to storage and databases. You must understand
the following:
1. The
basics of relational data. For instance, how to connect
an application with SQL and how to run queries.
2. You
should also learn about NoSQL databases, such as
MongoDB.
 3. Know how to connect a database with backend
technology. For instance, Java+SQL.
4. Study
about the benefits of in-memory data stores like
Memcached and Redis.
5. Know how to use web storage for storing sessions, cached
data, and cookies in the browser.
6. Know about scaling databases, ORM, and ACID.
You must make sure you have a super understanding of the above
database concepts to become a professional in full-stack web
development.
Web application architecture: When you are done
learning about front-end and back-end programming tools
and databases, a developer needs to know the
architecture of a web application. If you have to develop a
complex and enormous web application, you should know
how to organize your code, how to keep files structured,
how to arrange the data in databases, where to host the
media files, and where to perform computational jobs. To
understand how to handle large and complicated
applications, you should:
1. Learn
about the common platforms as a service, like AWS
and Heroku. AWS makes available lots of services and
products to assist with video processing, storage, and load
matching. On the other hand, Heroku permits you to
upload the code and application proficiently running with
server maintenance.
2. Learnabout performance optimization for present
browsers and web applications.
3. Also,
consider the codebases of prevalent projects on
GitHub to learn how to manage the structural design of
web applications.
 HTTP and REST: HTTP is known to be a stateless
application protocol that permits client applications to
interrelate with servers. A full-stack developer ought to
understand how HTTP requests are managed at the
backend of the application.
The following are some of the topics you should learn to know
more about HTML or REST
Study HTTP/2 and SPDY.
Understand REST and how it is related to HTTP.
Understand SSL Certificates.
Learn how to use Chrome DevTools.
Understand Web Sockets, Service Workers and Web
Workers.

BASIC DATA STRUCTURES AND

ALGORITHMS
In this day and age, a lot of developers believe that learning
algorithms like matrix manipulation, tree traversal, or sorting are not
necessary for web development. Nevertheless, big companies hire
full-stack developers who have a strong computer science
background.
In becoming a reputable full-stack web developer, you must have a
good understanding of the following:
1. Understand Hash tables and what ways they are applied in
a real application.
2. Know how graphs and trees can be beneficial and applied
in real time.
3. Understand the difference between linked lists and arrays.
4. Understand the difference between queues and stacks.
Decentralized Technology: With the capacity to bring
trust, and transparency to the core commercial processes,
decentralized technology is attaining a lot of financial
traction nowadays. To stay ahead of the technology arc,
 you ought also to understand the concepts of
decentralized, various categories of blockchain technology
platforms, and how they work at the backend development.
You should also make sure you have a good understanding of the following concepts:

1. Understand Distributed Ledger Technology.

2. Know the different types of consensus algorithms.
3. Understand blockchain technologies and how they work.
4. How to build an application using different blockchain
platforms.
5. Understand the difference between various blockchain
platforms.
Becoming a full-stack web developer is not a stress-free task,
because you need to learn multiple technology stacks if you must
stand out.

CONCEPTS OF THE WEB EVERY

DEVELOPER NEEDS TO KNOW
WEB: The web is also known as Word Wide Web (WWW) or W3, it’s
an interconnected system of public webpages usually known as
servers. The WWW is a web technology that Links web resources
together over the internet. The Web is not the same as the Internet,
but the Web is one of many applications built on top of the Internet
because the internet housed the Web.
URL: Uniform Resource Locator (URL) also known as Web address
is a reference to a web resource that specifies its location on
a computer network and a gateway for retrieving it. A typical
example of a URL is [Link] Https represent the
Transfer Control Protocol, while [Link] is the URL for Google.
HTTPS: Hypertext Transfer Protocol Secured is a secured protocol
that governs the transfer of Web resources. While Hypertext Transfer
Protocol is a none secured protocol that governs the transfer of Web
resources. You can identify between this two when surfing the
internet. Secured protocol usually puts a visible padlock before the
address bar of the Web browser while none secured does not.
WEBSITE: A website is said to be a collection of related web pages
with common web resources and share the same domain name. A
web page may consist of text, images, audio, video animations, and
other related resources. These resources could be static or dynamic.
There are primarily two (2) types of websites; Static and Dynamic
Websites.
DOMAIN NAME: Domain is simply your website address. It is a
unique name that identifies resources stored on a website. It's a
unique name that houses your website. Because of the above
definition, two websites cannot have the same name, but a website
can have a primary domain and a sub-domain. The primary domain
is said to be the main domain name of a website. For instance,
[Link], [Link], etc. While the sub-domain is a
secondary domain to the primary domain. For instance
[Link], [Link], etc.
HOSTING: Hosting serves as the land upon which your website is
built. Web hosting servers are the space where your website is built
and stored which is accessible on the web.
SERVER: A server is a software or hardware device that accepts
and responds to requests made over a network. The device that
makes the request, and receives a response from the server, is
called a client. On the Internet, the term "server" commonly refers to
the computer system that receives requests for a web file and sends
those files to the client. Servers manage network resources. For
example, a user may set up a server to control access to a network,
send/receive an e-mail, manage print jobs, or host a website. They
are also proficient at performing intense calculations. Some servers
are committed to a specific task, often referred to as dedicated.
However, many servers today are shared servers that take on the
responsibility of e-mail, DNS, FTP, and even multiple websites in the
case of a web server.

UNDERSTANDING THE TYPES OF WEB

 1. Web 1.0: Web 1.0, also called the Static Web, was the first
available and most reliable internet in the 1990s
notwithstanding the fact it gives access to limited
information with little to no user interaction. Back in the
day, creating user pages or even remarking on articles
wasn’t possible since it was not built with such a feature.
Web 1.0 didn't have algorithms to sift internet pages and bring
them together in a dynamic way, which made it extremely hard
for users to find relevant information. Simply put, it was like a
one-way highway with a narrow footpath where content
creation was done by a select few algorithms and information
came mostly from directories where they are stored.
2. Web 2.0: Web 2.0, also known as Social Web, or Web 2.0,
made the internet a lot more interactive. Here, messages
can be exchanged on a real-time basis. The
advancements in web technologies like JavaScript,
HTML5, CSS3, etc. It enabled startups to build interactive
web platforms such as YouTube, Facebook, Wikipedia,
and lots more. This paved the way for both social networks
and user-generated content production to flourish since
businessmen and women can run business adverts on
those platforms, thereby promoting their products and
services. Data can now be distributed and shared
between various platforms and applications.
3. Web 3.0: Web 3.0 is the third generation of the internet
where websites and applications will be able to process
information in a smart human-like way through
technologies like Big Data, machine learning (ML),
decentralized ledger technology (DLT), etc. Web 3.0 was
originally called the Semantic Web by World Wide Web
inventor Tim Berners-Lee, and was aimed at being a more
autonomous, intelligent, and open internet. The Web 3.0
definition can be expanded as follows: data will be
interconnected in a decentralized way, which would be a
huge leap forward to our current generation of the internet
unlike (Web 2.0), where data is mostly stored
in centralized repositories or systems. The two functions of
 Web 3.0 is the semantic web and artificial intelligence (AI).
Web 3.0 is the succeeding stage of the web evolution that
would make the internet more intellectual or process
information with near-human-like brainpower through the
power of AI systems that can run smart programs to assist
users.
Tim Berners-Lee had said that the Semantic Web is meant to
"automatically" interface with people, systems, and home devices
without the need for a middleman. As such, content creation and
decision-making processes will include both humans and machines.
This would allow the intelligent creation and distribution of highly-
tailored content straight to every internet end user.
Image

UNDERSTANDING WEB DEVELOPMENT

Web development is the building and maintenance of websites; the
process involved in building solutions to problems or programs that
runs on the web. It's knowing the concepts and ways of building
solutions to programs. These programs cut across the building and
maintenance of apps, games, and other resources that run on the
web.

A WEB DESIGNER AND A WEB DEVELOPER

A Web Designer: A web designer is said to be a graphic artist who is
responsible for designing the layout that is, the user interfaces, and
the visual look of a website. A web designer must possess and
sustain a level of creativity in graphics manipulations, and have
knowledge of WordPress, HTML, and CSS, with other technical
skills.
A Web Developer: A web developer is tasked with the responsibility
of translating the results of a web designer into a functional website,
using coding languages such as HTML, CCS, JavaScript, Node Js,
MongoDB, React, Vue Js, Angular, PHP, Python, and other
programming languages. They are up to date in knowing the
concepts it takes to build and maintain programs that run on the
web. A web developer is someone who builds and maintains the
core structure of a website. They are often used interchangeably
with Web Engineers. But a Web Engineer is a senior brother to a
web developer. Because they understood the functionalities of
software development stages and can work at every development
stage. Their responsibility is to give instructions to web developers.

TYPES OF WEB DEVELOPERS

There are three major types of web developers, and they are as
follows.
1. Frontend: A frontend developer is saddled with the
responsibility of building layouts or the user interface of a
website. They are the good guys that the users relate with,
their impact is felt by the users because they have a direct
relationship with them. Frontend developers combine their
vast knowledge of HTML, CSS, JavaScript, and other
languages, as well as Content Management systems
 (CMS) such as WordPress, to create user interfaces or
layouts of a website.
Frontend development, also known as client-side development,
largely involves coding and programming the visual elements of
a website that users will see.
2. Backend: Backend developers are responsible for
database structure, functionality, and server using
advanced programming languages such as PHP, C#,
Java, Ruby, and SQL, as well as Node JS, Angular JS,
React, and other server-side frameworks. Back-end
development, also known as server-side development,
mainly encompasses the aspects of the website happening
‘behind the scenes, which visitors don’t see from the front
end.
3. Full-Stack: Full-stack developers combined the functions
of both the front end and the back end of a website. They
have a solid understanding of how these parts work and
function together. In addition to coding web pages using
CSS, HTML, and JavaScript, full-stack developers also set
up and configure servers, code Application Programming
Interfaces (APIs), query databases, and some other
functions.
(NB: The frontend, backend, and Full Stack developers are
mostly called coders. This is because they are responsible for
building codes for programs, or building solutions to programs
that run on the web).
 UNDERSTANDING WEB TECHNOLOGY
STACKS
A tech stack is defined as the set of software tools or technologies
an individual or organization uses to build a web or mobile
application. It is a combination of different programming languages,
mark-up languages, style sheets, frameworks, libraries, patterns,
servers, UI/UX (User Interface/User Experience) solutions, software,
and tools used by web developers. A technology stack, also known
as a software stack or development stack is categorically divided into
two: client-side (frontend) and server-side (backend). Backend tools
or technologies include web frameworks, programming languages,
servers, and operating systems, while frontend tools or technologies
include HTML, CSS, JavaScript, and UI frameworks and libraries. It
refers to the software tools or technologies developers specialize in
and combine to develop new pieces of software. They are
mainly; MongoDB, NodeJS, ExpressJS, AngularJS, VueJS,
React, MySQL, PostgreSQL, etc.

FRONT-END, CLIENT-SIDE TECHNOLOGY

STACK
Every web application has two different sides. One is accessible to
the client and is accountable for the UI, while the other is
accountable for the client’s experience. The side which is visible to
the client and exploited by him/her to communicate with the
application constitutes the front end. The front-end technology stack
primarily consists of HTML, CSS, Java, and so forth.
HTML: It is a Markup Language utilized for rendering the
creation of data introduced on a page. Also, it employs the
most recent rendition of HTML, HTML5 which has new
mechanisms and what it takes for making web applications
all the more effective and viably. The essential benefit that
HTML5 has is, its sound and video support, which was
omitted from past versions of HTML.
CSS: It is a template language that represents the look,
position, and design of a document written in HTML. CSS
is used for explaining text and inserting labels in styled
electronic documents.
JavaScript: It is the third principal technology for building
the front end of a web application. It is regularly utilized for
making dynamic and intuitive site pages. Besides, it also
empowers basic and complex web animations, which
significantly add to a positive client experience. JavaScript
helps to make easy-to-understand applications in addition
to this subject. You can check some collections of admin
templates based on HTML, CSS, and JS here at React
bootstrap admin template free, Bootstrap 5 admin template
GitHub, and Bootstrap Admin Templates.

BACK-END, SERVER-SIDE TECHNOLOGY

STACK
The working of the application is dependent on the client association
primarily with the back end or server side. It isn’t available to the
client, and the technology that is answerable for creating that
association is known as the back-end technology stack.
Programming languages, structures, libraries, servers, data set
administration frameworks, etc., are vital parts of back-end tech
stacks. It refers to the technologies they major in and uses together
to create new pieces of software. The backend technology stack
mainly consists of the following programming tools:
NodeJS, MongoDB, ExpressJS, Angular, React, Vue, PostgreSQL,
MySQL, Apache, etc.
The backend stack incorporates the following components:
1. Programming languages: This makes reasoning for
applications and sites easy. It provides the code interface
and the web data set. A few representations are
JavaScript, PHP, and Python.
2. Frameworks: This offers help for applications reliant on a
single programming language. Django, Laravel, and Ruby
on Rails are many of the well-known technologies in this
regard.
3. Web Servers: You need backend servers to oversee
customer demands. Apache, Nginx, and Microsoft’s
Internet Information Server (IIS) are extraordinary
instances of web servers.
 CHAPTER TWO

WEB DEVELOPMENT
FUNDAMENTALS
UNDERSTAND HOW WEBSITES WORK AND
HOW HTML, CSS, AND JAVASCRIPT
CONTRIBUTE
A website is normally the assemblage of web pages. These web
pages may consist of texts, images, audio, videos, and other
elements that are linked together to form a large structured
document. A website could be made up of a single page or
thousands of pages assembled. Each page will have its text,
images, and other elements. All web pages and their elements
are then retained in a folder and stored on your web host
server. Each web page is written in codes and these codes define
the layout, format, and content on the page. The most common
website coding technologies are HTML, CSS, and JavaScript.
HTML, CSS, and JavaScript work together to form the foundation of
your website, which is the front-end design of a website. HTML,
CSS, and JavaScript are considered to be the backbone of the web.
These three design tools are for front-end web development and are
responsible for what you can see and relate to on a website. They
are referred to as client-side technologies as they run in the browser
(Microsoft Edge, Google Chrome, Firefox, etc.) of your computer.
The browser does the translation of these design tools and the result
of this translation is the visual web page.
UNDERSTAND HOW THE INTERNET WORKS
The Internet is defined as a network of networks. It works by using a
technology called packet switching, which relies on standardized
networking protocols that all computers can interpret. The internet is
a worldwide computer network that transfers a diversity of data and
media through interconnected devices. It works by using a packet
routing network that follows Internet Protocol (IP) and Transfer
Control Protocol (TCP). TCP and IP work together to make sure that
data transmission through the internet is steady and reliable, no
matter the device you’re using or where you’re using it. As soon as
data is transmitted over the internet, it’s distributed in messages and
packets. Data sent through the internet is termed a message, but
before messages get sent, they’re fragmented into the smallest form
called packets.
These messages and packets journey from one source to another
using Internet Protocol (IP) and Transfer Control Protocol (TCP).
Internet Protocol is a system of guidelines that directs how
information is sent from one computer to another computer through
an internet connection. Using a numerical IP Address, the IP system
accepts additional instructions on how the data is to be transferred.
The Transfer Control Protocol (TCP) works together with IP to
guarantee the transfer of data process is trustworthy and reliable.
This supports making sure that no packets are lost, packets are
reconvened in a proper sequence, and there’s no postponement
adversely affecting the data quality.

START CODING WITH HTML, CSS, AND

JAVASCRIPT
The most important part of this lesson is to start learning how to
code with HTML, CSS, and JavaScript. Before you can do this, you
will have to get one of the editor technology tools to actualize this.
You could use Atom editor, Visual Studio Code editor, or Sublime
Text 3. It’s also important to note that HTML and CSS are not
programming languages. HTML is a markup language while CSS is
a styling language. JavaScript, however, is a programming language.
Hence, they are all web languages for building a specific part of a
website.

LEARN AND UNDERSTAND GIT, GITHUB,

AND VERSION CONTROL
Have you been wondering how Git and GitHub work? Don’t worry,
you are not alone in that confusion. Git and GitHub can be confusing
sometimes, but when you follow them gently you will be able to
grasp the technology behind them.
When you hear of these two techniques, it may be tempting to
believe Git and GitHub are the same things. But in actuality, they are
not. Certainly, it is workable to use Git without GitHub! And
eventually, these two exist with dissimilar intentions.

What is GitHub?
GitHub is a website and cloud-based technology that helps
developers store and manage their code, as well as keep track and
control modifications to their code. To understand exactly what
GitHub is, you need to understand Version control and Git principles.

Understanding Git Technology

Git is a Distributed Version Control System (DVCS) used to preserve
different versions of a file or set of files so that any of the saved
versions are retrievable at will. Git also makes it stress-free to record
and compare, unlike file versions. This means that the details about
what is to be changed, who does the change, or who instigated an
issue are reviewable anytime.

What does distributed mean?

The term distributed means that each time you instruct Git to
distribute or share a project’s directory with the individual in view, Git
does not only share the up-to-date file version. Instead, it distributes
every version it has documented for that project. This distributed
system is a sharp difference from other version control systems.
They only distribute whatever single version a user has openly
checked out from the principal or local database. Consequently,
distributing means distributing all files and not just the selected few
versions of a project’s files that Git has documented.

Understanding files states in Git

Git has three primary states or conditions in which a file can be, and they are explained
below.

1. Modified state: A file in the modified state is a revised file

but uncommitted is an unrecorded file. In other words, files
in the modified state are files you have revised but have
not authorized Git to monitor.
2. Staged state: Files in the staged state are modified files
that have been carefully selected in their current state or
 version and are being organized to be saved or committed
into the .git storehouse or repository during the next
commit caption. Once a file gets staged, it indicates that
you have clearly instructed Git to monitor that file’s version.
3. Committed state: Files in the committed state are files
that are successfully warehoused into the .git repository.
Hence, a committed file is a file in which you have
recorded its staged version into the Git directory or folder.
(NB: The state of a file defines the location where Git will place it).

Follow the steps below to host or share a Git repository on

GitHub.
1. Signup for a GitHub account.
2. Create a remote repository in GitHub.
3. Connect the project’s Git directory to the remote repository.
4. Confirm the connection.
5. Push a local Git repo to the remote repo.
(NB: When you have successfully connected your local
directory to the remote repository, you can then begin to push,
that is, upload your local project upstream, and whenever you
are ready to share your project elsewhere, on any remote repo,
you can simply authorize Git to push all your commits,
branches, and files in your local .git directory to the remote
repository. The code syntax used to upload or push a local Git
directory to a remote repository is: git push -u remoteName
branchName).
6. Confirm the upload by going back to your GitHub
repository page to confirm that Git has successfully
pushed your local Git directory to the remote repository as
instructed.
(NB: You may need to refresh the remote repository's page for the changes to
reflect).
What is Version Control?
A Version Control System (VCS) refers to the technique used to
save a file's versions for future use. Version control is a technology
that helps developers track and manage modifications to a software
project’s code. As a project grows, version control becomes
indispensable. With branching, a developer can duplicate part of the
source code called the repository. After this, the developer can then
safely make modifications to that part of the code without changing
the rest of the project.
At that time, the developer gets his or her part of the code working
appropriately, he or she can merge that code back into the main
source code to make it official. All of these changes are then tracked
and can be reverted if need be.
Unthinkingly, several people already version control their project's
work by retitling different versions of the same file in different ways
like [Link], storeScript_v2.js, storeScript_v3.js, storeScript_fin
[Link], storeScript_definite_final.js, etc. But this approach is prone to
error and unproductive for team projects. Similarly, tracking what is
being changed, who changed it, and why it was changed is a boring
endeavor with this old-style approach. This lightens the significance
of a dependable and collaborative version control system like Git.
However, to get the best of Git, it is essential to understand how Git handles your files.

Finally, Git and GitHub are two dissimilar entities that assist you to
manage and host files. In other words, Git serves to control file
versions while GitHub is a platform for hosting Git repositories.

LEARN THE UNIX COMMAND LINE TO

BECOME A POWER USER AND WRITE BASH
COMMANDS
A Unix shell is a command-line translator or shell that offers a
command-line user interface for Unix-like operating systems. Unix
and Unix-based Operating Systems such as macOS and Linux have
always included their main Command Line Interface (CLI) such as
a terminal window. While for most of its existence, Microsoft drives
people to disregard their command prompt options and to strictly
work within the graphical user interface, starting with Windows 7,
Microsoft has included their PowerShell command-line shell and
scripting language. The shell is both a collaborative command
language and a scripting language and is used by the operating
system to manage the execution of the programs using shell scripts.
The Unix (Ultrix) operating system is case-sensitive. All commands
must be typed in lower-case letters unless noted otherwise. Unix
command can help in achieving the following task.
Can be used in Displaying a Directory.
Displaying and Concatenating (Combining) Files.
Copying Files.
Deleting Files.
Renaming Files.
Printing from Unix, etc.

Understanding the concept of Bash

Command
Bash is a Unix shell and command language designed by Brian Fox
for the GNU Project as an unrestricted software substitute for the
Bourne shell. First relinquish in 1989, it has been used as the default
login shell for most Linux distributions. Bash was one of the first
programs Linus Torvalds ported to Linux, alongside GCC. The Bash
command is located at /usr/bin/which. Most of the command tools
are located under the /usr/bin directory. Here, bash is consulting
PATH for the places to search for the executable(s) of a command.

What is Bash (Bourne Again Shell)?

Bash (Bourne Again Shell) is the open and improved version of
the Bourne shell distributed with Linux and GNU operating systems.
Bash is similar to the original, but has added several other features
such as command-line editing.
It was created to improve on the earlier Bourne shell (named sh),
Bash includes features from the Korn shell and the C shell. Bash is
envisioned to fit into the shell standard specified as part
of IEEE POSIX. A command language script written for the Bourne
shell should also run in the bash shell.

What is a shell?
A shell is a program that provides entrance to an operating system's
modules. The shell provides users or other programs a passage to
get inside the entire system; the shell defines the margin between
inside and outside.
There are two types of operating system shells, which are:

1. Command-line interface (CLI) shells, like bash, provide

users a concise and efficient mode of interrelating with the
Operating System, without demanding the overhead of a
graphic user interface.
2. Graphical user interface (GUI) shells, such as Windows
and macOS, are well thought-out and easier for starters to
use, but usually, also provide programs that imitate a CLI-
based shell for system administrators or other power users
who prefer to interact at a command prompt.
Bash is the most commonly used CLI shell for Unix-based OSes,
including Linux.

What is bash used for?

Bash, like other CLIs, is used for any computer application that
requires accuracy when dealing with files and data, specifically
where large numbers of files or large amounts of data need to be
searched, sorted, manipulated, or processed in any way. Bash is
commonly used interactively, but it can also be used to write shell
scripts. Almost any computer task can be automated using a Bash
script. Bash scripts can be run on-demand or scheduled to run
occasionally.

How does bash work?

At first sight, bash appears to be a simple command/response
system, where users input commands and bash returns the results
after those commands are executed. However, bash is also a
programming platform, and users are allowed to write programs that
take in input and produce output using shell commands in shell
scripts.
One of the most basic bash commands, ls, does one thing: list
directory contents. By itself, this command lists only the names of
files and subdirectories in the present working directory.
Some frequently used parameters used with the ls command are
shown in the screenshot below:
Image

When you use all the above parameters together, these parameters
give the user a much clearer sense of what files and subdirectories
are in a directory, when they have last been changed and who
changed them.
See the screenshot below showing the directories and subdirectories
and when they were last changed.
Bash piping pipes

Types of bash commands include:

Simple commands: They are usually run by themselves
or with parameters and variables. For instance, the ls
command takes parameters as well as variables relating to
the directories or files to be listed.
Pipes: These are used for linking the output of one or
more commands as input to other commands.
Lists: These enable users to run multiple commands in
sequence.
Compound commands: This command allows script
programming and contains loops for repeating a
command, a specific number of times and conditional
constructs for running commands only when specific
conditions are met.
 LEARN KEY TROUBLESHOOTING AND
DEBUGGING SKILLS TO APPLY TO YOUR
PROJECTS
Troubleshooting and debugging are very important as every
programmer cannot fully escape bugs from their program code. For
this reason, every programmer ought to know the basic
troubleshooting and debugging skills necessary and needed to get
rid of bugs in their programs. There are three major ways to deal
with bugs:
1. Pre-bugging: This is an action taken to reduce bugs before
they're created.
2. Debugging: This is the process of recognizing, fixing, and
eliminating bugs once you find them.
3. Post-debugging: This prepares you to be expecting
unexpected or unknown bugs after the previous steps
have been observed.
The following steps discuss some of the ways you can avoid bugs
from your project:
1. Engage in proper planning before starting to code.
2. Learn to write program specs.
3. Learn to understand or study the tools you use.
4. Learn to type accurately as some of the programming
codes are case sensitive.
5. Familiarize yourself with error messages and their
probable solutions. Both the Syntax Errors, Logic/Semantic
Errors, Compilation Errors, Resource Errors, and Interface
Errors.
6. You should also learn to watch fellow developers while
debugging.
How to Understand Why Bugs Occur
After finding a bug in your program, you need to find out why the
code is acting the way it does. Doing this helps you build an efficient
debugging competence. Instead many developers will just go ahead
to google it and use the answers they get directly from Stack
Overflow and other platforms. That is cool in certain conditions, but it
is better to understand the cause of a bug and why the solution
works.
Understanding the source or root cause of a bug is an important step
on the path of debugging, to fixing it or removing the bug.

How to Fix or Remove Bugs

After the discovery and understanding of the reason why a bug
occurs, you have to fix the bug. At times, once you understand what
the bug is, you'll simply find a solution without stress. However, there
are times when our understanding produces no solution no matter
how tough we try. Instead of wasting time and energy, it is okay to
Google the error message or whatsoever you feel is suitable. You
can also ask fellow developers or get to ask for solutions to the bugs
you encounter in any of the developer's communities because others
tend to see things differently. They are neutral and that neutrality
does help in fixing some bugs most times.
 CHAPTER THREE

FRONT-END DEVELOPMENT
HTML IS THE STANDARD MARK-UP
LANGUAGE FOR CREATING A WEB PAGE
The abbreviation HTML stands for Hyper Text Markup Language. It’s
the standard markup language for creating Web pages, HTML
describes the structure of a Web page which consists of a series of
elements. These elements tell the browser how to display those
HTML contents. HTML elements label pieces of content such as; this
is a section, this is a paragraph, this is a heading, “this is a link”, etc.

A SIMPLE HTML DOCUMENT

A simple HTML document consists of all the components of HTML
code which include all the elements, starting from the doctype to
attributes and properties of a single HTML code. See the screenshot
below showing a simple HTML5 document.

The screenshot above is further explained in the following points:

The <!DOCTYPE html> declaration shows that the said

HTML document is an HTML5 document. Though that
section mostly defines the version of HTML you are
implementing.
The <html> tag encloses all the elements of an HTML
page or it’s said to be the root element of an HTML page.
This means that all HTML elements must be within the tag.
The <head> tag section comprises all the meta-information
about the HTML page.
The <title> tag section specifies a title for the HTML page
which is usually displayed in the browser's title bar or the
page's tab.
The <body> tag section describes the document's body,
it’s a holder for all the seeable contents, such as headings,
hyperlinks, paragraphs, lists, images, tables, and other
HTML contents.
 The <h1> tag section defines a large heading or heading 1
because the headings range from heading 1 to heading 6.
The <p> tag section defines a paragraph and its contents.

What is an HTML Element?

An HTML element is defined by a start tag, followed by some
content, and then the end or close tag. The HTML element is all
from the start tag to the end tag. See the syntax and some examples
below.
<tag name> The Content goes here! </tag name>
1. <h1>My First Heading</h1>
2. <p>My first paragraph.</p>
(NB: Some HTML tags are self-closing tags. And those
elements have no content, elements like the <br>, <hr>, <img>
and other elements). These elements are called empty
elements. Empty elements do not have an end tag).

UNDERSTANDING BASIC SOFTWARE

TOOLS NEEDED
The following are the basic software tools needed for every starter,
to begin with.
1. Text
editors software: Text editors software are a computer
program that lets a user enter, change, store, and usually
print text, that is, characters and numbers, each encoded
by the computer and its input and output devices, thy are
organized to have meaning to users or other programs.
2. Modern web browser software: Web browsers are
computer software application that enables a person or
users to locate, retrieve, and display content such as
webpages, images, video, as well as other files on the
World Wide Web.
Install a text editor
You perhaps already have a basic text editor on your computer. By
default Windows OS contains Notepad, macOS by default also
comes with TextEdit. Linux distros vary, and Ubuntu comes
with gedit by default. But others can be installed because you will be
using them to write and execute your codes. The following are some
of the best text editors you can use.
Visual Studio Code.
Atom.
Sublime Text.
Notepad++, etc.

Install a modern web browsers

The following are the modern web browser you can use to test your
code, but it varies across the different operating systems.
For Linux: You can search and
download Firefox, Chrome, Opera, Brave, etc.
For Windows: You can search and
download Firefox, Chrome, Opera, Internet
Explorer, Microsoft Edge, Brave, etc. Though Windows 10
comes with Microsoft Edge by default. But, if you have
Windows 7 or above, you can install Internet Explorer; if
not, you should install other browsers.
For macOS: Firefox, Chrome, Safari, Opera, Brave,
etc. macOS and iOS also come with Safari by default.
Before you proceed, you should install at least two of these
browsers and have them ready for program testing.
NB: Internet Explorer is not compatible with some modern web
features and it may not be able to run your project or gives you
the required output. I suggest you use either Chrome or Firefox
to test your programs.

LEARN THE ANATOMY OF HTML SYNTAX

TO STRUCTURE YOUR WEBSITES
The anatomy of HTML syntax implies that you learn the structure or
various elements and components that makeup HTML code.
Understand how to use them, and their functions or usage. HTML
which means Hypertext Markup Language is the code that is used to
structure a web page and its content. For instance, content could be
structured inside a set of paragraphs, a list of bulleted points, or
using images, data tables, and other allowable HTML components.
This anatomy implies that you understand HTML Basic, HTML Form,
HTML Graphics, HTML Media and HTML APIs:

HTML Basic
HTML Basics consist of the following:
HTML Elements, HTML Attributes, HTML Headings, HTML
Paragraphs, HTML Styles, HTML Formatting, HTML Quotations,
HTML Comments, HTML Colors, HTML CSS, HTML Links, HTML
Images, HTML Favicon, HTML Tables, HTML Lists, HTML Block &
Inline, HTML Classes, HTML Id, HTML Iframes, HTML JavaScript,
HTML File Paths, HTML Head, HTML Layout, HTML Responsive,
HTML Semantics, HTML Style Guide, HTML Entities, HTML
Symbols, HTML Emojis, HTML Charset, HTML URL Encode, and
HTML vs. XHTML.

HTML Forms
HTML Forms, HTML Form Attributes, HTML Form Elements, HTML
Input Types, HTML Input Attributes, and HTML Input Form
Attributes.

HTML Graphics
HTML Canvas, and HTML SVG.

HTML Media
HTML Media, HTML Video, HTML Audio, HTML Plug-ins, and HTML
YouTube.

HTML APIs
HTML Geolocation, HTML Drag/Drop, HTML Web Storage, HTML
Web Workers, and HTML SSE

UNDERSTAND THE HTML BOILERPLATE

AND HTML DOCTYPES
HTML boilerplate is a code in form of a template that every
developer must use to create an HTML document. This beginner's
code comprises important information like the doctype, metadata,
external stylesheet script tags, and other components. Boilerplate
code or just boilerplate consists of divisions of code that are
repeated in several places with little to no differences. A boilerplate
in HTML is a template you will add at the start of your program. You
ought to add this boilerplate to all of your HTML pages.
The screenshot below is an example of an HTML 5 Boilerplate.

THE DOCTYPE IN HTML

The opening line of your HTML code contains the Doctype
declaration. A Doctype tells the browser the version of HTML your
code is written in. If you forget to include this line of code in your file,
then some of the HTML 5 tags like <footer>, <header>, and
<article>, may not be compatible or supported by the browser. The
following is the HTML 5 doctype declaration.
<!DOCTYPE html>

THE HTML ROOT ELEMENT

The <html> tag is one of the paramount and first-level elements of
the HTML file. The <head> and <body> tags are usually nested
inside of it.
See the example below showing the HTML root element and
<html lang="en">
<head></head>
<body></body>
</html>
The lang attribute within the opening <html> tag defines the
language for the page. It is also good to include it for accessibility
reasons because screen readers will know how to appropriately read
out the text.

What are head tags in HTML?

The <head> tags hold data that is processed by machines. Inside
the <head> tags, is nested metadata which is data that defines the
document to the machine. See the example below showing the head
tags and their contents.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="[Link]">
</head>
What is UTF-8 character encoding?
The UTF-8 is the standard and acceptable character encoding you
ought to use on your web pages. This is usually the first <meta> tag
displayed in the <head> element. See the example below.
<meta charset="UTF-8">

Concerning the World Wide Web Consortium, A Unicode-based

encoding such as UTF-8 can allow many languages and can house
pages and forms in any combination of those languages. Using it
eliminates the need for server-side logic to personally determine the
character encoding for separate pages served or each incoming
form submission.

What is the viewport meta tag in HTML?

The viewport meta tag defines the width of the page to the width of
your device's screen size. When you have a mobile device that is
600px wide, then the browser window must also be 600px wide. The
initial scale manages the zoom level. The value of 1 for the initial
scale avoids the default zoom by browsers. See the example below.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

What does X-UA-Compatible mean?

The X-UA <meta> tag defines the document mode for your Internet
Explorer. IE=edge is the utmost supported mode. See the example
below.
<meta http-equiv="X-UA-Compatible" content="ie=edge">

What are HTML title tags?

The <title> tag specifies the title for the web page. The HTML 5
Boilerplate text represents the title that will be seen in the browser's
title bar as depicted in the example below.
<title>HTML 5 Boilerplate</title>

CSS stylesheet
The CSS stylesheet code below, when implemented will link your
custom CSS to the HTML page. The rel="stylesheet" defines the
connection between the HTML file and the external stylesheet.
<link rel="stylesheet" href="[Link]">

Script tags in HTML

The External script tags will be positioned just before the closing
body tag. This is where you can link your external JavaScript code.
See the example below.
<script src="[Link]"></script>

The HTML Doctypes

All HTML documents must begin with a <!DOCTYPE> declaration.
This is because you must define the version of the HTML document
type that you are using.

This declaration is regarded as an HTML tag. But it’s information to

your browser about what document type to display the page content.

In HTML5, the <!DOCTYPE> declaration is as shown in the example

below:
<!DOCTYPE html>

In other documents type such as HTML 4 or XHTML, the declaration

is more complex because the declaration must reference a DTD
(Document Type Definition).
Below is an example of an HTML 4 document type declaration.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "[Link]
Below is an example of an XHTML document type declaration.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"[Link]
 HOW TO STRUCTURE TEXT IN HTML
On a Web page, the content is organized into different formats, such
as tables, layers, lines, paragraphs, and divisions. Structuring of text
in HTML refers to the accurate placement of all the HTML tags and
their content on a Web page. As a practice, by omitting line and
paragraph breaks, a web browser wraps content within a web page
and presents the encapsulated text as a single block. Now, if a
page's contents also aren't broken up into any line or paragraph
divisions, it might be very difficult for readers to comprehend the
given information. If the text on the Web page is not arranged then
the readers will find difficulty reading the desired information.
You can arrange the text in several ways, such as paragraphs, lines,
and tables, to solve this issue. A variety of tags are available in
HTML to divide content into paragraphs and tables. For instance,
you can use the P element to show the text on the Website page as
paragraphs or use a horizontal line to indicate a text break. The
SPAN tag in HTML also enables you to change the format of a
certain text.

HOW TO STRUCTURE HTML LISTS TO

CREATE UNORDERED AND ORDERED
LISTS
Unordered list: The <ul> tag is the first part of an HTML unordered
list structure. The <li> tag also marked the start of the list item. The
list items will be automatically marked with bullet information of tiny
black circles at the output. Check out the code below to see how the
HTML for unordered lists is structured.
<ul>
<li>Bread</li>
<li>Tea</li>
<li>Butter</li>
</ul>
Ordered List: An ordered list HTML structure starts with
the <ol> tag. And the <li> tag appears at the beginning of each list
item. The output will by default mark the list items with numbers.
Check out the code below to see how the HTML for unordered lists
is structured.

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HOW TO INSERT IMAGES USING HTML

An image can be added to a web page using the HTML <img> tag.
Images are integrated into web pages; they are not placed into web
pages. The relevant picture is held in place using the <img> tag. The
image tag has no ending tag, is empty, and only includes attributes.

The <img> tag has two required attributes:

Src: This specifies the path to the image.
Alt: This specifies an alternate text for the image.
<img src="url" alt="alternatetext">

HOW TO CREATE HYPERLINKS USING

ANCHOR TAGS
Hyperlinks are links in HTML. You can access another document by
clicking on a link. The mouse arrow will change into a tiny hand when
you move the mouse pointer over a link. The HTML <a> tag defines
a hyperlink. The href attribute of the <a> element, which denotes the
location of the link, is its most crucial component. The portion that
the reader will see is the link text. The reader will be directed to the
provided URL address by clicking on the link text.
This example shows how to create a link to [Link]:
<a href="[Link] Amazon!</a>

Image

UNDERSTAND HOW TO USE HTML TABLES

FOR CONTENT
An HTML table consists of cells arranged in rows and columns.
Tables also consist of a table head or header. Individual table cell is
well-defined by a <td> and a </td> tag that is, the opening and the
closing tag. While td stands for table data. The whole thing
between <td> and </td> is the information of the table cell.

A table also consists of a table row that starts with a <tr> and closes
with a </tr> tag. While tr stands for table row. At times you may want
your cells to be headers, in such cases, you should use the <th> tag
in place of the <td> tag.

See the screenshot below showing how you can implement the properties discussed earlier.
 Image

HOW TO USE TABLES FOR LAYOUT

The algorithm used to lay up table cells, rows, and columns are
defined by the table-layout attribute. The biggest advantage of table
layout: especially fixed; is that the table renders significantly faster.
Users can not view any part of the table till the browser has
processed the entire table. Users would see the top of the table
while the browser loads and renders the rest of the table if you set
table-layout: fixed. This leaves the notion that the page loads much
faster.

See the screenshot below showing the syntax for using a table for
layout:
 Image

The screenshot below shows the Layout property values and

description for the table layout:
 Image

LEARN HTML BEST PRACTICES

HTML best practices are guidelines that assist you in creating
websites that are simple to handle and use. The following are some
of the guiding principles to keep in mind when building an HTML-
based website.
1. Use proper document structure: HTML documents will
continue to function without elements such like <html>,
<head>, and <body>. Nevertheless, because the pages
will not display correctly across every browser, it is critical
to use a consistent document structure.
See the screenshot below showing the HTML5 document structure.
 [Link]
Lz10di53joM/Vae78dqUidI/AAAAAAAADXw/5C
MPRLKAI7s/s320/[Link]

2. Declare the correct doctype: The first item to declare

when creating an HTML document is the doctype. This
tells the browser the standards you're utilizing to produce
your markup properly. At the top of the page, the doctype
comes before the <html> tag. If you are unclear about
which declaration to use, [Link] has guidance on
selecting the appropriate doctype.
3. Always close tags: To avoid validation issues, please
remember to include a closing tag for each tag you create,
except for the self-closing tags.
4. Don't use inline styles: It may appear to be a simple
solution to include styling in the code rather than
establishing an external style sheet. Nevertheless, style
sheets are not a smart coding practice because they make
updating and maintaining a website more difficult. Hold
your styles distinct from your HTML markup instead.
5. Use alt attribute with images: Because an alt attribute is
not necessary for every image, it is easy to overlook.
However, a relevant alt attribute is required for validation
and accessibility. Screen readers rely on the alt element
for context, therefore it should be descriptive of the image's
contents.
6. Validate frequently: Rather than waiting until you've
finished your HTML document, inspect it several times as
you go. It will save time and stress by discovering errors
 immediately, particularly if your document is extensive.
W3C's markup validation service is a common HTML
validator to utilize.
7. Place external style sheets within the <head> tag: Even
though external style sheets can be inserted anywhere
within the HTML text, it is recommended that they
are included within the <head> tag. This will speed up the
loading of your page.
8. Use meaningful tags: The most suitable HTML5 tag for
the content should be used to construct each component
of your website. It's recommended to refrain from using
generic tags like "div" when more specialized tags like
"section" or "article" would be more applicable.
9. Use lowercase markup: The web page will render
appropriately whether lowercase or uppercase letters are
used in your HTML markup. But since it is simpler to
understand and manage, it is a recommended practice to
keep tag names in lowercase.
10. Reduce the number of elements on a page: Particularly
for websites with a lot of material, HTML documents could
become difficult. Once your markup is complete, look for
chances to further optimize your code to make your pages
smaller.

UNDERSTAND HTML FORMS AND CREATE

A SIMPLE CONTACT ME FORM
An HTML form for user input is made using the HTML "form"
element. The most popular form element is the HTML "input"
element. Relying on the type attribute, there are various ways that an
<input> element can be shown.

See the syntax below showing how you can create a simple contact
me form.
 HTML DIVS AND HOW TO SEPARATE
CONTENT FOR CSS STYLING
The HTML division tag, typically known as "div", it's a unique
element that enables you to bring together pieces of related material
on a web page. It can serve as a general container for linking
together stuff that is related. Despite the advent of semantic
elements, the div tag remains one of the most used tags and doesn't
seem to be declining in popularity (these elements let you use
several tags as a container).

The div tag is multifunctional; you may use it on a web page to do a

variety of tasks. It's adaptable, although you'll usually use it in web
setups and CSS art. In the end, you'll nearly always use it to style
the content or use JavaScript to change it. The div tag is typically
used to group similar content so that styling it is simple. Using div to
organize various homepage components into groups is a fantastic
illustration of this. A page's header, navigation, sections, and footer
can all be combined into one div tag so they can be designed as a
single unit. Unless you style it, div itself has no direct impact on how
the content is shown.

See the screenshot below showing how you can implement the div
tag in HTML.

Image
CHAPTER THREE
UNDERSTANDING C S S 3
css-language · GitHub Topics · GitHub

UNDERSTANDING CASCADING STYLE

SHEETS AND HOW YOU CAN USE THEM
TO STYLE YOUR WEBSITE
Cascading Style Sheets is a language for creating style sheets that describe
how a document is presented in a markup language, such as HTML or
XML. The World Wide Web's foundational technology, used along with
HTML and JavaScript is CSS.

The language we employ to style a Web page is CSS. CSS is also known as
Cascading Style Sheets, style sheet is a great method of organizing the
presentation of HTML elements on screens, paper, and other media or
platforms. External stylesheets are saved in CSS files and can be used to
alter the layout of numerous web pages simultaneously. Your web pages'
design, layout, and differences in display for various devices and screen
sizes are all styled using CSS.

Since CSS is a language with rules, you establish the rules by identifying
sets of styles that should be used on particular elements or sets of elements
on your website. CSS has a simple syntax. A selector, a property, a value,
and then a declaration block follows.

For instance, you might determine that the primary header, the body, and a
paragraph should all be structured using the correct syntax. See the
screenshot below showing how you can implement that.

Image
LEARN HOW TO USE CSS SELECTORS
AND ROPERTIES
The element that has to be styled is called a selector. Selectors, however,
are more than just elements, as you'll find out when you create more CSS
code. They might be ids, classes, pseudo-classes, attributes, or descendants.

The HTML components you want to style are "identified" or selected using
CSS selectors. All of the <p> elements on the page will be center-aligned
and have red text in this example of a CSS element selector.

Image

We can divide CSS selectors into five categories:

Basic selectors (select elements based on name, id, class)

Selectors for combinators (select elements based on a specific
relationship between them).
Pseudo-class selectors (select elements based on a certain state).
Selectors for pseudo-elements (select and style a part of an element).
Attribute selectors (select elements based on an attribute or attribute
value).

"CSS selectors identify the elements on an HTML page that match patterns
described in a selector and apply style rules that adhere to the selector to
those selected elements," according to W3resource.

The syntax for using any of the selectors is the same as CSS basic syntax.

Image

CSS Properties

The styles applied to certain selectors via CSS are known as properties.
They are listed before values and a colon separates them from property
values in the CSS ruleset. The properties of various HTML selectors and
components vary. Several properties apply to all selectors and are universal.
Others only function with certain selections and under certain
circumstances.

Grid-template-columns, which are used to style the page's layout, is an

example of it. It primarily functions with divs whose displayed property is
set to the grid (display: grid).

HTML selectors have a large number of properties and their values. There
are "520 different property names from 66 technical reports and 66 editor's
drafts," according to CSS Tricks.

Below are four common properties to work with in

List properties.
Font properties.
Border properties.
Text properties.

Because they may be applied to various selectors and are often used in all
CSS texts, these properties are widely used. Properties have the distinction
of having several values associated with them. For instance, the property
text-transform, which determines how a text is capitalized, can be set to
uppercase, lowercase, capitalize, or none. But there is a constraint here as
well. If the correct property is not given to a value, nothing happens.
Nothing will change in the text portion if we specify "text-transform:
underline;" because underline is a value for text-decoration.

Several properties, their descriptions, and the values they support are listed
below.

LEARN ABOUT HOW TO USE INLINE,

INTERNAL, AND EXTERNAL CSS
Three methods exist for adding CSS in HTML. To style a single HTML
element on the page, you can include inline CSS in the style attribute. By
including CSS in the head part of your HTML document, you can embed
an internal stylesheet. Alternatively, you can connect to an external
stylesheet that houses all your CSS independently from your HTML.

Here's another way to summarize the three options for including CSS in
HTML:

Inline CSS: Necessitates the placement of the style attribute inside an

HTML element.
Internal CSS: Necessitates the insertion of the <style> element inside
the head area of an HTML file.
External CSS: Needs to have the link> element in the HTML file's
head section.

The best use cases for each way of introducing CSS to

HTML are discussed below.

HOW TO ADD INLINE CSS TO HTML

You can include CSS "in" HTML by using inline CSS. You utilize a style
attribute and insert it within the opening tag of an HTML element to add
inline CSS. Here is how to use it:

Image

HOW TO ADD INTERNAL CSS TO HTML

Inline CSS appears one way, and internal CSS looks another. A CSS
property and value are still set, but now they are enclosed in brackets and
defined by a CSS selector rather than being contained within a style
attribute. The head part of the HTML file contains this rule set once it has
been enclosed in tags. It is recommended to use internal CSS rather than
inline CSS.

Instead of repeatedly adding the same style attributes to elements, internal

CSS enables you to style groups of elements at once.
Additionally, internal CSS is perfect for one-page websites since it divides
the HTML and CSS into distinct sections while keeping them in the same
document. If your website consists of multiple pages and you want to make
changes to them all, you must open each HTML file for those pages and
add or modify the internal CSS in each head section.

Image

HOW TO ADD AN EXTERNAL CSS FILE

TO HTML
External CSS is formatted similarly to internal CSS, it isn't contained
within <style> tags or added to the HTML file's head section. It is instead
stored in an external file with the .css extension. You only need to include a
link to this external stylesheet in the head section, something like:

Image

USING EXTERNAL CSS IS CONSIDERED

THE BEST PRACTICE FOR A FEW
REASONS.
It's the fastest option because you may alter the CSS in this external file and
apply it to your entire website. Additionally, it is the quickest and SEO-
friendly. Your HTML page will be simpler for search engines to read if
CSS is stored in a separate file. Additionally, it makes it possible for a
visitor's browser to store the CSS file to speed up their subsequent visits to
your website.

Image

UNDERSTAND CSS CODING BEST

PRACTICES
You must comprehend a few terminology and concepts to use CSS best
practices correctly. Below is a list of important CSS terms and their
definitions to help you get up to speed.

1. CSS files: A CSS file is a document that is added to a web

development project and contains the CSS rules that describe how a
site should look.
2. CSS selectors: In a line of CSS code, a CSS selector is often the first
element. It serves to identify to which HTML element the code is
referring in the browser. Simple selectors, attribute selectors,
combinator selectors, pseudo-class selectors, and pseudo-elements
selectors are the five different categories of CSS selectors.
3. CSS classes: To bring together several HTML components and apply
the same styling and formatting, use a CSS class.
4. Declaration blocks: CSS code lines surrounded by curly brackets are
known as declaration blocks. Each block's attributes and values are
separated from one another by colons, and the declarations are
separated from one another by semicolons.
5. Inline styles: Inline styles are used in CSS programming to apply
formatting and style rules to a single HTML element. The HTML tag
should include the inline style code.
6. External stylesheets: It's excellent practice in web development to use
external stylesheets rather than inline styles. All of the CSS code
needed to format and style a web page is included in stylesheets,
which are documents. The head section of an HTML document
contains the link to an external stylesheet. You can make adjustments
that apply to the entire website rather than just a particular page by
using an external stylesheet.
7. Embedded styles: Embedded styles are placed inside the HTML
document's head section. They only have an impact on the page in
which they are contained, in contrast to external stylesheets.
8. CSS frameworks: A CSS framework is a collection of pre-written,
standard-compliant code that facilitates the creation of interactive,
responsive web pages and web applications.
9. CSS compressors: CSS compressors are outside programs used to
make CSS code files smaller. Compressors are used to increase a
website or application's capacity for growth. To speed up loading and
 boost performance, it removes the CSS code's non-functional
components such as spaces, comments, and indentations.
10. Inheritance: In CSS programming, inheritance refers to a rule that
determines what value is assigned to a property in the absence of a
specified value. Non-inherited properties adopt the initial value of the
property, whereas inherited properties take on the value of the parent
element.

LEARN ABOUT CSS SIZING METHODS

We can incorporate padding and border in an element's overall width and
height thanks to the CSS box-sizing feature. Any element that accepts a
width or height can have its size changed or controlled using the CSS box-
sizing attribute. It details how to determine the element's overall width and
height. Two div elements with the same width and height may be seen in
the code snippet below, however, the first div seems to be larger than the
second div.

Any element that accepts a width or height in the following format is

calculated by the CSS box model by default:

width + padding + border = rendered or displayed width of the

element's box.
height + padding + border = rendered or displayed height of the
element's box.

This implies that the size of an element will appear larger than the size that
was initially assigned to it whenever padding or border are added to the
element. This is so because the width and height properties are included in
the content of that element, but not the padding or border properties.

Image

LEARN THE ANATOMY OF CSS SYNTAX

AND STRUCTURE
A selector, a property, and its value are the components of a CSS Syntax
rule. The HTML element where CSS style is to be applied is indicated by
the selector. Semicolons are used to separate each CSS property. The
property, value pair that is specified for the particular selector is combined
with the selection name.

A CSS rule consists of a selector and a declaration block as shown below:

Image

The CSS structure basics, from rulesets to values and units:

Declarations.
Properties.
Selectors.
Rules or rulesets.
Values and units.

CSS SPECIFICITY AND IMPLEMENTING

STYLE HIERARCHY
The browser must choose which specific set of CSS rules will be applied to
an element when multiple sets of CSS rules apply to the same object. The
set of guidelines the browser adheres to is referred to as Specificity.

Specificity Rules include:

Internal and inline CSS take precedence over CSS styles applied by
referencing an external stylesheet since they have a higher priority.
Inline CSS takes precedence over internal CSS.
All other selectors are superseded and given lower priority by inline
CSS.

Specificity Hierarchy:

Every element selector has a position in the Hierarchy.

 1. Inline style: Inline formatting is given top precedence.
2. Identifiers (ID): The second highest priority is given to ID.
3. Classes, pseudo-classes, and attributes: These three categories
come next.
4. Elements and pseudo-elements: These entities are given the least
amount of priority.

See the example below:

Image

CLASS VS. IDS AND HOW TO TARGET

EACH CSS DISPLAY AND HOW TO
IMPLEMENT LAYOUT
CSS uses class and ID selectors to categorize different HTML components.
Setting class or ID has the main advantage of allowing you to present the
same HTML element in several ways depending on its class or ID. A class
selector in CSS is a name preceded by a period (".") character, and an ID
selector is a name preceded by a hash ("#") character.

Class selector

A specific class attribute is used by the class selector to choose elements.

Based on the information included in their class attribute, it matches every
HTML element. To choose the desired class, enter the class name and the
symbol.

See the screenshot below:

Image

ID selector

Based on the value of an element's id attribute, the ID selector matches it.

The ID property of the element must exactly match the value entered in the
selector for it to be selected. The required HTML element is selected using
the # sign and the element's ID name.

Image

(NB: They are used to implement layout by specifying or adding properties

to both of them in your CSS code).

THE DIFFERENCE BETWEEN CLASS AND

ID SELECTOR
An ID is different from a class in that it can only be used to identify a
particular element in our HTML. IDs are only employed when a specific
style should be applied to a single element on the page. However, more
than one HTML element can be identified using a class.

HOW TO USE CSS STATIC, RELATIVE,

AND ABSOLUTE POSITIONING SYSTEMS
In the CSS position property, an element's position within a document is
determined by a CSS attribute. The ultimate positions of elements that have
been placed depend on their top, right, bottom, and left characteristics.

The CSS positioning properties are as follows:

Image

1. Static

The default setting for an element is static positioning. This means that if a
position is not declared for an element in CSS, it will default to static. Note
that having a static position is equivalent to never set the position attribute.
(This will be relevant when discussing absolute placement later.)

The regular flow, as we like to call it, will be followed by elements that are
statically positioned on the page. For instance, if you place several <div>
components side by side on the page, they will all display underneath one
another.

2. Relative

Position: Similar to static positioning, relative positioning allows items to

follow the website's normal flow. The use of relative will now enable the
additional CSS layout attributes, however, that is the primary change.

3. Absolute

Absolute positioning will cause an element to be removed from the web

page's normal flow. Therefore, depending on their sequence in the HTML
code, items would previously be attractively presented one below the other
using static or relative placement. But with absolute positioning, the
element is taken out of that entire flow.

See the following screenshot shows how to use the three of the types of
positions mostly used in CSS.

Image

(NB: There are several other positioning types but just these three are
discussed here, but you can explore others).

FONT STYLING USING CSS AND WEB-

SAFE FONTS
In font-style CSS property design, a font rendering font family determines
whether it should be styled with a regular, italic, or oblique face.

The CSS attributes that are often used to style text may be divided into two
groups, each of the groups is discussed below:

Font styles: Font style properties may affect fonts by several factors,
including the font's size, boldness, italicization, and other attributes.
 Text layout styles: These contain the attributes that modify the spacing
and other text layout aspects. For instance, they let change the distance
between lines and characters as well as how the text is oriented within
the content box.

There are a certain number of fonts that are usually available across all
devices and can consequently be used without much worry. They are
called web-safe fonts.

What Is a Web-Safe Font?

Most operating systems come with pre-installed fonts that are web-safe.
This guarantees that the fonts display as intended across a range of
platforms and browsers.

The most well-known examples of web-safe fonts include Helvetica, Times

New Roman, and Arial.

Image

CENTERING ELEMENTS USING CSS

Use margin: auto to horizontally center a block element such as <div>;

Setting the element's width will stop it from encroaching on the borders of
its container. Following that, the element will fill the designated width and
the leftover space will be evenly divided between the two margins. Use
text-align: center to simply center the text inside an element.

Image

WEBSITE DESIGN FUNDAMENTALS AND

TYPOGRAPHY
Typography, broadly speaking, affects how text appears to the reader and
how the words show up on a page or screen.
We may focus on merely the text we read on websites for our needs. This is
because there are many more considerations to take into account when
working for the web than there are when writing for print.

In addition to readability, the digital text needs to be created for:

Shorter attention spans: There are several websites to choose from,

many of which have superior lettering.
Skimmability: Because people often visit websites in search of certain
information, they want to get it quickly.
Because not all internet users view or utilize online content, in the
same manner, accessibility is important.
A variety of screen sizes and device types: Text should be readable on
all digital platforms.

Web typography receives its unique category to account for all of these
factors.

Web typography also includes the fonts, colors, and style we use to create
the text's visual appearance as well as the way we show the text on each
web page. These small nuances add up to a comfortable reading experience
for as many people as possible, thus they are all important.

Although typography in web design is comparable to that in print design,

there are a few things to keep in mind to maintain readability on all sorts of
screens. To make reading enjoyable, the typographic elements of typeface,
type size, color, line height, and letter forms must all be properly
harmonized.

Image

HOW TO USE CSS FLOAT AND CLEAR

The float property is used to format and position content, for as letting an
image float to the left of text within a container.

One of the following values may be present for the float property:
 Left: The element floats to the left of the element's container.
Right: The element floats to its container's right.
None: The object is not floatable (will be displayed just where it
occurs in the text). This is the norm.
Inherit: The element takes on its parent's float value.

See the screenshot below showing the syntax for floating an element.

Image

Add the clear attribute to the element that needs to clear the float.
Normally, this comes after the floating element. The left, right, or both can
all be values for the clear attribute. You should typically utilize both. The
cleared element's neighboring elements and their side restrictions are
specified by the CSS clear attribute.

See the screenshot below showing the syntax for clearing an element:

Image

HOW TO COMBINE CSS SELECTORS AND

UNDERSTAND SELECTOR PRIORITY
Something that illustrates how the selectors relate to one another is called a
combinator. More than one simple selector may be included in a CSS
selection. We can sandwich a combinator between the straightforward
selectors. There are four different combinators in CSS, they are:

Descendant selector (space).

Child selector (>).
Adjacent sibling selector (+).
General sibling selector (~).

1. Descendant Selector

All elements that are descendants of a given element are matched by the
descendant selector. The example that follows selects out every p element
contained inside a div element:

Image

2. Child Selector (>)

The child selector chooses all elements that are a certain element's children.
The example that follows selects every <p> element that is a div element's
child:

Image

3. Adjacent Sibling Selector (+)

The near sibling selector is used to choose an element that follows another
particular element exactly. Adjacent indicates "directly after," and siblings’
items must have the same parent element.

The first <p> element that is positioned right after <div> elements is
selected in the example below:

Image

4. General Sibling Selector (~)

The generic sibling selection chooses every element that is a given

element's next sibling. The instance that follows selects all <p> elements
that are a div element's closest siblings:

Image

Priority: Using an element ID, such as #some-id-here, is always the best

and simplest selection. If only we had such good fortune each time.

Writing selectors should emphasize findings in the following order:

ID, name, class, or anything else that is unique to the element.

Complex CSS selectors.
XPath selectors.
The last resort is to ask a developer to add a special ID or class to the
element you are attempting to select if none of the options above work for
you.
 CHAPTER FOUR

UNDERSTANDING BOOTSTRAP 4
A front-end framework called Bootstrap makes it easier and faster to
create mobile-responsive websites. It was initially created by Twitter
and is currently used to power everything from websites to
WordPress themes. Among other well-known users, are Spotify and
LinkedIn. Additionally, the framework is flexible, easy to use, and
free.
You may create intricate websites with Bootstrap and modify them to
suit your needs. Additionally, it has extra features like carousels,
buttons, popups, and more.
Finally, Bootstrap offers several effort-saving shortcuts for building
web pages. To design flexible, mobile-first, and browser-compatible
web pages, all you need is a fundamental grasp of HTML and CSS.
Below are some of the advantages of Bootstrap:
Your website will appear great on all devices thanks to
responsive web design.

All that is used in responsive web design is HTML and

CSS.
Responsive web design is not a JavaScript application.

Desktops, tablets, and phones are just a few of the various devices
that may be used to access websites. No matter the device, your
website should be appealing to the eye and simple to navigate.

Web pages should not leave out information to fit smaller devices,
but rather adapt their content to fit any device, such as follows:
1. Desktop.
2. Tablet.
3. Phone.
When you use CSS and HTML to resize, conceal, reduce, enlarge,
or reposition the content so that it looks nice on any screen, you are
already using responsive web design features.
Responsive Web Design Viewport, Responsive Web Design Grid
View, Responsive Web Design Media Queries, Responsive Web
Design Images, Responsive Web Design Videos, Responsive Web
Design Frameworks, and Responsive Web Design Templates should
all be explored to build a reliable responsive web design layout.

HOW TO USE BALSAMIQ TO MOCKUP AND

WIREFRAME WEBSITES
A Balsamiq mockup is one of the UI/UX designs that developers
frequently use to describe their concepts. You undoubtedly hear the
phrase "mockup" being tossed about a lot, whether you consider
yourself to be a designer or not.
Full-sized design models known as mockups are used for product
presentations and other things. They provide a creative means of
putting concepts into action. They can be made in a variety of ways.
However, if you have the time and abilities, one option is to utilize
specialized graphic tools like Balsamiq.

HOW TO CREATE MOCKUPS WITH

BALSAMIQ
A software program called Balsamiq mockup is used to design user
interfaces for desktop, mobile, and online apps. It is a tool for
creating mockups with a highly graphical user interface. The most
recent version is Balsamiq Mockup 3, although there have been
other releases and improvements throughout the years. Balsamiq
Mockup makes it easier to build designs because it offers both
sketch and pre-existing pieces.
See the interface below:
The following are the core benefits of Balsamiq:

One of Balsamiq's key advantages is that it makes it

possible to quickly create wireframes, allowing concepts
and ideas to be shared and demonstrated to others without
requiring them to fully understand the design's intricacies.
The following steps will show you how to build a web
application using Balsamiq Mockups:
By accessing [Link]: There are desktop and online
applications. The program also provides a 30-day free trial
period after which you must buy a license.
Creating a mockup: When the program is first used, a
blank page is present, allowing the user to upload
whatever designs they like. The sign with a + and a red
box indicates that you can add more displays.
The project properties icon is located in the upper right
corner of the tool, where you may adjust the project's
general characteristics. These include things like
descriptions, skin tones, fonts, and colors. The skin,
sketch, and wireframe choices that Balsamiq provides are
extremely significant icons to remember and utilize before
any project is started since it is user-friendly and
instructional.
 Designing the screen: There are countless possible
elements and combinations, and Balsamiq has prepared
templates for each one. Additionally, there are "links" that
allow you to access another mockup, or website, or allow
you to return to the presentation.
Mockup saving: You may choose to export a single screen
as a PNG image. However, there is an option to export the
project as an interactive clickable wireframe.

THE FUNDAMENTALS OF UI DESIGN FOR

WEBSITES
The goal of user interface (UI) design is to foresee what users would
need to accomplish and make sure that the interface contains
features that are simple to use, access, and comprehend.
Information architecture, interaction design, and graphic design
ideas are all incorporated in UI.

CHOOSING INTERFACE ELEMENTS

Try to be consistent and predictable in your choices and their layout
since users have become accustomed to specific interface
components behaving in a certain way. Task completion, efficiency,
and satisfaction everyone will benefit from doing this.
Interface elements include the following but are not limited to:
Input Controls: These are buttons, checkboxes, text
fields, checkboxes, radio buttons, list boxes, dropdown
lists, list boxes, toggles, and date fields.
Navigational Components: These are search field,
breadcrumb, slider, pagination, slider, tags, and icons.
Informational Components: tooltips, message boxes,
icons, progress bar, notifications, modal windows.
Containers: Such accordion, etc.
There are instances where using numerous elements to display
content may be suitable. When this occurs, it's crucial to take the
trade-offs into account. For instance, there are occasions when items
that can help you save space instead place greater mental strain on
the user by making them guess what is in the dropdown menu or
what the element might be.

BEST PRACTICES FOR DESIGNING AN

INTERFACE
Knowing your users is the foundation for anything; this includes
comprehending their objectives, capacities, tastes, and tendencies.
When creating your interface after studying more about your user, be
sure to take the following factors into account:
Maintain an easy-to-use interface: The best user
interfaces are essentially undetectable. They steer away
from superfluous parts and utilize straightforward language
on labels and in messages.
Utilize common UI components to maintain
consistency: Users will feel more at ease and be able to
complete tasks more quickly if your UI uses familiar
elements. To increase efficiency, it's crucial to establish
recurring language, layout, and design themes across the
entire website. Once a user has mastered a task, they
need to be able to apply it to other areas of the website.
Use deliberate page layout: Structure the page according
to relevance while taking into account the spatial
relationships between the elements on it. The most crucial
pieces of information can be highlighted with careful
positioning, which can also improve scalability and
readability.
Make thoughtful use of texture and color: Use color,
light, contrast, and texture to your advantage to draw
attention to or divert it from objects.
Create hierarchy and clarity with typography: Think
very carefully about how you employ typography. The text
should be presented in a variety of sizes, fonts, and
 arrangements to improve readability, scalability, and
legibility.
Ensure that the system informs users of what is
happening at all times: This should include location,
activities, status changes, and errors. Your user's
annoyance can be decreased by using different UI
components to indicate status and, if necessary, the next
steps.
Consider the defaults: You can design defaults that ease
the user's load by carefully considering and anticipating the
goals visitors bring to your site. When it comes to forming
design, where you can have the option to have some fields
pre-selected or filled out, this becomes more crucial.

HOW TO DOWNLOAD BOOTSTRAP

Follow the procedures below to download Bootstrap to your device:
Go to Google and type Bootstrap. The Bootstrap links will
open.
In the search results, click the first link, which is
[Link]

Bootstrap
 Select the "Download Bootstrap", but from the page that
opens, select the Bootstrap option.
Bootstrap

Extract the files, and move on.

Three different types of files are available inside the file,
(CSS, FONTS, and JS).

UNDERSTANDING THE BOOTSTRAP GRID

LAYOUT SYSTEM
The layout is handled by the Bootstrap Grid System, especially
Responsive Layouts. To understand Bootstrap, you must first grasp
how it operates. The Rows and Columns of the Grid are arranged in
groups inside one or more Containers. Without Bootstrap JavaScript
and other CSS Components, the Bootstrap Grid can be utilized on its
own. Only the "[Link]" file, which includes the Grid and
Flexbox classes, has to be downloaded and referenced.

Here’s the most basic example of using the Grid:

 Image

HOW TO USE BOOTSTRAP CONTAINERS TO

LAYOUT YOUR WEBSITE EASILY
The first thing is to create an HTML page.
Then load Bootstrap via CDN or host it locally.
After that, Include jQuery.
Load Bootstrap JavaScript.
Try to put them together.
Add a navigation bar.
Include your custom CSS.
Create a page content container.
You should add a background image and custom
JavaScript.
Then add an Overlay.
Include a page title and body text.
Create a CTA button.
Set up a three-column section.
Add a contact form.
Include a team section.
Create a two-column footer.
Ensure to add media queries.
Create additional pages.
Then Create a modal.
And your website will be live.

LEARN TO USE OTHER BOOTSTRAP

COMPONENTS SUCH AS BUTTONS
The <button> element is intended to be used in conjunction with the
.btn classes. However, these classes can be applied to <a> and
<input> components (though some browsers might apply a
little different rendering).
Instead of linking to new pages or sections within the current page
when using button classes on a> elements that are used to activate
in-page features and functions (like collapsing content), such links
should indeed be given a role="button" to communicate their function
to assistive technologies like screen readers. The various button
designs that can be implemented with Bootstrap are listed below.
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
See the screenshot below showing how to implement different styles
of a button using Bootstrap.
Image

Adding symbols using Font Awesome

For use with inline elements, Font Awesome was created. The <i>,
and <span> components are frequently employed. Be aware that
changing the container's font or color will also change the icon. The
same is true for shadow and any other CSS-based inheritance. Add
the following to your HTML page's <head> section to use the Font
Awesome icons:

<link rel="stylesheet" href="[Link]

awesome/4.7.0/css/[Link]">

See the screenshot below showing how to implement this.

Image

(NB: No downloading or installation is required).

Learn to use Bootstrap carousels

The bootstrap carousel is a slideshow that contains multiple
elements. One of the parts of bootstrap is the bootstrap carousel.
This is a display that cycles over each item on the screen one at a
time. The carousel is a component that saves space and is typically
found on websites that sell products. This is one of the sophisticated
and animated elements that is utilized to draw users in. Similar to
eCommerce websites, the carousel intends to present several items,
persons, and components in a single frame. Numerous classes,
properties, and tags were utilized by the basic carousel and its
control.
See the screenshot below showing how you can implement the
Carousels function using Bootstrap.
Image

Learn to add Bootstrap cards to your

website
A card is a malleable and expandable content container. It offers
options for headers and footers, a variety of content, background
colors that are appropriate for the context, and strong display
options. Using Bootstrap 3, cards will take the place of our previous
panels, wells, and thumbnails. As modifier classes for cards, similar
functionality to that of those components are accessible.
Cards are constructed with the least amount of markup and styles
possible while yet managing to offer a substantial amount of control
and customization. They are easily alignable and blend in with other
Bootstrap components thanks to their flexbox construction. Use
spacing tools as necessary because they don't come with margins
by default.
Image

Using Bootstrap navigation bars

Bootstrap Navbar is a direction-finding header that is situated at the
top of the webpage and can be stretched or collapsed, depending on
the screen size. Bootstrap Navbar is used to design responsive
navigation for the website. Using the <nav class="navbar navbar-
default"> tag, we can create a conventional navigation bar. With
little effort, we can also make many navbar variations, such as
navbars with drop-down menus and search boxes and a fixed
navbar. The steps to construct a straightforward static navbar with
navigation links are listed below.
Image
CHAPTER FIVE
JAVASCRIPT
INTRODUCTION
One of the most popular programming languages nowadays is JavaScript. It
is utilized in game development, desktop apps, mobile applications, client-
side web applications, and server-side web applications. It's the ideal
moment to learn JavaScript because there is a huge need for JavaScript
developers right now. Learning variables, data types, operators, loops, and
other concepts will help one get started with JavaScript.

We will discuss the ideas surrounding variables and data types in JavaScript
in this blog. You can play around with data and create error-free code by
writing it when you are familiar with JavaScript's variables and data types.
This blog is the ideal place to start if you are new to JavaScript.

The version of ECMAScript that corresponds to this year is ECMAScript

2022. We could use a few of the new functionalities that have been added to
our JavaScript projects.

The new ECMAScript features for this year are:

Top-level await.
Private instance fields, methods, and accessors.
Static class fields and methods.
Static class initialization blocks.
Error: .cause.
Array, String, and TypedArray: .at() Method.
Object: .hasOwn().
RegExp: match .indices ('d' flag).

THE FUNDAMENTALS OF CODE

The fundamental building blocks of all programming languages are the
fundamentals. They are the fundamental concepts that every newbie must
first comprehend to dive into coding. The foundations of programming
remain the same regardless of the programming language you decide to
learn. These fundamentals include, among others:

IDEs and Coding Environments.

Variable Declaration.
Basic Syntax.
Data Type and Structures.
Flow Control Structures (Conditionals and loops).
Functional Programming.
Object-Oriented Programming.
Debugging.

APPLYING JAVASCRIPT (INTERNAL AND

EXTERNAL)
There are 2 ways to use the JavaScript in the HTML file:

1. Internal JavaScript:

JavaScript code can be embedded directly into the HTML file by writing the
code inside a <script> tag. You can add the <script> tag either inside <head>
or the <body> tag as you wish.

Image

2. External JavaScript:

Another way to do this is to write the JavaScript code in another file with the
.js extension, and then link the file in the <head> or the <body> tag of your
HTML file where you want to add the code to. External JavaScript is when
JavaScript code (script) is written in another file with extension .js and then
link to your HTML file inside the < head> or the <body> tag of the HTML
file, where the code must be added. Using external JavaScript is more
convenient when the same code needs to be used on many different web
pages. Using an external script. All you need is just to put the name of the
script file, that is the .js file in the src (source) attribute of the <script> tag.
External JavaScript file cannot contain <script> tags.

Image

JavaScript attribute values:

type: The JavaScript type is used to state the MIME type of script and
identify the content of the Tag. The default value that comes with this
attribute is “text/javascript”.
src: The src is used to indicate the URL of every external JavaScript
file.
async: The async attribute value is a Boolean attribute. When used, it
indicates that the script will be executed asynchronously when it’s
present.
defer: This is a Boolean attribute used to indicate that the script is
executed as soon as the page has finished parsing.
integrity: This is used to give authorization to the Browser to check the
fetched script to make sure that the source code is never loaded.
referrer-policy: This is used to state the reference information that will
be forwarded to the server when fetching the script.

Starting code with alerts and prompts

If you want to be sure that the user receives the information, an alert is
frequently utilized. The user will need to click "OK" in an alert window to
continue. There are three different types of popup boxes available in
JavaScript: Alert, Confirm, and Prompt.

Image

Prompts:

If you want the user to enter a value before visiting a page, a prompt is
frequently utilized. The user must click "OK" or "Cancel" to continue after
providing an input value when a prompt box appears.
The input value is returned to the box if the user hits "OK." but the box
returns null when the user hits the "Cancel" button.

The screenshot below shows the syntax.

Image

Understand Variables and Data Types in

JavaScript
An object used to hold data of the types string, integer, Boolean, etc. is a
variable. JavaScript is a dynamically or loosely typed language, so the type
of data does not need to be specified when declaring a variable. It is capable
of determining the data type and changing its behavior when changes are
made.

The var keyword was first used to declare variables in JavaScript. Then ES6
introduces let and const. Now that let and const are supported by the
majority of browsers, let and const are often used by developers. A variable
is declared in a function scope using the var keyword. If a variable is
declared inside a function, it can only be accessed from within the function,
according to the concept of the function scope. Global access is made
available by the global declaration of var. To better understand this, let's see
at the program in the screenshot below.

Image

Data types

An attribute of a piece of data called a "data type" dictates how the data
must be understood. The eight fundamental data types in JavaScript are
Number, BigInt, String, Boolean, null, undefined, Symbol, and Objects.
Except for objects, all data types are primitive, which means that the
programmer does not need to build them.

Variable naming in JS
A variable is a "named store" for data in JavaScript and other programming
languages. It serves as a place to keep values. Variables can be used to hold
information about users, visitors, and other things in programs.

The following are the rules that you must follow to create a variable in
JavaScript.

The variable naming rules provide that the initial character of a variable
name must be a letter or an underscore (_). A number cannot be the
initial character.
Any letter, any number, or the underscore can be used in the remaining
characters of the variable name. Other characters, such as spaces,
symbols, and punctuation, are not permitted.
Variable names adhere to case sensitivity much like the rest of
JavaScript. In other words, an interest rate variable is regarded entirely
differently from another variable with the same name.
The variable name can be as long as you want.
A reserved word in JavaScript cannot be used as a variable name. All
programming languages have a set of terms that are used exclusively
within the language and cannot be used as variable names due to the
potential for misunderstanding (or worse). Also, keep in mind that
JavaScript contains a lot of keywords that ought to be avoided.

In the example below, firstName, lastName, cost, tax, and totalPrice are
declared variables. And each of them has an item of data stored in them.

firstName= "Sam";
lastName= "Dan";
cost= 19.90;
tax= 0.20;
totalPrice = cost + (cost * tax);

Working with strings and numbers

Variables in JavaScript can store values of various sorts. But every
JavaScript value has a clearly defined type.

Let’s start with the differences between strings and numbers in JS.
Strings

Strings in JavaScript are used to store and modify text. A string in

JavaScript is defined as zero or more characters enclosed in quotations. In
JavaScript, any text enclosed in single or double quote marks is referred to
as a string. Simply surround any character construction in quotes to form a
string. You need to be aware that quotation marks can be double, single, or
backtick.

Image

Numbers

There is just one kind of number in JavaScript. You can write numbers with
or without decimals. In addition to strings, JavaScript variables frequently
contain numbers.

Both floating point and integer numbers are possible. JavaScript does not
define multiple types of numbers, such as integers, short, long, floating-
point, etc., in contrast to many other programming languages.

According to the international IEEE 754 standard, JavaScript numbers are

always stored as double precision floating point values. The number (the
fraction) is recorded in bits 0 to 51, the exponent in bits 52 to 62, and the
sign in bit 63 in the following format, which saves numbers in 64 bits:

See the screenshot below showing how to implement numbers with

JavaScript.

Image

Randomization and logical operators, Loops,

and Conditionals
In conditional statements, comparison operators can be used to compare data
and do different actions based on the outcome. For instance, if (age < 18)
text = "I’m too young to buy alcohol";
see the example below:

Image

Logical Operators

To identify the logic between variables or values, logical operators are used.
Given that x = 6 and y = 3, the logical operators are explained in the table
below:

Image

If and only if one or more of its operands are true, the logical OR (||)
operator (logical disjunction) for a set of operands is true. It frequently pairs
with logical (Boolean) values. It returns a Boolean value if it is. However,
when used with non-Boolean values, the || operator will return the value of
one of the provided operands, not a Boolean value.

JavaScript Loops

Loops can run a chunk of code repeatedly. If you want to run the same code
repeatedly with various values, loops come in handy. When using arrays,
this is frequently the case.

Image

Different Kinds of Loops

JavaScript provides a variety of loop types,

for: This repeatedly runs a piece of code.

for/in: loops through an object's properties.
for/of: loops through an iterable object's values.
While: iterates across a block of code as long as a given condition is
true.
do/while: also loops through a block of code while a specified
condition is true.
Conditionals

Different actions can be carried out based on different situations using

conditional statements. When writing code, you want to take different
actions depending on the decision you make rather frequently. When
appropriate, conditional statements can be used in your code.

See the screenshot below showing the syntax for conditional statements.

Image

In JavaScript we use conditional statements for the following:

If you want to tell a block of code to run just if a certain condition is

true, use the if statement.
If the same condition is false, use else to describe a block of code that
will be run.
If the first condition is false, use else if to provide a new condition to
test.
Use switches to define a variety of alternative code blocks to run.

The screenshot below shows how you can implement the “if” conditional
statement.

Image

FUNCTIONS AND INVOCATION PATTERNS

A JavaScript function is a section of code created to carry out a certain task.
When "something" calls a JavaScript function, it is carried out (calls it). The
function keyword is used to define a JavaScript function, which is then
followed by the function's name and parenthesis (). Function names may
also include underscores, dollar signs, and other characters (same rules as
variables). Names of parameters may be included in parenthesis and
separated by commas: (parameter1, parameter2, ...). The code that the
function will run is enclosed in curly brackets. A function definition in
JavaScript (also called a function declaration, or function statement) consists
of the function keyword, see the following:

The name of the function.

A list of parameters to the function is enclosed in parentheses and
separated by commas.
The JavaScript statements that define the function, enclosed in curly
brackets, { /* … */ }.

The following are the three things you must take note of when dealing with
functions:

The function definition lists the function parameters between

parentheses ().
When a function is called, its parameters are the values that are passed
to it.
The arguments (the parameters) behave as local variables within the
function.

See the screenshot below showing how to implement a function in

javascript.

Image

Function Invocation

When "something" invokes (calls) the function, the code inside will run, the
following are the conditions under which functions can be invoked.

When something happens (when a user clicks a button).

When JavaScript code is used to invoke (call) it.
Automatically (self-invoked).

The example below shows the return of a function when it has been invoked.

Image

DISCUSSION OF ECMASCRIPT
ECMA (European Computer Manufacturer’s Association) is the
organization's full name. A standard for scripting languages like JavaScript,
JScript, etc. is called ECMAScript. It is a trademarked specification for a
scripting language. A language based on ECMAScript is called JavaScript.
ECMAScript is a standard for scripting languages like JavaScript and
JScript. One of the most widely used ECMAScript implementations in
JavaScript.

The ECMAScript standard is followed by JavaScript. LiveScript was the

original name of JavaScript, but Netscape changed it to JavaScript, maybe in
response to the buzz that Java was causing. LiveScript, the predecessor to
JavaScript, had its debut in Netscape 2.0 in 1995. the language's essential
general-purpose functionality that is built into web browsers like Netscape,
Internet Explorer, and others.

The most recent revision to the standard in more than four years was
ECMAScript Edition 5. The only very slight difference between JavaScript
2.0 and Edition 5 of the ECMAScript standard is that JavaScript 2.0 adheres
to Edition 5.

The eighth edition—also referred to as ECMAScript 2017—was made

available in June 2017.

The ECMA-262 Specification standardized the base JavaScript language.

Why ECMAScript:

JavaScript is a lightweight, interpreted programming language.

Created for the development of network-centric applications.
Integral and complementary to Java.
Integral and complementary to HTML.
Cross-platform and open.

LEARN INTERMEDIATE JAVASCRIPT

Timer, scope control (closures), the keyword "this," events (both with and
without jQuery), and object prototypes are examples of intermediate
concepts that you should master. We will also go over a few key jQuery
ideas related to DOM manipulation and basic animations.

Intermediate JavaScript involves the following:

JavaScript Concepts: Making Use of Developer Tools in Browsers -

Timers and intervals (to illustrate dynamism) - Scope management
using closures Events, the "this" keyword, and object prototypes are all
examples of object-oriented programming in JavaScript.
jQuery concept: Events (you'll find that events may be used both with
and without jQuery) - DOM manipulation; - Animations.
General Concepts: Finding the information you need through reading
documents. Consider strategies to expand your knowledge of
JavaScript as a conclusion.

LEARN TO USE JS EXPRESSIONS,

OPERATORS, STATEMENTS, AND
DECLARATIONS
A legitimate set of literals, variables, operators, and expressions make up a
JavaScript expression, which evaluates to a single value that is an
expression. Depending on the expression, this one value may be a number, a
string, or a logical value. An expression is a section of code that produces a
result. Any section of code that executes a certain action is called a
statement.

An expression is any legal block of code that results in a value when

resolved and is composed of a group of literals, variables, operators, and
other shorter expressions. A variable name that equals the value we gave it
(for example, x = 5) might serve as an expression.

As you likely already know, the value we assign to our variable can be
anything from a number to a string, and a Boolean.

There are five primary categories of expression in JavaScript:

Arithmetic: The arithmetic operators such as (+, -, *, /, and %).

 String: These expressions take a string of values, such as "nada" or
"5.864"
Logical: By using a logical operator like && or ||, these phrases
typically equate to true or false.
Primary expressions: These are the fundamental terms and symbols we
employ in our JavaScript code, for example: In an execution context, an
object's property is referred to via the "this" phrase.
Left-hand side expressions: The left-hand side values that serve as the
assignment operator's destination:

OBJECT-ORIENTED PROGRAMMING
The idea of classes and objects is central to the programming paradigm
known as object-oriented programming (OOP). It is used to organize
software into straightforward, reusable classes of code blueprints, which are
then utilized to build distinct instances of objects. The object-oriented
programming languages JavaScript, C++, Java, and Python are only a few
examples.

An example-based programming language is JavaScript. To obtain the

properties of other objects, it uses an object as a template. You will discover
how JavaScript incorporates object-oriented programming in this article on
OOP.

Data is restricted from moving freely throughout the system in object-

oriented programming, which sees data as a fundamental component in
program development. It prevents unintentional change from an external
function and more securely connects data to the function that manipulates it.
An issue is divided into several things called objects by OOP, and data and
methods are built around these objects.

Object, Class, and Methods are the three principles that make up object-
oriented programming. The ES6 JavaScript supports the following Object-
Oriented programming components.

Object: The presentation of any entity in real-time is referred to as a

real-time object entity.
 Class: The blueprint is the first step in the process of building any item
that you wish to create.
Methods: The items can communicate with one another.
Class inheritance: Support for class inheritance is provided by ES6. The
bravery of inheritance allows it to make new entities out of old ones. In
ES6, there are two categories of class:
Parent class/superclass: A parent class or superclass is a class that has
been extended to produce a new class.
Child/subclasses: A freshly constructed class is referred to as a child or
subclass. Except for the constructor, subclasses inherit all of the
attributes from their parent classes.

Benefits of OOP

OOP presents replicable, straightforward structures for complicated

things.
OOP objects are reusable and transferable between programs.
Polymorphism enables class-specific behavior.
Classes frequently contain all relevant information to them, making
them easier to debug.
Secure; encapsulates information to protect it.

Basic concepts of Object-oriented Programming

The concept of Object-oriented Programming is clearly defined under the

following elements.

Objects:

In an object-oriented architecture, objects serve as the fundamental run-time

bodies. They could stand in for anything that the computer needs to manage,
such as a location, a person, an account, a table of data, etc. Additionally,
user-defined data such as vectors, times, and lists can be represented as
objects. In a program, "customer" and "account" are two objects. The
customer object can message for the bank balance.

Classes:
We are aware that objects store both the data and the functions needed to
alter it. However, classes can be used to combine the two into a user-defined
data type. In a class, any number of objects can be produced. Each object
has class data linked with it. Therefore, a class is a grouping of objects of
similar types.

Think about the class "Fruits," for instance. Mangos that belong to the class
fruit can be created as numerous objects under the class name "Fruit
Mango".

Encapsulation:

Data and function are wrapped up or bound into a single entity called a class
through encapsulation. The key characteristic of a class is its ability to
encapsulate data, making it inaccessible to functions outside of the class and
available only to those functions. These operations act as a link between the
program and the data of the object.

Inheritance:

Inheritance is the phenomenon where items of one class take on the

characteristics of objects of a different class. The idea of hierarchical
classification is supported by it. Consider the "car" object, which belongs to
the "vehicles" and "lightweight vehicles" classes.

The inheritance principle in OOP ensures reuse. This implies that an existing
class can have new features added to it without being changed. Deriving a
new class from an existing one is made possible.

CREATING OBJECTS IN JAVASCRIPT

In JavaScript, the string literal can be used to build an object.
Making use of the new keyword to create objects.
Using the object constructor to create an object.

Image
Class Implementation in JavaScript
JavaScript uses the ES6 standard to define classes. Consider the following
example in the screenshot below.

Image

JS Objects and Prototypes

An object in JavaScript is a separate entity having properties and a type.
Consider comparing it to a cup. A cup is an item with characteristics. A cup
has a design, weight, color, material, and other characteristics. Similarly,
JavaScript objects can have properties that specify their attributes.

A JavaScript object has corresponding attributes. A variable that is

connected to an object can be used to describe its property. The only real
difference between object properties and regular JavaScript variables is the
relationship to objects. The qualities of an object are determined by its
properties. You can access an object's properties using a straightforward dot-
notation:

See the screenshot below showing how you can implement an object in
JavaScript.

Image

JavaScript objects can inherit features from one another through prototypes.
In this article, we define prototypes, describe prototype chains, and describe
how to establish a prototype for an object.

The prototype is a built-in attribute that every JavaScript object has. The
prototype chain, which forms because the prototype is an object in and of
itself, will have a prototype of its own. When we get to a prototype that
contains null for its prototype, the chain comes to an end.

(NB: Prototype is not the name of the attribute of an object that points to it.
Although its name is not common, all browsers use prototypes. The
[Link]() method is the usual way to retrieve an object's
prototype.)

The code in the screenshot below creates a Date object, then marches up the
prototype chain, sorting the prototypes. It indicates that the prototype
of myDate is a [Link] object and the prototype
of that is [Link]).

Image

THIS’, SCOPE AND CLOSURES

The term "scope" describes the area of a program that allows us to access a
variable. Variables specified in outer scopes can be accessed from all inner
scopes because of JavaScript's ability to nest scopes. The scope of a variable
can be global, module, or block. “While”

Closure consists of a function that has been packaged (contained) with

references to the lexical context and its surrounding state. In other words, a
closure enables inner functions to access the scope of an outside function.
Closures are formed whenever a function is created in JavaScript, during
function creation time. A function that has references to the variables in its
outer scope is said to be closed. Even though the outside variables are
beyond the scope of the function, closures enable this.

There are many uses of closures, from creating class-like structures that
store state and implement private methods to passing call-backs to event
handlers.

In the screenshot below, init() creates a local variable called name and a
function called displayName(). The displayName() function is an inner
function that is defined inside init() and is available only within the body of
the init() function. Note that the displayName() function has no local
variables of its own. However, since inner functions have access to the
variables of outer functions, displayName() can access the
variable name declared in the parent function, init().
REFACTORING AND DEBUGGING
Refactoring involves reorganizing code without modifying its original
functionality. Refactoring is the process of making numerous small changes
to code without changing how it behaves externally.

Refactoring is the process of updating a piece of code without affecting how

it functions in JavaScript and other languages as well. In other words, you
can fiddle with a function, class, module, and so on, and internal structure
without affecting the output it generates.

Refactoring became more commonplace with the emergence of agile

approaches. For instance, refactoring is a crucial but frequently skipped
phase of the test-driven development process.

Refactoring is crucial since it improves the quality of your code. Refactoring

frequently keeps your code maintainable, simple to read and navigate, and
duplicate-free. Refactoring makes your code easier to read and maintain,
which reduces the likelihood that you or other developers will introduce
issues. But even if some faults do manage to slip through, it will be simpler
to find and fix them.

Refactoring is frequently thought of as a remedy for code smells, which are

indications that a codebase may have more serious issues.

Below are the three (3) JavaScript Refactoring Techniques for Clean Code:

1. Extract Function: By removing a component of a function's code, it is

possible to better describe what that section of code performs. We
 already no longer have control over that section of the code when we
add numerous responsibilities to a single function.
2. Describe the parameter object: When handling data in a program, it's
common for some of them to be utilized collectively in numerous
functions and for various goals. The relationship between the data
pieces can be seen when they are organized into a structure, such as an
object. The flexibility this refactoring gives a function, though, is its
true advantage.
3. Combine Functions into a Class: When using a group of actions
operating on a common entity, using a class makes more explicit what
common environment these methods will share. It makes more readable
code and encapsulates together functionalities by their behavior.

Debugging

Logic or syntax problems can occur in programming code. Many of these

mistakes are challenging to diagnose. Errors in programming code
frequently result in nothing happening. You won't receive any error
notifications or directions on where to look for them. Code debugging is the
process of looking for (and fixing) mistakes in programming code.

JavaScript Debuggers

Debugging is difficult. But happily, there is a JavaScript debugger included

in every current browser. Errors must be notified to the user by default
because built-in debuggers can be turned on and off. A debugger also allows
you to set breakpoints (points at which code execution can be halted) and
look at variables while the code is running.

Normally, press the F12 key to enable debugging in your browser, then
choose "Console" from the debugger menu, or else follow the instructions at
the bottom of this page. If your browser allows for debugging, you can
display JavaScript values in the debugger window by using the [Link]()
method as follows: View the screenshot below to see how to put this into
practice.
 CHAPTER SIX

DOCUMENT OBJECT MODEL (DOM)

LEARN THE TREE STRUCTURE OF HTML-
BASED WEBSITES
The architecture of a typical HTML (Hypertext Markup Language) or
DHTML (Dynamic Hypertext Markup Language) web script is called
a Document Object Model, or DOM for short. DOM is essentially a
tree with numerous branches and sub-branch levels that describe
various webpage elements. The tree's branches stand in for several
elements. In the DOM structure, each element may be referred to as
a single node. If an HTML element has one or more attributes, the
branch will split into different nodes depending on how many
attributes the element has. The number of characteristics on an
HTML page affects how many nodes form.
The representation of DOM uses a hierarchical tree structure. The
document node is the initial node in the DOM. This is so because the
HTML page's whole web code is just a document. The root node is
the tag, and all of the child nodes are those that are physically
connected to the root node.
DOM is an application programming interface that serves as a
structural representation of web pages rather than a language (API).
The Inspect Element tool in web browsers is one of the typical ways
to access the DOM. Making necessary temporary adjustments to the
web pages is made easier by using the console tool in the inspect
element. HTML and CSS files may have changed as a result. For
instance, using the console tool, we may access the <head> portion
of the current HTML page by entering [Link]([Link]).
See below the tree structure of DOM:
Nodes are the definition of all objects in the DOM. There are many
other kinds of nodes, but the three that we use the most frequently
are as follows:
Text nodes.
Element nodes.
Comment nodes.
Let’s take a look at this simple example:
 TRAVERSE THROUGH THE DOCUMENT
USING OBJECT NOTATION
To explore, find, or alter elements and/or content within an
XML/HTML document, the DOM's elements are arranged into a tree-
like data structure.
To "discover" HTML elements (DOM Nodes) based on their
relationships to other elements, developers "travel through" the
DOM. Start with one option and work your way through it until you
find the desired elements.
Every node in the DOM has the document object as its root. Similar
to how you may depict your lineage as a "family tree," DOM portrays
an HTML page as a tree. Understanding how to deal with JavaScript
and HTML requires learning how to go from branch to branch and up
and down the DOM tree. The document object is the root object in a
tree structure, and depending on where it is in the tree structure, it
may have parents, children, and siblings. A Node is a name given to
each component of a tree structure.
Each node in the DOM tree is an object that represents a specific
page element. Nodes have a lot of information about themselves and
are aware of their connections to other nodes in their surrounding
area. The node closest to the document in the DOM hierarchy or one
level above it is considered a node's parent. A node's children are
the nodes one level behind it. Any node on the same tree level in the
DOM is a node's sibling. Except for childNodes, every property
contains a reference to another node object. There is a reference to
an array of nodes in the childNodes attribute. There are several
standard methods one can use to select one or more nodes from an
HTML document. The three most popular are:
getElementById.
getElementsByClassName.
getElementsByTagName.
See the screenshot below showing how to implement traverse in the document using object
notation.
 SEPARATION OF CONCERNS AND CODING
BEST PRACTICES
Programmers utilize the separation of concerns approaches to divide
an application into manageable pieces with little overlap in their
respective functions. Utilizing software layers, encapsulation, and
modularization, the separation of concerns is accomplished.
Separation of Concerns is a guiding idea in development. According
to this approach, software should be divided according to the kind of
tasks it handles. Consider a program that, among other things, uses
logic to determine which objects are important enough to display to
the user and formats them in a specific way to make them stand out.
The behavior that determines which items to format should be kept
apart from the behavior that formats the items since these behaviors
are distinct issues that are only incidentally connected.
By logically isolating the main business behavior from the
infrastructure and user-interface logic in an architectural manner,
programs can be logically constructed to adhere to this notion.
Business logic and rules should ideally be contained in a separate
project that is independent of other projects in the application. The
business model may be tested easily and can change without being
firmly tied to low-level implementation details because of this
separation (it also helps if infrastructure concerns depend on
abstractions defined in the business layer). One important factor
driving the adoption of layers is the separation of concerns.

CODING BEST PRACTICES

Multiple DOM activities are carried out when creating a dynamic web
application (e.g., adding a new element, updating the style of an
element, or removing an element). We can retain some coding
standards when doing such a DOM activity without compromising
the speed of our web application.
1. Utilize the Class or ID selector
Use the class or id of the element rather than a standard selector
when looking up an element from the DOM (like element name).
2. Use query parent rather than document
If the parent element is already cached when you search an
element in the DOM, search in the parent element rather than the
document.

3. Use a fragment rather than attaching elements

directly
Use a fragment and then append it to the DOM when dynamically
adding new elements rather than doing so straight to the DOM
node.
4. Instead of adding style directly, use a class with a
predefined style
Imagine that you need to modify the ul's background and text colors
when the cursor hovers over them. In this case, you would use the
style definition included in the CSS file.

MANIPULATE AND CHANGE THE HTML

ELEMENTS USING YOUR UNDERSTANDING
OF THE DOM
A single element's ID is the quickest way to find it in the DOM. The
document object's getElementById() method allows you to retrieve
an element by ID. Get the element and assign it to the demoId
variable in the console. Our complete HTML element will be returned
if demoId is logged to the console.
1. Tobegin any DOM modification, you must first have
access to the document object.
2. The HTML root element, a subclass of the document
object, comes next.
3. Thebody and head elements, which are cousins and
descendants of the HTML element, are listed next.
4. Below the head element is the title element, which you can
probably agree is the parent of the text node "my text" and
a child of the head element.
5. The two components (a tag and an h1 tag) that are
immediately below the body element are siblings and are
also offspring of the body element.
6. The tag's last two children are the href attribute and the
text node "my link." The text node "My header" is a child of
the h1 element in the same way.
See the screenshot below showing how to implement DOM using
getElementById() and getElementByClassName() and other
element.
CHAPTER SEVEN
JQUERY
UNDERSTANDING JQUERY
John Resig developed the quick and concise jQuery JavaScript library in
2006 with the catchphrase "Write less, accomplish more." For quick web
development, jQuery makes navigating HTML documents, event handling,
animation, and Ajax interactions simpler.

An open-source library for minifying JavaScript called jQuery was

developed to make JavaScript operations easier. When compared to using
HTML code, jQuery allows you to swiftly code a variety of different
instructions.

jQuery is a JavaScript library for independent platforms that were created

to facilitate HTML client-side scripting. One of the most well-known Java
script libraries now in use is jQuery. It is known that 65 percent of the top
one million company websites on the internet have it installed. It is free and
open-source (FOSS) software that is authorized under the MIT license.

For the development of dynamic websites and web apps, jQuery is

employed. The building of applications is made easier by the abundance of
jQuery plugins.

JQuery's syntax is created in a way that makes it simple to utilize for

document navigation. It grants developers the ability to create plugins for
the JavaScript library. Additionally, it helps the developers create an
abstraction for animation, widgets with custom themes, and worse
interactivity. In general, jQuery statements begin with a dollar sign ($) and
end with a semicolon (;).
The dollar sign ($) in jQuery is merely a shortcut for jQuery. Let's have a
look at the example code below, which shows the most fundamental jQuery
statement.

Basic syntax is: $(selector).action(), and are explained below:

A $ sign to define/access jQuery.

A (selector) to "query (or find)" HTML elements.
A jQuery action() to be performed on the element(s).
Examples of jQuery functions:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

jQuery Features

By writing less code, jQuery makes many programming tasks easier. The
list of significant core features that jQuery supports is provided below.

DOM manipulation: Using Sizzle, a cross-browser open source

selection engine, jQuery makes it simple to choose DOM elements,
negotiate with them, and modify their content.
Event handling: Using jQuery eliminates the need to clog up the
HTML code with event handlers to elegantly capture a range of
occurrences, such as a user clicking a link.
AJAX Support: Using AJAX technology, jQuery greatly facilitates the
development of a responsive and feature-rich website.
Animations: You can employ a variety of jQuery's built-in animation
effects on your websites.
Small size: The jQuery library is only roughly 19KB in size (Minified
and gzipped).
Cross-Browser Support: jQuery is cross-browser compatible and
performs well with IE 6.0 and later, Firefox 2.0 and later, Safari 3.0
and later, Chrome, and Opera 9.0 and later.
Up-to-date technology: jQuery supports XPath syntax basics and
CSS3 selectors.
INSTALLING AND USING THE JQUERY
Before you can begin to install and use jQuery, you just need to download it
into your device.

There are two versions of jQuery available for downloading:

Production version: This is the version of your live website that has
been compressed and minified.
Test and development versions are available here (uncompressed and
readable code).

From [Link], both versions can be downloaded.

The jQuery library is usually a single JavaScript file, and you reference it
with the HTML <script> tag. Note that the <script> tag should be inside
the <head> section.

See the screenshot below.

Image

Go to your web browser and type [Link] on the address

bar and press enter key on your keyboard.
Click on the downloadable file.
Copy the js file into your root web directory eg. [Link]/jquery-
[Link].
Then add [Link] or [Link] between the head tags include the
following code, <script type="text/javascript" src="jquery-
[Link]"></script> or
<script src="[Link]
[Link]"></script> for CDN, and then JQuery will be installed.

WHY LEARN JQUERY?

You may create visually appealing static web pages using HTML and CSS.
These static websites can have dynamic functionality added to them with a
little help from JavaScript. With the help of the JavaScript library jQuery,
you can add a variety of dynamic behavior to layouts that would otherwise
lack creativity.

LEARNING ABOUT JQUERY

FUNCTIONALITY
JQuery's functionality explains how it works. These are features that users
can incorporate into their programs. You can use jQuery to implement the
following essential features.

1. Regular JavaScript Functions

Using a function declaration is the first and most straightforward technique

to declare a function in JavaScript. The following syntax can be used to
construct the multiply() function, which accepts the two parameters x and y,
multiplies them, and returns the result:

Image

The current scope is topped by functions defined in this manner (a function

declaration). The function might be put before the [Link]() and still
function.

2. JavaScript Function Expressions

It is possible to express the same function as an expression that consciously

sets a variable.

Image

The function can only be used after it has been defined because it is not
hoisted.

3. Object Literal Method Definitions

You can define a function in another object since in JavaScript they are
treated the same as any other value type. For example:

Image

Again, this object method can only be called after it has been defined.

4. ES2015 Arrow Functions

Arrow functions can only be assigned to a variable or used anonymously;

they don't need the function keyword (such as in a callback or event
handler). A function is indicated in the following code block by an arrow
(=>) after a parameter surrounded in rounded brackets (()):

Image

Since there is only one statement, the return is implied and the brackets are
unnecessary for functionality that is the same but requires a simpler syntax:

Image

Those brackets may also be dropped when the function only takes one
parameter:

Image

Even though there is still one parameter for which brackets are needed:

Image

There is no need to use .bind(this) because arrow functions automatically

assign this to the value in the immediate outer scope.

5. jQuery Extension Functions

Making functions is very similar because the jQuery extension function is a

JavaScript library. However, you can increase jQuery's functionality by
including your unique methods. The jQuery prototype ($.fn) object is
extended via the [Link]() method to enable chaining of new
functionality to the primary jQuery() function.

For example, the following code defines new check and uncheck jQuery
methods to modify checkbox input fields:

Image

6. Keeping it Functional

Although function syntax is frequently a matter of taste, try to keep your

code legible. Using a function statement might be preferable to confusing
oneself later on with a creative but unintelligible jumble of arrows and
brackets.

DIFFERENCES BETWEEN JQUERY AND

ANGULAR JAVASCRIPT
jQuery is a JavaScript library that is open-source and free and used for web
page client-side development. To reduce the number of lines of code and
make JavaScript more interactive and dynamic, its developers created it in
2006 and released it under the MIT License.

A highly well-liked library among JavaScript programmers is jQuery.

Whether it's Amazon, Zoom, or Quora. Research shows that more than
77.9% of all websites on the internet employ jQuery, this is according to
W3techs. “While”,

AngularJS is a Typescript-based web framework used to build the front end

of scalable, and cross-platform web applications. It offers certain essential
features, including dependency injection, directives, two-way data flow,
and unit testing.

Global leaders in Angular usage include Google, PayPal, and Forbes.

Because of its scalability, fast performance, and user-friendly data binding,
Angular JS is recommended as a front-end framework by many companies,
however, jQuery is more popular.
INTRODUCTION TO FUNCTIONS IN
JQUERY
The syntax for defining a function in jQuery is entirely different from that
in JavaScript. A function is a collection of statements that accept input,
carry out a certain calculation, and output the results. A function is
essentially a group of statements that execute a particular operation or do a
calculation and then return the result to the user.

The goal is to group similar or often performed actions into a function so

that we may call it rather than writing the same code again for various
inputs.

See the screenshot of the syntax below:

Image

The example in the screenshot below shows how you can implement the
jQuery function in your program as shown in the screenshot below.

Image

MANIPULATING TEXT, STYLES, AND

ATTRIBUTES WITH JQUERY
The following screenshot lists jQuery methods to get or set the value of an
attribute, property, text, or HTML.

Image

The following screenshot shows various jQuery methods to access the

DOM element's attributes, properties, and values. Study the screenshot
carefully.

[Link]
[Link]
See the screenshot below showing how you can manipulate text, styles, and
attributes with jQuery using the jQuery attr() Method.

Image

The first <p> element in an HTML page's style attribute is obtained in the
example above by calling $('p').attr('style'). Not all of the <p> elements'
style properties are returned.

See the screenshot below showing how you can manipulate text, styles, and
attributes with jQuery using the jQuery html() Method.

Image

See the screenshot below showing how you can manipulate text, styles, and
attributes with jQuery using the jQuery text() Method.

Image

CREATE ANIMATIONS AND

CUSTOMIZATIONS WITH JQUERY
Use the jQuery animate() function to create customized animations. The
required params option defines the CSS properties that will be animated.
The optional speed parameter specifies the duration of the effect. A few of
the available values include "Slow," "Fast," or milliseconds. The optional
callback parameter is a method that is called after the animation is
complete.

The example below demonstrates a simple use of the animation() method

by advancing a div element to the right until it reaches the left value of
250px:

See the screenshot below showing how you can create an animation with
jQuery.

Image
Using jQuery animate() to Manipulate Multiple Properties, see screenshot
below.

Image

USE YOUR JQUERY KNOWLEDGE TO

MAKE YOUR WEBSITE INTERACTIVE
To get started with jQuery, simply add the following line to your
document’s <head>:

<script src="[Link]
a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="crossorigin="an
onymous"></script>

This will load the jQuery library from [Link] and ensure that the given
file contains the desired information. This safeguards your users in the
unlikely case that [Link] is ever compromised or hacked. If a file
doesn't have the expected hash signature, the browser will simply reject it
and go on. Your website won't work, but no malicious code is run either.

Check to see if jQuery is working properly by opening the console in your

browser. I find the Chrome console to be better. You can access it by
loading your page and hitting F12 on your keyboard. Type "$('body')" into
the terminal after it has opened. You must get a response with the DOM
element for your website loaded. It is a clue that everything is working
even though we only selected the body tag, thus nothing has changed. If
you get an error message, make sure you put the code above in the
document's <head>.

jQuery Selectors

Once jQuery is up and running, you can start experimenting with selectors.
You can pick and choose whatever elements of your page you want to
interact with or respond to using jQuery selectors. Several illustrations may
be helpful:
 $('body') //: This selects the <body> tag.
$('p') //: This selects all <p> tags throughout the document.
$('.button') //: This selects all items with the “button” class, regardless
of tag type.
$('#aSpecificButton') //: This selects the element with the
id=“aSpecificButton”.

To specify the items that you want jQuery to act on, you can use any
arrangement of HTML tags and CSS selectors. See if you can pick out
particular parts of your page by using those in the console as you practice.

jQuery Methods

So how do we go about using these selectors? Of course, we take advantage

of the jQuery API. Fortunately, many of the methods with the most
influence are quite simple to understand, so we won't need to tinker with
the API too much to obtain the results we need. We employ conventional
dot notation on our selector to call a jQuery method. Again, examples
rather than explanations are more helpful in this situation:

$('#pageTitle').html(“Hello World”); // This sets the element with the

id='pageTitle' to contain the text “Hello World”.
$('.error').show(); // This reveals any elements of class='error' that
have been hidden.
$('.error').hide(); // Hides all elements of class='error'.
$('.error').toggle(); // Hides visible errors and reveals hidden ones.
$('p').addClass('BigFont'); // Adds the class BigFont to all paragraph
tags. Note that this won’t do anything unless your CSS contains a
definition for .BigFont.
$('p').removeClass('BigFont'); // Removes the class BigFont from all
paragraph tags.

Try experimenting with these features to see how much control you can
exert over your page using just a few standard techniques. However, keep
in mind that when you reload the page, everything returns to normal
because your underlying HTML hasn't changed. On the client's end, all
manipulation takes place.
jQuery Events

To make your page interactive, the next step is to tie these methods up to
events. Thankfully, jQuery makes that rather simple as well. There are two
approaches.

<button onclick="$('p').css('background-color', '#FFFF00');">Click me to

make paragraphs yellow!</button>.

Or

<script type="text/javascript">

$('button').click( function() { $('p').css('background-color',

'#FFFF00');"> }

</script>

At this juncture, you can use the knowledge you have gathered so far to
build your website to your taste.

RESPONDING TO USER-INITIATED
EVENTS WITH JQUERY
Setting up event-driven replies on page components is simple with jQuery.
The end user's interaction with the page, such as when text is typed into a
form element or the mouse pointer is changed, frequently causes these
events to occur. In some circumstances, such as the page load and unload
events, the event will be started by the browser.

The majority of native browser events have convenient methods provided

by jQuery. These shortcuts for [Link]() method [Link](), .focus(),
.blur(), .change(), and others. The on method is helpful when you want to
pass an object comprising many events and handlers when you want to pass
data to the event handler, when you are working with custom events, or
when you want to tie the same handler function to multiple events.
 CHAPTER EIGHT

GIT, GITHUB, AND VERSION

CONTROL

WHAT IS A VERSION CONTROL SYSTEM?

To keep track, make, and manage changes to your software code,
employ the use of a version control system. Additionally known as
source control. Using a version control system, developers can save
each modification they make to a file at various stages and later
retrieve those changes with their peers.
There are three types of version control systems, which are:
Local Version Control Systems.
Centralized Version Control Systems.
Distributed Version Control Systems.
 WHAT IS A LOCAL VERSION CONTROL
SYSTEM (LVCS)?
This kind of version control system is widely used and easy to use.
But because the data are being saved on your local machine, this
method is very vulnerable to mistakes and attacks. As a result, you
run the risk of losing the system file or forgetting the directory or
folder where the file you're working is located (and then writing in
another directory).

WHAT IS A CENTRALIZED VERSION

CONTROL SYSTEM (CVCS)?
A server serves as a repository for each version of the code under
this sort of version control. The CVCS facilitates developer
collaboration amongst many teams. Despite the useful collaboration
and communication amongst developers, there is a danger that you
will lose your work if a server goes down for a short period or
becomes corrupted. Unfortunately, the CVCS has a serious issue
with this.
Only a small number of developers can collaborate on a project in
CVCS.

WHAT IS A DISTRIBUTED VERSION

CONTROL SYSTEM (DVCS)?
The most recent and popular sort of version control system in use
today is this one. In a DVCS, each developer has a complete backup
(clone) of all the server's data. This means that even when the
server is malfunctioning or unavailable, you can continue working on
your project and restore your repositories by copying them to the
server. Many developers can collaborate on a project while using a
DVCS. Git is a well-known DVCS, and we'll talk more about it below.

What is Git?
Git is a distributed version control system that is open source, and
free, and you may use it to track changes made to your files. Git
allows you to work on all sizes of projects, from small to enormous.
Git allows you to add modifications to your code and commit (or
save) those changes once you're done. This implies that previous
alterations can also be undone. What is GitHub since it is closely
related to Git?

What is GitHub?
GitHub is a web interface where you store your Git repositories and
track and manage your changes effectively. It allows different
developers working on the same project access to the code. While
other developers are adding modifications to a project, you can also
make your own. You can quickly return to a prior stage when the
issue has not yet occurred if you accidentally screw up some code in
your project while making modifications.

Why use GitHub

There are so many reasons you should learn and use GitHub. Let's
look at a few of them now.
1. Effective
Project Management: Your Git repositories are
stored on GitHub. Being on the same page while working
on the same project from multiple locations is made simple
by GitHub. You can quickly track and manage the changes
you've made with GitHub, as well as keep track of how far
along your project is.
2. Simple Collaboration and Cooperation: Using GitHub,
developers from around the world may easily collaborate
on a project. When working on a project together, teams
can stay on the same page and manage the project
efficiently.
3. Open Source: The GitHub platform is free and open
source. This implies that developers have simple access to
 various kinds of code and projects that they can utilize to
hone their abilities.
4. Versatility:
GitHub's versatility quality is crucial. GitHub is
not just a developer-focused web interface. Designers,
authors and anyone else who wants to keep track of the
progress of their projects can utilize it.

HOW TO SETUP GIT

If you haven't already, you'll need to download Git to your computer
before you can begin using it. By visiting their official website, you
can achieve this.
Follow the procedures below:

Open a web browser and type “[Link] in the

address bar and press enter key on the keyboard.

Click on the Download button on the Git website

Select an operating system, such as Windows, macOS,
Linux, or Unix. Since I'm using a Windows machine, I'll be
selecting the Windows option in my case:
 To get the most recent version of Git, click the first link at
the very top of the page. See the illustration below:

Install Git on your computer as soon as the download is

finished. You must install the file by going to the site where
it was downloaded.
You should confirm that Git has been successfully installed on your
machine after the installation. Run the command: git -version from
the command prompt or Git bash (whichever one you like to use).
Your computer should show the current version of Git beneath the
command you just entered if Git was successfully installed on it. If
the most recent version is shown, kudos to you!

HOW TO CONFIGURE GIT

After setting up Git on our PC, we must configure it. We do this so
that we can quickly recognize the contributions we have made in the
repository if we are working as a team on a project.
Using the git config —global command, we must specify the name,
email address, and the branch to configure Git. For instance:

To set the username, we used git config —global [Link], as

shown in the image above. In my situation, I went by Derek
Emmanuel. The git config —global [Link] has the same effect.
Git comes with a default branch named master, so I used the git
config —global [Link] branch main command to rename it to the
main branch.
You are now ready to use Git.

HOW TO SETUP A GITHUB ACCOUNT

Follow the procedures below to set up your Github account:

Visit GitHub's official website “[Link] to create

an account. The sign-up button is located in the top right
corner.

Input your email, make a password, enter your username,

and then validate your account after the signup form has
opened before clicking the "new account" button.
 COMMONLY USED GIT COMMANDS
There are some basic Git commands that every developer should
know how to use:
git config
git init
git add
git commit
git clone
git push
git rm
git branch
Let's go through each of these briefly so you know how to use them.

How to Use the git config Command

You can identify who made a commit when working on a project by
using this command to set the username, email, and branch of a
user. When you have downloaded git to your computer and wish to
configure it for your needs, you run this command.
For example:

git config --global [Link] “ [username]”

git config --global [Link] [email address]

How to Use the git init Command

To launch Git in your project, use the git init command. When
working on a project and wishing to initialize git to the project to
maintain track of the changes made in the project, use this git
command.
For example:

git init
When you issue this command, you should observe an automatic
creation of a .git folder in the folder you are now working in.

How to Use the git add Command

Your file gets added to the staging area with this command. The files
we modify are added to the staging area, where they wait for the
following commit. The git adds command is used to add a file to the
staging location. The staging area receives all of the files in the
folder. You can add the name of the specific file you want to commit
to the staging area by using the command git add (file name). When
you want to commit changes you have made to a file to your project,
use this command.

How to Use the git commit Command

This commits every file in the staging area as well as any files you
added with the git add command.
Use git commit-m "initial commit" as an example. This command
permanently stores a file in the Git repository. When a file is added to
the staging area using the git add command, you use it.

How to Use the git clone Command

A repository that already exists in another location can be copied to
the present location using the git clone command.
For instance, to duplicate a Git repository from GitHub into your local
storage, execute the command git clone (repository name).

How to Use the git push Command

This command is used to upload or push files from a local repository
or storage to remote storage, like GitHub.
Using git push (remote storage name), for instance: Use this
command only when you're ready to publish or push a project to the
GitHub repository after making all the necessary changes and
commits.
How to Use the git rm Command
You can remove a file from an active repository with this Git
command. Take the command git rm (filename): Only remove
undesired modifications or files from the Git repository by using this
command.

How to Use the git branch Command

This command allows you to check the main or master branch that
you are currently working on. git branch, for instance. You can use
this command to find out which branch you are currently working on.

Git forking, branching, and cloning

Forking:

Forking's key benefit is that contributions can be combined without

everyone having to push to a single central repository. Only the
project maintainer can push to the official repository; developers
push to their server-side repositories. With no write access to the
official codebase, the maintainer can accept commits from any
developer.
A branching approach based on the Gitflow Workflow is often
followed by the forking workflow. This indicates that finished feature
branches will be intended for merging into the repository of the
original project maintainer. The result is a distributed workflow that
offers huge, organic teams (including untrusted third parties) a
customizable approach to working together safely. It is the perfect
methodology for open source projects because of this.

How Forking it works

The Forking Workflow starts with an official public repository kept on
a server, much like in the other Git workflows. However, a new
developer does not immediately clone the official repository when
they want to begin working on the project.
Instead, they make a copy of it on the server by forking the official
repository. No other developers are permitted to push to this new
copy, but they are permitted to pull changes from it (we'll see why
this is significant in a moment). It acts as its public repository. The
developer uses git clone to get a copy of their server-side copy onto
their local machine after creating it. Like with the other workflows,
this acts as their development environment.
They push a local commit to their public repository, not the official
one when they're prepared to publish it. When an update is prepared
to be incorporated, they submit a pull request to the project
maintainer's main repository. If there are problems with the given
code, the pull request also functions as a handy forum for
discussion. A step-by-step illustration of this approach is shown
below.
An "official" server-side repository is "forked" by a
developer. By doing this, they produce a server-side copy.
Their local system is cloned with the new server-side copy.
The local clone receives a Git remote path for the "official"
repository.
A new branch for a local feature is made.
The new branch receives modifications from the
developer.
New commits are made for the modifications.
The developer's server-side copy receives the branch.
The developer opens a pull request to the 'official'
repository from the new branch.
The original server-side repository receives approval for
the merge of the pull request.
The maintainer pulls the contributor's modifications into their local
repository, verifies that they don't break the project, merges them
into their local main branch, and then pushes the main branch to the
official repository on the server to integrate the feature into the
official codebase. Other developers should pull from the official
repository to synchronize their local repositories now that the
contribution has been accepted as part of the project.
It's crucial to realize that the Forking Workflow's use of the term
"official" repository is only a convention. The fact that it is the public
repository of the project maintainer is the only thing that
distinguishes the official repository as being so official.

FORKING VS CLONING
It's crucial to remember that "forking" and "forked" repositories are
not special actions. Repositories that have been forked are created
using the git clone command. Repositories that have been forked are
often "server-side clones" and are typically hosted and managed by
a third-party Git service like Bitbucket. To establish forked
repositories, there is no special Git command. A repository's history
and a clone operation are essentially copies of one another.

BRANCHING IN THE FORKING WORKFLOW

These personal public repositories are simply a practical mechanism
for developers to exchange branches. Like with the Feature Branch
Workflow and the Gitflow Workflow, everyone should continue to use
branches to isolate individual features. The sharing of those
branches is the only distinction. They are pushed to the official
repository in the Feature Branch and Gitflow Workflows, while they
are pulled into another developer's local repository in the Forking
Workflow.

FORK A REPOSITORY
A Forking Workflow project requires all new developers to fork the
main repository. Forking is simply a typical git clone procedure, as
was already mentioned. You can accomplish this by SSHing into the
server and using git clone to copy the file to another location. Repo
forking tools are available in well-known Git hosting platforms like
Bitbucket, which automate this process.

CLONE YOUR FORK

The next step is for each developer to clone their respective public
forked repository. They can accomplish this using the well-known git
clone tool. Developers on a project should have their Bitbucket
accounts and should clone their forked copy of the repository using:
Assuming Bitbucket is used to host these repositories.
For git clone use, [Link]

EXPLORE THE COMPONENTS OF BACK-

END DEVELOPMENT, WORKING WITH AN
MVC FRAMEWORK
Websites have evolved over the past few years from being
straightforward HTML pages with a little CSS to very complicated
programs with thousands of developers working on them
concurrently. Developers put out their projects using various design
patterns to deal with these sophisticated web apps, making the
code simpler and easier to work with. Model View Controller, often
known as MVC, is the most well-known of these patterns.
Developers can effectively manage the interaction between the user
interface and underlying data by using the model-view-controller
(MVC) design pattern. MVC facilitates the development of web
applications by dividing the application into three logical sections. If
you want to work as a web developer or in a position that is related
to web development, it is beneficial to study the MVC framework.
Everything you need to know about MVC frameworks, including their
various parts, advantages, disadvantages, and alternatives, is
covered in this article.
Model, View, and Controller are the three primary logical
components that make up an application according to the Model-
View-Controller (MVC) architecture, an architectural/design pattern.
Each architectural element is designed to manage particular
application development facets. It separates the presentation layer
from the business logic layer. Historically, it was applied to desktop
graphical user interfaces (GUIs). The most widely used industry
standard web development framework for building scalable and
flexible projects today is MVC. Mobile application design is another
usage for it.
Trygve Reenskaug invented MVC. This design pattern's main
objective was to address the issue of users handling a huge and
complex data collection by dividing a large program into several
portions, each of which had a distinct function.
attributes of MVC:

It offers a distinct division between input logic, Ul logic,

and business logic.
It provides complete control over your HTML and URLs,
making the architecture of web applications simple to
create.
It is a potent URL-mapping component that allows us to
create applications with understandable and searchable
URLs.
Test-Driven Development is supported (TDD).
Components of MVC:

The MVC framework comprises the following

components:
Controller.
Model.
View.
See the MVC Architectural Design below:
 [Link]
content/uploads/20220224160807/[Link]

1. Controller
The controller functions as a mediator by enabling the link between
the views and the model. The controller only needs to instruct the
model—it doesn't have to worry about handling data logic. To
render the finished product, it processes all the business logic and
incoming requests and works with the View component and the
Model component to change data.
2. View
The application's entire UI functionality is implemented in the View
component. For the user, it creates an interface. The data that the
model component collects is what fuels views, but the data aren't
taken directly; rather, they go through the controller. It only
communicates to the compiler.
3. Model
All of the user's data-related logic is represented by the Model
component. This could be any other data related to business logic
or the data that is being passed between the View and Controller
components. The database can be used to add or retrieve data.
Because the controller is unable to interface with the database on
its own, it answers the controller's request. The model
communicates with the database and provides the controller with
the necessary data.

UNDERSTAND THE WORKING OF THE MVC

FRAMEWORK WITH AN EXAMPLE
Let’s imagine an end-user sends a request to a server to get a list
of students studying in a class. The server would then send that
request to that particular controller that handles students. That
controller would then request the model that handles students to
return a list of all students studying in a class.
See the flow of Data in MVC Components in the diagram below:
[Link]
content/uploads/20220224172049/[Link]

The model would ask the database to deliver a list of all students,
then it would give the controller that list. The controller would ask
the view related to students to return a presentation of the list of
students if the answer from the model had been successful. This
view would use the controller's list of students to display the list in
browser-friendly HTML.
After that, the controller would take that presentation and give it to
the user once more. Hence, the request is fulfilled. If the model had
earlier returned an error, the controller would deal with it by
instructing the view responsible for handling errors to show a
presentation for that specific error. The user would then receive the
error presentation rather than the student list display.
The aforementioned illustration demonstrates how the model
manages all of the data. The controller only instructs the model and
view on what to do, while the view manages all of the presentations.
The MVC framework's fundamental structure and operation are as
follows.
Advantages of MVC:

Codes are simple to maintain and may be readily

expanded.
Each element of the MVC model may be independently
tested.
MVC components can be developed concurrently.
Separating an application into three parts lessens
complexity. view, model, and controller.
Test-Driven Development is supported (TDD).
It functions effectively for Web applications that are
backed by sizable web design and development teams.
Because all classes and objects are independent of one
another, this architecture makes it easier to test
components independently.
Supportive of search engine optimization (SEO).
Disadvantages of MVC:

This model is challenging to read, modify, test, and reuse.

It cannot be used to create small applications.
A view of the inefficiencies of data access.
Navigating the framework might be challenging since it
adds new abstraction layers, forcing users to adjust to the
MVC decomposition requirements.
Increasing data inefficiency and complexity.

Popular MVC Frameworks

The following list includes some of the most well-known and widely
used MVC frameworks.
 Ruby on Rails.
Django.
CherryPy.
Spring MVC.
Catalyst.
Rails.
Zend Framework.
Fuel PHP.
Laravel.
Symphony.
(NB: Applications that run on a single graphical workstation typically employ MVC.
The separation of logical components improves readability and modularity while
also making the testing portion more comfortable).

HOW TO USE GITHUB WITH XCODE

A selection of tools from Xcode can help you streamline your GitHub
flow. Let's go over a few GitHub integrations with Xcode.
[Link]
[Link]
There are a few preliminary steps we need to complete on our Mac (if
you're using Xcode, I'm assuming you're on a Mac) before we can
guarantee Github is configured properly. So, before we start, there
are three things we need to accomplish. We must open a terminal to
get things started. Second, we need to make changes to the
".gitconfig" file in our Home directory. Third, we need to log into our
Github account using Xcode! Let's move forward!
First, Let's begin by launching the terminal. To open the
spotlight search, press "command + space," type
"terminal," and hit enter. There will be a terminal!
Second, let's begin configuring our Github user name and
email in the terminal. To check and configure your
credentials, use the "git config" command. Keep in mind
that your commits will be linked to this email address.
"Mona Lisa" is entered in the global [Link] and global
[Link] fields of the git configuration command.
Third, we must use Xcode to sign into our Github account.
So let's use Spotlight Search to launch Xcode. To enter
Xcode, hit "command +, " once there. Now the Preference
window ought to appear. Go to "Accounts" and click the "+"
icon in the bottom left corner to log in to your Github
account from Xcode. You can enter your Github username
and password after selecting Github and pressing confirm.
 [Link]
[Link]

CREATE A REPOSITORY ON GITHUB WITH

XCODE
You don't need to leave Xcode, as I previously stated. First, directly
from Xcode, let's build a Github repository! This is the approach I
prefer! Second, after creating the repository on Github, we'll show
you how to add a remote to your Xcode project.
 [Link]
[Link]

You may create a Git repository on your Mac when you start an
Xcode project for the first time. However, you may also complete this
step after starting your project by heading to your bar items, selecting
"Source Control," and then selecting "Create Git Repositories..." As
you can see, we may also commit, push, pull, and reject any
modifications from this point.
[Link]
[Link]
By pressing "command + 2," we can now display the Source Control
Navigator. There are a few folders when you open the folder
structure. Remotes are the ones we're looking for. Using Control +
Click, choose the folder, then select Create "Your Project" Remote...
[Link]
[Link]

A new window will open, allowing you to name and describe the
repository, as well as choose whether to make it public or private.
When you open [Link] after pressing create, the newly formed
repository will be listed under Repositories.

ADDING AN EXISTING REMOTE

Once the Github repository has been created, this can also be done.
All you would have to do is take the current remote.
 [Link]
[Link]

Control + click on Remotes in the Source Control Navigator, then

select Add Existing Remote. It will open a window where you can
enter the remote name and location. However, the Location must be
set to your git remote. You can leave Remote Name as an origin.
Make certain that your Location ends in .git!
[Link]
ng

You may now find the project with an "Open in Xcode" button if you
click on the Clone or Download button.
 BRANCHING WITH XCODE
Branch creation is possible through the Source Control Navigator.
[Link]
[Link]

You can always use "cmd + 2" to navigate around this site. To begin,
control + click the branch you want to leave. You'll now be shown a
window where you can give that branch a name. The newly created
branch will appear in the Branches folder.
 [Link]
[Link]

By using Control + Clicking on the branch and pressing Checkout,

you can quickly check out from it. You will now be on the chosen
branch as a result of this.

COMMITTING TO GITHUB WITH XCODE

"Option + Command + C" is the shortcut for committing in Xcode. The
window you see below will appear as a result.
 [Link]
[Link]

This robust tool for tracking your commits will highlight three key
aspects. You may first view every modified file on the Navigator. You
can choose whatever files you want to commit here. You may also
examine the precise modifications that were made to that file. Third,
you can push the changes to a particular branch using the Push to
Remote option located in the bottom left corner.
 CHAPTER NINE

BACK-END DEVELOPMENT
INTRODUCTION
In recent years, web development has gained popularity.
Organizations have realized that having a strong online presence is
necessary to attract more leads as websites gain popularity. As a
result, they look for exceptional individuals who can design and
develop the best-looking and best-performing web apps for them
using the most recent technology.
The internet has changed how people access information since the
late 1980s and early 1990s, and web development has progressed
ever since. Due to its vital role in our digital world, there is a great
demand for web developers. Thankfully, anyone may acquire the
technical knowledge required to become a front-end, back-end, or full-
stack (front-end and back-end) developer.
Web development offers good money to individuals who are skilled
in the field that is so profitable. Because of this, it makes sense that
the younger generation is drawn to web development as a job. To
actively pursue a career route is far different than simply wishing to.
It necessitates planning, a process, pertinent training, and practice.
But every developer must note that web development truly goes
beyond just building websites, to building apps, games, virtual
assistance, and other resources that run on the web. I would
recommend that in choosing a career in one of the good numbers of
tech skills you must have seen or read about, Web Development is a
wonderful start. All of these factors have given rise to the “full stack”
development.
This 2nd publication series is focused on the modern Back-end
technology tools alongside the Database technology tools,
authentication and security, and every other technology involved in
the modern-day full-stack development tools.

WHAT IS BACK-END DEVELOPMENT?

As you are likely well aware, application data is often saved on the
server and provided as output to the client in a client-server
architecture. The backend of a web application refers to its server-
side functionality. All of a web application's internal operations take
place there, and backend engineers' labor is concentrated there.

Back-end development is the process of creating the server-side

logic that runs the background operations of websites and apps. It
contains every piece of code required to develop the database,
server, and application. From database migrations to API
integrations to server-side technology configuration, all of which
are necessary to run a website.

Backend developers are in charge of writing the code, which is

what causes web applications to perform as intended, utilizing
computer languages. These programmers create code that the
webserver executes. Such developers are in charge of creating
the APIs utilized by the mobile version of such web applications in
addition to writing the back-end code.
The professionals that create and manage the systems that allow
websites to handle data and carry out operations are known as back-
end developers. Back-end developers are involved in server-side
tasks that you cannot see, such as data storage and security, in
contrast to front-end developers who are in charge of everything you
can see on a website.
Your next web project might benefit from the skills of a back-end web
developer.

FRONT-END VS BACK-END DEVELOPMENT

You need to know the front end and how the two work together to
comprehend the back end, commonly known as the "server side."
Everything that users view and interact with is done on the front
end, commonly known as "client-side" programming. On the other
side, the server (on-site or in the cloud) and databases handle the
back end.
Everything that drives what is happening is powered by the machinery that operates in
the background, everything that the end user does not see or directly interact with.

This practical method of allocating development has seen major

change over the past 10 to 15 years due to the enormous
expansion of JavaScript, which wasn't as widespread on the front
end as it is now or as frequent on the back end due to [Link].
More similarities exist between the two, particularly in the case of
a JavaScript engineer working on a stack that is entirely powered
by JavaScript.
Below is a graphic to help you understand the relationship
between front-end and back-end development.
You can see how all of the requests that result from user clicks
are handled by the server side (in the green box). The requests
are forwarded to the server side by front-end scripts, which then
return the necessary data to the front end after processing them.
This frequently occurs in a never-ending cycle of requests and
server responses.
See the screenshot below and examine the operation of back-end
architecture, the computer programs, and the hardware in the
screenshot above.
The server, databases, APIs, and operating systems that support
an app's front end make up the "conventional" back end. For a
detailed examination of the program that unites everything.
Whether it's the utilization of cloud-based servers and data
warehouses, containerization with a service like Docker,
Backend-as-a-Service (BaaS) providers, or APIs to replace more
complex processing, the back end of apps can appear extremely
different from application to application.

BACK-END DEVELOPER TASKS AND

RESPONSIBILITIES
Back-end developers need to be very skilled at collaboration as well
as possess technical knowledge. You should have the ability to create
the web infrastructure as a back-end web developer.

Here’s what many back-end developers do on a day-to-day basis:

Create and maintain websites: A back-end developer's
primary duty is to use a variety of tools, frameworks, and
languages to figure out the best way to create user-friendly,
intuitive prototypes that can be turned into websites.
Understanding cross-platform functionality and compatibility
is necessary for this.
Provide high-quality code: To create web apps that can
be maintained over time, developers must produce code
that is clear and simple to read.
Carry out testing for quality assurance (QA): Establish
and manage testing schedules to improve user interface
and experience, assuring the best possible presentation
across all major browsers and hardware.
Evaluate effectiveness and speed: Once a website is
operational, as well as throughout updates and
modifications, developers must evaluate its scalability and
performance, making any necessary code adjustments.
Troubleshoot and debug: Have the ability to identify
problems, troubleshoot them, and then communicate your
findings to project managers, stakeholders, and QA teams.
Lead training and mentorship for junior developers: Train
and support. Maintain workflows with client teams to ensure
continuing support.

TYPES OF BACK-END LANGUAGES

The file size, performance, compatibility, number of lines of code
needed, and programming style will vary amongst back-end
languages. Object-oriented programming, a method of
programming that groups characteristics and functions within
objects, is used in several back-end scripting languages. Other
languages might be compiled rather than interpreted, which has
an impact on the application's load time, readability, and
processing requirements.
Below are the major different types of back-end programming
languages.
1. C++
All the C features are combined with object-oriented programming
tools like classes in C++. It is utilized as a low-level programming
language to effectively communicate with system hardware for
improved performance. This makes it perfect for system-level
performance-sensitive applications like video games, huge web
apps, and other use cases.
2. C#
The preferred language for Windows servers and environments is
C#. If your development team uses Microsoft technologies like
[Link] as the foundation of your technological stack, C# is
probably going to be the most effective language for them to use.

3. Java

The object-oriented general-purpose programming language Java

was created with cross-platform compatibility in view. Java
programs can be run on any computer that has the Java Virtual
Machine (JVM) installed.
4. JavaScript ([Link])
[Link] proved to the world that this all-purpose object-oriented
programming language, which was previously thought of as a
front-end scripting language, could also be utilized on the server
side of applications. JavaScript, one of the fundamental web
technologies, is currently a well-liked option for both front-end and
back-end web development.
5. PHP

The most used back-end language for the web is PHP. In addition
to having a large codebase and a long history of open-source
developer community support, PHP has a low learning curve and
is well suited for use as the back end of websites. If you've ever
used WordPress to create a personal website, PHP was likely
powering the back end.
6. Python

Python is a general-purpose programming language with a strong

data processing library. Python's straightforward syntax and
compact code length increase programmer productivity for back-
end development.
7. Perl

Perl is a general-purpose programming language that was

created by Larry Wall in the 1990s and is well-known in the Linux
and Unix communities. Text editing and log management are two
areas in which Perl excels. It works well for quickly creating brief
automation programs.
8. Scala

The functional and object-oriented programming paradigms are

both supported by the general-purpose programming language
Scala. Scala is still supported by the JVM and compatible with
Java because it is based on Java.
9. Ruby

Ruby is a dynamically typed general-purpose programming

language that was created in the middle of the 1990s by Yukihiro
"Matz" Matsumoto and is renowned for its developer productivity.
It supports procedural, functional, and object-oriented
programming paradigms and is renowned for enabling the
incorporation of metaprogramming code that can be modified
while an application is in use in programs.

BACK-END TOOLS, AND TECHNOLOGY

Front-end development, which is primarily influenced by
JavaScript, HTML, CSS, and other front-end frameworks
leveraging these languages, can be far more diverse than Back-
end development. To create, test, and manage web applications,
web developers work with a range of tools. Some common tools for
back-end developers include:
Programming languages:
Python.
PHP.
JavaScript.
Ruby.
Java.
C#, etc.
Frameworks:

Laravel.
Django.
Spring.
Ruby on Rails.
Meteor.
[Link], etc.
Databases:

MongoDB.
 MySQL.
Oracle, etc.
Servers:

Apache
NGINX
Light tpd
Microsoft IIS
I will divide the server side into four key "software stack"
components to make things simpler: the server, the database, the
operating system, and the software.
More details regarding each of these backend elements are
provided below.
1. Servers
The server is the engine of the network out of the four parts of
your back-end stack, whether it's on-premises or in the cloud.
These powerful computers provide the shared resources such as
file storage, security and encryption, databases, email, and web
services that networks require to function. Once you understand
the fundamentals of on-site servers, broaden your understanding
by looking into virtualization, which describes how servers are set
up to host different apps, and containerization, which describes
another way that servers set up their operating systems to host
discrete programs. The screenshot below demonstrates how
servers operate.
 Image

2. Databases
In the context of a website, databases serve as the brains that
give websites their dynamic nature. When you ask a website for
something, whether you're looking for a product in an online store
or looking for hotels in a particular state, the database is in
charge of accepting your request, retrieving the information, and
sending it back to the website. When people interact with
databases via a website or application, new and modified data
can be added. Whether a user is writing articles to a CMS,
uploading photographs to a social network profile, or updating
their customer information, they can alter information in a
database from the browser.
In this edition, I'll cover the basics of databases, popular
terminology, SQL vs. NoSQL differences, and how to choose the
right database for your web application. View the screenshot
below to see the many sorts of databases you need to be familiar
with.
 Relational Databases

3. Middleware

In essence, middleware refers to any server-side software that

links an application's front end and back end. Imagine middleware
as the plumbing for your website—it sends requests and
responses back and forth from your application to the server or
database. Similar to plumbing in a house, middleware is invisible
but necessary, and it must be dependable and consistently
perform the tasks that are expected of it.
Middleware (server-side software) creates a middle layer between
the app(s) and the network, including the server, database,
operating system, and others, to enable client-server interaction.
Regardless of whether it is the presentation layer or the business
layer, middleware can be multi-layered and arranged into several
tiers of a website. Web APIs can also be used in this area of the
stack to act as a link between the business layer and the
presentation layer.
Additionally, middleware offers services like data integration and
error management while enabling communication between on-
premises and cloud applications. Additionally, effective
middleware may power user interaction, business process
management, content management, authentication, and many
other IT-related functions. An illustration of a server-side
JavaScript framework is [Link]. Middleware is explained in the
screenshot below.
Image

4. APIs

These days, it's impossible to discuss the back-end element of an

application without mentioning APIs (application programming
interfaces) and the smooth connections they make between
software, apps, databases, and services. The majority of server-
side software designs are constructed using APIs, which
frequently take the place of more complex programming to enable
software communication and data transmission.
APIs

BACK-END DEVELOPER VS. BACK-END

ENGINEER
Engineers and back-end developers have many technical talents, yet
their roles are distinct. A back-end developer is comparable to a
teacher, whereas a back-end engineer is comparable to the principal
of a school who develops the overall plan. Back-end developers
typically concentrate on the smaller components of the total, like
apps and programs, working with teams to demonstrate the viability
of their design approaches.
COMMON SKILLS NEEDED FOR BACK-END
DEVELOPMENT
Now that you are aware of what back-end development entails,
let's condense these ideas into a list of abilities required of a
back-end developer.
Having a fundamental understanding of HTML,
JavaScript, and CSS.
Practical experience with back-end development
(configuration, administration, and management of
databases and servers).
Languages used on servers, such as JavaScript
([Link]), PHP, C#, and Java.
Database engineering (e.g., MySQL and SQL).
Best practices for security and authentication.
Proficiency in creating RESTful APIs.

COMMON BACK-END DEVELOPMENT JOBS

The term "back-end development" refers to the server side of any
program (not just websites). Thus, a variety of different
occupations can benefit from having a basic understanding of
how to create an application's back end. Let's examine the most
typical roles in back-end development:
1. Back-end web developers: Their primary responsibility is
creating a website's back end. They are in charge of
developing and maintaining a website's server, database,
and business logic.
2. Full-stack
developers: Full-stack developers are familiar
with the front-end and back-end components of a
technology stack. They might be the only developer
creating a minimal viable product on tiny projects. They
 serve as team leads on bigger projects and aid in
integrating an app's front and back ends.
3. Javadevelopers: Back-end developers with a focus on
Java are in great demand in the enterprise app sector,
working on everything from websites to desktop programs.
4. Softwaredevelopers: Depending on the job description,
this may involve working with any of the other languages
we mentioned above in addition to Java. Software
development positions typically pertain to desktop software
and other non-website applications.
CHAPTER TEN
INTRODUCTION TO BACKEND
TECHNOLOGY - NODE JS
WHAT IS [Link]?
[Link] is a tool for building quick and scalable network applications that
are based on Chrome's JavaScript runtime. [Link] is lightweight and
efficient, making it ideal for data-intensive real-time applications that
operate across dispersed devices. It uses an event-driven, non-blocking I/O
approach.

An open source, cross-platform runtime environment called [Link] is used

to create networking and server-side applications. Applications for [Link]
can be created in JavaScript and run on Linux, OS X, and Microsoft
Windows using the [Link] runtime.

Additionally, [Link] offers a comprehensive library of different JavaScript

modules, greatly streamlining the creation of web applications utilizing
[Link]. See the component of [Link] below:

[Link] = Runtime Environment + JavaScript Library

[Link] is a JavaScript runtime that is event-driven and asynchronous,

making it ideal for creating scalable network applications. The next "hello
world" example allows for the handling of multiple connections at once.
Every connection triggers the callback, but if nothing has to be done,
[Link] will sleep.

Image

[Link]' design is reminiscent of and influenced by programs like Twisted in

Python and Ruby's Event Machine. The event concept is expanded upon a
little in [Link]. Instead of presenting an event loop as a library, it offers it
as a runtime construct. In other systems, the event loop is always initiated by
a blocking call. Typically, callbacks are used to establish behavior at the
beginning of a script, and blocking calls like EventMachine::run() are used
to start a server at the conclusion. There are no equivalent start-the-event-
loop calls in [Link]. After the input script has been run, [Link] just joins
the event loop. When there are no more callbacks to execute, [Link]
terminates the event loop. The event loop is concealed from the user in this
behavior, similar to browser JavaScript.

[Link] was developed with low latency and streaming in mind, and HTTP
is given first-class treatment. [Link] is a good option as the foundation for a
web library or framework as a result of this.

Despite [Link]' lack of threading, you can still utilize several cores in your
environment. Our kid [Link]() API may be used to spawn child
processes, which are made to be simple to interact with. The cluster module,
which is based on the same interface, enables you to share sockets amongst
processes to enable load balancing over your cores.

FEATURES OF [Link]
The following are some significant characteristics that make [Link] the top
option for software architects.

Event-driven and Asynchronous: The [Link] library's APIs are all

asynchronous, or non-blocking. It means that a [Link]-based server
never awaits the delivery of data from an API. After accessing an API,
the server moves on to the next one, and a [Link] notification
mechanism called Events enables the server to get a response before
moving on to the next API.
Very Fast: The V8 JavaScript Engine in Google Chrome, which powers
the [Link] framework, makes it extremely quick to execute code.
Single Threaded but Highly Scalable: A single-threaded paradigm with
event looping is used by [Link]. In contrast to typical servers, which
produce a limited number of threads to handle requests, the event
mechanism enables the server to respond in a non-blocking manner and
 increases the server's scalability. [Link] employs a single-threaded
program, and in comparison to conventional servers like Apache HTTP
Server, that program can handle a far higher volume of requests.
No Buffering: Data is never buffered in [Link] applications. These
programs merely output the data in sections.
License: [Link] is distributed under the MIT license.

WHO USES [Link]?

The GitHub wiki list is provided below. It has a comprehensive list of the
projects, programs, and businesses that use [Link]. eBay, General Electric,
GoDaddy, Microsoft, PayPal, Uber, Wikipins, Yahoo!, and Yammer are just
a few of the companies on this list.

Concepts:

The major components of [Link] that we will cover in detail in the next
chapters are shown in the figure below.

[Link] Concepts

WHERE TO USE [Link]?

Here are some areas where [Link] is demonstrating why it makes a great
technological partner.

Applications with I/O bound.

Applications for streaming data.
Real-time Data-Intensive Applications (DIRT).
Applications built on JSON APIs.
Applications with a single page.

WHERE NOT TO USE [Link]?

[Link] should not be used for CPU-intensive applications.
[Link] - ENVIRONMENT SETUP
If you are still willing to set up your environment for [Link], you need the
following two software available on your computer.

(a) Text Editor.

(b) The [Link] binary installable.

Text Editor

You'll type your program using this. Windows Notepad, Atom, Visual Studio
Code, the OS Edit command, Brief, Epsilon, EMACS, and vim or vi are a
few examples of editors.

On several operating systems, the text editor's name and version can change.
For instance, vim or notepad can be used on Windows, Linux, or UNIX, as
well as Notepad on Windows.

Source files are the ones you make with your editor since they hold the
application source code. Programs written in [Link] often have source files
with the ".js" extension.

Make sure you have a text editor set up and have enough programming
knowledge to develop a computer program, store it in a file, and then run it
before you begin.

The [Link] binary installable

JavaScript is the only language used in the source file's source code. Your
JavaScript code will be interpreted and executed by the [Link] interpreter.

The 32-bit (386) and 64-bit (amd64) x86 processor architectures of SunOS,
Linux, Mac OS X, and Windows operating systems are supported by the
binary installable [Link] distribution.

The instructions in the next section will let you install the [Link] binary
distribution on a variety of OSs.
DOWNLOAD [Link] ARCHIVE
Download the latest version of [Link] installable archive file from [Link]
Downloads. At the time of writing this tutorial, the following are the
versions available on different OS.

Image

INSTALLATION ON UNIX/LINUX/MAC OS
X, AND SUNOS
Download and extract the [Link] archive into /tmp
according to the OS architecture for your computer, and then move the
extracted files into the /usr/local/nodejs directory. For instance:

$ cd /tmp.
$ wget [Link]
$ tar xvfz [Link].
$ mkdir -p /usr/local/nodejs.
$ mv node-v6.3.1-linux-x64/* /usr/local/nodejs.

NB: Add /usr/local/nodejs/bin to the PATH environment variable.

See the screenshot below showing PATH that are compatible on different
OS.

Image

DOWNLOAD [Link]
The official [Link] website has installation instructions for
[Link]: [Link]

Installation on Windows
To install [Link], use the MSI file and follow the on-screen instructions.
The installer by default makes use of the [Link] distribution located in
C:Program Filesnodejs. The C:Program Filesnodejsbin directory should be
added to Windows' PATH environment setting by the installer. Any open
command windows must be restarted for the change to take effect.

GETTING STARTED
Let's try to display "Hello World" in a web browser after you have
downloaded and installed [Link] on your PC.

Then, add the following code to the "[Link]" [Link] file:

Image

(NB: Save the file on your computer as C:\Users\Your Name\[Link]).

If somebody tries to reach your computer on port 8080 (for example, a web
browser), the code instructs the computer to write "Hello World!"

EXECUTING A FILE
Create a [Link] file with the following code on your computer (Windows or
Linux).

Image

Run the [Link] file through the [Link] interpreter to see the results.

Image

[Link] - FIRST APPLICATION

Before creating a genuine "Hello, World!" application, let's take a closer
look at the [Link] application components. An essential [Link] application
is made up of the following three components.
 Import the appropriate modules. The required directive is used to
import [Link] modules.
Create a server similar to the Apache HTTP Server in terms of how it
responds to client requests.
Read the HTTP request sent by the client—which may be a console or
a browser—and send back the answer. The server that was built in a
previous step performs this.

CREATING [Link] APPLICATION

The following are the steps to take in creating a [Link] Application

1. Import Required Module

The following code loads the http module, loads the returned HTTP
instance, and stores it in an http variable. See the example below:

var http = require("http");

2. Create Server

Using the newly formed http instance, we execute the [Link]()

function to create a server instance, and then we bind it to port 8081 by
using the server instance's listen method. Send it a function with request and
response parameters. Make the example implementation return "Hello
World". See the screenshot below.

Image

The code in the screenshot above is sufficient to build an HTTP server that
listens on the local machine's port 8081 or waits for a request.

3. Testing Request & Response

As illustrated below, let's integrate steps 1 and 2 in a file called [Link] and
launch our HTTP server.

Image
Execute the [Link] now to initiate the server using JavaScript as follows,
and afterward verify the Output.

$ node [Link]

[Link] - REPL TERMINAL

The acronym REPL (Read Eval Print Loop) refers to a computer
environment where commands are typed and the system answers with output
in an interactive form, similar to a Windows console or a Unix/Linux shell.
A REPL environment is pre-installed with [Link] or Node. These are the
things it does.

Read: This function reads user input, converts it into a JavaScript data
structure, and stores the result in memory.
Eval: Takes the data structure and assesses it.
Print: The outcome is printed.
Loop: Repeats the aforementioned command until the user twice the
normal CTRL+C key.

To experiment with [Link] programming and troubleshoot JavaScript code,

Node's REPL tool is quite helpful.

STARTING REPL
Below are the procedures you must follow the start REPL:

Simply executing a node on a shell or console without any parameters

will launch REPL. See the example below.

$ node

The REPL Command prompt will appear, allowing you to enter any
[Link] command, such as:

$ node
>

Then the REPL with automatically start.

Simple Expression

Let's test some fundamental math at the [Link] REPL command prompt:

Image

Use Variables

Variables can be used to store values for subsequent printing, much like in a
standard script. The value is printed and stored in the variable if the var
keyword is not used. The value is stored but not written when the var
keyword is used, though. [Link]'s flexible printing feature ().

Image

Multiline Expression

Similar to JavaScript, Node REPL enables multiline expression. Check out

the do-while loop below in action.
When you press Enter after the opening bracket, …… appears automatically.
Node automatically verifies that expressions are continuing.

Underscore Variable

To get the most recent result, use underscore (_).

Image

REPL COMMANDS
The following are REPL commands:

Ctrl + C: End the currently running command.

Pressing Ctrl + C twice will close the Node REPL.
Ctrl + D: Close the Node REPL window.
Up/Down Keys: Review previous commands' history and make
changes.
Tab Keys: Current Commands list.
.help: A complete list of commands.
.break: Get rid of a multiline expression.
.clear: End of a multiline expression.
.save the active Node REPL session to a file with the .save filename
command.
.load filename loads the contents of the file in the active Node REPL
session.

STOPPING REPL
As previously indicated, to exit the [Link] REPL, you must press the
Ctrl+C key combination twice.

$ node

>

(^C again to quit)

>

WHY [Link]?
[Link] is simple to use as a server-side proxy since it can manage
numerous connections at once in a non-blocking fashion. It's very helpful
when proxying various services with various response times or gathering
information from various sources.

An illustration would be a server-side application interacting with external

sources, obtaining data from various sources, or storing assets like pictures
and movies on external cloud services.

Here is how PHP or ASP handles a file request:

1. Transmits the task to the file system on the computer.

2. Wait until the file system opens and begins reading it.
3. Gives the client their content back.
4. Prepared to tackle the next request.

Here is how [Link] handles a file request:

1. Transmits the task to the file system on the computer.

2. Prepared to manage the next request.
3. The server sends the content to the client after the file system has
opened and read the file.

[Link] does away with the waiting and just moves on to the subsequent
request. Single-threaded, non-blocking, asynchronous programming, which
uses little memory, is supported by [Link].

WHAT CAN [Link] DO?

The following are what you can do with [Link]:

[Link] is capable of producing dynamic page content.

 On the server, [Link] can create, open, read, write, remove, and close
files.
[Link] can gather data from forms.
Your database's data can be added, deleted, or modified by [Link].

WHAT IS A [Link] FILE?

[Link] files include tasks that will be carried out in response to specific
events. An ordinary occurrence is when someone tries to reach a server port.
Before having any impact, [Link] files need to be launched on the server.
Files in [Link] have the ".js" extension.

COMMAND LINE INTERFACE

A text-based user interface (UI) known as a command-line interface (CLI) is
used to interact with computers and run programs. Command-line user
interfaces, console user interfaces, and character user interfaces are further
names for command-line interfaces. CLIs accept keyboard input for
commands; the computer executes the commands submitted at the command
prompt.

For operating systems (OS) like Windows, Linux, and macOS, the graphical
user interface (GUI) is now the standard offered by the majority of vendors.
Both a command-line interface and a graphical user interface are available
on the majority of modern Unix-based computers. Your computer's
"Command Line Interface" application must be used to launch [Link] files.

The operating system on your computer determines how to access the

command line interface. If you're using Windows, click Start and type
"Command Prompt" or just "cmd" into the search bar.

Navigate to the folder where the "[Link]" file is located, and the
command-line interface window should appear as follows:

C:\Users\Your Name>_
INITIATE THE [Link] FILE
[Link] must start the file you just generated before anything else can
happen. Open a command window, type node [Link], and press Enter:

Initiate "[Link]":

C:\Users\Your Name>node [Link]

Anyone attempting to connect to your computer via port 8080 will receive a
"Hello World!" message in response. Open a new tab in your browser and
type [Link]

WHAT IS SERVER-SIDE JAVASCRIPT?

Server-Side JavaScript is the term for the language's application on servers.
You know, those machines that are continually operating (and possibly
online), taking care of various tasks. Nowadays, many of them have
JavaScript-written programs, web servers, command-line tools, and other
services. However, how did JavaScript make its way from the browser to the
server? We shall talk about that in the part after this one.

[Link] is a runtime environment that enables JavaScript to be used both on

the server and in browsers (or almost any environment, really). The
language's ability to create more than just client-side apps was also
increased as a result of this. Following then, the language's popularity
skyrocketed. Numerous platforms, including Windows, Linux, Mac, and
others, support Node. Developers began utilizing the platform's strength,
which enabled them to use strong apps and access APIs like the file system.
The development of software, web, desktop, mobile and other sorts of
applications has been made easier by well-liked initiatives. We now have
sophisticated IDEs like Visual Studio Code, programming languages like
TypeScript, potent command-line programs like React Native, and Expo to
create mobile apps with React thanks to Node, Chromium, and Electron. All
of this is possible because JavaScript is now widely used.
BRIEF ORIGIN OF THE LANGUAGE
You see, the web was static in the beginning. You might indeed have a
language on the server to create HTML pages using some templates, but
there was no longer any interactivity after the browser downloaded the code.
For want of a better phrase, it was uninspiringly dull. Websites used to be
rather straightforward in the past. You've completed your structured HTML
content, some CSS, and possibly a few images. Then a man by the name of
Brendan Eich, who was employed by Netscape at the time, was given the
assignment to develop a scripting language to give their Netscape Navigator
browser a little bit more interactivity. The language would be developed to
compete with an earlier, comparable scripting language from Microsoft for
its Internet Explorer browser called JScript. Interactivity required having the
ability to perform simple form input validation and respond to button clicks.
In just ten days, Eich produced the initial iteration of JavaScript. Yes, only
ten days.

Fast-forward A few years later, Google launched its map service, which was
employing the language in a pretty advanced way. They updated their map
in real-time as users were navigating it using XMLHTTPRequest. That
helped the language become more well-known because it demonstrated the
capabilities of a browser at the time. Around that time, the phrase AJAX
(Asynchronous JavaScript and XML) was created and was quickly adopted
as a popular method to add new data to a web page without having to reload
it.

Then, in 2009, a different man by the name of Ryan Dahl invented [Link].
The [Link] server-side platform is built on the JavaScript Engine in Google
Chrome (V8 Engine). [Link], which Ryan Dahl developed in 2009, is
currently at version 0.10.36.

SERVER-SIDE JAVASCRIPT VS CLIENT-

SIDE JAVASCRIPT
Client-side programming refers to any coding, computation, effects,
animation, or other types of user interaction that your website implements
through the user's browser. But server-side programming is the kind that
does every job on the server alone. The user is therefore unaware of that. A
few years ago, only client machines could use JavaScript compilers
(browsers). For this reason, java script was referred to as a client-side
scripting language. V8 engine, which is used on the client side, runs
JavaScript (Google chrome). However, JavaScript is now also utilized on the
server side. The v8 engine is also used on the servers to run js scripts (along
with certain changes to enable server functionality). Since the environments
are different in both instances, just the language is the same.

Client Side JavaScript

An expanded version of JavaScript called Client Side JavaScript (CSJS)

makes it possible to modify and improve web pages and client browsers.
Your code will have access to resources that the browser alone provides in a
browser context, such as the document object for the current page, the
window, alert routines that display messages, etc. Client-side JavaScript's
primary functions include input validation, animation, modifying UI
components, applying styles, and performing calculations when you don't
want the website to refresh frequently. The browser on the user's computer
runs the code used in web development, which is often done in JavaScript.
This code must also function across a range of browsers.

Server Side JavaScript

An expanded version of JavaScript called Server Side JavaScript (SSJS)

makes it possible to access servers, file systems, and databases from the
back end. Although the syntax is similar to C# or Java, server-side
JavaScript is JavaScript code that runs over a server's local resources.
[Link] is a nice illustration of this; with [Link], you may program on the
server side using JavaScript, and that code can be viewed as regular C#, C,
or any other server-side language code. Additionally, you can still send
JavaScript to the client-side using server-side code, but there are significant
differences between the two due to the client-side code's limitations on the
computing capacity and permissions of the client machine. For instance,
client-side JavaScript cannot access the client's hard drive, whereas server-
side JavaScript allows for easy access to the server's hard drive. The ability
to significantly personalize the response based on the user's requirements,
access rights, or searches into data repositories is server-side scripting's main
benefit.

COMBINING SERVER-SIDE & CLIENT-

SIDE JAVASCRIPT
Both methods of using the language are frequently used to create and update
user interfaces (UIs) on the client while server-side code provides the data
necessary for the client to function.

Additionally, client-side JavaScript is no longer limited to browsers. They

are also known as client-side apps if you are developing a desktop or mobile
app. This is so because most current apps require outside data to function.
They then handle the data in various ways after retrieving it from a server,
often a JSON API.

For instance, you would undoubtedly require an API to enable data retrieval,
storage, and other activities if you are creating a social network mobile app
with React Native (a hybrid mobile app framework by Facebook) that
enables users to communicate, publish, like, and comment together. Because
[Link] is quick (due to its event-driven, non-blocking runtime
environment), your clients will receive a quick response and have a positive
experience. In addition to supporting HTTP queries, [Link] now supports
WebSocket connections for real-time, bi-directional client-to-client
communication. Numerous primitives in [Link] can be combined to create
more intricate systems. It has built-in package management called NPM that
enables developers to install packages from a sizable library and build nearly
anything.

USING NODE ON THE COMMAND LINE

 1. Create a NodeJS package

We must first develop a NodeJS package, which is simply a directory with a

[Link] file, before moving on. That can be done in 2 simple steps.

Create an empty directory.

Run npm init from inside the new directory.

This is nothing new and is the foundation of every NodeJS package, thus it
is also not unique to developing a NodeJS command-line package. Let's
write the NodeJS command-line script now that we have that.

2. Create a NodeJS command-line script

You may already be aware that the command node [Link] can be used to
launch a NodeJS script file. Although a NodeJS command-line script is
essentially a regular JavaScript file with the addition of a unique shell
instruction that is acceptable in the majority of situations. We'll talk more
about that later; for now, let's construct a JavaScript file that will serve as the
command-line script for NodeJS. The steps involved in the creation are as
follows:

Create A JavaScript File

The JavaScript command-line file is referred to as [Link] in the [Link]

documentation and popular NodeJS projects. This is a smart move because
the name already indicates what it's for.

Convert the JavaScript File into a NodeJs Command-Line

Script

Like other shell scripts, we wish to enable the locally installed software to
run our JavaScript file. To accomplish this, we append the following
shebang character sequence to the very top of our JavaScript file:

By doing this, we are instructing *nix computers that /usr/bin/env node,

which searches for the locally installed node executable, should be the
interpreter of our JavaScript file.
That line needs to be there so npm will read it on a Windows computer when
the NodeJS command-line package is being installed, even though in
Windows it will merely be disregarded because it will be interpreted as a
comment.

Make the JavaScript command-line file executable

New files are typically not permitted to be executed. We must change the
file permissions of the NodeJS command-line script since it will be run. You
can accomplish that as follows in a *nix system:

chmod +x [Link].

Let's now update our script file with some code. We'll write a
straightforward Hello World program that prints any supplied arguments as
well.

Add code to our NodeJS command-line script file

All command line arguments following the third will be taken by the code
on line 4. In addition, on line 7, we simply print the words "Hello World"
and add any supplied arguments (if any).

Now, we can execute it on Linux, Mac OS X, or Windows using the

[Link] [Link] command. Try it! Pass some argument it's way as well.
So far, Linux and Mac OS X allow us to launch our NodeJS command-line
file as a regular script; but, Windows still requires the addition of node .cmd.
Additionally, we must run our command-line script using the filename,
which is not ideal. We shall get around those problems in the following
section.

3. Map a command-line script to a command name

So far, we have transformed a JavaScript script into a NodeJS command-line

script. Instead of calling it the name of the NodeJS command-line script file,
we want to give it a more relevant name. For that, we must configure our
package to map our command-line [Link]. According to the [Link]
documentation, in your package, including a bin field.

JSON is a mapping between the name of the command and the local file
name.

This means that for our personal "command-line script," we can define a
"command name." Let's imagine that we want say-hello to be mapped to our
[Link] command-line file. We can accomplish that by updating our package
.json and, as noted before, adding a bin field. See the screenshot below.
To fully utilize it, we are assigning to the bin field an object with keys that
represent command names and values that represent mapped NodeJS
command-line script files. We as developers can give several script
mappings thanks to that format. However, we could simply set a string
rather than an object, where the string would be the local file path if we
wanted to give a single NodeJS command-line script with the same name as
its file.

Notes on Naming a Command:

Although we are free to choose any name for a command, we do not want it
to conflict with already widely used command names like ls, cd, dir, and so
on. Chances are that if we use an existing name, the one that is already
installed will be used instead and it won't likely be executed (results may
vary).

4. Link your command for development

For developers, sanity is a way of life, not simply a word. Because of this,
we must have enough confidence in the way our NodeJS command-line
script will be packaged for shipping. Fortunately, npm includes the link
command, which will give us our daily dose of rationality.

For our purposes, the npm link command will locally install any command
provided in the bin field of our package. It allows us to "symlink a package
folder" locally.

JSON. In other words, the npm link functions as a model for installing
NodeJS packages. It is important to note that the npm link has a larger
application than is covered in this manual.

The NodeJS package directory we wish to symlink is where we use the npm
link command:

link npm

Upon command execution, we will observe a global symlink. Our NodeJS

command-line script may now be run with its own "command name," say-
hello:

So, before ever npm publishes our NodeJS command-line script, we can test
them out locally.

Notes on the NPM link

All of the files indicated in the [Link]'s bin field are symlinked by the
npm link, which also applies to the npm install. According to the npmjs
documentation, npm will symlink the following files into prefix/bin for
global installs or ./node_modules/.bin for local installs upon installation.

The npm link linking process on *nix systems is similar to establishing a

shortcut to the command file we specify, which will then be run by the shell
and node as stated with the shebang (#!/usr/bin/env node). On Windows,
npm performs the same action (but only if the shebang is supplied), but it
also creates a file called "[Link]" that instructs the node to run
the command file we specified.

NPM
The biggest software registry in the world is npm. There are more than
800,000 code packages in the registry. To share software, open-source
developers utilize npm. Npm is often used by businesses to control private
growth.

Node Package Manager (NPM) offers two primary features:

• [Link] packages and modules' online repositories, searchable via

[Link].
• A command-line tool for managing [Link] package dependencies, version
control, and installation.

After v0.6.3, NPM is included with [Link] installable. Open the terminal
and enter the following command to observe the outcome to confirm the
same.

$ npm --version

2.7.1

It is very simple to upgrade NPM to the most recent version if you are using
an older version. simply run the subsequent command from the root.

$ sudo npm install npm -g

/usr/bin/npm -> /usr/lib/node_modules/npm/bin/[Link]

npm@2.7.1 /usr/lib/node_modules/npm

INSTALLING MODULES USING NPM

Any [Link] module can be installed using a straightforward syntax as
follows:

$ npm install <Module Name>

For instance, the command to install Express, a well-known [Link] web

framework module.

$ npm install express

You may now use this module as follows in your JS file.

var express = require('express');

GLOBAL VS LOCAL INSTALLATION

NPM always installs dependencies in local mode by default. The local mode
in this context refers to the package installation in the node modules
directory found in the folder containing the Node application. Access to
locally installed packages is provided by the require() method. As an
illustration, when we installed the express module, the node modules
directory was created in the current directory.

$ ls -l

total 0

drwxr-xr-x 3 root root 20 Mar 17 02:23 node_modules

As an alternative, you can list all of the locally installed modules using the
npm ls command.
The system directory houses any dependencies or items that are installed
globally. Although they can be utilized in any [Link] CLI (Command Line
Interface) function, such dependencies cannot be directly imported using
require() in Node applications. Let's try implementing the express module
via global installation now.

$ npm install express -g

The module will be installed worldwide, but the same effects will still be
produced. The first line in this scenario shows the module version and
installation location. See the screenshot below:

To verify all the modules installed globally, use the command line.
$ npm ls -g

USING [Link]
Any Node application or module will have [Link] in its root directory,
which is used to specify a package's properties. Open the [Link] file
for the express module located in node_modules/express/. See the example
below:

Attributes of [Link]
 Name: The package's name.
Version: The package's version.
Description: The package's description.
Homepage: The package's homepage.
Author: This package's creator.
Contributors: Lists the individuals who contributed to the package.
List of dependencies under Dependencies: All of the dependencies
listed here are automatically installed by NPM in the package's node
module folder.
Repository: The package's URL and repository type.
Main: The package's point of entry.
Keyword: The word "keywords" is used.

UNINSTALLING A MODULE
The following command can be used to remove a [Link] module.

$ npm uninstall express

You may check to see if NPM successfully uninstalled the package by

looking at the contents of the /node modules/ directory or by entering the
following command:

$ npm ls

UPDATING A MODULE
Run the command below after updating [Link] and changing the
dependency's version that needs to be updated.

$ npm update express

SEARCH A MODULE
Use NPM to search for a package name.
$ npm search express

CREATE A MODULE
[Link] must be generated before a module may be created. Let's use
NPM to create [Link], which will create the fundamental framework
of the [Link].

$ npm init

Using this tool will help you create a package. The .json file.

You must submit all the necessary data regarding your module. The
[Link] file stated above can be used to assist you to grasp the
semantics of the various pieces of information required. Use the following
command to register with the NPM repository site using a valid email
address once [Link] has been prepared.

$ npm adduser

Username: mcmohd

Password:

Email: (this IS public) mcmohd@[Link]

It's time to publish your module right now, using the following.

$ npm publish

If all goes according to plan, your module will be added to the repository
and made available for NPM installation just like any other [Link] module.

[Link] CALLBACKS CONCEPT

A call-back is a function's asynchronous replacement. Once a task is
finished, a call-back function is called. Call-backs are used frequently by
Node. Call-backs are supported by all of Node's APIs because of the way
they were developed.

For instance, a function to read a file might begin reading the file and then
immediately restore control to the execution environment so that the next
instruction can be carried out. It will call the call-back function after the file
I/O is finished and send the call-back function the file's content as a
parameter. For File I/O, there is therefore no blocking or waiting. Due to its
ability to handle a large number of requests without waiting for any function
to return, [Link] is very scalable.

BLOCKING CODE EXAMPLE

Create a text file named [Link] with the following content. Guide Point is
giving self-learning content to teach the world simply and easily.

Create a js file named [Link] with the following code:

Run the [Link] JavaScript to view the result.

$ node [Link]

NON-BLOCKING CODE EXAMPLE

The following text should be placed in a text file called [Link]. then add
the following code to [Link]:
Now run the [Link] to see the result:

$ node [Link]

These two examples make the difference between blocking and non-
blocking calls clear.

The first illustration demonstrates how the software waits to end itself
until it has finished reading the file.
The second example demonstrates how the program reads the file
without waiting and then prints "Program Ended" while continuing to
read the file without blocking.

A blocking program runs very much in order as a result. Though it is simpler

to implement the logic from a programming standpoint, non-blocking
programs don't run in a straight line. To ensure sequential execution, a
program should be retained within the same block if any data needs to be
used and processed.

NODE JS EVENT-LOOP
The event loop allows [Link] to perform non-blocking I/O operations
despite JavaScript's single-threaded nature by offloading duties to the system
kernel wherever possible.

Since most modern kernels support several background processes, they are
multi-threaded. When one of these operations is complete, the kernel tells
[Link] so that the appropriate call-back can be added to the poll queue and
finally executed.

When [Link] launches, the event loop is created and the input script is
processed (or dropped into the REPL, which is not discussed on this page).
The input script may call process, create timers, or make async API calls.
Following nextTick(), the event loop then begins to execute.

EVENT-DRIVEN PROGRAMMING
In event-driven programming, an event, such as a user action like a mouse
click or key press, or a message from the operating system or another
application, controls how a program is executed. An event-driven
application is designed to notice events as they happen and react to them
using the appropriate event-handling procedure. The idea is a development
of interrupt-driven programming, a technique used in early command-line
environments like DOS and embedded computers (where the application is
implemented as firmware).

[Link] makes extensive use of events, which is also one of the factors that
contribute to its relative speed when compared to other related technologies.
Node simply initiates its variables, declares its functions, and then waits for
the event to happen after the server has started.

An event-driven program typically has a main loop that monitors for events
and activates a call-back function when one is found.

Even while call-backs and events have a similar appearance, call-back

functions are called when an asynchronous function gives its result, whereas
event handling uses the observer pattern. Observers are the processes that
listen to events. Every time an event is fired, its listener function begins
running. The events module and EventEmitter class in [Link] provide
access to a variety of built-in events, which are used to bind events and
event-listeners as follows.
The syntax to associate an event handler with an event is as follows.

The following is how we can programmatically fire an event.

In the example below Create a js file named [Link] with the following code.

JAVASCRIPT BUILD PROCESSES

The JavaScript build process involves three files controlling the build and
deployment process:

1. A global project file ([Link]). This includes deployment and

builds instructions that apply to all target settings.
2. A project files specific to the environment ([Link]). This
includes options for construction and deployment that are customized
to a given destination environment. For instance, you could create an
alternate file called [Link] to offer settings for a staging
environment and utilize the [Link] file to provide settings for a
developer or test environment.
3. A command document ([Link]). This has an [Link]
command that allows you to choose which project files to run. Each
command file can contain an [Link] command that specifies a
distinct environment-specific project file, and you can construct a
command file for each destination environment. This enables the
developer to quickly deploy to various environments by executing the
proper command file.

EVENT LOOP AND EMITTERS

Since Node JS uses JavaScript, which is single-threaded and synchronous,
how does it manage concurrency? [Link] offers events and callbacks to let
users accomplish this. The event loop is an infinite loop that, after searching
the event queue for any triggered events, executes those that are discovered
and deletes them from the queue.

Phases in Event Loop:

1. Timers: The setTimeout() and setInterval()-scheduled callbacks are

executed at this stage. Timer callbacks are created by the setTimeout()
and setInterval() functions, and they attempt to run as soon as the
specified time has elapsed.
2. Pending Callbacks: The deferred callbacks' execution happens at this
stage.
3. Poll: It executes I/O callbacks and fetches fresh I/O events.
4. Check: Here, setImmediate() callbacks are triggered.
 5. Close callbacks: [Link] ('close'), for example, is one of the close
callbacks.

Nodejs setimmediate() vs settimeout()

setImmediate(): This is a function that is called after the current polling

phase.

setTimeout(): It is called after a predetermined period.

Where we use the timers will determine their order of execution; if both are
written in the main module, other programs may have an impact.

Example of setimmediate and setTimeout in Nodejs:

Running the code below will show you that setTimeout() and setImmediate()
alternately execute first on occasion. Check out the image below.

Nodejs Event Emitter and its Working

The class known as Event Emitter can emit, attach, and remove events. The
event emitter class is utilized by the core HTTP and Node JS modules. The
events are all called in the same sequence that they were registered by the
event emitter class. The event handler is attached using the on() method,
which accepts a callback function that is associated with the event. A single
event can also have several functions linked to it. The attached function is
essentially called by the emit() method, which is used to emit the attached
event.

See the event emitter code below.

FILE SYSTEM INTERACTION
Any programming language will require interaction with the file system,
which is both crucial and common. To communicate with the file system,
NodeJS comes with two built-in modules: fs and path. The path module
serves as a kind of aid module to obtain file paths, join paths, etc. while the
fs module serves as the primary module for interaction with the file system.

FILE SERVER
You can interact with your computer's file system using the [Link] file
system module. Use the require() function to incorporate the File System
module. See syntax below.

var fs = require('fs');

FILE PATHS
Relative paths, absolute paths, resolving file paths by supplying file names,
connecting file paths, etc. are all aspects of managing the file system. By
utilizing the path module, we can obtain these. Without regard to the
operating system, such as Windows, Linux, Mac, etc., the path module
handles all of this. Here is a basic illustration of how to use the path module.
MODULES
The units of code known as modules in [Link] are encapsulated and
connected with an external application based on shared capabilities.
Modules might consist of a single file or a group of related files and folders.
Modules' reusability and capacity to divide a complex piece of code into
digestible pieces are two reasons why programmers rely on them so heavily.
Integrated Modules. You can use the built-in modules that come with
[Link] without having to install them further. For a complete collection of
modules, see our Built-in Modules Reference.

Below are how modules are implemented in [Link]:

1. Include Modules

Use the require() function together with the module name to include a
module:

var http = require('http');

Your program may create a server now that it has access to the HTTP
module. See the screenshot below.
 2. Create Your Modules

You can easily add your modules to programs by creating them. The module
that returns a date and time object is made using the screenshot below:

To make properties and methods accessible from outside the module file,
use the exports keyword. Save the above code in a file called
"[Link]."

3. Include Your Module

The module is now available for use in all of your [Link] files. Use the
module "myfirstmodule" in a [Link] file:

It's important to note that the module is located in the same folder as the
[Link] file because we reference it with the./ prefix. Create a file called
"demo [Link]" and save the above code in it. Launch the file.

[Link] HTTP MODULE

The built-in HTTP module in [Link] enables data transfer across the Hyper
Text Transfer Protocol (HTTP). To include the HTTP module, use
the require() method:

var http = require('http');

[Link] AS A WEB SERVER
The HTTP module may build an HTTP server that responds to requests from
clients and listens to server ports. You can use the createServer() method to
create an HTTP server. See the screenshot below.

When someone tries to visit the computer using port 8080, the function is
supplied into the [Link]() method will be run.

Create a file called "demo [Link]" and save the aforementioned code in it.

Add an HTTP Header

Include an HTTP header with the proper content type if the HTTP server's
response is intended to be displayed using HTML:
The status code, 200, indicates that everything is in order, and a second
argument is an object containing the response headers.

READ THE QUERY STRING

Req, a function argument supplied to [Link](), represents the
client's request as an object ([Link] object).

The "URL" attribute of this object stores the portion of the URL that follows
the domain name: demo_http_url.js.

Save the code above in a file called "demo_http_url.js" and initiate the file.
See another example below:

LEARN NATIVE NODE DRIVERS

When written in pure JavaScript, the [Link] driver provides a native
asynchronous [Link] interface to Snowflake.

Rancher employs hosts, which are provisioned by node drivers, to start and
control Kubernetes clusters. A Docker Machine driver is the same as a node
driver. The status of the node driver determines which node driver will be
displayed when node templates are created. To create node templates, only
currently running node drivers will be available. Rancher comes pre-
packaged with a large number of existing Docker Machine drivers, but you
may also install your unique node drivers.

INSTALLING THE DRIVER

The snowflake-sdk [Link] driver is directly accessible from npm. Open a
terminal window and enter the command:

npm install snowflake-sdk, to install the driver.

The Snowflake [Link] driver is downloaded and installed via the

command. Now that the driver has appeared in your node modules directory,
you may use it by doing require("snowflake-sdk").

Using the [Link] Driver

Using the driver often involves the following:

1. Establish a connection with Snowflake.

2. Execute statements (such as SQL queries or DDL/DML instructions).
3. Use the query results Snowflake returned.
4. Disconnect the connection.
 CHAPTER ELEVEN

EXPRESS JS
WHAT IS EXPRESS JS?
The most well-liked [Link] web framework is [Link]. It has
been referred to as the de facto standard server framework for
[Link] and is intended for the development of online applications
and APIs.
It might be laborious and time-consuming to create a backend from
scratch for an application in [Link]. Writing all the boilerplate code,
such as port configuration and route handlers, detracts from the
important task of creating business logic for an application. Web
frameworks like [Link] allow developers to focus on other crucial
activities while saving time.
The Back-end web application framework for [Link] called
[Link], or just Express is made available as free and open-
source software under the MIT License. It is made for creating APIs
and online applications. It has been referred to as [Link]'s de facto
standard server framework.
A node js web application framework called Express offers a variety
of features for creating both web and mobile applications. A single
page, multipage, or hybrid web application can be created with it.
It is a layer added to Node JS that aids in managing servers and
routes.
 WHY EXPRESS JS?
The following are the reasons why Express was created.
Express was developed to simplify the creation of APIs
and web apps while cutting the amount of coding effort
required virtually in half.
Express is used by many new developers to enter the area
of web development with simplicity because it is written in
JavaScript, which is an easy language to learn even if you
have no prior experience with any language.
The reason behind creating an express framework for node js is:
Time-efficient.
Fast.
Economical.
Simple to learn.
Asynchronous.

UNDERSTAND HOW TO INSTALL AND USE

EXPRESS IN NODE APPLICATIONS
Npm can be used to install [Link]. The next command will
update [Link] on your computer so that it is available to all
[Link] applications on your system.
npm install -g express
The latest version of [Link] will be installed locally in your
project folder using the command line.
C:\MyNodeJSApp> npm install express --save
As you are aware, using save will add the [Link] dependency
to the [Link] file.

What does Express code look like?

A web application on a conventional data-driven website waits for
HTTP requests from the web browser (or other clients). Based on
the URL pattern and sometimes accompanying information in the
POST data or GET data, the application determines what action is
required when a request is received. It may then read or write data
from a database or carry out additional operations to fulfil the
request, depending on what is necessary. The program will then
reply to the web browser by placing the acquired data into
placeholders in an HTML template, frequently producing an HTML
page dynamically for the browser to view.
Express offers methods to specify which function is invoked for a
specific HTTP verb (GET, POST, SET, etc.) and URL pattern
(referred to as a "Route"), as well as methods to specify which
template ("view") engine is used, where template files are located,
and which template to use to render a response. To add support for
cookies, sessions, and users as well as to get POST/GET
parameters, etc., utilize Express middleware. Any database
mechanism that Node supports can be used (Express does not
define any database-related behavior).

USING EXPRESS JS TO CREATE YOUR

FIRST PROGRAM
The following software will listen on port 2000 when it is running and
respond to HTTP GET requests with the text "Hi, your request has
been received." See the screenshot below.

WHAT ARE ROUTES?

The application's response to a client request for a specific endpoint
is determined by routing. An HTTP GET, POST, PUT, or DELETE
request can be made by a client, for instance, for any of the URLs
listed below.
[Link]
[Link]
In the above example,

A list of books should, in theory, be returned in response to

a GET request for the first URL.
If the second URL is the target of a GET request, the
response should preferably contain a list of students.
Therefore, depending on the URL that is viewed, a
separate webserver functionality will be called, and as a
result, the response will be given to the client. This is how
routing works.
When a route is matched, one or more handler functions for that
route are called.
The general syntax for a route is shown below:
[Link](PATH, HANDLER)

CREATING NODE AND EXPRESS-BASED

SERVERS
Establish a JS file called [Link] and add the following code to it to
create your first HTTP server using Express:

RESTFUL ROUTING WITH EXPRESS

One of the most important components of your website or web
application is routing. Express's routing is simple, flexible, and
reliable. Requests that are sent to the code that handles them using
a URL and an HTTP method are routed using a system called
routing.
REST, which stands for Representational State Transfer, offers a
mechanism to map CRUD actions (create, read, update, delete)
with HTTP verbs (get, post, put, delete). It is a protocol for creating
routes, and something is referred to as RESTFUL when it complies
with the rest principle.
One of the most important components of your website or web
application is routing. Express's routing is simple, flexible, and
reliable. Requests that are sent to the code that handles them using
a URL and an HTTP method are routed using a system called
routing.
REST, which stands for Representational State Transfer, offers a
mechanism to map CRUD actions (create, read, update, delete)
with HTTP verbs (get, post, put, delete). It is a protocol for creating
routes, and something is referred to as RESTFUL when it complies
with the rest principle. It would be challenging to add new content,
amend existing content, and remove existing content without a clear
norm to adhere to. RESTful routes offer a design paradigm that
makes it simple to manipulate data.
A route must accomplish the following to be fully restful:
Isolate the client and server.
Avoid keeping state between requests (i.e. all information
necessary to respond to a request is available in each
request: no data or state, is held by the server from
request to request).
Employ HTTP and HTTP techniques.
Be dependable (for e.g most APIs follow the restful route
pattern when specifying the process for authentication
and important URLs).
When developing an application or web service that will
communicate with the server, you should adhere to one of the
seven possible restful route patterns.
These Routes would be described for a blog page as:
UNDERSTAND AND USE MIDDLEWARE FOR
NODE APPLICATIONS
A layer of abstraction known as middleware serves as a bridge
between the various software levels. A component of Express
middleware is compiled at some point in the server's life. Express
and Koa are constantly vying with one another for the best
middleware.
You can execute any code and change the request and response
objects using middleware. When the current middleware is finished,
you can also request the following one in the stack.
The request object (req), the response object (res), and the
subsequent function in the application's request-response cycle are
all accessible by middleware functions. The Express router's next
function, when called, executes the middleware that comes after the
one that is now running. See the screenshot below describing
middleware.
Any piece of middleware has access to every HTTP request and can
respond to any path to which it is connected. Additionally, the
middleware can independently finish the HTTP request or pass it to
another middleware using the next function. Similar to chaining, it will
enable you to organize the code and produce reusable middleware.
Application-level middleware, which applies to all requests, or router-
level middleware, respectively (applies to specific request path
patterns). The simplest way to utilize middleware at the application
level is to just provide the application the function, as follows:
[Link](middlewareFunction);
The module provides the actual middleware function in a module-
specific manner. To "make" a middleware function, for instance, the
static middleware employed a "factory" function. One parameter, the
location of the static files, was passed to the factory function. The
actual middleware function that knows where to serve static files
was created as a result. You should use the command following to
use the same middleware in a route-specific manner:
[Link]('/public', [Link]('static'));
As a result, all static files had to be accessible with the prefix /public,
for example, /public/[Link], and the static files were mounted on
the path /public.
Middleware functions can perform the following tasks:
Execute any code.
Modify the objects representing the request and the
response.
Stop the cycle of requests and answers.
Invoke the following middleware on the stack.
The current middleware function must call next() to transfer control to
the following middleware function if it does not stop the request-
response cycle. If not, the request will be ignored.
Example:

Here is a straightforward "Hello World" Express application sample.

In the remaining sections of this article, three middleware functions
will be defined and added to the application. These functions are
myLogger, which prints a straightforward log message, requestTime,
which displays the timestamp of the HTTP request, and
validateCookies, which verifies incoming cookies.
Image

TYPES OF MIDDLEWARE IN [Link]

1. Application-level middleware
We explore an authentication middleware and its creation in the
application-level middleware. The aforementioned routes cannot be
called if the user is not verified. The creation of an authentication
middleware will happen once it becomes necessary to create
authentication for each GET and POST request.
The authentication middleware moves closer to the internal
authentication code logic as soon as it receives the authentication
request. The remainder of the route can be called using the next
function after the authentication is successful. However, if it fails, the
middleware may display problems, which may prevent you from
performing the next route.
2. Router-level middleware
Middleware at the router level functions similarly to middleware at
the application level. The distinction is that it uses Express to
generate and limit an instance, the .router() method. Use the router if
you want. router and .use() to load middleware at the router level,
use the .METHOD() methods.
3. Build-in middleware
In contrast to the previous 4.X version types, Express now functions
as a module, therefore the built-in middleware is independent of the
'Connect' function. Generally speaking, the middleware functions
listed below can be used under the Express categories of
middleware:
JSON: A function that adds JSON payloads to the
incoming request to compute it.
Static: A procedure that serves as an application's static
asset.
4. Error-handling middleware
Any default errors can be handled by [Link], and it can also
define middleware routines for handling errors that are comparable
to other middleware functions. The error-handling features are the
main distinction.
5. Third-party middleware
In the backend processes, you may occasionally need a few extra
features. You can do that by installing the [Link] module for that
purpose and then incorporating it into your application (either on the
application or router level).

WRITING EXPRESS MIDDLEWARE

You need specific pre-installed components to generate, use, and
test the Express middleware. Install Node and NPM first by using the
code snippet below:
npm -v && node -v
Make sure you are installing the correct Node and NPM versions
before proceeding. It can display an error in which case you'll have
to reinstall Node. You won't be able to access the necessary [Link]
packages otherwise.
Installing NPM 6.4.1 and Node 10.9.0 should work in theory.
Additionally, you can set up NPM versions 5 or higher and Node
versions 8 or above. Install POSTman whenever you wish to test
routes using any HTTP verbs other than GET.
Creating middleware
Installing [Link] is a must for developing middleware in the
language. Additionally, an [Link] application needs to be set up.
There are four critical actions to take:
1. Structuring
[Link] middleware will have the following signature function in its
snippet.
Image
An [Link] object called Req is used for making requests. The
Next function instructs [Link], and the Res object represents the
response. To move on to the next middleware function that you have
configured, you require these commands.
The primary function of the middleware is to change the req and res
objects before compiling and running any necessary code.
Terminating the request-response session and requesting the
subsequent middleware in the stack also helps.
2. Modifying the req object
Modifying the req object is highly useful when you want to analyze,
understand, and look for the currently logged-in user for each of their
requests. For such cases, you can write a middleware similar to the
one given below:
Image

You can incorporate the code into your application once it is finished.
The middleware is enabled for all of your application's routes, and it
is easy to implement. Use the following code to enable the
middleware:
 Image

3. Modifying the res object

With the response object, you can easily set a custom header for all
your response objects. This is quite easy with a middleware code
like the one below:
Image

4. Ending the cycle

Validating whether the user object is appropriately added to your
request object is the most typical role of middleware. If after the
execution, you are unable to locate the user or receive the desired
outcome, you should end the request/response cycle. You can use
the example code provided below to verify this method:
 Image

Ordering becomes increasingly important when adding middleware

to your application efficiently, which is the last phase. The illustration
that follows will help to illustrate the earlier method. A new
middleware can be added to the current application to create
authentication while using just one route.
The coding for the [Link] will be as follows:
Image

In the above example, only the user’s path will expect the user to be
authenticated.
 CHAPTER TWELVE

UNDERSTAND WHAT APIS ARE AND

HOW THEY WORK
WHAT IS API?
API stands for an application programming interface. APIs are a type
of software interface that let two programs communicate with one
another. To put it another way, an API acts as a messenger, relaying
your request to the service provider you are utilizing and returning
the outcome.
An API defines features that have nothing to do with the execution of
each implementation. As a result, there can be variation in those
definitions and implementations without there being any
compromises. Therefore, a good API makes it easier to construct
programs by providing the essential building blocks.
Developers don't necessarily write programs from scratch because
APIs can be reused. APIs enable programmers to regularly reuse
difficult, repetitive operations with only a little amount of code.
Developers can considerably speed up the development of new
applications by streamlining complex yet repetitive tasks utilizing
reused APIs.
The gap between what IT teams are expected to deliver by business
leaders and what is possible is growing. We refer to this as the IT
delivery gap. By reusing APIs, developers may scale delivery,
bridging the delivery gap in IT, and achieving business goals.
Developers don't have to start from scratch each time they create a
new software or application thanks to API reuse.

HOW API ABSTRACTION ENABLES SPEED

AND AGILITY
One of the main benefits of APIs is their capacity to encapsulate
functionality between multiple systems. The application that uses the
service and the infrastructure that supports it is separated by an API
endpoint. As long as the specification for what the service provider is
sending to the endpoint remains the same, changes to the
infrastructure supporting the endpoint shouldn't have an impact on
applications that depend on it.
The service provider now has flexibility in the services they can
supply. For instance, if the architecture supporting the API requires
physical servers in a data center, the service provider can easily
switch to virtual servers that run in the cloud.
If the program was created in, let's say, Java and is now running on
an Oracle-based Java application server, the service provider can
transfer it to [Link] (server-side Javascript), which is running on
Windows Azure. This software includes credit card processing
software.
Corporate system connections used to be made through clumsy
point-to-point connections that took time and resources to maintain.
Thanks to API-led connection, changing systems is as easy as
plugging a plug into a socket, freeing up your time to focus on
growing your composable business.

HOW DO APIS WORK?

Even if you aren't aware of it, you might already be using an API
regularly. When was the last time you could log in to a website using
your Google or Facebook account? How about accepting payments
with PayPal? Have you lately made a travel reservation on a
website? Have you checked the weather app on your phone yet this
morning?
If you select yes to any of those inquiries, you have utilized an API.
They serve as communication instruments. One's use can be divided
into the following three steps:
The User is the one who submits a request.
 The device that requests the server is known as a Client.
A server is a name for the machine that responds to a
request.
Your responsibility in this as a user is simple. You want to take
action, whether you acquire the weather or prior sales data from your
CRM system.
By launching the CRM program or another program referred to as
the client, you can request that information. How you submit that
request will depend on the API you're using. The most recent
weather information is retrieved for you by the weather app when
you tell the API which city you want to view. You can request all of
the product sales information from the preceding five years for your
Chicago, Atlanta, and Dallas locations from your CRM system.
The server, which also contains the information you're looking for,
responds to your request. Information about the server can be found
in the documentation. The server's data structure and the endpoints
where specific data can be accessed are both described in the
documentation.
APIs can be grouped based on their architecture, or how they are
put together. Let's look at the two most prevalent types of API
architecture.

SOAP APIs
SOAP stands for Simple Object Access Protocol. Every client-server
communication in this architectural layout uses XML. This type of
API is popular due to its strict structure and independence from any
specific programming language. Even though they are less common
than they previously were, many businesses still use SOAP APIs.
Examples of SOAP APIs include the following:
Salesforce SOAP API
Workday SOAP API.
Sabre SOAP API.
 REST APIs
The acronym REST stands for Representational State Transfer.
When using a REST API, XML is not necessary for communication
between the client and server, albeit it is an option. This kind of API
is also more flexible. Think of it as a stylistic guide rather than a strict
standard.
You might have noticed if you've been looking at APIs that the terms
RESTful API and REST API are frequently used synonymously.
There are small, but substantial, differences between the two. A
RESTful API has all the features of the REST architecture, but it
differs slightly in that it has a transport protocol and keeps cached
data available at all times rather than deleting it when the API is not
in use. Due to its unique features, a RESTful API tends to be more
flexible yet less secure.
Examples of REST APIs include:
Amazon Product Advertising REST API.
Flickr REST API.
YouTube REST API.

WHAT DOES AN API DO?

Through an API, two computers can talk to one another. To
communicate with the server, which is where the data is stored, the
client uses the language that the server provides. Servers never
provide data without a client asking for it, even though developers
have come up with numerous techniques to get around this with
webhooks.
Although APIs are essential to many technical procedures, they have
very limited vocabulary and syntax. An API can perform the four
types of actions listed below:
GET: Requests data from a server.
POST: Transmits updates from the client to the server;
consider a POST request as creating a new record in the
 server's database.
PUT: Revises or adds to existing information.
DELETE: Deletes existing information.
These operations sometimes referred to as HTTP verbs, can be
paired with endpoints to enable API-based data querying and
updating. You must go to the API documentation to learn how to
write each of these actions because they are unique.

A REAL EXAMPLE OF AN API

How are APIs used in real-world applications? An everyday
illustration of the API economy in action is booking a flight.
When looking for flights online, there are several options. You
choose your departure city, your destination city, the cabin class, as
well as additional choices like your meal, your seat, and any special
luggage needs.
You must interact with the airline's website to book your flight to
access the airline's database and check whether any seats are
available for those dates as well as the potential cost depending on
the date, flight time, route popularity, etc.
You must have access to the data from the airline's database
whether you interact with it through the airline's website or an online
travel provider that gathers data from numerous airlines.
Alternatively, you might be accessing the data via a mobile device. In
any case, you have to get the data, therefore your application needs
to interact with the airline's API to get access to it.
The API serves as your obliging waiter, operating and transferring
data from the program you're using to the airline's systems through
the Internet. Additionally, it sends the airline's reply to your inquiry
right to the current travel application you are utilizing. Additionally, it
makes it easier for the application to communicate with the airline's
systems at every step of the process, from choosing a seat to paying
and booking.
APIs handle all interactions between programs, data, and devices in
the same way. They allow data to move back and forth between
systems, creating a seamless experience. Whether you're accessing
any application data or device through a mobile device for shopping
or a cloud service like Salesforce, APIs offer a consistent way to do
it.

TYPES OF APIs
There are various unique API types that you ought to learn about.
You might be familiar with Java APIs or interfaces, for instance,
which allow communication between objects in the Java
programming language and are located within classes.
Simple Object Access Protocol (SOAP), Remote Procedure Call
(RPC), and maybe the most well-known, at least by name, are
examples of web APIs. There are also program-centric APIs
available in addition to representational state transfer (REST).
Only a few of the many innovative API technologies and styles that
are now evolving are AsyncAPI and GraphQL. In addition to the
more than 15,000 publicly available APIs, Programmable Web
claims that organizations use thousands of private APIs to expand
their internal and external capabilities.

HTTP IN DEPTH
Learn the fundamentals of the web if you want to create web apps,
which is necessary. Additionally, HTTP is the cornerstone of every
web application you might develop. Known as HTTP, hypertext
transfer protocol. On top of this stateless, application-layer protocol
for dealing with distributed services, the present web is constructed.

HTTP is a Hypertext Transfer Protocol

When you open a page with a browser, all of the text, graphics, and
embedded content are displayed. These files are all obtained from
remote servers on the internet. Requesting this resource is the job of
the browser, sometimes referred to as a client. After receiving the
request, a server sends the browser the response in response. Both
the request and the response are given as text that others can read.
[Link]
cgi/image/width=466/net/authors/jeremymcpeak/http1-request-
[Link]

Each request is raised independently by the browser. The HTTP

protocol is stateless. This suggests that each request must have all
the information necessary to fulfil it. In an HTTP request, headers
carry this information.
Numerous network configurations are compatible with the HTTP
protocol. The browser is one of the numerous clients that might
make a request. Requests are sent across the TCP/IP layer, and
responses are returned. Even though port 80 is the default for HTTP
transmission, specific programs could need different setups.

HTTP Versions
The following HTTP Versions are available for use.
Currently, clients use HTTP/2.0. The most recent iterations
of Chrome, Firefox, Safari, and Edge all support HTTP/2.0.
When using this HTTP version, the client can send
numerous queries at once. This technique is referred
 known as "multiplexing." It accelerates the speed at which
a page loads.
The HTTP/1.1 modification was made in 2014. Each
TCP/IP connection is limited to one open request in this
version. An alternative term for it is the baseline
mechanism.
HTTP/0.9 was the protocol's first version. Currently, this
version is entirely obsolete.
The flowchart below shows how HTTP/2.0 has advantages over
HTTP/1.1. As can be seen, HTTP/2.0 permits concurrent client
requests for both styles and scripts. similar to how the script and
style both load simultaneously. The entire transaction is completed
over a single TCP connection.
HTTP/1.1 vs HTTP/2.0

Additionally, HTTP/2.0 contains smart packet management

strategies and header compression methods to lessen latency.

HTTP URLs
Servers to which queries are sent are specified using Uniform
Resource Locators (URLs). I'll mention URLs here even though I'm
sure you're already familiar with them for completeness. The
structure of a URL is simple and consists of the following
components:
https specifies the protocol: The communication is secure
since it can be either http or https.
[Link] serves as the host.
1234 is the port number: The port is frequently hidden by
the browser. The default is 80.
Path/to/resource is the resource path: It helps the server
find a certain resource and produce the right response.
The arguments in the query string are, a=b & x=y: The
query string arguments help the server find the right
resource.
The URL identifies the host that the client wants to speak with. It
does absolutely nothing. This is when the request is made. Since
HTTP provides a standardized way of constructing requests that
collect all the required data, it may be used by any kind of
application.

HTTP Requests
Web communications revolve around the request message. The
following are the components of a request:
Request line: The details of the request are stated here.
This sentence has a verb, a path, and the HTTP version.
The HTTP verb indicates the intended response from the
host, such as to POST form data or GET a resource.
Headers: information on the sender, the message, and the
format of the communication
The optional body of the request: For a simple request
for a static resource, like a web page, this will be empty. If
you filled out a form, the information from that will be
included here. The body and headers are separated by a
blank line.
Here's a typical HTTP request:
1. GET /articles/http-basics HTTP/1.1.
2. Host: [Link].
3. Connection: keep-alive.
4. Cache-Control: no-cache.
5. Pragma: no-cache.
6. Accept: text/html, application/xhtml+xml,
application/xml;q=0.9, */*;q=0.8.
On the first line, the verb, resource path, and HTTP version are all
listed. In this case, we are attempting to GET the resource that can
be found at /articles/http-basics. There is nobody to this request; the
only remaining lines are headers.

HTTP Request Verbs

There are four universally applicable HTTP verbs in a request:
GET: Download a file from the server. The URL for a GET
request should include all the information required for the
server to recognize the relevant resource. The message
body is absent from it.
POST: Make a brand-new resource. The server can create
a new resource with the help of an optional payload in the
request.
PUT: Refresh a current resource. The request should
include an optional payload that the server can use to help
with resource updates.
DELETE: Delete a current resource.
The four verbs mentioned above are the most prevalent ones. The
fact that PUT and DELETE are typically seen as specialized variants
of the verb POST is interesting to note. A PUT request can be
disguised as a POST request in some situations, with the exact
action—create, update, or delete—contained in the payload.
There are some less-used verbs too. A few to consider are:

While HEAD and GET are similar, the latter does not
contain the message content. It is used to retrieve the
server headers for a certain resource to check the
timestamps to see if it has changed.
To learn more about the stops a request makes on the
route back to the server, use TRACE. Each intermediate
proxy or gateway's IP address or DNS name would be
listed in the Via header field. A diagnosis could be made
using this.
Use OPTIONS to get the server's capabilities. On the client
side, it can be used to modify the request to fit the server's
capabilities.

HTTP Headers
HTTP headers give the server information about the sender, the
message, and the level of interaction the client wants. Each header
is made up of name-value pairs. The HTTP protocol defines all
permitted HTTP headers that the client and server may use.
The following standard headers are shared by both the request and
response messages:
A directive that controls CDN, proxy, or browser caching is
cache-control. It first functioned with HTTP/1.1.
Connection: used to decide whether or not the network
connection should be kept open once a request is fulfilled.
Two possible settings are keep-alive and closed.
Pragma is an intriguing header that depends heavily on
the implementation. Given that HTTP/1.0 does not support
 Cache-Control, it is simply provided for backward
compatibility.
Trailer: Informs the server that the message body may
include additional metadata, such as a digital signature or
integrity check.
Transfer-encoding: Explains the encoding used for the
payload being transferred from the server. This header is
often referred to as the hop-by-hop header since the
encoding occurs between nodes rather than between the
server and client.
Through is used in the header to keep track of messages
and the client's or server's capabilities.
HTTP/1.1 and later is the only version that supports
upgrades. If the client or server is allowed to move
between protocols, this header must be set. IRC/6.9,
RTA/x11, SHTTP/1.3, HTTP/2.0.
Here are some of the headers that are specific to the request:
The media types, encoding, languages, and character sets
that the client is allowed to utilize are listed in the accepted
prefixed headers.
From, Host, Referer, and User-Agent all include
information about the client who performed the request.
Authorization is the procedure whereby the client gives the
server access to credentials that it can use to confirm the
validity of the request. This is useful for getting into
password-protected resources.
Requests are conditionally processed using if-prefixed
headers; the server only returns the resource if the
condition is satisfied. A 304 Not Modified answer is
returned in the absence of this.
 Referrer: The whole or absolute address of the page that
made the request is included in this part.

HTTP Responses
The format of the response message is largely the same as that of a
request message, except for the status line and headers.
Status line: Describes the request's success (status code
200) or failure (status code 401). Also supplied are the
HTTP version and a very brief status description.
Headers: Extra information about the response, such as
the server's details or the response's content type.
Body: The content of the response is (optional). For
instance, this could be the HTML content of the requested
web page or the binary data of an image.
The status line of a successful server response will resemble
HTTP/1.1 200 OK.

Response Headers
Similar to a request, the response message may contain several
headers. Here are a few examples of common response headers:
Age: The amount of time since the message was created
by the server.
ETag: The entity's MD5 hash, is used to check for
modifications.
Location: utilized to transmit redirections and contains the
new URL.
Server: Identifies the server that sent the message.
The HTTP response may also contain entity-headers. The purpose
of the entity-header is to convey meta-information about the
message body. Here are some illustrations of typical entity headers:
The range of methods that a resource may accept is
specified by the allow option. If the resource is not
supported, you will receive a status code of 405 Method
Not Allowed.
Content-prefixed headers specify the response media
types, encoding, languages, and character sets in the
message payload. For instance, content encoding is used
to compress the sent data.
The response will no longer be valid after the specified
time and date, hence the resource shouldn't be saved in
the cache after that.
Last-Changed: This field contains data on the alleged most
recent modification to the response resource, according to
the server.

Status Codes
You could be feeling a little worn out from all the theoretical
concepts. But hold on, would you? The conclusion to our theories
will be provided by the HTTP response status codes. Each answer
from the server will have a status code. The status code is significant
because it gives the client instructions on how to interpret the server
answer.
The responses that we anticipate receiving from the server are listed
below.
1. Informational Messages: This group of codes was made
transitory and available in HTTP/1.1. By sending an
Expect: 100-continue message, the server can direct the
client to provide the remaining parts of the request or, if the
request has already been sent, it can be ignored. It is
believed that HTTP/1.0 clients will ignore this header.
2. Successful: This informs the client that the request was
properly handled. The most frequent code is 200 OK. In
 response to a GET request, the server sends the resource
in the message body.
3. Redirection:As a result, the client must take additional
action. The most common use case is to go to a different
URL and fetch the resource from there.
4. ClientError: These codes are used when the server
believes that the client is at fault, either for requesting the
wrong resource or for performing a poor request. The most
frequent code in this group, which I believe everyone is
acquainted with, is 404 Not Found.
5. ServerError: This group of codes is used to describe a
server error that occurred while the request was being
processed.

Tools to View HTTP Traffic

There are numerous tools available to monitor HTTP
communication. A couple of the more well-known utilities are listed
here.
The Webkit or Chrome inspector is without a doubt a web
developer's favorite. The Network tab in the Chrome Developers
Tools menu has become substantially more useful in recent years.
This is a gold mine of information on HTTP requests and responses.

Using HTTP in Web Frameworks and

Libraries
Last, let's examine how frameworks use the request-response pair.
Let's begin by using Express for [Link] as an example.

Receiving an HTTP Request with Express

If you're creating [Link] web servers, there's a decent chance that
Express has been taken into account.
Express provides a simple API for building web servers. I won't go
into the particulars of the API here. Instead, I'll give you an example
of how Express uses HTTP requests and answers.
Express Hello World

In this case, we set up a handler so that it would reply to a GET

request with the URL /. The server will reply with 200 OK and the
body of the Hello World message. Port 3000 will be used to connect
to the server. For GET requests to any other path, the server will
return a 401 Not Found error message.

Sending an HTTP Request with the Fetch API

Let's examine HTTP requests last, from the client's perspective.
Although modern browsers already have the Fetch API, jQuery was
originally required to achieve this. Additionally, the syntax has not
improved.
GET Requests With Fetch
Use fetch("[Link] to ask the server
for data. This makes a promise to you, which you can wait to see
how it turns out.
In the example above, a GET request to [Link] was
used to obtain the [Link] resource. We immediately extract the
response body as JSON after receiving a response.

POST Requests With Fetch

The client posts information to the server by calling
fetch("[Link] "method: "Upload") with an
optional payload. Once more, this results in a promise that you can
hold out for to get your wish granted.

Here, we're sending a post request to the profile endpoint at

[Link] To send JSON data to the server, we set the
Content-Type header to application/json. In the request body, the
data is subsequently transformed to JSON.

CALLING APIs
Application programming interfaces are a way for two programs to
communicate with one another (APIs). They speak to one another
using API calls. An API call or API request is a message sent to a
server asking the server to give the API service or information.
If Jane is hosting a large dinner party with plenty of guests, she can
get in touch with a catering business and ask them to prepare food
for the event. She no longer needs to spend a lot of time and effort in
the kitchen. The ability to "call" another application for specific data
or characteristics is similar to that. This ensures that application
developers won't have to spend time and effort developing
functionality that can be implemented via API.
Since APIs are now incorporated into almost all web applications,
calls to them are made continuously in the background. Consider a
website visitor who searches for bus tickets. The travel website uses
an API to contact the servers of the various bus companies and
receives data about the routes and costs that are available. The user
should perceive this process as being almost immediate.

WHERE DOES AN API CALL GO?

An API call's target is an endpoint specified by a client. The places
that an API call goes to—typically a server and a web application—
are known as API endpoints. A mobile client might, for instance,
generate an API call and send it to the server serving as the API
endpoint. The server receives the API request, processes it,
executes it, and finally sends back a response.
Jane from the aforementioned scenario dials a number to get in
touch with the caterer. API requests are performed to a unique
resource identification like this (URI).
A URI is a standardized way to identify a resource, much as how a
phone number identifies a phone line. The recognized resource
could be a real object, a website, an app, a server, an email address,
or even something else entirely.
A URI is frequently used as a universal resource location for web
APIs (URL). A special type of URI called a URL is used to identify
internet locations such as servers or webpages. The URL must
contain the application layer protocol, such as HTTP, that is used to
access it. Websites are referred to by their URLs, such
"[Link] API endpoints are also URLs.
Since online APIs frequently employ HTTP, it is a component of the
API endpoint's URL. For instance, the URL for the Cloudflare API is
"[Link] (you can learn more about this).
In HTTP-based API calls, HTTP verbs (types of requests) like GET,
POST, and PUT are used to define what service or resource they
need from the API endpoint.

HOW CAN API CALLS BE USED FOR AN

ATTACK?
Like anything else that is connected to the Internet, APIs are
vulnerable to attacks from a variety of sources. Attackers can use
API queries in a variety of methods to attack an API, including:
Attacks utilizing distributed denial-of-service (DDoS) and
denial-of-service (DoS): These attacks stop other API
users from using the API. Attackers may saturate an API
with requests or purposefully craft their queries to place a
significant burden on the service.
Vulnerability exploits: Attackers can try sending API
queries that prey on a weakness in the API to get the
server to reveal information that it shouldn't, behave
differently than it was designed to, or give them access
that they shouldn't have.
These and other assaults could cause harm to a firm that provides
API services.

HOW TO SECURE APIS FROM INVALID API

CALLS
The following tactics can aid in keeping APIs safe.
Understand and track API endpoints: Continually update
your list of all live API endpoints.
Verify API users: Authentication ensures that only
authorized customers are calling APIs. One of the most
effective methods to do this is through mutual TLS, an
 authentication method in which each API endpoint verifies
the other using public key cryptography.
Check the API schema's validity: The schema of an API
serves as usage instructions. If an API call deviates from
the norm, there may be a malicious attempt to misuse the
API. API schema validation makes it possible to identify
and reject incorrect API calls.
Use DDoS mitigation: A DDoS mitigation service absorbs
or blocks excessive requests to keep a server from
becoming overloaded. Cloudflare is one such supplier.

READING API DOCUMENTATION

Any API documentation that you open for the first time usually
includes an overview similar to what Twitter provides along with a list
of the API's possible uses. In programming lingo, the actions you can
perform are referred to as methods. For instance, a developer can
declare, "I'm going to retrieve a list of user postings," using the status
timeline function.

Each method name (statuses/user timeline, statuses/home timeline,

etc.) has the words GET and POST next to it. Other APIs might also
contain PUT and DELETE. The words' definitions Without becoming
too technical, here's what you need to know:
 You can retrieve (or get) something using a GET
technique.
A POST method enables the creation of new things.
A PUT method enables you to update an existing object.
A DELETE method enables you to delete previously
produced content.
You may find a general overview of how to connect to the API and
usage recommendations in the bulk of the documentation. For
instance, when we look at Twitter's overview, we can see that it is
broken up into the following sections:
Rate limiting: This refers to the maximum quantity of the
API you can access in a certain period, typically expressed
as requests per unit of time. 15 requests per second, as an
example.
Authentication: The process through which you connect
to the API and effectively share your credentials.
Information on Acceptable Use: How to submit media
and handle problems like posting NSFW images or
content.
Take some time to read it through; this is where all developers start
when investigating an API. It's okay if you don't understand
everything.

Method Details
You can read more about a function's specifics after reading the
overview to find out more about how it works. Let's examine the
documentation for the Status Update Method. You create a Tweet
using this procedure.
You'll see that there is a lot of information to absorb, and this is only
one method. Between 200 and 300 methods are accessible across
the whole feature set of the Twitter API. Frequently, an API function
will have the following features:
The connection URL is also referred to as a Resource URL
or Endpoint. You use to access that method.
 The procedure's allowable parameters (often there are
both required and optional parameters).
Examples of the request and the response.
Even if some of this may sound like Greek to you, if you read it from
beginning to end you'll comprehend more than you might think. For
our Status Update method, the only mandatory input is the "status"
field. What you can observe is as follows:

If you study a little farther down in the documentation for this

method, you can see additional optional arguments like lat and long
that can also be a part of this message.

BASIC API AUTHENTICATION

You can use Basic Authentication to access the Edge API for your
Edge for the Cloud account. Your email address and password for
your Apigee account are included in each request you make to the
Edge API when using basic authentication.
Basic Authentication is the least secure type of authentication. Your
login information is simply Base64-encoded; it is neither hashed nor
encrypted. Apigee suggests utilizing OAuth2 or SAML in place of
Basic Authentication when using the Edge API. Study the points
below.
 Your login details can be transmitted as a Base64-encoded
header or as parameters to an HTTP client.
You must Base64-encode your login credentials before
passing them in the header. An illustration of an encoded
HTTP Basic Authentication header is as follows:
Authorization: Basic
YWhhbWlsdG9uQGFwaWdlZS5jb206bXlwYXNzdzByZAo
The example that follows shows how to use the -u option to provide
your credentials to a client like a curl:
curl [Link]
eval -u email_address:password
After being decoded by curl, your email address and password are
appended to the request's Authorization header. If you forget your
password, you will be asked to enter it. Remember that you must
use your Apigee account's email address instead of your username
when making Edge API calls.

SERVER-TO-SERVER COMMUNICATION
To enable server-to-server communication, which requires
authorization, a few steps must be completed. The complete OAuth
2 flow is summarized as follows:
The request to the protected resource is not covered by this since it
depends on the API that the resource server has made available.

CLIENT: TOKEN REQUEST AND RESPONSE

With the use of the grant-type client credentials in a token request,
the client first requests SPiD for a "server access token".
It is essential to make sure the appropriate scope is requested. If the
access token is to be used with a resource server that is not owned
by the same merchant as the client, a "resource indication" must be
used to specifically designate the resource server as the intended
recipient of the access token.
For a more detailed explanation of how to obtain a server access
token, study obtaining a server token.

RESOURCE SERVER: TOKEN

INTROSPECTION
When the resource server receives the client's request, it must verify
the provided access token. To confirm that a resource is protected,
the resource server must check that the resource is within the scope
of the access token, that the access token has not expired, and that
the appropriate scope has been allocated to it.
Although an access token is normally an opaque string on a
resource server, the associated permission information can be
obtained by sending SPiD a token introspection request. To use the
token introspection endpoint, the resource server must use its client
credentials to authenticate (see Client authentication) and include
the access token in the request.
How to submit a request for a token introspection is covered in
greater detail in Token introspection.
If a token is a JWT signed with a key that the resource server trusts,
it can be verified locally. Once the token signature has been verified,
the payload may be inspected for the permission details (audience,
scope, etc.).

JSON VS. XML, SENDING DATA OVER THE

WIRE
JavaScript Object Notation (JSON), a text-based standard for
encoding structured data, is based on JavaScript object syntax. It is
often used in internet applications to transmit data (e.g., sending
some data from the server to the client, so it can be displayed on a
web page, or vice versa).

What is JSON?
JSON is a text-based data format that follows the JavaScript object
syntax made well-known by Douglas Crockford. Although JSON
syntax closely approaches JavaScript object literal grammar, it can
be read (parsed), created, and used in many programming contexts
without JavaScript.
JSON can be used as a string for data transmission over a network.
The data must be converted into a native JavaScript object to be
accessed. JavaScript provides a global JSON object with methods
for converting between the two, so this is not a big issue.
JSON is a file format for sending and storing data objects with arrays
and attribute-value pairs that uses text that can be read by humans.
Data is stored in a structured, searchable manner using JSON.
JSON stands for JavaScript Object Notation. It offers a logically
organized, human-readable database.

What is XML?
Utilizing XML (Extensible Markup Language), data descriptions are
created. A flexible method for creating information formats and
electronically distributing structured data across both private and
public networks in enterprises is the XML standard.

XML is based on Standard Generalized Markup Language and is a

markup language for defining markup languages (SGML).

The primary objective of XML is to provide data formats that are

used to store data for database records, transactions, and many
other types of data. Numerous content kinds can be produced
utilizing XML data by creating various types of content that are
based on it, including web, print, and mobile content.
XML files are stored as ASCII files and can be edited in any text
editor, like HTML, another SGML-based markup language. The
SGML standard is the foundation for both HTML and XML.
To store data, the extensible markup language (XML) was
developed. Data transit is routinely done with it. The case affects the
outcome. Using XML, you can define markup elements and produce
your markup languages. An element is a basic building block in the
XML language. The file extension for XML [Link].
Key Difference
XML data lacks types, whereas JSON objects do.
JSON does not support namespaces, in contrast to XML.
JSON does not provide data visualization, in contrast to
XML.
When compared to JSON, which is less safe, XML is more
secure.
XML allows a wide range of encodings, but JSON only
supports UTF-8.

History of JSON
These significant events helped shape JSON's history:
Douglas Crockford defined the JSON format at the start of
the new millennium.
The official website debuted in 2002.
In December 2005, Yahoo! started offering online services
based on JSON.
JSON was acknowledged as a global standard by ECMA
in 2013.
The most recent JSON format standard was published in
2017.

History of XML
These significant events in the development of XML are
listed below:
SGML was used to create XML.
XML version 1.0 was released in February 1998.
XML Media Types: January 2001 IETF Proposed
Standard.
Explicit Markup Language (XML).
Charles Goldfarb, Ed Mosher, and Ray Lorie founded GML
in 1970.
In 1996, Sun Microsystems started developing XML.
Features of JSON
Easy to use: Commonly used use cases can be
streamlined thanks to the high-level façade given by JSON
API.
Performance: JSON is suitable for large object graphs or
systems because it is relatively speedy and needs very
little memory.
Free tool: The JSON library is a free, open-source
resource.
It is not essential to construct mapping because the
Jackson API already has default mapping for many objects
that can be serialized.
Clean JSON: Generates results that are easy to read,
compatible, and clean JSON.
Dependency: The JSON library can be used to process
data without the use of any other libraries.

Features of XML
XML tags are not predefined. Your customized tags must
be specified.
XML was designed to transmit data, not to display it.
XML markup code is simple for humans to grasp.
In contrast, the structured format is easy to read and write
from programs.
XML is an extensible markup language, just like HTML.

Difference between JSON and XML

The screenshot below captured the prime difference between JSON
vs XML:
 JSON CODE VS XML CODE
Below is a sample JSON Code:
Below is a sample of XML code:

UNDERSTAND REST AND GUIDING

PRINCIPLES BEHIND API DESIGN
REST is a collection of architectural constraints rather than a
protocol or standard. The implementation of REST by API
developers can take many different forms.
When a client request is made using a RESTful API, a
representation of the resource's state is transmitted to the requester
or endpoint. This data or representation is sent through HTTP in one
of several formats, such as JSON (JavaScript Object Notation),
HTML, XLT, Python, PHP, or plain text. Despite its name, JSON is
the most used file format because it is language-independent and
can be read by both humans and machines.
A RESTful API HTTP request's headers and parameters are also
very important since they contain information about the request's
metadata, authorization, unified resource identifier (URI), caching,
cookies, and other things. Each header for requests and answers
includes a status code and details about the HTTP connection.
An API cannot be considered RESTful unless it complies with the
following requirements:
Clients, servers, and resources are all part of an HTTP-
based client-server architecture.
Stateless client-server communication, in which no client
data is kept in between get requests, and each request is
separate and unrelated to the others.
Information that can be cached to facilitate faster client-
server connections.
Consistent interfaces between parts to guarantee that data
is sent in a predetermined format. This calls for:
i. The required resources can be identified and separated
from the client's claims.
ii. The client has enough knowledge to be able to modify
resources through the representation they are given.
iii. Self-descriptive messages returned to the client have
enough information to show how the client should respond
to them.
iv. A client should be able to use hyperlinks to find all other
currently accessible actions after gaining access to a
resource. This is referred to as having available hypertext
and hypermedia.
 Each type of server (those in charge of security, load-
balancing, etc.) is arranged using a tiered system that
entails obtaining requested data into hierarchies that are
hidden from clients.
Code-on-demand is an optional feature that enables the
server to provide executable code to the client upon
request, hence boosting client capability.
The REST API is still regarded as being easier to use than a
prescribed protocol like SOAP (Simple Object Access Protocol),
which has specific requirements like XML messaging and built-in
security and transaction compliance that make it slower and heavier.
This is even though the REST API must adhere to these
requirements.
However, REST is a set of standards that may be used as needed,
making REST APIs faster, lighter, and more scalable, perfect for
Internet of Things (IoT) and mobile app development. Here is a
thorough diagram that outlines the theories, methods, and
recommended practices of REST APIs.
 LEARN TO WORK WITH A MONGODB GUI
ROBO 3T
Robo 3T is a free and lightweight GUI for MongoDB. It is a shell-
focused, cross-platform utility for managing MongoDB that supports
JSON, or JavaScript Object Notation. In contrast to existing
MongoDB administrative tools, this software has extensive access to
both Mongo CLI and Mongo GUI thanks to the possibility that its
shell will be merged into Mongo Shell.
This mongo shell allowed users to explore, modify, and delete
Mongo documents. Furthermore, Robo 3T is an entirely volunteer-
run open-source project that is available for free.
Following the guidelines of the General Public License version 3
provided by Free Software will allow for its redistribution and
modification. This program has been made available and can be
shared for the benefit of individuals who could use it following GNU
rules. It, therefore, carries no guarantee against being used in bulk.

Why Robo 3T?

Robo 3T is a free, user-friendly tool that uses a minimal amount of
the computer's resources. It is widely considered and acknowledged
as the project with the best track record of delivering excellent
outcomes. Robo 3T saves the user, above all, from the laborious
procedure of using tables and rows, which is typically used in
rational databases. They don't have the same Mongo documents
and collections-based architecture as it has.
Robo 3T is available for download at [Link] Verify
that you have installed the Robo 3T version for your ScaleGrid
deployment that supports the most recent MongoDB version. Learn
more about the Robo 3T supported platforms by doing some
research. The current version of Robo 3T, 1.4.4, which supports
MongoDB 4.2, 4.0, and 3.6, was in use in 2022.

Create Robo 3T User on MongoDB

Create a new user with the appropriate client access privileges. The
roles you assign the user will depend on their use case. See the
procedures below.
Create a new user
I do not suggest utilizing the default "admin" login for ScaleGrid to
connect to your MongoDB setup. Replace it with a new user.
Let's look at an example of creating MongoDB users through the
ScaleGrid console. See the actions detailed below.
After entering your login information, go to the On cluster
information page, click on the Databases tab, and then
create any necessary simple, per-database, read-write, or
read-only users. the database where you wish to create
the user, and then click the Manage button.

Under the Users tab, select the New User button.

 Select the new user's role, provide their name and
password, then click Create.

All Database Users

All-Database roles granted to users created on the admin database
grant access to all non-system databases in the deployment. We'll
make a new user for this example who has read-write access to all
databases in the cluster.
To create such a user, utilize the ScaleGrid web shell, which is
accessible from the Admin tab:
Set Up a New Connection on Robo 3T
1. Launch Robo 3T, then select "Manage Connections" from
the menu.
2. Under "Manage Connections," click "Create" to start a new
connection.
3. When the Connecting Settings window displays, select
"Replica Set" as the "Type".
4. Identify your relationship.
5. Click the addition symbol (+) next to the "Members" box to
add the "Server Name(s)" and "Port(s)" from your
Connection String one at a time.
6. In the "Set Name" area, enter the name of your replica set.
7. After that, choose the "Authentication" tab from the
"Connection Settings" window's top bar.
8. Enter the database name in which your MongoDB user
was created.
9. Use your login information to complete the remaining
fields.
10. If SSL is enabled for your MongoDB cluster, choose "SSL"
and configure it. In addition to the self-signed certificates
that ScaleGrid by default provides, you have the option of
 providing your SSL certificates or asking us to buy them on
your behalf.
11. Click "Test" to verify the connection. It should be possible
for Robo 3T to establish communication.
12. After saving the connection, double-clicking on it will allow
you to view your database and establish a connection.

IMPLEMENTING GET, POST, PUT, PATCH,

AND DELETE BY CREATING A PUBLIC API
FROM SCRATCH
The most common database CURD (create, update, read, and
delete) operations are analogous to the HTTP POST, GET, PUT,
PATCH, and DELETE methods. Just attempt to remember the key
ideas listed below.
1. Create NEW record =>POST
2. read=>GET
3. If the record exists then update else create a new
record=>PUT
4. update/modify=>PATCH
5. delete=>DELETE

The Get Method

The get method is used to retrieve or obtain data from a server using
a provided URL. The read action is carried out in REST CURD. Let's
construct an HTML file that can be run locally by your browser.
Create and save a file called [Link]. See the code for
implementation below.
The Post Method
When adding a new record to the database or uploading a file to a
web form's back-end table, Post is used to transmit data to the
server. The post method is used to add new stuff to the backend
server, which is a good way to summarize its use. It performs a
REST CRUD operation's create operation. Create a [Link] file that
can be seen once again in your local browser. The code is shown
below.
The PUT Method

The PUT method is most typically used to update an existing

resource. Let's try to understand how the PUT technique works:

In the [Link] method, the resource is initially identified by its

URL. If the resource already exists, it is updated; otherwise, a new
resource is created. Update the resource if it already exists; else,
create a new resource. Make a [Link] file once more. Check out
the image below.
The Patch Method
The PATCH method is used to update the values of the resource
properties. Take a look at the snapshot that was obtained from the
placeholder where userID:1 is present in the paragraph below. There
are two characteristics associated with this userID: the title and the
finished. They have the values "delectus aut autem" and "false,"
respectively. Here, we're going to change the values of the resource
properties.

The DELETE Method

The DELETE method can be utilized to remove a resource that is
identifiable by its URI. To implement this, create a [Link] file on
your local computer.
 UNDERSTAND AND USE CHAINED ROUTE
HANDLERS FROM EXPRESS.
Routing explains how an application responds to a client request for
a specific endpoint, which is represented by a URI (or path) and a
specific HTTP request type (GET, POST, etc.). One or more handler
methods for a route are invoked when it matches.
A route definition has the following structure: [Link] (PATH,
HANDLER).
The app is a prime illustration of the express.
An HTTP request method's lowercase name is METHOD.
PATH is a path on the server.
The function HANDLER is invoked when the route
matches.
A route example for a GET request is /home, so let's look at it.
 CHAPTER THIRTEEN

EMBEDDED JAVASCRIPT (EJS)

WHAT IS A TEMPLATE ENGINE?
A template engine is a tool that enables frontend/full-stack
developers to create HTML markup that is laced with its (the template
engine's) defined tags or syntax that will either insert variables into
the template's final output or execute some programming logic at run-
time before sending the final HTML to the browser for display.

WHAT IS EJS?
EJS is the abbreviation for embedded Javascript. It is a
straightforward templating language or engine that enables users to
create HTML using standard Javascript. It provides a more efficient
approach to interpolate (concatenate) strings.

WHEN TO USE EJS

When generating dynamic content or providing something that
involves real-time updates, EJS is most helpful when you have to
publish HTML with a lot of JavaScript. Think of doing this:

That is a lot of syntaxes, which is also confusing and unattractive.

EJS steps in to save the day here. Instead of writing that somewhat
perplexing JavaScript code, you could:
On the other hand, this is more aesthetically pleasing and, once you grasp it, much easier to
understand.

WHY EJS?
While there are several templating systems available, each with
advantages and disadvantages, I primarily choose EJS due to its
straightforward syntax and logic. Additionally, the setup is quite
simple.

GETTING STARTED
Installing EJS using npm into your project folder is the first step in
using it in your express app.
npm install ejs --save

Next, since Express by default uses jade as its template engine, we

must instruct it to switch to EJS by adding the following line to your
project's root folder's [Link] file:
[Link]("view engine","ejs");
Now that everything is ready, we can begin using EJS in our project.
One thing to keep in mind is that all files containing EJS syntax must
have a .ejs extension and be saved in the project's root directory's
views folder. See the screenshot below.
Does the directory name for EJS files need to be titled views, you
might be wondering. Express is set up by default to search any
directory called views for template files to render. You may always
modify that if you're not comfortable with it by adding the following
line to your [Link] file.
[Link]("views","./yourcustomname");
We can also incorporate partials with Express. Imagine creating a
website where the navigation and footer are the same on all or part of
the pages. It would be a hassle to have to rewrite those for each of
the pages. With Express, all you have to do is create a subdirectory
inside your views directory called partials, or whatever name you
choose, and place all of your modular/shared files inside.

To include in files, simply do

[Link]<%includepartials/header%>
.....otherstuff....
<%include partials/footer%>

UNDERSTAND WHAT EJS DOES AND HOW

TO USE IT WITH NODE AND EXPRESS
A templating language or engine called EJS enables you to produce
HTML markup using only JavaScript. And it is ideal for Nodejs
applications because of this.
Installing the package is required before you can use the EJS
template engine in your [Link] project. We are utilizing [Link]
for our server as a precondition to the instruction described
previously.
1. Creating & Configuring Nodejs Project
Let's start by establishing our Node project and move forward from
there.
$ npm init -y
Now that your [Link] file has been created, it should appear
as follows:

Next, create your .js file

$ touch [Link]
Let's use the command below to install all of our dependencies and
packages now.
$ npm i express ejs
Allow us to configure the backend of our little application now that
our packages have been installed. Go to the .js file for your
application; in this case, I'm working on [Link] because I generated
it.
Let's begin by configuring our Express server and incorporating the
EJS template engine with our front end.
Image

The EJS template engine now searches for a "views" folder by

default to render our HTML templates.
Your application's [Link] and file structure must look like this up to
this point.
 Ejs Template Engine In Nodejs File Structure

These lines guarantee that the 'views' folder is open to all users:
Image

2. Creating EJS Templates

Create a folder called "views" in the root directory of your project,
and then create a file called [Link] inside it. Make sure your
template file names finish in ".ejs" rather than ".html" or ".htm," or
else your templates won't render.
Let's now configure the [Link] file for our home page route and
supply a name-value object (key-value pair):
Image
Set up a basic HTML template and try to use the EJS template
engine on the client side to render that name value on our home
route. I'm putting my CSS code into my HTML template to keep
things simple.

TEMPLATING WITH EJS

A system that inserts data into your app's HTML template from the
client side is known as a template or templating engine for [Link].
See the screenshot below, which illustrates the Template Engine
Data Rendering Process, for a better understanding.
Image

This diagram demonstrates how our [Link] server can use a

templating engine to enter data onto our HTML template.

RUNNING CODE IN EJS TEMPLATES

There are two ways to add comments to templates:
Utilize "/* Comment text>*/". The character " /*" specifies the
comment's beginning, whereas the "*/" characters define its
conclusion. Multiple text strings may be present in a single
construction. Utilize "/ Comment text>." A line break marks the end
of a comment, which is content that follows /.

JavaScript expressions, HTML, and comments are all placed in

special tags in the template code. See the screenshot below.

Image

PASSING DATA FROM SERVER TO

TEMPLATE AND VICE VERSA
To pass data from server to template, study the screenshots below.

JSON:
Image
HTML:
Image

CREATING LAYOUTS/PARTIALS WITH EJS

For your applications, you must have Express-Ejs-Layouts,
EJS, and Express installed. To avoid having to restart the
server each time I make changes, I've also added Nodemon.

Installing packages
npm install ejs express express-ejs-layouts

Your [Link] file should be like mine in appearance. Of

course, if you do this in the future, the packages may be in a
newer version.

JSON
 Image

Building our app is the following stage. I won't go into great

depth here, but I have added comments to each line and a
complete video that can help you get started with NodeJS,
Express, and EJS.

Let’s build our [Link]

Start with the JavaScript code in the screenshot below.
Image

Layouts
Let's begin creating our basic layouts and then apply some
CSS to improve their appearance. I refrained from using
Bootstrap because it can make things appear more difficult
than they are. Follow the screenshots below
[Link]

Image

[Link]

Image

[Link]

I didn't take my time with the styles, as you can tell. Let's start with something
very simple:

CSS
 Image

Let's add the partials now that we have the layouts and the
CSS:

EJS Partials
The header, footer, and sidebar are examples of elements on
websites that remain consistent across pages. We can reuse views
thanks to the partials that EJS offers.
Remember how earlier we made the views/partials folder? In this
folder, add two new files with the names [Link] and [Link].
The following should be in [Link]:

Image

In the head, I've added a link to Bootstrap. Since I'll be using code
snippets from the Bootstrap examples website, I'll need EJS.
Now, update [Link] like so:
Image

The include function was used to include the partial files [Link]
and [Link]. It accepts as an argument the relative path to the file.
Because pages and partials are in the same location, we must first
leave the pages folder (../partials/head') to access partials from
pages.
Keep in mind that the escaping output tag (%=) has been replaced
by the EJS tag (%-). When you want to output raw HTML, you use
the %- tag, often known as the "unescaped output" tag.
Use it with caution, please. Use caution when using it with user input
as it opens your application to threats.
Let's construct a second subpart named header.
inside views/partials, ejs. The following is what [Link] contains:
 Image

Update [Link] to this:

Image
Run node [Link] , and visit [Link] to see the
result on the screenshot below.
Same node app with articles as before, this time with a header and
footer

We have added the header and the bootstrap styles to the articles
page by importing the partials. These partials are also usable on
other pages.
 CHAPTER FOURTEEN

[Link]
LEARN FRONT-END DEVELOPMENT WITH
REACT
One of the most widely used JavaScript frameworks ever developed
is React, and in my opinion, it's one of the best tools available. React
is a JavaScript package that seeks to make the creation of graphical
user interfaces easier.
It was created on Facebook and made available to the public in
2013, powering many of the most popular apps, including Facebook
and Instagram, among countless others.
Its main objective is to make it simple to think critically about an
interface and its state at any given time. To accomplish this, the UI is
divided into several components.
Learning React could initially be challenging for you. But once it
"clicks," I can assure you that it will be one of your best experiences
ever. Many tasks are made simpler with React, and its ecosystem is
full of excellent frameworks and tools.
To get started with React, you need to comprehend four (4) ideas
and its very short API:
Components
JSX
State
Props
All of these will be covered in this book, however, later guide will cover the more complex
ideas. In the final section, I'll give you some advice on how to proceed.

You should have a solid grasp of a few fundamental JavaScript

principles before diving right into React. You don't have to be an
expert in JavaScript, but I believe you should have a solid
understanding of:
Variables.
Arrow functions.
Work with objects and arrays using Rest and Spread.
Object and array restructuring.
Template literals.
Callbacks.
ES Modules.

Why should you learn React?

Any Web developer would benefit greatly from having at least a
rudimentary understanding of React. That is due to a few factors.
1. React is incredibly well-liked. You will almost certainly work
on a React project in the future as a developer. Your team
might ask you to work on an existing project or a brand-
new React-based app.
2. A lot of modern tooling is constructed with React at its
heart. React is the engine behind numerous well-known
frameworks and technologies, including [Link], Gatsby,
and many others.
3. React will undoubtedly come up in a job interview as a
front-end programmer.
All of those are valid arguments, but React's greatness is one of the
key reasons I want you to master it.
It encourages several beneficial development techniques, such as
component-driven development and code reuse. It is quick, light, and
the way it prompts you to consider the data flow in your application is
ideal for many typical applications.

How to install React

React can be set up in a few different ways.
To get things started, I strongly advise using the officially advised tool
named create-react-app. The command line program create-react-
app is designed to help you become familiar with React quickly. To
download and run [Link] commands without having to install them,
you first use npx.
The most recent version of create-react-app will be downloaded, run,
and then removed from your system when you type npx create-
react-app as app-name. This is fantastic since you will never have
an old version on your PC and you will always be using the most up-
to-date code.
npx create-react-app todolist

This is when it finished running:

create-react-app created a file structure in the folder you told it to

(todolist in this case), and initialized a Git repository.
It also added a few commands in the [Link] file:

Therefore, you may launch the application right away by heading to

the freshly created application folder and typing npm start.

By default, this command opens your browser and starts the app on
local port 3000, displaying the welcome screen:
You can now start working on this application.

UNDERSTAND WHEN AND HOW TO USE

REACT COMPONENTS
You learned how to build your first React application in the previous
part. There are other files included with this application that perform
different functions, most of which are connected to configuration, but
[Link] stands out.
The first React Component you encounter is [Link]. See the
screenshot below.
A React application or one of the other well-liked frontend
frameworks, like Vue and Svelte, for instance, is constructed utilizing
dozens of components.
But let's examine this first element first. It'll condense the component
code as follows:

Several items are visible here. We export a function called App and
import some other items. In this instance, we import an SVG picture,
a CSS file, and a JavaScript library (the react npm package).
Although create-react-app is set up to enable us to import pictures
and CSS for usage in our JavaScript, you do not now need to be
concerned about this. The idea of a component is what you should
be concerned about.
The app is a function that, in the original example, yields a result that
appears somewhat unusual at first glance. Although it appears to be
HTML, JavaScript is incorporated into it. The unique language we
employ to create a component's output is called JSX. The following
part will cover JSX in more detail. A component has several extra
properties in addition to specifying some JSX to return.
A component may include variables that other components cannot
access unless this component makes its state accessible to other
components and the rest of the application. This is known as having
its state. Data from other components may also be received by a
component. In this instance, we're discussing props.

LEARN TO PASS PROPS AND WORK WITH

THEM
React props are a mystery to everyone new to the framework
because they are never addressed in any other framework and are
hardly ever explained on their own. After mastering React's JSX
syntax, one of the first things you will learn about React is them. In
essence, data is passed from component to component using React
component props.
You will unavoidably run into the idea of props as you learn how to
create web applications with React. To master React, you must
understand how props function, but it takes some effort to completely
understand the idea.
Props, which stands for "properties," are used in a React application
to transfer data across React components. Let's examine the
example code provided below. Here, a string is being rendered by a
single React component:
When learning about React, you often start with the JSX syntax for
rendering things to the browser. In essence, JSX combines
JavaScript with HTML to achieve the best of both worlds.

You'll separate your first React function component a little later.

How to send the data from one React component to another

component is a common question that comes after this refactoring.
After all, rather than the static greeting that is predefined within the
new component, the new component should render a dynamic
greeting. After all, it ought to operate as a function to which I can
send arguments.
Entering custom HTML attributes to which you assign your data using
the JSX syntax for React props, where you can transmit data from
one React component to another:

Since the JavaScript object holding all the data transferred from
component to component is always found as the first parameter in
the function signature of a function component, you can destructure
the props early. It's known as React Props Destructuring.

You can transmit values from one component to another down the
component tree via props, as you have seen. It was only a string
variable in the prior example. Props, however, can be any JavaScript
data type, including arrays, objects, and integers. You can even pass
React components through props, as you shall see later.
For what it's worth, you can define the props just after the variable
declaration.
Image

For a JavaScript string, you can send it as a prop enclosed in double

(or single) quotes.
Image

But with these kinds of inline properties, you may also pass additional
JavaScript data structures. For JavaScript objects, there are two curly
braces: one for the JSX notation and one for the JavaScript object
notation, which can be confusing for React beginners.
 Image

The data becomes more readable when declared as a proper

JavaScript object.
Image

When sending a style object to a style property on a native HTML

element for the first time in React, most newcomers observe this.
 Image

In essence, that is how React passes props from component to

component. As you may have seen, in the component hierarchy of a
React application, props are only passed from top to bottom.
Properties cannot be passed from a child component to a parent
component. This warning will be covered again later in the training.
Additionally, it's crucial to remember that React's props are read-only
(immutable). Developers should never modify props; instead, they
should only read them in their components. But you can use them to
derive new values (see computed properties later). Props are only
ever used to transfer data from a parent component to a React child
component, after all. Props are just the means of transferring data
down the component tree.

REACT PROPS VS. STATE

Components in React cannot be made interactive by passing props
between them since props are read-only and consequently
immutable. React State must be used to introduce stateful values if
you want interactive React components. Typically, a React
component's state is co-located there using React's usage The State
Hook.
 Image

In the most recent illustration, the App component updates a state in

an event handler using a state updater method and a stateful value
named isShow. The parent component uses conditional rendering to
determine whether or not to render its child component based on the
Boolean value of isShow.
The following illustrates the distinction between state and props:
State can be modified over time to provide interactive user interfaces,
whereas props are simply a means of transferring information down
the component tree. The following illustration demonstrates how the
state can change into props when it is transferred to a child
component. Even if the state is converted to props in the child
component, the state updater function still allows for state changes in
the parent component. The state is handed along as "modified" props
after being altered.
 Image

To put it another way, the value (state) of the vehicle (props) has
changed. Whether the values contained in the props are stateful or
not is irrelevant to the child component; it just recognizes them as
props that belong to the parent component. The child component
only receives the updated props in the end since any state change in
a component (in this case, the parent component) results in a re-
render of this and all child components.
In conclusion, each time the state changes, the rendering mechanism
of the impacted component and all of its descendant components are
activated. As a result, the entire component tree becomes interactive.
After all, stateful values (state) are supplied as props to child
components, and once the state in a component changes, which may
be passed as props to the child components, all re-rendering child
components employ the new props.

HOW TO PASS PROPS FROM CHILD TO

PARENT COMPONENT
How can a child component communicate with its parent component
if props can only be transferred from parent to child components?
Once they learned about React's props, newcomers to the language
frequently ask about this topic. The short answer is that there is no
mechanism to transmit props from a child component to a parent
component.
Let's go back to the first illustration and replace the display/hide
toggle feature that was previously created with a new reusable
component called Button.
Image

The brand-new Button component currently controls its own co-

located state. Since the isShow stateful value is managed by the
button component, there is no way to provide it as props to the parent
component, where it is required for the welcome component's
conditional rendering. The program malfunctions because we are
unable to access the isShow value in the App component. Let's look
at how to lift state in React to remedy this.
 Image

The program is back in operation. The key component is how the

App component transfers a function to the Button component via the
props. The method is used for the click handler in the Button
component and is known as a callback handler in React (since it is
transferred from component to component via props and calls back to
the original component).

HOW TO SET PROPS TO STATE

In the past, you learned more about state and props in React. When
developing React components, there is a common query that both
novice and seasoned React developers encounter: How do I make
props state? It is completely acceptable to obtain the starting state
from the props in this scenario. The incoming prop can be used as
the initial state for a hook similar to React's useState Hook.
 Image

That's a common pattern in React. If the state needs to change when

the incoming props change, it gets a bit more complicated. You can
study more on this.

LEARN TO WRITE JSX AND UNDERSTAND

JSX SYNTAX
The component-driven programming language React uses the
[Link] runtime environment to construct apps. React's ambition is
to streamline the development process and offer a safer software
environment has contributed to its growth.
JSX, a JavaScript Syntax extension meant to speed up and further
simplify React development, is one well-known technology used for
this purpose. Given that it is a JavaScript extension, its advantages
are further increased by the fact that any legitimate JavaScript
expression is regarded as legitimate code. It's important to keep in
mind that useful JS expressions are also useful JSX, while the
opposite is not true. To find out more about this idea, watch the video
after this one.
JavaScript XML is referred to as JSX. It is merely a JavaScript
syntactic extension. It enables us to write HTML directly in React
(within JavaScript code). It is straightforward to generate a template
in React using JSX, but it is not just a simple template language;
rather, it contains all of JavaScript's capabilities. It performs
optimizations while translating to conventional JavaScript, making it
faster than that language. React uses components for this instead
of dividing the markup and logic into different files. We'll discover
more in-depth information on components.
The JSX syntax resembles a mashup of JavaScript and HTML.
However, for the software to operate properly, JSX must be built into
JS. As a result, the JS counterpart of JSX expressions is converted
to strings. These traits and actions lead to a language that can aid in
development but is also quite rigid in terms of syntax. To clarify the
syntax and functionality of JSX, let's talk about the distinctions
between JS and JSX.
The Syntax:

Image

IMPERATIVE VS DECLARATIVE
PROGRAMMING
The majority of the JavaScript code we've created so far would be
categorized as imperative, whereas JSX employs what is
occasionally referred to as a declarative style of programming. You
may be unfamiliar with these terminologies for the first time, but that
is acceptable. Code that explicitly outlines how something is done is
known as imperative code. Declarative programming entails
expressing what you want to do.
To further illustrate, envision entering a nearby restaurant to place an order for a sandwich.

I would like one toasted ham and cheese sandwich, which

would be an example of a declarative request. You are just
 saying what you want and leaving the details up to the
restaurant personnel, not worrying about them.
I want you to take three slices of ham, two slices of
cheese, and a jar of mayonnaise from the refrigerator and
set them all together on a clean counter. That is what an
imperative order would look like. Please locate two slices
of bread as well. Place the bread, cheese, and ham on a
stack as follows: Bread, ham, cheese, cheese, ham, and
bread. Apply mayo after removing the top slice of bread.
Bring me the sandwich on a plate after replacing the top
slice of bread and baking the finished sandwich at 300
degrees for five minutes.
Unless we are deliberately directing someone else, we favor the
declarative manner while speaking (much to the relief of restaurant
personnel everywhere). Since our code is composed of clear
phases, the majority of the JavaScript we've created is regarded as
imperative. In normal JavaScript, we might end up writing something
like this to render a div element on the page.
Image

HOW TO USE JSX

JSX and React are frequently used together, however, they are not
interdependent. Both can be utilized apart from one another.
However, because JSX is nothing more than syntactic sugar,
JavaScript is necessary for JSX to function properly. That is to say,
the only thing JSX does is expand the syntax of JS to facilitate the
development of applications more quickly.
Let's now look at the JavaScript counterpart to a JSX element. A
JavaScript object with keys, values, properties, and methods is what
any produced element is when using JSX.
Let’s compare the following JSX example with its JS equal.
 Image

The above code is identical to the following JS code.

Image

As you can see, you will probably use conventional JS code in

conjunction with your JSX. It's crucial to know how to do that to
achieve that. So let's examine that now.
Image

The code block above demonstrates how to use interpolation and if

statements from conventional JS in conjunction with JSX. You can
also modularize your content by nesting child elements inside of JSX
elements. Combining these ideas will allow you to build incredibly
resilient software that is ready for anything.
 GETTING STARTED USING JSX IN YOUR
SOFTWARE DEVELOPMENT
There is a lot to learn about the JSX syntax extension, but you now
know the fundamentals to get you started. However, because of the
structure and intended purpose of React, JSX is most frequently
utilized with React programming, as was already explained.
Even though it's not necessary, learning to utilize JSX with React is
arguably the greatest method to develop your knowledge of the
language's capabilities. Going forward, you might find it useful to test
the syntax restrictions of JSX and practice JSX with tools like
CodePen.

LEARN ABOUT THE REACT DOM

Components or JSX elements are rendered to the DOM by
ReactDOM. There are only a few methods available for the
ReactDOM object; you've probably used the render() method, which
is in charge of rendering the app in the browser.
The DOM can be accessed with the react-dom package. We import it
as follows at the start of our project:
Image

Let's first comprehend why we require ReactDOM rather than only

using the DOM before delving into the specifics of ReactDOM's
methods.
To provide an effective approach to managing DOM elements of the
web page, ReactDOM is a package that offers DOM-specific
functions that can be used at the top level of a web project. The
following methods, along with a few others, are available in
ReactDOM's API for developers.
render().
findDOMNode().
 unmountComponentAtNode().
hydrate().
createPortal().
ReactDOM must first be imported from the react-dom package
using the following code snippet to be used in any React web
application:
import'react-dom' to get ReactDOM:

render() Function
One of ReactDOM's most crucial methods is this one. Use this
function to render a single React Component, several React
Components, or multiple React Components wrapped in a
Component or div element. This function updates the DOM using
React's effective methods, which include efficient diff methods, the
ability to alter only a subtree, etc.
The Syntax:

[Link](element, container, callback)

The three parameters shown below are the maximum that this
method can accept.
element: This parameter anticipates the rendering of
either a JSX expression or a React Element.
container: The element's rendering container is expected
by this argument.
callback: This optional parameter anticipates the
execution of a function after the render is finished.
If a stateless component was rendered, this function returns null,
else it returns a reference to the component.

findDOMNode() Function
The DOM node where a specific React component was rendered is
typically obtained using this function. The following can be
accomplished by adding a ref property to each component directly.
This technique is extremely uncommon.
The Syntax:

[Link](component)
This method requires a React Component to be searched in the
Browser DOM and only accepts one parameter component.
If the function is successful, it returns the DOM node where the
component was rendered; if not, it returns null.

unmountComponentAtNode() Function
By using this function, the React Component that was displayed to
a specific container can be unmounted or removed. Consider a
notification component as an illustration. It is preferable to remove
the component after a limited time to increase the efficiency of the
website.
The Syntax:

[Link](container)
This method demands the DOM container from which the React
component must be removed as a single parameter container.
This function returns true if it is successful and false otherwise.

hydrate() Function
Although it uses server-side rendering, this method is comparable
to the render() function.
The Syntax:

[Link](element, container, callback)

The three parameters shown below are the maximum that this
method can accept.
element: This parameter anticipates the rendering of
either a JSX expression or a React Component.
 container: The element's rendering container is expected
by this argument.
callback: This optional parameter anticipates the
execution of a function after the render is finished.
This function makes an effort to add event listeners to the currently
rendered HTML and provides a reference to the rendered
component or null in the case of stateless components.

createPortal() Function
An element is typically mounted on the DOM as a child of the
closest parent node when it is returned by a component's render
method, which isn't always what is desired. Through the use of
portals, we can render a component into a DOM node that is not
currently part of the parent component's DOM hierarchy.
The Syntax:

[Link](child, container)
The two parameters for this approach are as follows.

child: This argument anticipates the rendering of either a

JSX expression or a React Component.
container: The element's rendering container is expected
by this argument.
This function gives no results.
If there are any children in the container specified,
[Link]() replaces them. It has a very effective
diff technique and can change any DOM subtree.
Because the findDOMNode() function may only be used
with mounted components, it is not possible to use
functional components with this approach.
ReactDOM leverages observables and offers an effective
method of handling the DOM.
 Both the client-side and the server-side can make use of
ReactDOM.

VIRTUAL DOM (VDOM) VS DOM

Because JavaScript and HTML cannot communicate with one
another directly, the DOM was created to address this problem. The
entire content of a webpage is converted by the browser engine into
a DOM tree, which JavaScript can understand when a page is
opened.
This tree's structure matches that of the matching HTML document
exactly. The DOM tree will display any nesting between elements
that exist in the HTML code.
By selecting the Elements tab in the developer tools panel of your
browser, you can view the DOM in action. The visuals you see will
resemble HTML code extremely closely, however instead of seeing
HTML tags, you'll be viewing items from the DOM tree.
The logical representation of a web page created and saved in a
user's browser is known as the DOM. The HTML of the website is
taken by the browser, converted into a DOM, and then painted onto
the user's screen to make the website accessible to them.
Watch DOM in action now. The illustration depicts how the DOM
interprets the HTML:
But there are some issues with the DOM. Imagine the user pressing
a button to delete something. The DOM will be cleared of that node
and every other node that depends on it.
A browser updates the entire page with the new DOM whenever it
notices a change to the old one. But is painting the entire page
necessary? It takes a lot of time to compare two DOMs and
determine what bits have changed. As a result, anytime a user
interacts with the site, it is quicker for browsers to just redraw the
entire page. The Virtual DOM can help with that.
When React produces its version of the DOM as a JavaScript object,
this is known as a virtual DOM. Every time the DOM is modified, the
library creates a copy of this JavaScript object, modifies it, and then
compares the two JavaScript objects to determine what has
changed. Only those portions of the DOM are repainted once it
notifies the browser of these changes.
Comparing modified JavaScript objects is far quicker than attempting
to compare modified DOMs. This duplicate of the DOM is known as
a Virtual DOM since it is kept in memory as a JavaScript object.
The Virtual DOM limits repainting to only modified elements and
groups, preventing irrational updates. A quick, efficient, in-memory
representation of the real DOM is called the VDOM.
Even while React prefers to deal with the VDOM, it still frequently
engages with the real DOM. Reconciliation is the procedure React
uses to update the actual DOM to match the VDOM.

LEARN STATE MANAGEMENT IN REACT

It's not as easy to manage state in React projects as using useState
or useReducer. There are many different types of states, and there
are frequently dozens of methods for handling each type. Which one
should you pick?
The several types of states that your React apps may include that
you may not be aware of will be revealed in this guide, along with
tips on how to handle them. Want to learn React from the best
source? If you use the React Bootcamp to study for 30 minutes each
day, you can master React.

The Four Kinds of React State to Manage

It's critical to be clear about the forms of state that are relevant when
discussing state in our apps.
In your React projects, you must effectively manage four different
forms of state:
1. Localstate
2. Global state
3. Server state
4. URL state

Let's examine each of these in more depth:

Local (UI) state: The data we handle in one or more components is

a local state.
The useState hook is most frequently used in React to maintain a
local state.
To track values for a form component, such as form submission,
when the form is disabled and the values of a form's inputs, for
instance, a local state would be required.
Global (UI) state: We maintain data called global states across
several components. When we need to get and update data across
our app, or at least across many components, we need to use the
global state.
Authenticated user state is a typical illustration of a global state. It is
important to obtain and modify a user's data throughout our program
if they are logged into it. Sometimes a state that we believe should
be local may end up being global.
Server state: Information that must be merged with the state of our
UI and originates from an external service. Although it is a
straightforward notion, managing server state together with all of our
local and global UI information can be challenging.
Every time you fetch or change data from an external server,
numerous state components, such as loading state and error state,
need to be maintained. Fortunately, controlling server state is now lot
simpler thanks to tools like SWR and React Query.
URL state: The pathname and query parameters are among the
data that may be found on our URLs. Although it is an important
state category, URL state is frequently overlooked.
In many cases, accessing the URL state is a requirement for many
of the key components of our application. Imagine creating a blog
without the ability to retrieve a post using its slug or ID from the URL.
These are the key categories worth concentrating on for the majority
of the apps you design, while there are likely more stateful
components that we might discover.

How to Manage Local State in React

Given the abundance of tools included in the core React library for
managing it, local state management in React may be the simplest
type of state management. The first tool you should use to handle
state in your components is useState.
Any legitimate data value, including primitive and object values, can
be accepted. Additionally, additional components can receive its
setter method as a callback function (without needing optimizations
like useCallback).

UseReducer is an additional choice that can be utilized for local or

global state. Under the hood, it shares many similarities with
useState, despite accepting a reducer in place of only an initial state.
The advantage of using useReducer over useState is that it offers a
built-in method for carrying out a variety of various state operations
with the aid of the reducer function.

How to Manage Global State in React

Things become a little more challenging whenever you try to handle
states across numerous components. Once you start "lifting state "
and passing callbacks down to change your state from components
in your application, you will eventually run out of props.
What should you do if you want to change the status of a component
virtually from anywhere in your app or software? You transform it into
a world state. But if you want to manage it, you should go with a
third-party service. Many developers choose to handle their state
using built-in React features like the Context API.
To be clear, the Context API is not a method for managing states. It
is a solution to prevent issues like prop drilling, which involves
adding numerous props to components that don't need them,
however, it is only useful for reading state rather than altering it.
Context's method of operation is the main justification for not using it
for global state management. Context's default behavior is to re-
render all child components whenever a prop's value changes.
For instance, combining useReducer and useContext is improper:

You frequently don't want all children to update in response to a

global state update since not all children may be consuming or
depending on that global state. Re-rendering should only be done if
their props or state change.
Use tried-and-true third-party libraries like Zustand, Jotai, and Recoil
to manage your global state.

How to Manage Server State in React

Managing server state can be surprisingly difficult. It initially appears
that all you need to do is fetch data and show it on the page. But
while you wait for the data, you must display a loading spinner. Then,
as they occur, mistakes must be handled and shown to the user.
What occurs in the event of a network error? If the data hasn't
changed, do I need to call my server every time a person accesses
the home page? Does every component that I wish to fetch data
from requiring the addition of useState and useEffect?
SWR and React Query, two excellent frameworks that make data
fetching in React simple, can help with this. They do more than just
provide us with a handy way to access and modify data from an API;
they also keep track of all the appropriate states and cache the data
on our behalf.
Here is an illustration of how to retrieve a user's profile via a client-
side API. The endpoint from which to request data is supplied to our
fetcher function when we execute useSWR, which then returns both
the requested data and an error condition.

SWR makes our components look nicer and manage unsuccessful

requests much easier. Additionally, you can reuse useSWR in your
custom hook across your project if you frequently conduct the same
operation.
And finally, you can provide global options to useSWR, including
your fetcher function (so you don’t need to pass it in every time) as
well as a number of times to refetch data again after an error.

This is merely a sample of the advantages offered by the SWR

library; React Query offers you at least as many advantages.
Use one or the other to control the state of your server. Your life will
become considerably simpler as a result.

How to Manage URL State in React

On a plus side, if you are utilizing a framework like [Link] or the
most recent version of React Router, the URL state is already taken
care of for you.
The majority of the time, custom hooks provide all the necessary
details about our location, history, and pathname, making it simple to
maintain the URL state.
UseHistory or useLocation can provide all the data you require if
React Router is being used.

Additionally, you can utilize the useParams hook if you have any
route parameters that you need to use, such as to collect data based
on.

Nearly anything may be accessed simply by calling useRouter if [Link] is being used.
 LEARN ABOUT REACT HOOKS
Since their initial release in October 2018, React Hooks' APIs have
offered an option for develop class-based components as well as a
different way to handle state management and lifecycle functions.
UseState, useEffect, and useContext let functional components
perform tasks that were previously only possible with classes, such
as interacting with local React state, effects, and context.
Included in the list of additional hooks are useReducer, useCallback,
useMemo, useRef, useImperativeHandle, useLayoutEffect, and
useDebugValue. The React Hooks API Reference contains
information on these APIs.

So How Do We Use Hooks?

Showing side-by-side examples of a class component that needs
access to state and lifecycle methods and another example where
we accomplish the same thing with a functional component will make
it easier to explain Hooks.
To get your hands dirty with a StackBlitz demo for each stage of our
learning, I've provided a functioning example below that is
comparable to those in the ReactJS documentation. So let's put the
conversation to rest and get to know React Hooks.
The Benefits of Using Hooks
The advantages of hooks for developers are numerous, and they will
improve the way we write components. They already assist us in
writing code that is cleaner and more succinct; it's as if we went on a
code diet, dropped a lot of weight, and now feel and look better. It
defines our jawline and makes us feel more limber. It is the only
modification that benefits us. See what React Hooks have
accomplished for others!
With all the jokes aside, Hooks does cut the fat. It simplifies and
clarifies our code, making it easier to read and understand. To
illustrate, let's compare the differences between how we used to
write something similar to this and an example using an npm-
installed Hook that accomplishes the same thing using a class
version of our canonical "document title effect."
The side-by-side picture demonstrates how the component has
shrunk a bit. With the switch to Hooks, we not only save roughly five
lines of code but also make the code easier to read and test. The
amount of code and readability could significantly decrease if
existing code is converted to Hooks, however, I would advise you to
go slowly. There's no immediate need to redo the entire source
because Hooks is backward compatible with the code it's replacing
and can coexist with it. View the StackBlitz examples for this code
here: Earlier and later.
Five Important Rules for Hooks
Let's go over some of the key guidelines we must adhere to at all times before developing
our Hook.

1. Never use a loop, condition, or nested function to call a

hook.
2. Hooks ought to be located at the top of your component.
3. Only functional React components may call Hooks.
4. A Hook must never be called from an ordinary function.
5. Hooks may make calls to other Hooks.

Hooks for State and Effects

The distinction between Class and Functional Components is
illustrated in the following screenshots:
We have an additional import of useState in the functional
component example. There is only a const now, no longer any class
syntax or constructor. Its assignment establishes the default and
offers the setCount function in addition to the count property for
changing the state. You can name the function that this setCount
corresponds to whichever you choose.
The incrementCount method of the functional component is simpler
to comprehend and uses our state value directly in place of this
.state.

Class:
The class-based component's constructor, which employs this
keyword as a reference, is the first thing that should be noted. We
have a state property inside the constructor. Utilizing setState(), we
also update the count.
 CLASS AND FUNCTIONAL COUNTER
COMPONENT EXAMPLE WITH USESTATE
The example of a standard counter component from the React
manual is used below. The sample is rather straightforward and has
a button inside of a Counter component. When clicked, it refreshes
the state and advances it by one count when rendering a document.

Call useState and useEffect as Much as You

Want
You can call useState as many times as you wish, just like with
setState. Switching to a somewhat more complex scenario, where
we want control over both the first and last names, we have a name
that is displayed on the website, and some inputs that allow the
name to be altered. To define the default, we may simply use
useState on two distinct properties, each of which has its update or
set procedure. Check out the images below:
Study the screenshot below:

LEARN ABOUT CONDITIONAL RENDERING

IN REACT
You can build distinct components in React that provide the required
behavior. Depending on the status of your application, you can only
render part of them at that point.
React's conditional rendering functions in the same way that
JavaScript's conditions do. Create items that describe the current
state using JavaScript operators like if or the conditional operator
and let React adapt the UI to match them.
React allows us to build many components that each have the
required behavior. Then, based on a few factors or the state of our
application, we can render them. In other words, a component
chooses which elements it will return based on one or more
circumstances. In the same way that JavaScript's conditions function
in React, the conditional rendering does as well. The elements that
represent the current state are created using JavaScript operators,
and React Component updates the UI to match them.
We may comprehend conditional rendering's operation from the
example case provided. Take care of a login/logout button, for
instance. The buttons for logging in and out will be independent
parts. Render the logout component to show the logout button if a
user is logged in. Render the login component to display the login
button if the user is not logged in. This circumstance is referred to as
conditional rendering in React.
In React, conditional rendering may be done in a variety of ways.
The list of them is below.
If.
ternary operator.
logical && operator.
switch case operator.
Conditional Rendering with enums.
1. if
The render method in React is the most straightforward place to
implement conditional rendering. It is limited to the component's
entire block. The element to be rendered will be returned IF the
condition is true. It is seen from the example below.

2. Logical && operator

The condition is checked with this operator. React will disregard and
skip the condition if it is false and return the element immediately
following && if the condition is true.
Syntax

condition &&
// whatever is written after && will be a part of the output.
}

The example below helps us comprehend how this idea behaves.

The alert message won't appear if you run the code below because
the condition isn't matching.
 1. ('javatpoint' == 'JavaTpoint') && alert('This alert will never b
e shown!').
The alert message will appear if you run the code below because the
criteria have been satisfied.
2. (10 > 5) && alert('This alert will be shown!').
See the screenshot below.

As you can see from the result above, the alert message is
successfully displayed on the screen when the condition (10 > 5)
evaluates to true.
3. Ternary Operator
When two blocks alternate under a specific condition, the ternary
operator is utilized. Your if-else sentence is more succinct using this
operator. It functions as a shorthand for the if statement and requires
three operands.
The Syntax

condition? True or False

If the predicate holds, statement 1 will be produced. False will be
produced otherwise. See the screenshot below.

4. Switch case operator

Multiple conditional renderings are occasionally feasible. Conditional
rendering is used in the switch situation based on a different state.
See the screenshot below.

CONDITIONAL RENDERING WITH ENUMS

The use of an enum is a fantastic method for many conditional
renderings. Compared to the switch case operator, it is easier to
read. For mapping between various states, it is ideal. Additionally, it
is ideal for mapping under several conditions. It is seen from the
example below. See the screenshot below.
Conditional Rendering Example:
In the below example, we have created a stateful component
called App which maintains the login control. Here, we create three
components representing the Logout, log in, and Message
component. The stateful component App will render
either or depending on its current state.
Then execute the code and you will get the result below:
 PREVENTING COMPONENT FORM
RENDERING
Even when another component is rendered a component, it is
occasionally possible for the component to conceal itself. We will
need to return null in place of the render result of the component to
accomplish this (prevent rendering). The following illustration can
help you understand:
In this illustration, the value of the prop named displayMessage
determines how the is presented. The component does not render if
the prop value is false.

UNDERSTAND THE DIFFERENCE BETWEEN

CLASS AND FUNCTIONAL COMPONENTS
The fundamental building blocks of your React application are
components. They allow you to divide user interfaces into
manageable units that may be utilized and handled separately.
The class component and the functional component are the two
ways to construct components in React. The distinctions between
class and functional components will be discussed in this post along
with tips on how to select between them. This book clarifies some of
the ambiguity surrounding these two categories of React
components for developers and anyone unfamiliar with the
framework.

DIFFERENCES BETWEEN CLASS

COMPONENT AND FUNCTIONAL
COMPONENT
Class Component
The component class extends the component class of the React
library and is a standard ES6 class. It is a stateful/container
component. Because it manages how the state changes and how
the component logic is implemented, it is known as a stateful
component. In addition, they have access to each stage of the React
lifecycle method.
Before the introduction of React Hooks, the class component was
the only way to build a dynamic, reusable component because it
allowed us access to all React features and lifecycle methods.
Let's build a straightforward Counter component that enables users
to increase or decrease a number to explain how to use the class
component. In our example below, we will also demonstrate some of
the lifecycle methods.
In the aforementioned component example, since we don't want the
count to begin at 0, we use the constructor to specify the initial state
and the lifecycle method componentDidMount() to set the state from
0 to 1 when the component is mounted.
If you use the example in real-time right now, you'll see that the
counts 0 and 1 are presented right after one another. When the
component is first shown, it will quickly display the initial state's count
of 0, but once the component is mounted, the componentDidMount
function will execute to set a new count state of 1.
When the user hits the increment or decrement button, we also add
two functionality to the component (the handleIncrement() and
handleDecrement() functions) to increment and decrement the
counter, respectively.
As you can see, creating this dynamic component required more
steps than creating the class-based component. The class was
developed with a render method and a constructor. With this, we
define the starting state. a constructor state statement. We apply
this. When a component mounts, the state is immediately updated
using setState() and lifecycle methods like componentDidMount.
Now that we can distinguish between them, let's change the class
component into a functional component.

Functional Component
JavaScript functions are only functional components. Because they
only ever accepted and returned data to be rendered to the DOM,
they were commonly known as stateless or presentational
components before the introduction of hooks in React 16.8.
Previously, the only way to access additional React capabilities like
state and React lifecycle functions was through the class
component. Hooks, on the other hand, allow you to incorporate state
and other React capabilities as well as, and this is the most crucial,
write your complete UI using functional components.
Composing components in React is made simpler using hooks. The
state (useState) and effect (useEffect) hooks in React are the two
that are most frequently used. The example below will show you how
to use both. If React is new to you, you can find out more about
React Hooks here.
Let's reimplement the previous class Counter component as a
functional component to illustrate the distinction between functional
and class components.
Let's look at how functional components accomplish this compared
to the class component since you now know what this Counter
component performs from our prior discussion.
First off, since it's just a function and not a class, you don't need a
constructor or render methods. UseState enables you to add states
to functional components by integrating all the React Library's
essential capabilities that were previously exclusive to the class
component. The initial state of the count was set to 0 as we did
above by importing useState from React. The current state and a
function that updates it are the two values that the useState hook will
return. See how we implement states in class components with this
by comparing it to the code section below. as well as this. setState.
Const [count, setCount] = useState(0);
The setCount function, which updates the state count, and the
current count are the two values that the state hook will return.
Having states implemented in a functional component is quite
straightforward, can you see that?
The React lifecycle methods, such as componentDidMount and
componentWillUnmount, should be recognizable to you if you have
previously worked with the class component. Functional components
did not previously have this capability, but with the useEffect hook,
you can now implement React lifecycle methods. You can carry out
side effects in functional components with the effect hook. Use Effect
can be compared to a combination of componentDidMount,
componentDidUpdate, and componentWillUnmount.
From the functional component example above, we utilized the
useEffect hook to implement the lifecycle method like
componentDidMount in the class component:
useEffect(() => setCount((currentCount) => currentCount + 1), []);

You can alert React that your component needs to take some action
after rendering by using this effect hook. After completing the DOM
modifications, React will keep track of the function you gave and call
it later.
As a result, in the example above, we first establish the count state
variable and then instruct React to use an effect. The useEffect hook
is supplied with a function. We updated the state count inside of the
function we gave as our effect. You'll see that the counts 0 and 1 are
presented in close succession. The component's initial render
displays a count of 0 from the initial state. The useEffect hook will
then be activated following component mounting to change the new
count state to 1.
Additionally, if you look at the useEffect function, you will see that a
second argument is an empty array. This is done to ensure that the
effect hook only activates during the mounting and unmounting of the
component. If you try an experiment without the second argument,
you will encounter an infinite loop where the count keeps going up by
one. This is because the effect hook always executes following a
state change. The effect hook will keep running to raise the count
because it causes another state change.
 CHAPTER FIFTEEN

DATABASE FUNDAMENTALS
WHAT IS A DATABASE?
A database is a planned grouping of material that has been arranged
and is often kept electronically in a computer system. A database
management system often oversees a database (DBMS). The term
"database system," which is frequently abbreviated to "database,"
refers to the combination of the data, the DBMS, and the
applications that are connected to it.
To facilitate processing and data querying, the most popular types of
databases currently in use typically model their data as rows and
columns in a set of tables. The data may then be handled, updated,
regulated, and structured with ease. For writing and querying data,
most databases employ structured query language (SQL).

WHAT IS DATABASE SOFTWARE?

Database software is used to build, edit, and maintain database files
and records, making it simpler to create, enter, edit, update, and
report on files and records. Data storage, backup, reporting, multi-
access control, and security are other functions handled by the
software. Strong database security is crucial nowadays since data
theft is becoming increasingly common. Database management
systems are another name for database software (DBMS).
By enabling users to store data in an organized format and
subsequently access it, database software makes data
administration easier. In most situations, it has a graphical user
interface to aid in the creation and management of the data, while
users can occasionally build their databases using database
software.
WHAT IS STRUCTURED QUERY LANGUAGE
(SQL)?
Almost all relational databases employ SQL, a programming
language, to query, manage, and define data as well as to provide
access control. The SQL ANSI standard was first developed at IBM
in the 1970s, with Oracle playing a significant role in its
development. Since then, SQL has inspired numerous expansions
from businesses including IBM, Oracle, and Microsoft. Despite the
continued popularity of SQL, new programming languages are
starting to emerge.

WHAT IS A DATABASE MANAGEMENT

SYSTEM (DBMS)?
A database management system, which is a comprehensive
database software application, is often necessary (DBMS). A DBMS
acts as a conduit between the database and the applications that will
use it, enabling users to access, modify, and control how the data is
arranged and optimized. A DBMS also makes it easier to monitor
and manage databases, enabling several administrative tasks like
performance tweaking, backup, and recovery.
Popular database management systems (DBMSs) include dBASE,
MySQL, Microsoft Access, Microsoft SQL Server, FileMaker Pro,
and Microsoft Access.

WHAT IS A MYSQL DATABASE?

Based on SQL, MySQL is an open-source relational database
management system. It can operate on any platform and was
created and optimized for online applications. With the advent of the
internet, new and diverse requirements arose, and MySQL quickly
emerged as the preferred platform for web designers and web-based
programs. For e-commerce companies that need to handle
numerous money transfers, MySQL is a popular option because it is
built to handle millions of queries and thousands of transactions. On-
demand flexibility is the primary feature of MySQL.
Some of the most popular websites and web-based apps in the
world, including Airbnb, Uber, LinkedIn, Facebook, Twitter, and
YouTube, are powered by the MySQL database management
system.

TYPES OF DATABASES
There are numerous varieties of databases. The ideal database for a
given company will depend on how it plans to use the data.
1. Relational databases
In the 1980s, relational databases rose to prominence. A relational
database's items are arranged as a collection of tables with rows
and columns. The most effective and adaptable method of gaining
access to organized data is through relational database
technology.
2. Object-oriented databases
Similar to object-oriented programming, information is represented
as objects in an object-oriented database.
3. Distributed databases
Two or more files spread over several separate sites make up a
distributed database. The database may be spread across many
networks, housed on numerous computers, or situated in the
same physical place.
4. Data warehouses
A data warehouse is a sort of database created primarily for quick
query and analysis. It serves as a central store for data.
5. NoSQL databases
Unstructured and semi-structured data can be stored and
processed using a NoSQL database (in contrast to a relational
database, which defines how all data inserted into the database
must be composed). With the proliferation and complexity of web
applications, NoSQL databases gained popularity.
6. Graph databases
A graph database stores data in terms of entities and the
relationships between entities.
7. OLTP databases
An OLTP database is a quick, analytical database made for lots of
transactions carried out by several users.
These are just a few of the many different kinds of databases that
are now in use. Other, less popular databases are made for
incredibly precise financial, scientific, or other purposes. Aside from
the many database formats, major advancements like the cloud and
automation as well as changes in technology development
methodologies are driving databases in whole new directions.
Several of the most recent databases are.
1. Open source databases
An open source database system is one whose source code is
open source; such databases could be SQL or NoSQL databases.
2. Cloud databases
Any collection of data, whether organized or unstructured, that is
housed on a private, public, or hybrid cloud computing platform is
referred to as a cloud database. Traditional and database as a
service are the two different sorts of cloud database models
(DBaaS). With DBaaS, a service provider handles maintenance
and administrative duties.
3. Multimodel database
Multiple types of database models are combined into a single,
integrated back end by multimodel databases. They can therefore
handle different data formats.
 4. Document/JSON database
Document databases are a contemporary method of storing data
in JSON format as opposed to rows and columns. These
databases are made for storing, retrieving, and managing
document-oriented information.
5. Self-driving databases
Self-driving databases also referred to as autonomous databases,
are the newest and most innovative type of database. They are
cloud-based and use machine learning to automate routine
management tasks that were previously handled by database
administrators, such as database tuning, security, backups, and
updates.

DATA RELATIONSHIPS
To obtain data, join statements are used to construct relationships
between tables. When two relational database tables have a foreign
key that refers to the primary key of the other table, this is referred to
as a relationship in the context of databases. Relational databases
can divide and store data in several tables while linking dissimilar
data items thanks to relationships.
In a DBMS, a relationship primarily refers to the connection between
two or more data sets. For Relational Database Management
Systems, this is true. The datasets linked to it might then be referred
to as the Primary Key, while one dataset could be referred to as the
Foreign key. Multiple Foreign and Primary keys may be connected.
Relationships enable data sharing and independent table storage for
the datasets. They also assist in connecting various types of data.
The following segment discusses the three different forms of
relationships.

Types of Relationships in DBMS

Three types of relationships can be found in DBMS:
 One to One.
One to Many.
Many to Many.
Take a look at what each of them includes.

1. One to One
A single record in Table A and a single record in Table B are related,
according to this relationship. Also the opposite. The question that
may now become irrelevant is why not combine both sets of data
into a single table? There could be a variety of causes. Security is
usually a key factor.
Let's examine an illustration: Our name, age, email, address, phone
number, and password information must be recorded in a table that
we must establish. Since all of this information is confidential, we do
not want to combine it into a single table. So that only a select few
would have access to it, we build a separate table for the password
with distinct access control to increase the security around it.
2. One to Many
The most typical kind of relationship in a database management
system (DBMS) is this kind. This requires that one piece of data in
Table A link to numerous pieces of data in Table B. A single piece of
data in Table B, however, will be linked to a single piece of data in
Table A. A bank account is a useful illustration of such a relationship.
One person may have several bank accounts, but each account will
only be associated with one particular owner or account holder
(provided we are not talking about a joint bank account).
3. Many to Many
Think about tables A and B. All of the data in Table B are connected
to every piece of data in Table A, and vice versa. Linking a student
table to the courses table is a fantastic example. All of the student
names are listed in Table A, and all of the course names are shown
in Table B. While a course may have more than one student, a single
student may enroll in multiple courses. Consequently, it develops
many-to-many linkages.
Database management systems like MySql, Microsoft Access, SQL
Server, and Oracle are now widely available. It becomes essential
for them to communicate with one another because there are so
many of them. As a result, the majority of database management
systems include an Open Database Connectivity (ODBC) driver. This
facilitates the integration of one database with the other databases
and synchronizes the information flow. An illustration of this would be
the SQL statements: SELECT which selects the specified data and
INSERT which inserts the selected data into the specified table.

What is the Importance of Relationships in

DBMS
The following discusses the importance of Relationships in DBMS.
In DBMS, a relationship is a crucial cog in the machine.
The ability of the database to produce pertinent output aids
in streamlining the overall procedure. Let's examine a few
benefits of relationships in a database management
system (DBMS).
Data redundancy is minimized as a result of relationships.
The table structure will undergo finer adjustments when
linkages are created. This means that as and when more
data is added, perfection will be attained. This results in a
nearly faultless final table structure that is free of
unimportant data.
Building strong relationships also contributes to efficient
workflow. There are a lot of queries that will frequently
require the command to pull information from many tables.
Such an endeavor will fail in the absence of a relationship,
and the query will return null.
A clearly defined relationship improves the integrity of the
table structure and increases the effectiveness of the
database management system. Making smarter decisions
is the result of this. The freedom it gives consumers when
 requesting data also stands out as a benefit. Complex
queries can be executed with ease. The likelihood of
perfection increases as database maturity increases.
Multiple user collaboration also becomes simple.

DESIGNING A DATA MODEL

An abstract description of how your program stores, connect to,
arranges, and maintains data is provided by a data model. This
comprises the values you require, their origins, and their
organizational structures.
In two aspects, this is different from a database schema:
1. The schema normally only relates to one source, whereas
your data model includes how data is organized across all
sources.
2. Rather than focusing on the specifics of each source, the
data model is more interested in how data is organized
abstractly.
Building a framework for your application's handling and processing
of data is the objective here. The development of your app's
automation procedures and user interfaces will then start with this as
a foundation.

Why do you need a data model?

Why you need to explicitly construct a data model could be a better
query. A data model exists in every program. The only thing that
matters is whether or not you gave careful consideration to
developing the most efficient one for your requirements. This affects
several aspects of your program, including security, functionality,
performance, scalability, and usability.
Therefore, it is advantageous to create a solid data model from the
start. This is particularly valid when obtaining data from resources
that are part of the same application. For instance, coupled with an
internal database, some of the information you require might be
present in external sources.
Choosing the data you'll need and where to get it is a big element of
creating a data model. You may also guarantee compatibility
between various sources, optimal performance, scalability, and
effective security by putting in place an efficient data model.

How to Create a Data Model for your App

Project
The best outcomes can be obtained by adhering to a replicable
foundation. Here are the precise steps you can take to create the
ideal data model for your upcoming app project, as well as all the
important factors you'll need to keep in mind along the process.
1. Gather business requirements
Gathering business requirements for how your application will
process data is the first stage. Right now, we don't need to worry
about precise variables; needs can be pretty general.
Gathering requirements essentially entails determining what your
app will do and a general overview of the data you'll need to
accomplish this.
To build an overview of the functional requirements for the app, it is
necessary to interact with a variety of business stakeholders,
including end users, decision-makers, clients, and technical
colleagues.
For instance, if we were developing an app for employee timesheets,
our top priorities might be as follows:
Employees ought to be able to track their time against
various projects.
Time utilization should be trackable for project owners.
Timesheet submissions should be subject to review and
approval by project owners.
 The program ought to provide billing and CRM
connections.
These are only a few exemplary instances of the kinds of specifications that we might
choose to adopt.

Data model timesheet form example

2. Define business processes

We may next begin to translate our requirements into more detailed
processes. To achieve this, specify what actions the program should
take in response to various events and triggers. This covers both
system operations and user interaction responses.
Once more, we want to approach this abstractly without considering
any particular factors. This procedure is sometimes referred to as
building a logical data model. We only need to describe our ideal
processes in plain, business-speak.
For our timesheet example, we might describe the following
business processes:
The program must account for labor costs when timesheet
submissions are made.
When an employee submits a pertinent timesheet, project
supervisors ought to be informed.
Project managers should be able to see the current status
of each project, including the cost and time spent on it.
 Staff members shouldn't be permitted to modify anyone
else's submissions. Any pertinent submissions should be
editable by project managers.
Based on project timesheets, the system should interface
with external platforms to create and send invoices.
Once more, these are but a few illustrations of business standards.
The purpose of logical modeling is to detail the many actions users
can take, our application's responses to those actions, and any
additional background operations the application might carry out.
After that, we may begin preparing the data we'll need to accomplish
this.
3. Create a conceptual data model
The creation of a conceptual data model is the following phase. This
is a more organized strategy for gathering the data we'll require to
carry out the procedures we determined in the previous stage. We'll
continue to use everyday business terms for the time being. Later
on, more exact technical information appears.
Figuring out how various types of data will be arranged to achieve
our objectives is the main goal of developing a conceptual model.
Choosing the broad entities that will make up our data is the initial
step in this process. Then, we may list the details we need to
understand about each of these, and we can begin creating broad
connections between them.
As a result, the following entities would be required in our example
timesheets app:
Employees.
Projects.
Project owners.
Timesheets.
Users.
You could add more entities based on your particular industry. For
instance, certain tasks within projects or additional resources you'll
need to carry out.
The kind of data we'll keep for each entity will next be briefly
outlined. For instance, the qualifications, pay, and hourly rates of
your employee, or the specifications, spending limit, and objectives
of each project.
Finally, a summary of the relationships between various elements
should be included in your conceptual model. For instance, each
project has a single owner, and each person is permitted to submit
several timesheets.
Relational Data Model

4. Define entities and attributes

After identifying our entities, we can begin to define them in further
detail. The most typical method for accomplishing this is to convert
each entity into a separate database table. Here, the rows will stand
in for each unique instance of our entity, such as a particular worker
or project.
For each of our entities, each column will represent a certain
property that we want to store. Therefore, we must choose:
The particular variables we need to be aware of.
 The formatting of them.
The name we'll give them.
As well as any guidelines we'll provide them.
Your schema will include any new databases you determine you
need to build for your application. You must consider this while
selecting your sources if you plan to rely on existing data.
Spend some time learning more about what a database schema is.
table in a data model

5. Identify data sources

For your app to operate properly, determining where values will
come from and how they should be kept takes up a significant
portion of your data model. This entails identifying the data sources
for your app.
This may consist of:

Internal databases.
External databases.
APIs and web services.
Flat files.
Other existing business assets.
Keep in mind that these are the primary sources of currently
available data that we may use. We can also send queries from our
completed app to them to add or edit values within them.
External data connectors

Choosing whether to use already-existing data sources or develop

completely new ones is one of the primary tasks at hand. Of course,
we may combine the two to create our data model. There are
frequently other solutions available to get comparable results.
Consider the various ways we might organize the data sources for
our employee timesheet. The most straightforward choice would be
to create a special internal database for the entities we've already
recognized. Given that we would have to build our database schema
from scratch, this would provide us the most control over the
organization and storage of our attributes and entities.
However, this would also make platform integration slightly more
challenging. We could alternatively use an API or a direct connection
to a pre-existing, external database.
That is if an appropriate database is available. This saves us the
trouble of making our own. Additionally, it is simple to interface with
any other tools that have already performed the same data queries.
The drawback is that the schemas of current databases may not be
enough for our purposes. In this situation, we would have to alter
query outputs to format the data according to our specifications.
Often, we’ll need to do a combination of the two. So, in our timesheet
app, we might pull employee details and project information from
external sources, but create an internal database to store user inputs
for timesheet submissions.
6. Establish relationships between entities
We briefly discussed how to specify relationships between various
elements in our data model earlier. We can create more precise
relationships between our entities now that we have a more solid,
technical understanding of them.
Here, there are a few distinct things to stay on top of. First and
foremost, it's crucial to pick the appropriate form of relationship for
each group of entities. Here, there are a few possibilities:
One-to-one relationships.
Many-to-one relationships.
Many-to-many relationships.
Additionally, we must choose the columns in each table around
which the relationships should be built. Your DBMS will determine
the specifics in this case.
For instance, you'll need to specify primary keys for each entry in a
given table within a single SQL database. These are distinct values
that other tables use to identify related rows. A foreign key is created
when the main key occurs in a linked table. You must take additional
measures to develop linkages if your data model spans numerous
databases. Creating an internal database, for instance, would enable
you to search for and store entities from many sources.
7. Physical modeling
Next, a physical data model needs to be built. This covers more
particular information like how you'll organize any internal databases
and link to other data sources. As a result, carrying out the preceding
actions entails producing a physical model.
This entails establishing exact names for all of your characteristics,
as well as their kinds, formats, integrity constraints, and any other
rules regulating them if you're developing your database design for
your app.
We must consider how to link external data sources to our app when
working with them. Manually pointing to the source's name, location,
authentication credentials, and other details in our app's code is one
approach to accomplish this.
We can also employ specialized data connectors with low-code
technologies and other more recent platforms for building apps.
These are specialized interfaces for connecting to particular
categories of external data. You can just enter the relevant data in a
GUI rather than manually writing the necessary code. You can then
manually write the queries you require or import all of the ones the
source has to provide, depending on the tool and data source.
8. Normalization and ensuring the integrity of data
Creating a data model should have the main objective of ensuring
the long-term validity, dependability, and integrity of the data used in
your program. Avoiding repetition, inconsistencies in values,
formatting problems, and other concerns is part of this.
Data normalization is one approach to accomplishing this.
A topic in and of itself is normalization. This is essentially a collection
of tactics you can employ when maintaining data to avoid repetition
and abnormalities.
You have access to a wide variety of procedures here. The most
frequent one has to do with the initial structure of your data. Creating
entities that each address a particular theme or idea is the precise
objective. This will already be included in your data model if you've
heeded our previous advice.
The general idea is that you should think about creating a separate
entity for a set of values whenever they could apply to more than one
row in a table and utilizing relationships to connect it to the original
table. This enhances performance while also reducing the amount of
storage space required.
For instance, we might put department name, department phone,
and department head properties next to each employee row in a
personnel directory. This would necessitate numerous instances of
identical data being stored in the employee details table.
Additionally, it would be overly challenging to modify or list all of the
company's departments. Therefore, it would be preferable to
establish a table specifically for departments and link the pertinent
row to each employee's entry. This reduces the strain on your
servers and makes querying and maintenance easier.
9. Maintaining your data model
The problem of sustaining your data model persists even after it has
been put into use. This presents several difficulties, particularly when
scaling your application. For instance, when it comes to expanding
your data set and giving the program itself new features. You must
be able to adapt to change without compromising your data model.
This can entail adding new objects, changing those that already
exist, altering relationships, or changing particular features.
The idea is to make sure that your data model is simple to modify
when necessary. For instance, if new functionality, entities,
characteristics, processes, or relationships are required.
To put it another way, you must be able to make the necessary
modifications without endangering other aspects of your data. For
instance, due to a transitive relationship, a modification to one
characteristic may unintentionally affect another.
To integrate support for a new third-party tool, for instance, you might
need to change the format of a specific attribute. Any other parts of
your data model that rely on this property run the risk of being
broken if you proceed in this manner.
It's essential to take action to stop this.
The difficulty of having enough server capacity to support growth,
both in terms of storage space and user counts, goes beyond this.
When this is properly planned for at the modeling stage, it helps to
avoid the requirement for data migrations later.

RELATIONAL DATABASES
What is a relational database?
A relational database, sometimes known as a SQL database, stores
data in tables and makes related data easy to access. Each row in a
relational database table represents a record with a special
identification number called a key, and each column contains data
properties.
The relational model, an easy-to-understand method of representing
data, is the foundation upon which the tables in a relational database
are built. Let's examine some of the relational data model's core
ideas concerning a sample table. First Name, Student ID, and
Student Age are the attributes of the relation Student.
Student:

First_Name Student_ID Student_Age

Elliot 17 20

Sarah 54 18
 Mike 23 19

Columns in the table's attributes column. A relationship is

defined through attributes, such as First Name or Student
ID.
Relation schema: Displays the relation's name along with
its characteristics. One relation schema for students is
Student (First Name, Student ID, Student Age).
A single row of a table with only one record is referred to
as a "tuple." Elliot 17 and 20 is one of three tuples in the
aforementioned table.
Degree: The number of related qualities. This relationship
has three.
The number of tuples in the relation, or carneality. This
relationship has three.

RELATIONAL DATABASE MANAGEMENT

SYSTEM
The program used to store, maintain, and retrieve data in a relational
database is known as a relational database management system
(RDBMS). This software is an excellent technique to maintain
connected data points securely and reliably.
The most well-liked open-source relational database management
system is MySQL (RDBMS). Other well-known relational database
applications include:
MongoDB
PostgreSQL
Microsoft SQL Server
Oracle Database
Amazon Relational Database Service (RDS)
IBM Informix
 NON-RELATIONAL DATABASES
Data is stored in a non-tabular fashion in non-relational databases,
often known as NoSQL databases. To access and handle various
sorts of data, they employ a wide range of distinct data models.
Since NoSQL databases are incredibly responsive, scalable, and
adaptable, they are excellent for applications with big data
collections.
NoSQL databases offer highly functional data types and APIs that
are created specifically for the appropriate data models they support
and are enhanced for greater performance.
There are four main types of NoSQL databases:
Key-value stores.
Graph databases.
Column-oriented.
Document store.
NB: Because NoSQL databases can be used with or without SQL,
they represent more than just SQL.

ADVANTAGES OF RELATIONAL DATABASES

Using the relational database paradigm for data management and
storage has several benefits, including:
Flexibility: Data can be easily expanded, updated, and
deleted as needed.
Atomicity: Atomic transactions guarantee that you must
either commit to the complete transaction or not have any
at all. The relational database returns to its former state if a
connection is lost.
Durability: Even in the event of a system crash, the
modifications made to the database will endure indefinitely.
Consistency: Only data that complies with data validation
rules are permitted to be written into the database.
 RELATIONAL DATABASE USES
Relational databases can be used for a variety of purposes,
including:
Application development.
Data warehousing.
Data maintenance in applications.
Storing structured data.
Logging applications.

ALTERNATIVE DATABASES
The following are a few alternative databases you might use while
building your website.
InterBase: InterBase is a relational database with complete
functionality that can be integrated into programs running on
Android, iOS, Windows, OS X, Linux, and Solaris. It is also scalable,
lightweight, embeddable, and encryption-capable.

MICROSOFT SQL
Microsoft created the RDBMS called SQL Server. The standard SQL
(Structured Query Language) language is supported by SQL Server.
However, T-SQL is the SQL Server's version of the SQL language
(Transact-SQL).

DATABASE PERFORMANCE ANALYZER

Database administrators may monitor and analyze performance with
SolarWinds Database Performance Analyzer. Additionally, it
identifies bottleneck causes and lowers the overall cost of database
operations.

PostgreSQL
An object-relational database management system called
PostgreSQL is utilized for complex jobs. Its license has been
approved by the Open Source Initiative. This C-coded database is
compatible with the Windows, Linux, Mac, and BSD operating
systems.

MongoDB
Document-oriented, open-source MongoDB is a platform-
independent NoSQL database. For operations, JSON forms are
used.

MariaDB
MariaDB is another database that makes the top 20 list of MySQL
alternatives. It is a MySQL-compatible, open-source database that is
rapidly expanding. There are both free and paid versions. A variety
of plugins are available for MariaDB to add additional features. The
GNU General Public License governs its use.

SQLite
Unlike client-server databases, SQLite is a relational database
management system. PostgreSQL and SQLite have very similar
syntax.

ArangoDB
ArangoDB is a multi-model, open-source database system that is
made available for free by ArangoDB GmbH. AQL, a declarative
query language, is the query language used by ArangoDB.

Oracle Database
Oracle Corporation sells Oracle Database, a relational database
management system with multiple model options. For transaction-
based activities, it is frequently employed. Below are some of the
databases under this database.
RethinkDB: RethinkDB is a database that is distributed,
free, open source, and focused on documents. It stores
 data as JSON documents and is made to enable real-time
modifications.
OrientDB: OrientDB is a Java-based, open-source, multi-
model, NoSQL database management system. It is
licensed by the Apache 2 license.
Redis: The Redis server is the next option on our list of the
20 Best MySQL Alternatives for Databases (Pros and
Cons). It is a multi-model, in-memory database that
supports a schema-less design and offers a wealth of
functionality.

SQL Server
SQL Server is the next option on the top 20 list of databases that can
replace MySQL. It is a server for RDBMSs (Relational Database
management systems) that Microsoft has developed. Some
businesses that use this database include Microsoft, Search
Overflow, and RBC Intuit. Because it is not open-source software,
SQL Server is written in C and C++ and has a commercial license.

ENTITY RELATIONSHIP MODELLING (ERM)

AND OBJECT RELATIONAL MAPPING (ORM)
A theoretical and conceptual method of illustrating data relationships
in software development is called an entity-relationship model
(ERM). A relational database can be designed with the aid of the
database modeling technique known as ERM, which creates an
abstract diagram or visual representation of a system's data. Entity-
relationship diagrams, also referred to as ER diagrams or ERDs, are
these diagrams.
A database's conceptual design, which contains its entities and
relationships, is known as an ER model (ERM). An ER model and an
ER diagram, which is a visual depiction of the ERM, are essentially
the same thing. ERDs may be created at any one of three stages of
the design process.
The first step is a conceptual design, which establishes the project's
parameters and identifies the data items. It also provides a
preliminary look at the database's relationship structure. The
conceptual ERD serves as the basis for the project's logical design
phase.
Designing logically is the second. A logical ERD has more
information about the data elements and their relationships than a
conceptual ERD. A logical design ERD is unaffected by the
technology on which it might be implemented, nonetheless.
The final step is physical design, which shows a database's
components and traits to the technology it will be used with. Usually,
this involves specifying entity keys, attribute properties, finite
relationships, and foreign keys.
A computational model called the entity-relationship model (ERM)
explains the knowledge structure of a challenging area in terms of
links and systems. The outcome of modeling using the ERM is
graphically represented as an object interaction diagram (ERD). An
ERD thus expresses the computational form of a problem domain
that is being modeled. ERDs are frequently used in database
architecture and systems analysis to capture device or problem
domain requirements. In particular, the ERD helps the archive
builder define the information that is interpreted and used in an
archive for data modeling. ERDs are quickly transformed into
relational database schemas.
An association representative, for instance, is a substance. If Peter
is a Microsoft developer (an employee), he might have credits
(properties like name, age, weight, height, and so on. They have
respects that apply to them.
For each worth, qualities can be provided. They are often made to
mean a single trait. It is also possible for properties with certain
attributes, though. First of all, there is just one definition for Peter's
age. But his "telephone numbers" as property can have some
advantages. The collaboration of substances is possible. Consider
the simplest model first. Accept that computers are provided to each
Microsoft programmer. Peter's PC is still a physical object. That PC
is used by Dwindle, and Peter also uses one. In a sense, Peter and
his PC have a mutual connection.
In entity relationship modeling, we model elements, their properties,
and linkages between substances.

ENHANCED ENTITY RELATIONSHIP (EER)

MODEL
The elevated level data model known as the Improved Entity
Relationship (EER) model provides improvements to the original
Entity Relationship (ER) model. More complex plans are supported
by EER Models. In response to displaying considerably complicated
databases, EER Modeling increased.
UML documentation is used by EER. Unified Modeling Language, or
UML, is an extremely useful modeling language that is used to set
up object-arranged systems. Class traces are used to address
components. Associations are thought of as links between elements.
An ER graph utilizing UML documentation is displayed in the layout
below.

What is an ORM?
Without having to write SQL queries, an object-relational mapper
creates an object-oriented layer between relational databases and
object-oriented programming languages. By standardizing interfaces,
development time is shortened and boilerplate is reduced.
The format of object-oriented programming is difficult to comprehend
and grasp since it contains numerous states and codes. To aid
developers in comprehending the underlying database structure,
ORMs translate this data and produce a structured map. The
mapping explains the connections between objects and various
tables. In response to modifications the application makes to the
data object, ORMs use this information to translate data between
tables and generate the SQL code for a relational database to insert,
update, create, and delete data. You won't need to create any more
low-level code because the ORM mapping will take care of the
application's data requirements once it is written.

How does ORM work?

High levels of abstraction are used to develop an object-oriented
program model by ORMs. In other words, it generates a level of logic
without relying on the specifics of the code's foundation. Without
knowing the data's structure, mapping explains the connection
between an object and the data. The SQL code required to manage
data activities can then be connected to the application via the
model. The developer can save a ton of time by not having to
completely rewrite this type of "plumbing" code.

Types of ORMs
Data-mapper patterns and active record patterns are two alternative
methodologies used by ORMs.
1. Active record pattern
This method maps data to the code's object-based object structure.
In your computer code, you manage data using classes and
structures. This approach has issues since it is challenging to
remove the database and migrate it to another application because
the database structure is closely tied to the code.
2. Data-mapper patterns
The data-mapper pattern makes an effort to disconnect the objects'
business logic from the database. Using the same programming
logic while changing databases may be made simpler by this
separation.
 CHAPTER SIXTEEN

SQL DATABASES
WORKING WITH DATABASE SCHEMAS
You must consider how the front end will communicate with the
backend when building an application's backend. However, the way
your database is built and designed is more crucial. Your database
structure will be built based on the connections your data creates.
The storage of your data in a database is represented by an abstract
design known as a database schema. A certain database, explains
both how the data is organized and the connections between the
tables. To know what elements are required and how they will
connect, developers create a database schema in advance.
In this manual, we will discover what a database schema is and how
it functions. So that you may learn how to configure a database
schema on your own, we'll walk you through a few typical instances.

What are database schemas?

The design of your data, the model it will follow, and how the
associations formed will assist us as we develop a schema are all
things you need to consider when choosing your database.
A database schema is an architecture or design for how our data will
be organized. It doesn't contain data; rather, it defines how the data
may be organized and related to other tables or models. An instance
of the database schema will be a record in our database. It will have
every attribute listed in the schema.
Consider a database schema to be a specific kind of data structure.
It symbolizes the structure and organization of the data of an
organization.
A database schema will include:
All crucial or pertinent information.
Uniform formatting throughout all data entries.
Unique keys for all entries and database objects.
A table's columns each have a name and a data type.
The scope of your project will determine the size and complexity of
your database structure. Before writing any code, programmers can
properly arrange the database and its relationships thanks to the
visible nature of a database schema. Data modeling is the process
of organizing a database design.
Designing relational database management systems (RDBMS) or
database management systems (DBMS) requires the use of
schemas (RDBMS). A DBMS is a piece of software that adheres to
the ACID concept that saves and retrieves user data securely.
The function Database Administrator is frequently responsible for
database design and DBMS tasks in many businesses (DBA). DBAs
are in charge of making sure database users and data analysts have
simple access to information. They collaborate with management
teams to safely plan the organization's database.
(NB: Some popular DBMS systems are MySQL, Oracle,
PostgreSQL, Microsoft Access, MariaDB, and dBASE, amongst
others.)

Database schema types

Logical and physical database schema types are the two basic types
that specify the various components of the schema.
1. Logical
A logical database schema shows the data's table-based
organization. It also explains the connections between properties
from other tables. The logical architecture and restrictions are
defined by several schemas using various syntaxes.
A DBMS's integrity constraints are a collection of guidelines for
ensuring high-quality data insertion and updating. We employ
technologies to depict relationships between different parts of your
data to build a logical database structure. Entity-Relationship
Modeling is what this is (ER Modeling). It details the connections
between the various entity types.
The ER Model schema diagram that follows illustrates the logical
flow of a straightforward commerce application. It provides product
explanations to customers who purchase products.
The IDs in each of the top three circles are the primary key for the
object. The entry in a document or table is identified by this id, which
is specific to it. The foreign key, or FK, is shown in the diagram. The
relationship between the tables is connected by this.
The table's primary key identifies each record.
Foreign keys serve as the primary keys for other tables.
There are many different ways to design entity-relationship models,
and there are online tools available to help with creating graphs,
tables, and even the SQL to generate your database from your
existing ER Model. This will support the creation of your database
schema's physical representation.
2. Physical
The physical database structure shows how information is kept on
disk. In other words, it is the code that will be used to build the
database's structure. This will appear as a mongoose model, for
example, in MongoDB with mongoose. You will create a database
with tables in MySQL using SQL.
It contains the database table names, column names, and data types
in contrast to the logical structure. Let's look at some examples now
that we are familiar with the fundamentals of the database structure.
We will go over the most typical instances that you can anticipate.
Example of NoSQL database:
Non-relational or distributed databases are the most common names
for NoSQL databases. Since NoSQL has a dynamic schema, there
is some controversy surrounding the design of a schema for it. Some
contend that the beauty of NoSQL is that you don't need to develop
a schema, while others assert that since this form of the database
doesn't offer a single answer, design is crucial.
This example shows how a real database schema will seem when
using Mongoose (MongoDB) to build a database that corresponds to
the aforementioned entity-relationship diagram.
[Link]
[Link]
[Link]

The crucial point to keep in mind is that there are no foreign keys in
NoSQL databases like MongoDB. In other words, the schemas are
not related to one another. The ObjectId only represents a
document's _id, which Mongo automatically allocates when a
collection is created. It doesn't form a join.
Example of SQL server:
Objects like views, tables, functions, indexes, and views are all
contained in a SQL database. There are no limitations on how many
items we can use. The user who owns a SQL schema is referred to
as the schema owner. SQL schemas are defined at the logical level.
Data access, updating, and manipulation are all accomplished via
SQL. An RDBMS for storing and organizing data is MySQL.
A new database schema can be created using the SQL Server
CREATE SCHEMA command. In MySQL, schema and database are
the same things. In the MySQL SQL syntax, the word SCHEMA can
be used instead of DATABASE.
Other database software makes a distinction. For instance, a
schema only represents a portion of a database in the Oracle
Database product; the tables and other objects are all owned by the
same user.
A view in SQL is a hypothetical table that is constructed from a
statement's result set. Rows and columns can both be found in a
view.
Here, primary keys and foreign keys are helpful since they show how
one table is related to another.
PostgreSQL example:
A relational database management system with strong flexibility and
SQL compliance is PostgreSQL, which is free and open-source. A
database schema in PostgreSQL is a namespace with named
database objects.
Tables, views, indexes, data types, functions, and operators are all
included in this. Schemas are equivalent to directories in this system,
although they cannot be nested.
A namespace is a group of symbols (called names) used to
designate objects in programming. A namespace makes sure that
each object has a distinct name so that they may all be easily
recognized.
There will only be one level even if a Postgres database can have
numerous schemas. Let's examine a picture of this:
A database cluster in PostgreSQL includes one or more databases.
Data is not shared among the cluster's users, but users are. The
object name can be shared between several schemas.
To begin, we execute the command CREATE SCHEMA. Keep in
mind that PostgreSQL will be a public schema automatically. We'll
put every new thing here.

When creating objects in a database schema, we use a qualified

name that contains both the table's and the schema's names.

For example from the Postgres docs, as follows CREATE SCHEMA

is used to start a new delivery due list view, deliveries table, and
SCM schema.
 CREATE-READ-UPDATE-DESTROY (CRUD)
You have probably utilized CRUD procedures if you have ever
worked with databases. The four fundamental RDBMS programming
operations are CREATE, READ, UPDATE, and DELETE. Table data
can be manipulated via CRUD operations, which include read, insert,
remove, and edit.
Since SQL is widely used in most sectors, it is imperative for
developers worldwide to comprehend how CRUD processes
function. You will learn about CRUD operations with SQL in this post.

What are CRUD operations?

Systems that offer persistent storage, which is often organized into a
database, are necessary for any company that keeps track of data
(such as accounts, payment information, or other records). Rows
and columns are used to organize data in relational databases. The
use of primary and foreign keys enables their connection to other
tables.
The term CRUD (create, read, update, delete) stands for the four
operations we utilize to develop relational databases and persistent
storage applications, such as Oracle Database, Microsoft SQL
Server, and MySQL.
The definitions of each CRUD operation are provided in the table
below.

Letter Operation Function

C Create Insert
 R Read Select

U Update Edit

D Delete Delete

Insertion, selection, updating, and deletion are mapped to CRUD in

SQL, accordingly. On CRUD, a variety of operations are based,
including security control, transaction control, access and permission
management, and performance optimization.

Why is CRUD so important?

Everything that has to do with databases and database architecture
involves CRUD. Without CRUD operations, software engineers are
powerless. For instance, REST (Representational State Transfer), a
superset of CRUD utilized for HTTP resources, is employed in
website building.
However, CRUD is as crucial for end users. It makes tasks like
generating blogs, bookmarking, and account registration possible.
We can add or create new items, search for existing ones, modify
them, or delete them in the majority of the programs we use.
CRUD offers many benefits including:
Addressing the various access requirements, it streamlines
security control and makes application design simpler and
more scalable.
When compared to ad-hoc SQL statements, it performs
better.
The word CRUD is broken down below:
CREATE
You can create new rows for your table. The command INSERT
INTO can be used to accomplish that. The table name, column
names, and the values to be added are listed after the INSERT INTO
keyword at the beginning of the statement.
With INSERT INTO, you can choose between two options:
Image

We will update our bakery table with data in the example below.
Image

The menu table will get new rows as a result, and each entry's id will
be unique.

READ
The read function allows you to obtain particular records and reads
their values, making it comparable to a search function. Read makes
use of SELECT.
Let's look at the products we sell at our bakery as an illustration. To
do that, we must use the following method to display all the data in
our menu table:
Image

The menu table will remain unchanged; instead, all the records in
that table will be displayed.
Check out the following illustration to show how SELECT fetches
needed data:
Image

UPDATE
An existing record in the table can be updated. This allows us to
change records that already exist in the database. You must specify
the destination table and the columns that will be modified before
executing the UPDATE. In some cases, you additionally require the
rows, as well as the accompanying values.
Limiting the amount of rows is advised because it helps to prevent
concurrency problems. Use the following to update a record that
already exists:
 Image

Consider the scenario when we wish to adjust the item name and
pricing. We would employ.
Image

By doing this, the table will be updated so that the previous record
with id 1 will be changed to a chocolate croissant with a price of 2.5.

DELETE
A record can be eliminated from the table using delete. There is a
built-in delete function in SQL that allows you to remove one or more
records from the database at once. Some relational database
applications may support both hard (permanent delete) and soft
(temporary delete) deletion (update row status).
The command to remove is as follows:
Image

To take one thing off the table, we employ:

 Image

This will eliminate the bread-containing row from the dining room
table. You can use the following syntax to remove every record from
the table:
Image

DATABASE JOINS
Data is kept in several tables that are connected in relational
databases like SQL Server, Oracle, MySQL, and others via a
common key value. As a result, it is frequently necessary to combine
data from two or more tables into one results table. The SQL JOIN
clause in SQL Server makes this simple to do.
Based on logical connections between the tables, the SQL clause
JOIN is used to query and access data from various tables. In other
words, JOINS specify how SQL Server should choose entries from a
different table using information from a different source.

Different types of JOINS in SQL Server

INNER JOIN.
LEFT OUTER JOIN.
RIGHT OUTER JOIN.
SELF JOIN.
CROSS JOIN.

Basic SQL JOIN types

The INNER JOIN, SELF JOIN, CROSS JOIN, and OUTER JOIN are
just a few of the various types of joins that SQL Server provides.
Each join type specifies how two tables are related in a query. LEFT
OUTER JOINS, RIGHT OUTER JOINS, and FULL OUTER JOINS
are further categories of outer joins.
An SQL INNER JOIN combines rows with matching values
from two or more tables to produce a result table.
Unmatched rows from the table supplied before the LEFT
OUTER JOIN clause are included in the result table of a
LEFT OUTER JOIN query.
The SQL RIGHT OUTER JOIN creates a result table that
only contains entries from the left table that match the
records in the right table.
The SQL SELF JOIN links the table to itself and enables
row-by-row comparisons inside the same table.
A result table containing paired combinations of each row
from the first table and each row from the second table is
produced by the SQL CROSS JOIN.

INNER JOIN
INNER JOIN statement returns only those records or rows that have
matching values and is used to retrieve data that appears in both
tables.
In this example, we will be extracting data from the
[Link] and [Link] tables which are
aliased with SOD for [Link] and P for
[Link]. We compare records in those columns in the
JOIN statement. Take note of how SQL Complete handles code
suggestions.
 Working with Inner JOINS in SQL Complete

OUTER JOIN
Only matching rows from the specified tables are returned when a
SQL INNER JOIN is used. Using a SQL OUTER JOIN, however, will
receive both the matching and unmatched rows in addition to the
matching rows.
SQL Server OUTER JOIN

Rows from both the left and right tables are included in the result of
the FULL OUTER JOIN. The columns of the right table will have
nulls if there are no matching rows for the row in the left table. If
there are no rows that match the row in the right table, the column of
the left table will consequently contain nulls.
 How to work with Outer JOINS in SQL Complete

LEFT OUTER JOIN

The output of the matched rows from both tables is provided by the
LEFT OUTER JOIN. It displays records with null values if none of the
records in the left table match.
LEFT OUTER JOIN in SQL

We wish to link the tables Person in our example. Individuals and Human Resources. If the
person is an Employee, it will also display JobTitle in addition to a list of all Person
LastNames.

In the output, NULL values will be listed in the appropriate rows for
NationalIDNumber and JobTitle if no employees are matching
BusinessEntityID.
 Create LEFT OUTER JOINs with the help of SQL
Complete

RIGHT OUTER JOIN

The LEFT OUTER JOIN and RIGHT OUTER JOIN both operate on
the same principles. The RIGHT OUTER JOIN chooses rows from
the left table (Table A) and compares them to the rows from the right
table (Table B) (Table A). Whether or not they have matching rows
from the left table, all rows in the right table are included in the result
set of the RIGHT JOIN. If there are no matching rows in the left table
for a row in the right table, the left table's column in the result set will
have null values.
RIGHT OUTER JOIN in SQL Server

SELF JOIN
A table can be joined to itself using the SELF JOIN function. This
indicates that every row in the table is joined with every other row in
the table as well as with itself. The SELF JOIN can be thought of as
a joining of two identical copies of a table. Even though the table is
not copied, SQL still executes the statement. To do this, each
instance of the table is given a unique name using table name
aliases. The most effective uses are for comparing rows in the same
table or extracting hierarchical data.
What is SELF JOIN in SQL

In this example, we wish to extract from the [Link] table

is a list of all the territories and the salespeople assigned to each
one.
 How to make SELF JOINs with SQL Complete

CROSS JOIN
All combinations of rows from each table are returned by the
cartesian join instruction, or CROSS JOIN, in SQL. Imagine that you
must discover every combination of size and color. A CROSS JOIN
will be useful in that situation. Keep in mind that no conditions are
required for this join to join two tables. In actuality, CROSS JOIN
combines all combinations of records from both tables by joining
every row from the first table with every row from the second table.
 CROSS JOIN in SQL Server

QUERYING SQL DATABASES

A set of pre-defined codes must be used when crafting a query so
that the database can interpret the request. The query language is
yet another name for this idea.
An inquiry into a database is known as a database query. The
request should be made in a database table or group of tables
using the query language, a type of programming language. In this
manner, the system can comprehend the query and handle it
appropriately.
Consider requesting an Americano from a coffee establishment.
By asking, "Can I have an Americano?" you are making a request.
The barista will comprehend your request and deliver the product
you purchased.
Similar to this, a query gives the code meaning so that the system
can comprehend it and take appropriate action. As long as the
user and database utilize the same language, regardless of the
query language used, SQL or other information can be sent.
A well-designed database, meanwhile, organizes data into
numerous tables. They are made up of rows or records of
information and columns that store the properties of the data. The
data is then retrieved from several tables, organized, and
displayed following the directions using a query.
A query may be a select, an action, or both in one statement. Both
select and action queries can be used to manipulate data, such as
to add, edit, or delete data, from data sources.
Advanced users can also utilize query commands to carry out
different programming operations, such as setting WordPress
URLs in MySQL databases and establishing MySQL users, and
granting them access.
The most popular query commands and their functions are listed
below:
SELECT: Retrieve information from a database. Since
every request starts with a select query, it is one of the
most used commands.
AND: Combines information from one or more tables.
CREATE TABLE: Construct various tables and give the
names of each of their columns.
ORDER BY: Sort data outcomes alphabetically or
numerically.
SUM: Condense information from a certain column.
UPDATE: A table's existing rows can be changed.
INSERT: Add new rows or data to a table that already
exists.
WHERE: Apply a conditional filter to data to determine
its value.
Combine a few of the aforementioned instructions for more
variations. For instance, to aggregate data or combine results, use
the SELECT query in combination with additional verbs like AND
or SUM.
Other approaches to retrieve data from a database besides query
language include:
 Using the available parameters: The database software
comes with lists of parameters by default that users can
modify as necessary. These settings relate to
information sharing between stored procedures and
user-defined functions (UDF) (SP).
Relational databases employ a graphical query language
called "Query by Example" (QBE). The system will
display a code template so you may write your data's
fields and values there. As a result, a user can fill in the
blanks rather than enter full SQL statements.
Installing database plugins: This is a simple solution that
allows users to quickly do a variety of database tasks,
such as queries. Some plugins also include optimization
features to guarantee the greatest performance.
Search engines can seek and extract information from databases
as well. The name "query" is different across these two systems,
though.
 CHAPTER SEVENTEEN

NOSQL DATABASES WITH MONGODB

AND MONGOOSE
SERIALIZATION
A data object is a combination of code and data contained within a
region of data storage that is serialized when it is transformed into a
string of bytes that stores the object's state in a format that can be
easily sent. The data can be sent to an application, another data
storage (such as an in-memory computing platform), or some other
location in this serialized form. Through serialization, we may
preserve an object's state and replicate it elsewhere. The storage of
the object and the interchange of data are both covered by
serialization. Serialization is a common method for capturing an item
into a shareable format because things often consist of many
components, preserving or distributing all the parts typically
demands significant coding work. With serialization, we can transfer
objects:
Over-the-wire usage cases for messaging.
Web services, such as REST APIs, are used to
communicate across applications.
Bypassing firewalls (as JSON or XML strings).
Between domains.
With other data repositories.
To spot alterations in data over time.
Across all applications, while respecting the security and
user-specific information.
See the screenshot below explaining the word serialization.
Several well-known object-oriented programming languages offer
native support for serialization or have libraries that extend their
feature sets with non-native serialization support. Examples of
programming languages with native support for serialization include
Java,.NET, C++, [Link], Python, and Go.
Serialized data is frequently stored using data formats like JSON and
XML. Additionally, customer binary formats are employed, which
often require less markup and tagging during serialization and are
more space-efficient.

Why Is Data Serialization Important for

Distributed Systems?
Data and its replicas may be kept in various partitions among various
cluster members in some distributed systems. The system will obtain
the missing data from another member if it is not already on the local
member. For usage scenarios like this, serialization is necessary.
Adding items with key/value pairs to a map.
Placing objects in a set, queue, or list.
Using lambda functions to send data to another server.
Reading a location on a map.
Locking a thing.
Messages sent to a subject.
 HOW TO MODEL NOSQL DATA
NoSQL data modeling methods are divided into three main
categories:
Conceptual strategies
Standard modeling methods
Hierarchical modeling methods
We will cover all NoSQL data modeling strategies in brief below.
Conceptual Techniques
There are three conceptual techniques for NoSQL data modeling:
Denormalization: Which involves transferring the data
into several tables or forms to simplify them, is a very
popular practice. Denormalization makes it simple to
collect all the data that needs to be queried into one
location. Naturally, this implies that the data volume does
rise for various parameters, which significantly raises the
data volume.
Aggregates: This enables users to create layered entities
with intricate internal structures and to change their
specific structures. In the end, aggregation minimizes one-
to-one relationships, which decreases joins. This soft
schema method is used in some capacity in the majority of
NoSQL data formats. Since those data formats do not
impose restrictions on value, graph and key-value store
databases, for instance, allow for values to be in any
format. Similar aggregation is present in another example,
like BigTable, which uses columns and column families.
Joins on the application side: Since NoSQL databases
are question-oriented and join are performed during design
time, NoSQL often does not enable joins. When compared
to relational databases, this is done at the moment the
query is executed. Naturally, this frequently entails a
performance penalty and is occasionally inevitable.
General Modeling Techniques
There are five standard methods for representing NoSQL data:
Multiple Keys: Since entries can be divided among
numerous dedicated servers by just hashing the key,
unordered key values are generally highly helpful. Even
so, having some sort of ordered key sorting functionality is
helpful, even though it might increase complexity and harm
performance.
Reducing the dimensions: When dealing with huge data
volumes, geographic information systems frequently use
R-Tree indexes and require in-place updating, which can
be costly. The 2D structure can also be flattened into a
simple list, as is done with Geohash, which is another
conventional method. You can convert multidimensional
data to straightforward key-value or even non-
multidimensional models via dimensionality reduction. To
convert multidimensional data to a Key-Value model or
another non-multidimensional form, use dimensionality
reduction.
Table of Index: Utilize indexes in stores that may not
internally support them by using an index table. Try to build
and then keep up a unique table with keys that adhere to a
particular access pattern. Using a master table, as an
illustration, user accounts can be accessed by user ID.
Index of Composite Keys: Composite keys are a very
helpful tool when ordered keys are employed, despite
being a relatively generic strategy. It can be used to
generate a multidimensional index that is somewhat
comparable to the aforementioned Dimensionality
Reduction approach when combined with secondary keys.
Inverted Search - Direct Aggregation: The idea behind
this strategy is to aggregate data using full scans or
another type of original representation after using an index
 that satisfies a set of criteria. Although adopting this kind of
processing pattern has an impact on data models, it is
more of a data processing pattern than a data modeling
pattern. Consider the inefficiency of the random record
retrieval required for this strategy. Use batch query
processing to solve this issue.

Hierarchy Modeling Techniques

NoSQL hierarchical data modeling

For NoSQL data, there are seven hierarchy modeling techniques:

Tree Aggregation: Modeling data as a single document is
essentially what tree aggregation is. When it comes to any
record that is constantly accessed at once, such as a
Twitter thread or Reddit post, this can be incredibly
effective. The issue therefore naturally arises from the
inefficiency of random access to any particular entry.
Adjacency Lists: This simple method models nodes as
separate records of arrays that have the same direct
ancestors. To put it another way, it enables you to search
nodes based on their parents or children. However, it is
also quite inefficient for fetching a whole subtree for any
given node, much like tree aggregation.
Materialized Paths: This denormalization-like technique is
employed to prevent recursive traversals in tree
topologies. To determine any predecessors or
descendants of the node without worrying about traversal,
we primarily want to assign parents or children to each
node. Aside from that, we can save materialized pathways
as IDs as a set or as a single string.
Nested Sets: This common technique for creating tree-like
structures in relational databases also works with key-
value or document databases and NoSQL. The objective is
to save the tree leaves as an array and then, using
start/end indexes, map each non-leaf node to a set of
leaves. Since it only needs a limited amount of memory
and doesn't always require traversals, modeling it in this
way is an effective way to handle immutable data. As a
result, updates are costly because they call for index
modifications.
Nested Documents Flattening; Numbered Field Names:
Instead of working with documents that have a complex
internal structure, most search engines prefer to work with
documents that are a flat list of fields and values. This data
modeling technique, therefore, attempts to map these
complex structures to a plain document, for instance,
mapping documents with a hierarchical structure, which is
a common challenge you can run into. Naturally, this kind
of effort is tedious and difficult to scale, especially as the
number of nested structures rises.
Proximity queries for flattening nested documents. Utilizing
a method called Proximity Queries, which is similar to
Numbered Field Names data modeling, is one way to
address potential issues with it. These restrict the space
between words in a document, which improves
performance and lessens the influence of query speed.
Batch graph processing: In only a few stages, this
method allows you to explore a node's relationships up
 and down. It is an expensive technique that may or may
not scale effectively. This kind of graph processing is
possible with the help of Message Passing and
MapReduce.

DOCUMENT DATABASES (MONGODB)

Since MongoDB is a document database, an object, or document,
serves as the equivalent of a record. A whole object can be written
as a document in a document database as opposed to a relational
database, which requires the use of rows and columns.
This can appear to be the same as a relational database for
straightforward items. However, suppose you have objects that
contain arrays and nested objects (referred to as embedded
documents). Now, numerous tables are often required when using a
relational database. For instance, a relational database's invoice
table and invoice lines table may be used to hold an invoice object.
The complete Invoice object is stored in MongoDB as a single
document.
A document is a type of data structure made up of pairs of fields and
values. Other documents, arrays, and arrays of documents are all
possible values for fields. It is simple to conceive of MongoDB
documents as JavaScript objects because they are comparable to
JSON objects. In contrast to a JSON object, a MongoDB document
supports common data types including dates, timestamps, regular
expressions, binary data, and other common data types in addition
to the primitive data types, boolean, integers, and characters. Even
JavaScript functions can be kept in document fields.

CREATE-READ-UPDATE-DESTROY (CRUD)
NOSQL BEST PRACTICES
You have probably utilized CRUD procedures if you have ever
worked with databases. The four fundamental RDBMS programming
operations are CREATE, READ, UPDATE, and DELETE. Table data
can be manipulated via CRUD operations, which include read, insert,
remove, and edit.
Since SQL is widely used in most sectors, it is imperative for
developers worldwide to comprehend how CRUD processes
function. You will learn about CRUD operations with SQL in this post.

What are CRUD operations?

Systems that offer persistent storage, which is often organized into a
database, are necessary for any company that keeps track of data
(such as accounts, payment information, or other records). Rows
and columns are used to organize data in relational databases. The
use of primary and foreign keys enables their connection to other
tables.
The term CRUD (create, read, update, delete) stands for the four
operations we utilize to develop relational databases and persistent
storage applications, such as Oracle Database, Microsoft SQL
Server, and MySQL.
The definitions of each CRUD operation are provided in the table
below.

Letter Operation Function

C Create Insert

R Read Select
 U Update Edit

D Delete Delete

CRUD stands for insert, select, update, and delete concerning SQL.
CRUD provides the foundation for many operations, including
security control, transaction control, access and permission
management, and performance optimization.

Why is CRUD so important?

CRUD is constantly used for anything related to database
and database design. Software developers can’t get anything done
without CRUD operations. Website development, for example, uses
REST (Representational State Transfer), which is a superset of
CRUD used for HTTP resources.
On the other end, CRUD is just as important for end-users. Without
it, things like registering for websites, creating blogs, or bookmarks
would be impossible. Most applications we use let us add or create
new entries, search for existing ones, make changes to them or
delete them.

CRUD offers many benefits including:

It facilitates security control by satisfying the various
access requirements.
It simplifies and facilitates application design making it
more scalable.
It has a better performance compared to ad-hoc SQL
statements.

MONGO SHELL AND COMMAND LINE USE

MongoDB Through the command line, you can communicate with
instances of MongoDB using the interactive JavaScript interface
known as Mongo Shell. The shell is useful for:
Manipulation of data.
Administrative tasks like database instance maintenance.

MONGODB MONGO SHELL FEATURES

MongoDB Mongo shell is the default client for the MongoDB
database server. It is a command-line interface (CLI), meaning that
all input and output occur on the console. A useful tool for working
with tiny data sets is the Mongo shell.
The top characteristics of the Mongo shell are as follows:
Use the Mongo shell to execute all MongoDB queries.
Change data and carry out administrative tasks.
Mongo shell issues command by using JavaScript and an
associated API.
With the up and down arrow keys, you may use the mongo
shell to view past commands.
After partially inputting a command, use the tab button to
view potential command completions.
Print error messages so you can see where your
commands failed.
A new mongo shell called mongosh was just released by MongoDB.
It also has some extra capabilities like extensibility and
embeddability, which let you utilize it inside other programs like VS
Code.

INSTALLING THE MONGO SHELL

When you install the MongoDB server, the mongo shell is also
installed. It is put in the same place as the MongoDB server binary
during installation.
Visit the MongoDB download center, choose the version and
package you want, download the archive, and then copy it to a spot
in your file system if you wish to install it separately.
There are versions of Mongo Shell for all popular operating systems,
including:
Windows
Linux
Mac OS

CONNECT TO MONGODB DATABASE

Once MongoDB has been downloaded and installed, you can
connect to an active MongoDB server using the mongo shell.
(NB: Before connecting to your server through the shell, it must
already be functioning. Use the following command to launch
the server in CMD).
net start MongoDB
[Link]

To launch the shell, type the mongo command next.

 [Link]
[Link]

Finally, you are in the Mongo shell.

(NB: You can launch mongo and mongod without using the
command prompt if you'd like. Double-click the mongod and
mongo apps in the installation directory to accomplish this. The
same outcome as above will be obtained).

BASIC COMMANDS FOR MONGO SHELL

It's time to start using the Mongo shell now. To assist you to get
started using MongoDB, we will first go over some fundamental
commands.
To see the database you are presently working with, run the DB
command as follows:
[Link]
content/uploads/2020/10/[Link]

To switch to a different database, run the use command. Learn how

to build a database if you don't already have one. Follow the
procedures below:
use company
 [Link]
content/uploads/2020/10/[Link]

With the command below, you can make collections and add data:
When we say "db," we mean the active database.
The employer is the name of the collection.
To add a document to the collection, use the insertOne
method.
[Link]( { name: "mark" } );
[Link]

Use the find method to fetch data in a collection.

The forEach(printjson) method will print them with JSON formatting
[Link]().forEach(printjson)
To view all databases, use the show dbs command.
show dbs

[Link]
-
content/uploads/2020/10/C
[Link]

The help command is a crucial command that will make working with
the Mongo shell simple. Get a list of the help options available in the
mongo shell by running the help command.
Help
 [Link]

Type [Link]() to see a complete set of commands you can use to

access the current database.
[Link]
[Link]

INSTALLING MONGODB
On OS X, Windows, and the majority of Linux-based variants,
MongoDB is simple to install. Each operating system has a different
set of installation instructions that vary slightly according to the OS
flavor. Please follow the instructions on the MongoDB website to
install the database ([Link]
manual/installation/ or type "mongodb installation" into any search
engine). Pick a version that is 4.0 or later, ideally 6.0. The majority
of installation methods provide simultaneous installation of the
server, shell, and tools. Make sure this is the case because you
might need to install them separately if it is not.
If it wasn't started by the installation procedure, be sure to start
MongoDB server (the daemon's or service's name is mongod) after
installation. Run the mongo shell as follows to check the installation:
$ mongo
You might need to modify the command to [Link] on a
Windows system. The command could need a path, depending on
how you installed it. The shell will establish a connection to the
nearby MongoDB server instance if it launches successfully. The
database it is connecting to (the default is tested) and the MongoDB
version should be displayed on the console along with a command
prompt, as shown in the example below:
MongoDB shell version: 4.0
connecting to: test >
If, however, you see an error notice, go back and retry the
installation and server startup process. But make sure you enter the
right installation version.
Follow the steps below for detailed instructions on installing
MongoDB:
1. Download the right MongoDB version from MongoDB
2. Create a database directory (in this case under /data).
3. Install and initiate a mongod process.
4. Connect to MongoDB and start your project.

MAPPING RELATIONSHIPS WITH MONGODB

A relationship is mapped according to the types of mapping that
are made available in database relationships. This mapping will
either be One-to-One or One-to-Many relationship mapping.
MongoDB also made it possible to map relationships. You can
explore more on this.
 1. Model One-to-One Relationships with Embedded
Documents: Presents a data model that describes one-to-
one connections between related data using embedded
documents.
2. Model One-to-Many Relationships with Embedded
Documents: Presents a data model that describes one-to-
many relationships between related data by using
embedded texts.
3. Model One-to-Many Relationships with Document
References: Presents a data model for describing one-to-
many relationships between documents via references.

USING AN OBJECT-DATA MODELLING

LIBRARY (MONGOOSE) TO WORK EASILY
WITH YOUR DATA
NoSQL introduced flexibility to the databases' tabular domain.
Particularly MongoDB became a great choice for storing
unstructured JSON documents. Data is stored with very minimal
changes after starting as JSON in the UI, which improves
performance and cuts down on processing time.
However, NoSQL does not imply that there is no structure at all.
Before storing it, we still need to validate and cast our data, and we
might need to use some business logic. That's the role that
Mongoose plays.
In this tutorial, we'll see how to describe our data with Mongoose and
validate it before saving it in MongoDB using an example application.
We'll create a Person with a few personal characteristics, such as
their parent's names, as the model for a genealogy program. We'll
also look at how we can create, edit, and save Persons to MongoDB
using this model.

What is Mongoose?
A networking library and cross-platform embedded web server are
called Mongoose. Because of the software's lightweight design, any
device with an Internet connection can operate as a web server. The
Mongoose Embedded Library, which may be utilized inside
embedded devices, is the foundation upon which Mongoose is
constructed. On Windows, macOS, Linux, QNX, eCOS, FreeRTOS,
Android, and iOS, Mongoose is officially supported.

How MongoDB Works

We must first have a general understanding of how MongoDB
functions to comprehend what Mongoose is. A Document is the
simplest type of data that MongoDB allows us to store. Despite being
saved as binary, a database query returns its representation as a
JSON object.
Collections, which are akin to tables in relational databases, can be
used to hold related documents. However, the parallel ends here
because we have a definition for what constitutes "related papers."
The documents' structure won't be imposed by MongoDB. We may,
for instance, add this file to the Person collection:
Image

Then, with no shared characteristics or structure, we might save a

document that appeared to be unrelated in the same collection:
Image

The originality of NoSQL databases rests in this. We give our data

meaning and store it in the manner we think is most appropriate. No
restrictions will be imposed by the database.
Mongoose Purpose
Applications typically manage data with a structure, even if
MongoDB won't impose one. To make sure the data we received
matched our needs, we needed to validate it. Before saving the data,
we might need to perform some sort of processing on it. Here is
where Mongoose comes into play.
An NPM package for NodeJS applications is called Mongoose. In
addition to abstracting the access to MongoDB, it enables the
definition of schemas for our data to fit into. We can make sure that
all documents that are saved have the necessary features and share
a structure in this way. Let's now see how to define a schema.

INSTALLING MONGOOSE AND CREATING

THE PERSON SCHEMA
Let's begin a Node project with a person schema and
default properties:
$ npm init -y
Now that the project has been started, let's install
mongoose with npm:
$ npm install --save mongoose
The MongoDB NPM module is also included by default
with mongoose. You won't be utilizing it personally. It will
be dealt with by Mongoose. To work with Mongoose, we'll
want to import it into our scripts:
let mongoose = require('mongoose');

connect to the database next by using:

[Link]('mongodb://localhost:27017/genealogy', {useNewUrlParser: true,
useUnifiedTopology: true});

The database will be made since one doesn't already exist.

UseNewUrlParser will be set to true to parse the connection string
using the most recent tool. UseUnifiedTopology will be set to true to
parse the connection string using the most recent MongoDB driver.
 CHAPTER EIGHTEEN

DEPLOYMENT
UNDERSTAND HOSTING AND DEPLOYMENT
Establishing your presence online requires a solid understanding of
web hosting and deployment. Answering the question "What is
website hosting?" is a crucial first step whether your objective is to
start developing websites professionally, you're looking for someone
to build one for you, or you just want to understand how they
operate.

What is web hosting?

A safe location to store online content is offered by web hosting. A
website's code, graphics, audio, and text all need to be saved
somewhere. None of us would be able to access content on the web
continuously without a reliable digital repository. Because of this,
hosting is among the most important aspects of creating an online
presence for anyone, from large corporations to modestly sized
personal accounts.
Online content can be safely stored with the help of web hosting. A
website requires storage for the code, graphics, audio, and text that
make it up. None of us could consistently access web information
without a reliable digital repository. As a result, whether it's a small
personal account or a large corporation, hosting is among the most
important aspects of creating an online presence.

How do I get started with a website?

You'll need to coordinate several actions to construct a website, and
choosing a web host provider is simply one of them.
1. Registera domain: To name a few, you can purchase this
through [Link], Bluehost, HostGator, GoDaddy, or
 Google Domain. To make it easier for people to remember
your IP address, you choose a distinct name (which is just
a string of numbers). For instance, "[Link]" is significantly
simpler to remember than "[Link]." Regardless of
where you purchase the domain from, the price varies
based on the services and add-ons.
2. Nameservers (DNS): The nameserver acts as a go-
between, directing site visitors to the right IP address. The
registrant and DNS services are frequently offered by the
same business, but if you like, you can use a separate
DNS. Typical examples are CloudFlare, OpenDNS,
CleanBrowsing, and Google Public DNS.
3. Web hosting: Your web hosting company's servers house
the actual files that make up the website. Once more, you
can use the same business as your registrar and DNS
server for this step or a new one. Below, we've provided in-
depth information on a few reputable hosting firms.

How does web hosting work?

Services for web hosting operate by maintaining secure and reliable
storage areas. While simple data storage is only one aspect of what
web servers offer, it is a crucial one. Data is kept by hosts on
equipment known as web servers, making maintenance and access
by internet users simple.
Websites may act strangely if their host capacity is insufficient and
they are not properly maintained. That makes visiting your website
takes more time, which affects sales for your company and deprives
your audience of information.

Self-hosting
You can build your web servers using PC software, but the price may
end up being more than a dedicated facility and provider. Because of
this, the majority of customers rely on a third-party service that can
promise specific features and services on a round-the-clock basis.
Enterprise businesses may decide to host their website to keep
everything in-house, but doing so requires a sizable investment in
servers and personnel. This makes sense for big businesses.
However, using a third-party web server is far more affordable for
small to medium-sized businesses.
The advantages include constant user accessibility, improved hacker
security, routine maintenance, and technical help for you when
unforeseen problems arise.

Types of web hosting

The effort of setup and maintenance is removed from the user by
third-party hosting services in a variety of ways. Let's quickly review
some of the various web hosting options.
1. Shared Hosting
Shared hosting services, a popular and affordable choice, control
several customers from the same server infrastructure. When your
needs and budget are constrained, it's a terrific choice, but there is a
cost involved. Due to the shared use of the server's resources, there
is a greater potential for disruption.
2. Virtual private servers
Similar to shared hosting, virtual private server (VPS) hosting stores
your files in a dedicated location with dedicated resources. The risk
of sharing hardware with your provider's other customers or
subscribers is decreased at the usual greater cost as well.
3. Dedicated hosting
By providing a dedicated server, shared hosting's security and
performance issues are reduced. Additionally, you can add a lot of
features, but doing so will cost you more money and require more
frequent management and maintenance.
4. Managed hosting
Although you have access to a dedicated server, your administration
choices are limited. With managed hosting, your provider takes care
of security and upkeep while you manage content via the FTP (File
Transfer Protocol) standards, which networked computers use to
"speak" to one another.
5. Cloud hosting
A more recent option, cloud hosting, employs resource pooling and
scale to lower costs and lessen the possibility of visible service
interruptions. It may be less expensive than other possibilities, but
before choosing one, be sure you comprehend how your plan's
pricing operates.
There are additional types of web hosting accessible even though
these are the top 5 most popular choices. These include completely
self-contained home servers. However, like with any DIY technology
project, be sure to conduct a thorough study in advance.

What are the best web hosting services?

These four web hosting services are among the best you can get in
terms of cost, functionality, and customization out of the many ones
available today.
1. Namecheap

Namecheap is a popular web hosting option because of its

inexpensive prices and extensive offerings. In comparison to other
services, its entry-level services are quite inexpensive, and its pricing
is flexible, especially for domain registration and other incidentals.
Nearly all of the hosting forms listed above, along with a few more,
including reseller hosting, are supported by Namecheap.
Additionally, it offers a wide range of optional add-ons, including
business assistance, extra app-based services, and security
updates. Namecheap is a fantastic, versatile choice for the majority
of consumers because of its reasonable pricing and continual
schedule of promotional offers.
 2. DreamHost
Another well-known hosting provider is DreamHost, which has a
strong foundation of fundamental services and a range of pricing
tiers from which you can choose. Similar to Namecheap, it's a
fantastic expansion option because there is much room to add and
expand services as necessary.
Along with trustworthy cloud hosting plans with scalable possibilities,
DreamHost also provides excellent developer support. Additionally,
there are discounts for non-profit customers and free migration
options for WordPress users, which are excellent if you want to
switch providers. There is also a 97-day money-back guarantee, so
there is no risk.
3. HostGator
HostGator offers fewer pricing options but still maintains a high
standard of service by combining a robust selection of affordable
plans and excellent professional support. With a user-friendly
interface and the convenience of mobile support, they provide a
built-in web-builder plan that may assist users in creating and
customizing their websites.
HostGator offers a starting price for dedicated hosting that is
especially affordable, but they also provide a full selection of format
choices, including shared, VPS, cloud, and more. Despite being
unable to match DreamHost's extended money-back guarantee
duration, they nevertheless provide a good 45-day trial period with
no obligations.
4. Hostwinds

Because of its flexible shared hosting plans with unlimited

bandwidth, Hostwinds is a well-liked option. Starting with just one
domain will cost you about as much as the average monthly
subscription does (just a few dollars), but expanding to unlimited
domains will only slightly increase your costs. If you oversee several
websites and don't want to mess with the technical side of things,
that is excellent.
Additionally, every plan includes a free domain registration for at
least one. Hostwinds provides reliable shared hosting in addition to
more traditional choices like VPS, cloud, dedicated hosting, and
even reseller hosting.

Hosting static websites with GitHub Pages

1. Create your website
If you already have a website, go to step 2 instead. If not, today
would be a wonderful day to begin. I advise creating a blog. A blog is
a fantastic tool for creating a more significant internet presence. You
can use it to strengthen your internet brand.
Not sure where to begin? You're covered by me. How To Build A Blog That Will Boost Your
Career is an outstanding email course from [Link]'s. This excellent
training will guide you through the procedure.

So you decided to create a blog. What's next? You have a variety of

options, including Blogger, Tumblr, and WordPress.
However, doing so would defeat the point of this article. We wish to
host a static page for nothing using Github Pages. Therefore, I
advise employing a static blog generator.
For my blog, I use Jekyll. However, there are a lot more out there.
Listed below are some of the most well-known ones: Generators for
static blogs. Pick one, read the setup instructions, and get started
with your blog.
2. Add your site to Git Version Control
Your blog is now prepared, so let's use Git to put it under version
control. This article assumes that you have Git installed and that you
can push it to your Github account.
This step is crucial: make a straightforward .txt file and
give it the name "CNAME". Enter your unique domain
name in the file after opening it. Keep it.
 Create a simple .txt file and name it CNAME
Open your terminal and go to the directory where your site is
located. It's time to run the command to start version control from
scratch.
$ git init

• The project should now be added to git tracking.

$ git add

Let’s commit it:

$ git commit -m “first commit”

Now, your website is under version control.

3. Push your site to Github
We can now push to GitHub and see our website automatically
operate live and for free.
1. Firstly, open [Link] and log in.
2. On your home page, click the sizable green "+ New
repository" button.
3. You must adhere to a particular naming standard for your
page to be automatically hosted. Press "Create
Repository" and give your repository the name "[your-
username].[Link]", then leave the other fields blank.
 4. Give your repository a name, click "Create Repository,"
and then do nothing further.
5. Atthis point, adhere to GitHub's directions to push your
blog to your new repository.
6. The end! There should be a link to your new page at
[Link]
7. If you don't see it straight away, wait no more than ten
minutes.
8. You
just need to do this for the majority of people. Those of
you who would rather utilize your custom domain,
however, should go to the last step.
4. Assignyour custom domain to your new GitHub pages
website
This will vary depending on where you registered your domain. I
have GoDaddy, so these instructions are specific to that. But the
steps should be similar to other domain providers. Here is how I did
it:
1. After logging into my GoDaddy account, I choose "manage
domains." I chose the desired domain and then chose
"Manage Connection."
2. I selected the "DNS ZONE FILE" tab on the "Domain
Details" page.
3. Change "A-Host" and provide [Link]
4. Next, update "CName (Alias)www "'s potion to point it to
[your-username].[Link].
5. Ensure that everything is saved. It can take up to an hour
for this to fully update once you save it.
6. At this point, "[your-custom-domain].com" ought to direct
visitors to [your-username].[Link]. However, what
happens if they enter "www.[your-custom-domain].com]"
instead? Let's tweak it such that [your-username].[Link]
is also the www subdomain's target.
7. Select the "Settings" tab after selecting your domain and
pressing "Manage Connections."
8. Select "manage" from the Forwarding -> Domain menu.
9. Click "Update Forwarding" in step 9.
10. Type www.[your-custom-domain].com in the "Forward to:"
field.
11. Ensure that 301 (Permanent) is chosen before saving your
work.
12. That is all. Give everything a little over an hour to update.

I'll be the one to congratulate you first. You already have a

functioning website with version control, your domain name, and free
hosting.

WHAT IS WEBSITE DEPLOYMENT?

Let's first talk about what website deployment is before we dive into
the methods involved. The process of transferring a website from a
local environment to live servers is known as website deployment.
You refer to this as your live website.
Five Steps of Website Deployment
Let's now review the five steps for deploying a website. As follows:
1. Prepare.
2. Set up DNS records.
3. Set up a live testing site.
4. Set up email accounts.
5. Back up, and go live.
The five steps for deploying a website will now be discussed. These are:

1. Prepare
Preparation is the initial stage of website deployment. Depending on
the type of deployment you are carrying out, there are a few factors
you should take into account at this stage. Typically, there are three
possible outcomes when deploying a website:
1. You are developing a website from scratch for the client (or
for yourself) and this is their first website.
2. You will be deploying the site on the client's server, which
already hosts their website.
3. Although the client's website is already hosted, you'll be
switching servers.
Because you get to start over, the first scenario is the easiest. All you
have to do is purchase or offer web hosting and register your domain
name.
The deployment step will be more engaged in the second and third
scenarios due to their complexity and involvement. To manage the
DNS records, you will need to obtain domain management
credentials from the current web host. Sadly, the client frequently has
no idea how to obtain domain management credentials.
Fortunately, there are resources for it. To learn more about their
domain name, visit [Link]. Just enter their domain
name, and the whois information will appear on the results page. (A
whois inquiry is a request for details about an internet source, such
as a domain name.) Please take note of the domain name's
associated contact email addresses.
After that, select the Registration tab. The Name Servers and ICANN
Registrar information will be displayed. You can find out who
registered the domain name by contacting the ICANN Registrar (for
example, GoDaddy.)
To manage the domain yourself or to have them change the DNS
records for you once the site is ready for deployment, you must first
get in touch with the administrative or technical contact for the
domain.
2. Set Up DNS Records
The creation of DNS records is the next phase. The term DNS, or
domain name system, refers to the extensive database that houses
the IP addresses, domain names, hosting, and other registration
data for all internet-based websites.
You only need to create an A record for yourself or a subdomain
record for a live development site if you are putting up the website on
a new server and you have access to the DNS management
administration. (Take [Link], for instance.) After that,
point this subdomain to the new server's IP address.
You can utilize [Link] if you don't have DNS access but need
or desire control. A free, simple, web-based domain management is
available.
You will need to access their account on their domain name
registration service if you don't want to get too technical or don't
have the appropriate knowledge to do so. The employees there will
assist you in setting up the records.
3. Set Up a Live Testing Site
Setting up a live testing site is now necessary. The purpose is to
determine whether the website functions properly on a live server.
We advise creating a subdomain URL before you launch the
website. Use something like [Link] as an illustration.
You can eventually post it on [Link].
On the host, do not create a subdomain though, as this will create a
new directory and alter the local DNS. Make [Link] a
whole other website instead. You must create a domain alias, usually
referred to as a CNAME record, for your live testing site domain.
For instance, if you made an A record (the record that links the
domain name and the web server's IP address) as follows:
[Link]. A [Link]

You can set up an alias like this:

[Link] CNAME [Link].

This enables you to create the website in the same physical space
where it will be hosted. To execute your final testing as though the
site were available, it's crucial to be as exact as you can. Run tests
and benchmarks to gauge the performance of the site after
establishing all folder permissions and other parameters.
The best course of action is to upload to a directory called "dev" and
create a subdomain DNS record for it while you test, especially if you
are hosting your new website on the same server as the one hosting
the old one. In this manner, the outdated website will function
normally while allowing you to test the web server setup. But when
the time comes for deployment, you will have to move it.
4. Set Up Email Accounts
Setting up email is a task that many web developers frequently
forget. It is frequently, nonetheless, of utmost importance to your
client. There are various inquiries you must make. Does your client's
old server still host mail for them? Are you in charge of transferring
their email?
You will probably need to migrate mail to their new server if their
email is hosted in the same hosting account as their previous
website. If so, you must obtain their email addresses and create
identical accounts for each of them on the new server. You probably
won't need to make any changes. When the website switches to the
new mail server, so will the emails.
The MX records, which are the DNS entries that deal with mail, must
be accurate regardless of whether the client uses an internal mail
server or third-party email hosting.
Ping the mail server as a quick test in case your client is clueless. It
is likely hosted on a different server if it has a different IP address
than the website, in which case you should double-check the MX
records and make sure the person in charge of administering the
email is aware of the situation.
Make sure your client doesn't lose email no matter what you do.

Backup, and Go Live

Even if you are using a new server to host your website, don't forget
to back up any databases on the old one. You never know when
anything might come in handy.
You are now prepared to go live! Change the domain name's A
record if you have complete control over the DNS records. The new
website will go up in around 20 minutes once the IP address
switches to the new web server.
Simply go back to the previous webpage and conduct some testing if
you discover a problem.
It can take up to 72 hours to change your name servers to point to
the new host. As soon as you find any issues on the new site, make
sure you have enough time to see them and rectify them. You can't
change it back right away because the name servers have changed.
Therefore, be sure to prepare in advance.
If you are hosting on the same server and deleting the old website to
make room for the new one, make sure to do it at a time when you
can monitor and make any necessary corrections in real-time. We
frequently decide to perform it during our clients' business hours so
that we can call them if necessary. To avoid interfering with their
operations, you might wish to do it during off-peak hours if the
website has a lot of traffic.

DEPLOYING SERVER-BASED
APPLICATIONS WITH HEROKU
1. Create the project
The first step is to put together a basic project structure with a few
files. I'll use NodeJS to build an example server for this article.
I'll launch a terminal in a new folder and enter the command npm init
-y to start a brand-new project. We need to perform the npm install
express command to install this module because the fake server will
be created in the Express programming language. Once this library
is set up, we can make a new file called [Link] for our project. We'll
write the code for our straightforward server in it:
Run node [Link] to launch the application. Following that, we can
test it out at [Link] The phrase Hello World in the
browser ought to appear at this point.
output

2. Version control system

The following step is to select a version control system and store our
code in a repository on a development platform. We'll utilize Git,
which is the most widely used version control system, together with
Github as a development environment.
Create a new repository for your application on GitHub by
following these steps:
1

After clicking the Create repository button on Github, you

must execute the following commands to add your local
code to a repository:
 Image

Use commands to upload our code to the Github repo:

We must ignore some files first before proceeding. We just want to
upload our code to the repository; we don't want to include any
dependencies (the installed modules). To do this, we must make a
new file called .gitignore and place the file we wish to ignore inside of
it.
ignore

Folder structure and .gitignore file:

We can now type the commands shown in the image above (the one from GitHub).

It should be on the website for your repository if the commands were

properly executed. Your files should be visible if you refresh the
page, except for node modules, which you specifically chose to
ignore.
 Image

3. Link the repository with Heroku

We can now connect the GitHub repository to our Heroku
application.
First, start a brand-new application on Heroku by following
the instructions provided there.
heroku-new

When the program is finished being developed, a window

like this one ought to appear.
 heroku-shoud-see

Currently, if you look at the top menu, you will see items
like Overview, Resources, Deploy, Metrics, and so forth.
Make certain that Deploy is chosen. Then select the
GitHub icon from the second row.
search-and-cionnect

Click connect.
Find the desired application by performing a search for
demo-deploy-app-09 in our example. Next, select Connect.
 deploy

Click Deploy Branch. You can select Deploy Branch to

launch your application once it has successfully linked to
your Heroku account.
If you choose, you can enable automatic deploys, which
will pull the code from your Github repository each time
you publish to that repository.
You can select View to launch your application after it has
been deployed.
final

4. Configure Heroku to properly run the application

At this point, if you open the program, you ought to see something
similar:
 errr

Error, that's correct. This is because Heroku is unable to launch our

application. If you recall, we used the node [Link] command to
launch the program locally.
Heroku gave an error because it has no way of knowing what
commands to issue to launch the application. To fix this issue, we
must make a new file called Procfile and fill it with the text web:
node./[Link].
All we have to do to update our application is upload a new commit
to GitHub. The code will be automatically pulled to Heroku if we have
the Automatic Deploys option set. If not, we must click on Deploy
Branch once more.
The application should function as follows after being rebuilt:
deployed
 5. How to add an add-on
You may quickly add resources in the form of add-ons to your project
with Heroku, which is one of its primary advantages. Databases,
logging and monitoring tools, CI and CD tools, and testing tools are
examples of these external resources.
So let's examine how to include a new resource in your project right
now. We'll start by going to Resources, and then we'll build a new
testing tool from there.
add-addon

Click Find more add-ons and then type "Loadmill" into the search
box. Loadmill is a testing tool that works incredibly well for load and
regression testing.
 install-loadmill

Just click "Install" now. Next, pick the program you want to link.
provision-add-on

Heroku will now immediately set up a brand-new account for you on

the supplied platform.
You can view the just uploaded resource on the resources tab:
 ff

If you visit this add-on, you should see its dashboard with a produced demo test and an
introduction instruction.

fff2

DEPLOYING DATABASES WITH MONGO

ATLAS
The deployment and management of MongoDB deployments are
made possible by Mongo Atlas. It enables us to deploy our
database across several cloud service providers (including Google
Cloud, AWS, and Azure), selects the deployment location, and
specify the precise specifications of the VMs being used. The nice
thing is that after deployment, we can quickly change any of these
configurations, and Mongo Atlas will move all of our data onto a
new VM with the modified configuration. Additionally, it enables us
to locate MongoDB in the same region as our managed instance
group VMs, guaranteeing the lowest possible latency for server-to-
server communication. To install databases using Mongo Atlas,
adhere to the following steps.
You must first build a database for your application.
Go to the MongoDB Atlas dashboard by clicking it. You'll
see something similar to the screenshot below:
The MongoDB Atlas dashboard shows the clusters we've
created.

In the sandbox Clusters box, select the Collections button

to construct a database for your application. If you've never
made a database before, you'll be directed to a page that
looks like this:
 The MongoDB Atlas cluster shows that no databases have been
created yet.

Choose the "Add My Own Data" button from this page. Click the "+
Build Database" button in the left column of the window pane instead
if you've already created a database with MongoDB Atlas and need
to create another one for this project. In either case, the final modal
should resemble the illustration below:
The Create Database modal dialog allows
users to create a database name and starter
collection.

Your MongoDB database name and a collection for that

database should be entered into the form. Don't worry if
you think your database will scale up or down in the future;
you only need to construct one collection to get started
because your application will create them when you deploy
it. The dashboard should show your finished initial
collection and database, as seen in the following
illustration:
The collections tab shows the database and collection you
just created.
 CHAPTER NINETEEN

AUTHENTICATION AND SECURITY

UNDERSTAND THE NEED FOR
AUTHENTICATION AND KEEPING USER
DETAILS SECURE
Hackers will always discover a way to bypass an authentication
mechanism. Developers must therefore recognize it, safeguard
their files, or use a secure method of prevention.
Authentication is the process of confirming a user's identity. It just
has true or false as its two return values. Since validation is the
most crucial component of any system, the majority of
authentications will be implemented at the system's beginning. You
can access the system if you have been authenticated. Although
authentication may differ from system to system, everyone needs
to take certain concrete actions to make it as secure as possible.
The identification phase and the primary authentication step are
the two main components of authentication. The first stage
involves providing a user ID and validating the actual user's
identity. The user has not yet been authenticated, even though the
initial step may have been successful. The user enters their true
credential, which was known only to the authenticated user, in the
second stage. The following list of authentication techniques is
used to build secure systems:
1. Password authentication
The most typical and extensively used auth procedure is this one.
A password is a user-generated string of alphanumeric characters,
some of which are unusual, and is known only to the person who
created it. The least reliable and most easily cracked
authentication method is a password. As you might expect, a lot of
people have a variety of accounts, typically using the same
password across the board. A hacker might gain access to all of
your accounts simultaneously if one system is hacked. So, only a
password won't be able to protect all of your personal information.
The user can create a strong password with at least two special
characters and alphanumeric values, or the system can generate a
random 16-digit password for them. The created password can be
checked by the system to make sure it is secure enough to thwart
brute-force attacks. How to create the strongest password
possible:
Keep it lengthy (at least 12-16 characters long).
Avoid using cliched words ( like iloveyou, iamabc,
1234567890).
Use both special and alphanumeric characters.
Avoid using everyday language (like your name, your
address, and your favorite color).
Avoid using consecutive letters (like qwerty).
2. Multi-factor authentication
Multi-factor authentication, as the name suggests, uses two or
more methods to identify a user, such as inputting a password
AND receiving an OTP through email or phone. In addition to
password authentication, it adds another level of protection. A
hacker is expelled from the system if they fail even one level.
Systems with at least two factors are more secure since it takes a
lot more information for hackers to access a user's system or
profile. Consider a system that requires two factors for
authorization: a password and a phone notification confirmation. In
the unlikely event that a hacker gained access to a system's
database, he would have the user's password. As soon as he
attempted to log in, he was successful in the first step;
nevertheless, for the second step, the user would receive a push
notification. He fell short at the moment. User engagement is
therefore essential during the authentication procedure.
3. Biometric authentication
Because it makes use of the individual biological characteristics of
the user, biometric authentication is the most secure
authentication. If a system needs extra security, it employs this
authentication procedure. In nuclear industries, airports, military
bases, etc., it is commonly used.
The benefits of using biometric authentication are as follows:
Since it depends on the individual biology of the user, the
likelihood of hacking is quite minimal.
Place biometric identification checkpoints at a physical
entrance where you require the most security, like an
airport or a private room or building.
Combine biometrics with a multi-factor authentication
method.
Here are a few well-used biometric techniques:
1. Facial recognition
As implied by the name, access requires users to register their
faces. During authentication, it is simple to recognize users thanks
to the system's storage of a person's facial points beside their
name. Phones use on a regular basis. However, there are other
difficulties with this, including recognizing faces in low light, from
different angles, and with or without cosmetics or spectacles.

2. Fingerprint scanners
The primary benefit of the authentication procedure is that each
user has a distinct fingerprint. It is currently the most widely used
biometric authentication. When the scanner cannot read the user's
first fingerprint, they can use a different finger by registering
additional fingerprints.
3. Voice Identification
With voice identification, a person must register their voice and a
key phrase to identify themselves, just like with a password. The
user is given access after the system detects their voice and
inflection. Voice authorization provides several benefits, including
the fact that it can be utilized with cellphones because today's
smartphones all come equipped with microphones, making the
authorization procedure quick and frictionless. This approach does
have some drawbacks; for example, it may not be as accurate as
other biometric data in crowded, noisy environments.
4. Certificate-based authentication
Typically, the system will provide a digital certificate to verify the
user for certificate-based authentication. It can be produced using
the user's distinctive ID, such as a passport or voter ID. This
system will be able to identify the appropriate user because it
contains the user's public key and digital signature. A system
utilizes cryptography to verify the validity of a user's digital
signature after receiving one from them.
5. Token-based authentication
After providing their credentials to the system, users can identify
themselves using a special token through a procedure known as
token-based authentication. A token can only be used once during
the allotted time; thereafter, the user must generate a new token.
The two types of modern authentication are token-based and cookie-
based.
Let's examine its operation.

The user enters their login information.

If the server determines that the information is accurate,
it generates a token based on that information for some
time.
A token that is returned to the user.
Now, when a user attempts to access the system, the
system only requests the token; if it is legitimate, the
system then permits the user to continue. The token is
destroyed when it expires or the user logs out.
A system will ask for a token when it needs to validate the user,
even if the user enters the system. So it’s better than traditional
password-based authentication.

LEARN ABOUT ENCRYPTION AND USE

ENCRYPTION TO KEEP YOUR DATABASE
SECURE
Through a mathematical process, an encryption algorithm
converts information into unintelligible characters. When it comes
to data security, encryption is a fundamental kind of protection
that deals with the security of the data itself, while other security
measures defend a system from infiltration or attack. This implies
that even if a system is breached, compromised data can still only
be accessed by authorized individuals who have the proper
encryption keys.
Your data, both in transit and at rest, is more securely protected
thanks to database encryption. Due to recent security breach
cases, many organizations have begun to take data encryption
seriously. Because they house the most important asset for the
majority of businesses, database servers are typically a popular
target for attackers. The likelihood is high that an intrusive party
will steal data from your server once they have access to sensitive
information there. They then utilize the data to demand ransom
from the organization they have targeted, exploit the data, or
obtain other financial benefits.

Why Do I Need Database Encryption?

Database encryption is the process of employing an algorithm to turn
readable text into "cipher text" (unreadable data). To decode the text,
you must use a key created by the algorithm. It is generally advised
that databases be encrypted, especially for companies that deal with
finance, health care, or e-commerce. Due to the recent prevalence of
cyberattacks, data theft, and data breaches, there is growing worried
around personal data. People are increasingly conscious of data
security and privacy, and they want their data to be safeguarded and
utilized solely as needed. The following are some positive advantages
of database encryption:
1. Avoid Security Attacks
Protection breaches are unavoidable, but with better security and data
encryption techniques, hackers may not be able to analyze or decrypt
the data to further comprehend it. Imagine that a Man-in-the-Middle
(MITM) attack or eavesdropping is taking place while a server is being
backed up or transferred. If there is unencrypted data transmission,
the attackers will undoubtedly benefit; this is not the kind of
circumstance you want to be in for your environment.
If your database is encrypted, an attacker will need to figure out how
to decode the data. The intricacy of the ciphers and the methods used
to produce the encrypted data will determine how far they can travel.
Additionally, since data these days is the new gold, attackers will
make every effort to gain access to encryption keys, which will enable
them to unlock the vault or decrypt the encrypted data. It is crucial to
safeguard the infrastructure in all respects, including limiting access to
servers where practical, to prevent these types of data breach
attempts.
2. Compliance with Security Regulations
Encryption is one of the most crucial needs when dealing with security
laws like PCI-DSS. It is a criteria that must be met. For instance, all
cardholder data must be either hashed (approved hash algorithms
listed in FIPS 180-4: SHA-1, SHA-224, SHA-256, SHA-384, SHA-512,
and SHA-512/224), truncated, tokenized, or encrypted using industry-
accepted methods (e.g., AES-256, RSA 2048). Although it is not the
only aspect of having encrypted data that must be covered, PCI-DSS
also mandates the use of the PCI-DSS encryption key management
method.

3. Protecting Sensitive Data

With centralized key management and straightforward APIs for data
encryption, encryption key management is perfect for protecting
sensitive data. Examples of these key management include
employing the closed-source public clouds Amazon Web Service
(AWS) Key Management Service (KMS), Google Cloud KMS,
Microsoft Azure Key Vault, or the open-source Hashicorp Vault.
Learn and implement Hashing and Salting with bcrypt Using
Sessions and Cookies to persist user log-in sessions
We may add safe authentication to our Rails sites using the
password-hashing mechanism provided by bcrypt.
A hash algorithm applies an algorithm to data (in this case, a
password) to hash it. A user's password is combined with a salt,
which is a random piece of data, to create a password hash. Salt
cannot be easily removed once it has been introduced. It's like
adding salt to food; once it's been done, it's nearly impossible to take
out.
In this manner, it would be quite challenging to crack the passwords
even if hackers or other nefarious people gained access to the
password table of your database.
Let's examine how salting is used in the registration and sign-in procedures for a user.

The password is hashed with a salt and stored in the

database when a user creates an account with a
username and password.
The password is hashed using the same encryption
process when a user logs in with a username and
password. The user is authorized and sign-in is successful
if the hashed password precisely matches the hashed
password kept in the database.

HASHING PASSWORDS WITH BCRYPT

Let's first construct a virtual environment and install Flask before we
begin utilizing bcrypt. Although bcrypt isn't a native feature of Flask,
a module called flask-bcrypt was created specifically for integration
with Flask:
Before building our app, let's explore how bcrypt works. Hop
into ipython and run the following:

This is exactly how we will be storing our users' passwords and

checking to see if they are correct!

SESSIONS AND COOKIES

Sessions and cookies will be used if authentication is required,
regardless of the type of website you are building. Every website
receives several requests from a variety of users. How the web
server determines which user is sending each request is the main
issue we're attempting to tackle here.
One choice is to alert the browser about the person as soon as they
log in. To let the server know where a request is coming from, the
browser will then retain this information and transmit it along with
each subsequent request. This has the drawback of not being
secure. Any other browser (perhaps one that the user had previously
signed into) might also submit a request using this id and jeopardize
the security of the user. We require a more transient solution.

Session Tokens
Giving the browser as little information about the user as possible is
in our best interests. Consequently, we return a piece of information
known as the "session token" rather than the verified user's data.
The period during which the user is authorized is known as a
"session."
The fact that each session has a unique session token and that the
token by itself does not reveal the identity of the logged-in user
makes this secure.
John is now sending their current session token along with every
request they make from their browser. Which session token
corresponds to which user is recorded by the server? A new session
token is generated and assigned, and the previous token expires
once the user logs out (or logs in again), or after a predetermined
amount of time.
John's previous login was from "Browser 2" in the image above. The
session's token was w344e3, which has since expired. Their current
session token (a23ww2) expires when John logs out of "Browser 1".
Since that information is securely saved on the server and is not
made available to the public, no third party can determine which
session corresponds to which user.
The difficulty today is that the user must constantly include their
session token with each request they make.
Therefore, whoever writes client-side code must be sure to provide
the session cookie with each request. Fortunately, browsers provide
a mechanism for including this data with every request:
Session Cookies
In a word, a cookie is a small bit of data stored with the browser that
is automatically transmitted with each request if the request
originates from the same domain.
Since that is all the server truly requires in our situation, the cookie
would be set to the value of the session token. The request from the
browser would always include the session token, therefore the
exchange between the browser and the server would be the same
as previously.
Cookies can be set up with extra qualities in addition to their
convenience, like:
1. Cookie expiration: After a predetermined amount of time,
cookies may be removed automatically.
2. Javascript visibility: By examining the javascript code
currently active on the webpage, you can determine
whether a cookie is visible.
3. Cross-site visibility: Cookies can only be delivered to the
domain by which they were produced. This restriction can
be applied.
Right-click anywhere on the page and select "inspect" to launch the
developer tools if you want to view the cookies that are presently
being stored for the website you are currently visiting (such as this
one) (if you are on chrome). After that, click on the cookies area
under the application tab.
You must have completed the following steps before you can create
a persistent login. Implementing the HTTP server, starting up your
web application, setting up your database, and starting up the HTTP
server. then proceed with the steps below to put that into action.
1. Implementing User Sign Up
We will develop a handler that accepts a POST request with a JSON
body of the following format to create or register users:
If the user has been successfully registered, the handler will return a 200 status:

Now that the server has been started, we can try to request to save
some credentials:
The password column in our database does not contain the one we
just received, as can be seen, if we check it right now:

There is no method to reverse a bcrypt hash once a password has

been hashed. In essence, despite having complete access to the
user's database, we are unable to determine our own users'
passwords.
2. implementing User Login
We must now develop a handler that will authenticate a user against
the records in our database using only his username and password.

Making a POST request to the /signin route will now allow us to

attempt to log in:
You'll receive a 200 status code as a result. A 401 status code will be
returned if we submit a request with an invalid login or password:

3. Persisting User Login

In this case, we successfully authenticated the user and displayed a
success message. But in reality, the majority of visitors would still
prefer to utilize your website.
If the user navigates to another page on our website while logged in,
we need to keep track of that fact. Otherwise, the user would need to
keep logging in.
Using cookies and sessions, we can accomplish this. A "cookie" is a
bit of information that stays on a user's browser and allows us to
recognize them across our website.

SETTING UP LOCAL AUTHENTICATION

FROM SCRATCH
For testing purposes, I will use iCloud to authenticate to a Google
Cloud API. It does not demonstrate how to log in to Google Maps
Platform APIs or other non-Google Cloud APIs. Consult the Google
Maps documentation for details on API keys for the Google Maps
Platform APIs and SDKs. To build a local authentication with Google
cloud, adhere to the steps listed below.
Create a service account, following the steps below:
1. Open the Create service account page in the console.
2. Go to Create a service account in step two.
3. Decide on a project.
4. Type a name into the Service account name field. Based
on this name, the console populates the Service account
ID column. Enter a description in the Service account
description area. Service account, as an illustration, for
quickstart
5. Select Create to proceed.
6. Giveyour service account the following role(s) to allow
access to your project: Owner > Project.
7. Pick a role from the Select a role list.
8. Click "add" to create other responsibilities. Add one more
role, then each subsequent role.
(NB: The resources your service account can access in your
project depend on the Role field. These positions are both
grantable and revocable at a later time. Don't assign the Owner,
Editor, or Viewer roles in production settings. Instead, appoint
someone to a predefined or custom role that suits your
requirements).
9. Click Continue.
10. Click Done to finish creating the service account.
11. Avoid closing the browser window. It is put to use in the
following action.
Create a service account key:
 1. In the console, click the email associated with the newly
established service account.
2. Choose Keys.
3. Select Create new key after selecting Add key.
4. Select Create. Your computer downloads a JSON key file.
5. Select Close.
You must set an environment variable where your code is running to
use service accounts with the Google Cloud CLI.
Set the environment variable GOOGLE APPLICATION
CREDENTIALS to provide authentication credentials to your
application code. This variable only functions during the current shell
session. Set the variable in your shell starting file, such as
[Link] [Link] file, if you want it to apply to subsequent shell
sessions.

Linux or macOSWindows
Image

The path to the JSON file containing your service account key
should be substituted for KEY PATH.
For example:

Image

You can offer credentials independently of your application by setting

the environment variable without modifying the application code
before deployment. You might also clearly state in your code where
the service account key file is located. See Authenticating as a
service account for more details.
Verifying authentication
When utilizing a Google Cloud client library, you don't have to
explicitly give your credentials in code once the environment variable
has been created. Your credentials may be implicitly known to the
client library. As a result, by setting the environment variable and
then running client library code, such as the following example, you
may check that authentication functions. Authentication is successful
if the request is granted.
To run the following example, you must first install the Cloud Storage
client library.
Image

IMPLEMENTING PASSPORT TO
AUTHENTICATE USERS QUICKLY AND
EFFECTIVELY
A library of authentication tools called Passport can be customized to
meet the requirements of most applications. Why is a Passport so
adaptable? The biggest benefit is the abundance of implementation
techniques available to developers.
Passport strategies are distinct modules designed to work with
various types of authentication. Strategies for passports are as
follows:
passport-local: local username and password
authentication.
passport-facebook: authenticate with Facebook via OAuth.
passport-twitter: authenticate with Twitter via OAuth.
passport-jwt: use JSON web tokens instead of sessions.
There are countless tactics. Even modules for certain technologies
and databases are available. You can research this topic further.

UNDERSTAND AND USE ENVIRONMENT

VARIABLES TO KEEP SECRET KEYS
SECURE
An environment variable is an accessible KEY=value pair that is
saved on the local system where your code or application is being
run. Follow these steps:
List all the Default Environment Variables
$ printenv

To store our confidential information, such as tokens, API

keys, and passwords, make a file called app-env.
Image

Use the source command to source this file into the local
environment.
$ source app-env
These environment variables are now usable in our
programs, for instance in NodeJS. [Link] gives you
access to the variables defined in your environment in
 the [Link] global object. So we can use the
[Link] object to access our keys
var api_key = [Link].API_KEY;
Add app-env to .gitignore as the final step to have this file ignored by
.git.
app-env
In this manner, we may use our keys and tokens locally while
preventing the exposure of these sensitive data to others on Github.

UNDERSTAND AND USE OAUTH TO LOG IN

USERS USING GOOGLE AND FACEBOOK
To authenticate users, OAuth is a mechanism that enables third-
party websites to access and get specific pieces of data from bigger
websites. This procedure helps to safeguard private information and
is safe and secure.
Using your Facebook or Google account to log in to applications and
other websites is completely secure. To authenticate users, major
digital businesses like Google, Facebook, and others utilize a
standard called OAuth that enables third-party websites to access
and obtain specific pieces of information from these major websites.
Let's take a quick look at the technological mechanism in question
before delving further into this technological puzzle of website logins.

What is OAuth?
OAuth is a protocol that 'big' websites (websites with a lot of users,
like Google, Facebook, etc.) can use to give access to their users'
information to other websites or applications without disclosing the
users' passwords and other sensitive information. See the official
OAuth Logo below.
 Oauth Logo

Technically speaking, OAuth is an open standard for secure access

delegation, which means it is a service that enables web giants like
Google or Microsoft to allow their users to share their specific pieces
of information with third-party websites or applications while
simultaneously protecting the users' private information. OAuth is
typically used by websites and applications with large user
databases, such as Facebook, Google, Twitter, and Microsoft.
social media collage

A hypothetical situation where OAuth fits

perfectly
Let's say you wish to quickly modify an image online. You visit a
website, like Canva, which enables you to edit your image right in
the window of your web browser. The catch is that you must register
with Canva to access its services.
You might not want to spend any more time creating a sign-up form from scratch given that
the image simply needs simple tweaking for 5–6 minutes. Or perhaps you're simply too
bored to fill out a form. I am aware of many folks who sneer at sign-up pages just by looking
at them.

Sincerely, I believe it is understandable to be angry. Asking a visitor

who plans to spend only a short while on your website to sign up and
create an account from scratch is asking a lot in today's fast-paced,
attention-span-reducing world when an Internet user's attention span
is shorter than a minute! A user might simply quit a website that is
perceived as being "demanding" and go to one that doesn't ask them
to sign up for anything.

How does OAuth save you from the hassles

of Signing Up?
The majority of third-party websites (that demand that you have an
account) are aware of users' hesitation to open new accounts. These
third-party websites incorporate the OAuth standard into their
platform to retain such "reluctant" consumers.
You normally have two options when signing up on an OAuth-
enabled third-party website (like Canva): you may either sign up in
the "traditional manner," that is, by completing an online form, or you
can sign up using Facebook or Google.
 Website login with facebook

You may have noticed that there are two ways to sign up for an
application: one lets you join up with your social network accounts,
and the other, the "traditional" one requires your email.
Like almost all websites on the Internet, Canva ists on the possibility
that you may have an account on one or both of Facebook and
Google given their enormous user bases (i.e., the number of users of
their services ranges in the billions).
Therefore, Canva asks you to join up using your Google/Facebook
account rather than having you complete a sign-up form manually,
which could take 10 minutes or longer depending on your speed and
"annoyance level."

How does OAuth work?

The OAuth protocol operates as follows: Consider a scenario where
you (the user) must register or create an account on a third-party
website or application (e.g., Canva).
First, you click on the “Sign up with the Facebook button.
Canva login with facebook

You are forwarded to [Link], where it determines

whether you are currently logged in to Facebook. If not,
you must enter your username and password to access
your account. Once you've logged in, a brief dialog box
describing the sort and amount of information you'll be
sharing with the third-party website is displayed to you.
You click the "Continue" button if you are comfortable with
the third-party website receiving the necessary information.
 login with facebook

The data Facebook will allow Canva, a third-party website,

to access. You can always change your selections if you're
not comfortable with the information that will be shared
with the third-party website.
login with facebook

To confirm that the user in question does have a valid

account with Facebook, Facebook now sends you to the
relevant third-party website and prompts you for an
authentication code. The website now displays the special
 code it was given when it initially registered as a legitimate
website or application with Facebook. Facebook utilizes
the code to confirm the legitimacy of the website, and in
exchange, the website is given an access token.
To confirm that the user in question does have a valid account with
Facebook, Facebook now sends you to the relevant third-party
website and prompts you for an authentication code. The website
now displays the special code it was given when it initially registered
as a legitimate website or application with Facebook. Facebook
utilizes the code to confirm the legitimacy of the website, and in
exchange, the website is given an access token.

CONCLUSION

Any full-stack developer should be able to work on every layer of the

application and deliver finished products as quickly as possible. Full-
stack web developers are increasingly in demand due to their
involvement in numerous phases of the development life cycle. If you
want to work as a full-stack developer, you must be aware of all the
talents you need.
You can use this book to uncover what you need to know and
straighten out any crooked roads on your way to becoming a full-
stack web developer. That is, being aware of what you require for
this career trip to make it enjoyable and simple.
I can now congratulate you if you have come this far in this publication guide that you are on
you way to becoming your dream full-stack web developer.

INDEX
 '

'Connect'

'javatpoint'

32-bit

64-bit

abstractions

accessibility

account

accounts, accounts, accounts, accounts, accounts, accounts, accounts, accounts,

accounts, accounts, accounts

accurately

ACID

admin

AI, AI

AJAX

Alert

alert, alert, alert, alert, alert, alert, alert, alert

algorithm, algorithm, algorithm, algorithm

Algorithms

algorithms, algorithms, algorithms

alternative, alternative, alternative, alternative

anatomy, anatomy
Angular JS, Angular JS

animation

animations, animations, animations

Animations, Animations

animations, animations

Apache, Apache, Apache, Apache, Apache, Apache

API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API,
API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API,
API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API,
API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API,
API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API, API,
API, API, API

APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs,
APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs,
APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs,
APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs, APIs

app, app, app, app, app, app, app, app, app, app, app, app, app, app, app, app, app, app,
app, app, app, app, app, app, app, app, app, app, app, app

App, App, App

app, app

App, App, App

app, app, app

App

app

App

app, app, app, app, app, app, app, app, app, app, app, app, app, app, app, app, app, app,
app, app, app

app's, app's, app's, app's, app's

application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application, application, application, application, application,
application, application, application

application's, application's, application's, application's, application's, application's,

application's, application's, application's, application's, application's, application's,
application's

applications, applications, applications, applications, applications, applications, applications,

applications, applications, applications, applications, applications, applications, applications,
applications, applications, applications, applications, applications, applications, applications,
applications, applications, applications, applications, applications, applications, applications,
applications, applications, applications, applications, applications, applications, applications,
applications, applications, applications, applications, applications, applications, applications,
applications, applications, applications, applications, applications, applications, applications,
applications, applications, applications, applications, applications, applications, applications,
applications, applications, applications, applications, applications, applications, applications,
applications, applications, applications, applications, applications, applications, applications,
applications, applications, applications

approaches
apps, apps, apps, apps, apps, apps, apps, apps, apps, apps, apps, apps, apps, apps, apps,
apps, apps, apps, apps, apps, apps, apps, apps, apps, apps, apps, apps

ArangoDB, ArangoDB

architecture, architecture, architecture, architecture, architecture, architecture, architecture,

architecture, architecture, architecture, architecture, architecture, architecture, architecture,
architecture, architecture, architecture, architecture, architecture

argument, argument, argument, argument, argument, argument, argument, argument,

argument

arguments, arguments, arguments, arguments, arguments, arguments

Arithmetic

arrays, arrays, arrays, arrays, arrays, arrays, arrays, arrays

artificial

ASCII

async

AsyncAPI

asynchronous

Asynchronous

asynchronous, asynchronous

Asynchronous

asynchronous, asynchronous, asynchronous

Asynchronous

asynchronously

Atlas, Atlas, Atlas

Attacks, Attacks

attribute, attribute, attribute, attribute, attribute, attribute, attribute, attribute, attribute,

attribute, attribute, attribute, attribute, attribute, attribute

Attributes
attributes, attributes, attributes

audio, audio

Audio

authenticate, authenticate, authenticate, authenticate, authenticate, authenticate,

authenticate

Authenticated

authentication, authentication, authentication, authentication, authentication, authentication,

authentication, authentication, authentication

Authentication

authentication

Authentication, Authentication

authentication

Authentication

authentication

Authentication

authentication

Authentication

authentication, authentication

Authentication

authentication, authentication, authentication, authentication, authentication, authentication,

authentication, authentication, authentication, authentication, authentication, authentication,
authentication, authentication, authentication, authentication, authentication, authentication,
authentication, authentication, authentication, authentication, authentication, authentication

Authentication

authentication, authentication, authentication, authentication, authentication

authentications

authorization, authorization
Authorization, Authorization, Authorization

auto

autonomous

AWS

back-end, back-end, back-end, back-end, back-end, back-end

Back-end, Back-end

back-end, back-end

Back-end

back-end, back-end, back-end

Back-end

back-end, back-end, back-end, back-end, back-end, back-end, back-end, back-end

Back-end

back-end, back-end, back-end, back-end

Back-end

back-end, back-end, back-end

Back-end

back-end

Back-end, Back-end

back-end

backbone

backend, backend, backend, backend, backend, backend, backend, backend, backend,

backend, backend

Backend, Backend

backend, backend, backend, backend, backend, backend

backend engineers

background

backup, backup

Balsamiq, Balsamiq, Balsamiq

Balsamiq's

bar

Base64, Base64, Base64

Bash, Bash

bash

Bash, Bash

bash

Bash

bash

Biometric

biometric, biometric, biometric, biometric, biometric, biometric

biometrics

Bitbucket, Bitbucket, Bitbucket

block, block

blockchain, blockchain, blockchain, blockchain

blocking, blocking, blocking, blocking, blocking

blocks, blocks

body

boilerplate

Boilerplate

boilerplate, boilerplate, boilerplate

Boilerplate
boilerplate, boilerplate

boldness

boolean, boolean

Boolean, Boolean, Boolean

boolean

Bootcamp

BootStrap

bootstrap

Bootstrap, Bootstrap, Bootstrap, Bootstrap, Bootstrap, Bootstrap, Bootstrap, Bootstrap,

Bootstrap, Bootstrap, Bootstrap, Bootstrap, Bootstrap, Bootstrap

bootstrap, bootstrap

Bootstrap, Bootstrap, Bootstrap, Bootstrap, Bootstrap, Bootstrap

bootstrap, bootstrap

Bootstrap, Bootstrap, Bootstrap, Bootstrap, Bootstrap, Bootstrap, Bootstrap, Bootstrap

Border

border, border

borders

bottom

Bourne

box, box

boxes

braces

brainpower

branch, branch, branch

Branch, Branch, Branch

branch, branch
branches, branches

Branches

branching

Branching

breached

breadcrumb

break, break

browser

Browser

browser

Browser

browser, browser, browser, browser, browser, browser, browser, browser, browser,

browser, browser, browser, browser, browser, browser, browser, browser, browser,
browser, browser, browser, browser, browser, browser, browser, browser, browser,
browser, browser, browser, browser, browser, browser, browser, browser, browser, browser

browsers, browsers

btn, btn

Buffering

bug, bug

bugs, bugs, bugs, bugs

Built

business, business, business, business, business, business, business, business, business,

business, business, business, business, business, business, business, business, business,
business, business, business, business

businesses, businesses, businesses, businesses, businesses, businesses, businesses,

businesses, businesses

buzz
 C

C++, C++

C++.

Cache, Cache

Call, Call, Call

callback, callback, callback, callback, callback, callback, callback, callback

callbacks, callbacks, callbacks

Callbacks

callbacks, callbacks, callbacks, callbacks

Callbacks

callbacks

Cancel

Canvas

capitalize

Cards

carousel, carousel

Carousels

Cascading, Cascading

category

CDN, CDN

center, center

century

certificates

characters

Check
checkbox

checkboxes

child component, child component, child component, child component, child component,
child component

Chrome, Chrome, Chrome, Chrome, Chrome, Chrome, Chrome, Chrome, Chrome,

Chrome, Chrome, Chrome, Chrome

chunk

class, class, class

Class

class, class, class, class, class, class, class, class, class, class

Class

class

Class

class, class

Class

class, class, class, class, class, class, class, class, class, class, class

Class

Classes

classes, classes

Classes

classes

CLI, CLI, CLI, CLI, CLI, CLI, CLI

clicks, clicks, clicks

Client, Client

client, client, client, client, client, client, client, client, client

Client
client

Client, Client

client, client, client, client, client, client, client, client, client

Client

client, client, client, client, client, client, client, client, client, client, client, client, client, client,
client, client, client, client, client, client, client

Client

client, client, client, client, client, client, client, client, client, client, client

Client

client, client, client, client, client, client, client, client, client, client, client, client, client, client,
client, client, client, client, client, client, client, client, client, client, client, client, client, client,
client

client-server, client-server

client-side, client-side, client-side, client-side, client-side, client-side, client-side, client-side,

client-side, client-side, client-side, client-side, client-side, client-side

client’s

Clone

Closure

closures

Closures

closures

cloud, cloud, cloud, cloud, cloud, cloud, cloud

Cloud

cloud

Cloud

cloud, cloud

Cloud
cloud, cloud, cloud, cloud, cloud

Cloud, Cloud, Cloud

cloud

Cloud, Cloud, Cloud

cloud-based, cloud-based

CMS, CMS

code, code, code, code, code, code, code, code, code, code, code, code, code, code, code,
code, code, code, code, code, code, code, code, code, code, code, code, code, code, code,
code, code, code, code, code, code, code, code, code, code, code, code, code, code, code,
code, code, code, code, code, code, code, code, code, code, code, code, code, code, code,
code, code, code, code, code, code, code, code, code, code, code

Code

code, code, code, code, code, code, code, code, code, code, code, code, code, code, code,
code, code, code, code, code, code, code, code, code, code, code, code, code, code, code

Code

code, code, code, code, code, code, code, code

Code

code, code, code, code, code, code, code, code, code, code, code, code, code, code, code,
code, code, code, code, code, code, code, code, code, code, code, code, code, code, code,
code, code, code, code, code, code, code, code, code, code

Code, Code

code, code

Code

code, code, code, code, code, code, code, code, code, code, code, code, code, code, code

Code

code, code, code, code, code, code, code, code, code, code, code, code, code, code, code,
code, code, code, code, code, code, code, code, code, code, code

Code
code, code, code, code, code, code, code, code, code, code, code, code, code, code, code,
code, code, code, code

coders

codes

coding, coding, coding, coding, coding, coding, coding, coding, coding

Coding

coding, coding, coding, coding, coding

collaborate

color, color, color

columns

Columns

columns, columns, columns, columns

Columns

columns, columns, columns, columns, columns, columns, columns, columns, columns,

columns, columns

combinations, combinations

combinator, combinator

combinators

combines, combines, combines

Command

command, command, command

Command

command, command, command, command, command, command, command, command,

command, command, command, command

Command

command, command, command, command, command, command, command, command,

command, command, command, command, command, command, command, command,
command, command, command, command, command, command, command, command,
command, command, command, command, command, command, command, command,
command, command, command, command, command, command, command, command,
command, command, command, command, command, command, command, command,
command, command, command, command, command, command, command, command,
command, command, command, command, command, command, command, command,
command, command, command, command, command, command, command, command,
command, command, command, command, command, command, command, command

command-line, command-line, command-line, command-line, command-line, command-

line, command-line, command-line, command-line, command-line, command-line,
command-line, command-line, command-line, command-line, command-line, command-
line, command-line, command-line, command-line, command-line, command-line,
command-line, command-line

commands, commands, commands, commands

Commands

commas

comment's

comments

communication, communication, communication, communication, communication,

communication, communication, communication, communication, communication,
communication, communication, communication, communication

companies, companies, companies

comparison

compatibility, compatibility, compatibility, compatibility, compatibility

compatible, compatible, compatible, compatible, compatible, compatible, compatible,

compatible, compatible

compiler

compilers

component, component, component, component, component, component, component,

component, component, component, component, component, component, component,
component, component, component, component, component, component, component,
component, component, component, component, component, component, component,
component, component, component, component, component, component, component,
component, component, component, component, component, component, component,
component, component, component, component, component, component, component,
component, component, component, component, component, component, component,
component, component, component, component, component, component, component,
component, component, component, component, component, component, component,
component, component

component-driven, component-driven

components, components, components, components, components, components,

components, components, components, components, components, components,
components, components

Components

components, components, components, components, components

Components

components, components, components, components, components, components

Components, Components

components, components, components, components, components, components,

components, components, components, components, components, components,
components, components, components

Components

components, components, components, components, components, components,

components, components, components, components, components, components,
components, components, components, components, components

Composite

compressors

Compressors

computational
computer, computer, computer, computer, computer, computer, computer, computer,
computer, computer, computer, computer, computer, computer, computer, computer,
computer, computer, computer, computer, computer, computer, computer, computer,
computer, computer, computer, computer, computer, computer, computer, computer,
computer, computer, computer, computer, computer, computer, computer, computer,
computer, computer

computers, computers, computers, computers, computers, computers, computers,

computers, computers

computing, computing, computing

concatenate

Concatenating

concerns

condition, condition, condition, condition, condition, condition, condition, condition,

condition, condition, condition

conditional, conditional, conditional, conditional, conditional, conditional, conditional,

conditional, conditional

Conditional

conditional, conditional

Conditional

conditional

Conditional

conditional

conditions, conditions, conditions, conditions, conditions, conditions

config

configuration, configuration, configuration, configuration, configuration

configurations, configurations

configure, configure, configure, configure, configure, configure

configuring
Connecting

Connection, Connection, Connection, Connection, Connection, Connection

Connections, Connections, Connections

Cons

Console

console, console, console, console, console, console, console, console, console, console,
console

Consortium

constitutes

container, container, container

Containers

containers

Content, Content

control

Control, Control

control, control, control, control, control, control, control, control, control, control, control,
control, control, control, control, control, control, control, control, control, control, control,
control, control, control, control, control

Controller, Controller

controller, controller, controller

cookie-based

Cookies, Cookies, Cookies, Cookies

Create

create, create, create

Create

create, create, create, create, create, create

Create, Create, Create

create, create, create, create, create, create

Create, Create, Create, Create

CREATE

create, create

Create, Create

create

Create

create, create

Create, Create

create

Create

create, create

CREATE

create, create, create, create, create, create, create, create, create, create, create

Create, Create, Create

create

Create

create

Create

create

Create

create

Create

create

Create
create, create, create, create, create, create

Create

create, create, create, create, create, create, create, create

Create

create, create, create

Create

create, create

Create

create, create, create, create, create, create, create

CREATE, CREATE, CREATE, CREATE, CREATE

create

Create

create

CREATE

create

CREATE

create

CREATE, CREATE

create

Create

create

Create

create

Create

create

Create, Create, Create

create, create, create, create, create

Create, Create, Create

create, create, create, create, create, create

Create, Create, Create, Create

create

Create, Create, Create

create, create

credentials, credentials, credentials, credentials, credentials, credentials, credentials,

credentials, credentials, credentials, credentials, credentials, credentials

CRM, CRM, CRM

CRUD, CRUD, CRUD, CRUD, CRUD, CRUD, CRUD, CRUD, CRUD, CRUD, CRUD,
CRUD, CRUD, CRUD, CRUD, CRUD, CRUD, CRUD, CRUD, CRUD, CRUD, CRUD,
CRUD, CRUD, CRUD, CRUD

CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS,
CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS,
CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS,
CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS,
CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS,
CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS,
CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS,
CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS,
CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS

CSS3, CSS3

CTA

CURD, CURD

custom

CVCS, CVCS

D
data, data, data, data, data, data, data

Data, Data, Data

data, data, data, data, data

Data

data, data, data, data, data, data, data, data

Data, Data

data

Data

data, data, data, data

Data

data, data, data

Data

data, data, data, data, data, data, data, data, data, data, data, data, data

Data

data, data, data, data, data, data, data, data, data, data, data, data, data

Data

data, data

Data

data, data, data, data, data, data, data, data, data, data, data, data, data, data, data, data,
data, data, data, data, data, data, data, data, data, data, data, data, data, data, data, data,
data, data, data, data, data, data, data

Data

data, data, data

Data

data, data, data, data, data, data, data, data, data, data, data

Data
data, data

Data

data, data, data, data, data, data, data, data, data, data, data, data, data, data, data, data,
data, data, data, data, data, data, data, data

Data

data, data, data, data, data, data

Data

data, data, data, data, data, data, data, data, data, data, data, data, data

Data

data, data, data, data, data, data, data, data, data, data

Data

data, data, data, data, data, data, data, data, data, data, data, data, data, data, data, data,
data, data, data, data, data, data, data, data

Data

data, data, data, data, data, data, data, data, data, data, data, data

Data

data, data, data

Data

data

Data, Data

data, data, data, data, data, data, data, data, data

Data

data

Data

data, data, data, data, data, data, data, data

Data
data, data, data, data, data

Data

data, data

Data

data, data, data, data, data

Data

data, data, data, data, data, data, data, data, data, data, data, data, data, data, data, data,
data

Data, Data

data, data, data, data, data, data, data, data, data, data, data, data, data, data, data, data,
data, data, data, data, data, data, data, data, data, data, data

Data

data, data, data, data, data, data, data

Data

data, data

Data

data, data, data, data, data, data, data

Data

data, data, data, data, data, data, data, data

data type

database, database, database, database, database, database, database, database,

database, database

Database

database, database, database, database, database, database

Database

database, database, database, database, database, database, database, database,

database, database
Database, Database

database, database, database, database, database, database

Database

database, database, database, database, database, database, database, database,

database, database, database, database, database, database, database, database,
database, database, database, database, database, database

Database

database

Database

database, database, database, database, database, database, database, database,

database, database, database, database, database, database, database, database,
database, database

Database, Database

database, database, database, database, database

Database

database, database, database, database, database, database

Database, Database

database, database, database, database

Database
database, database, database, database, database, database, database, database,
database, database, database, database, database, database, database, database,
database, database, database, database

Database

database

Database

database, database, database, database, database, database, database, database,

database, database, database, database

Database

database, database, database, database, database

Database

database, database, database, database, database, database, database, database,

database, database, database, database, database, database

Database

database, database, database, database, database, database, database, database,

database, database, database, database, database, database, database, database,
database, database, database

Database

database, database, database, database

Database, Database

database, database, database, database, database, database, database, database,

database

databases, databases, databases, databases, databases, databases, databases,

databases, databases, databases, databases, databases, databases, databases,
databases, databases, databases, databases, databases, databases, databases,
databases, databases, databases, databases, databases, databases, databases,
databases, databases, databases, databases, databases, databases, databases,
databases, databases, databases, databases, databases, databases, databases,
databases, databases, databases, databases, databases, databases, databases,
databases, databases, databases, databases, databases, databases, databases,
databases, databases, databases, databases, databases, databases, databases,
databases, databases, databases, databases, databases, databases, databases,
databases, databases, databases, databases, databases, databases, databases,
databases, databases, databases, databases, databases, databases, databases

DBaaS

DBMS, DBMS, DBMS, DBMS, DBMS, DBMS, DBMS, DBMS, DBMS, DBMS, DBMS,
DBMS, DBMS, DBMS, DBMS, DBMS

DDoS, DDoS

debugger, debugger

debugging, debugging, debugging, debugging, debugging, debugging

decentralized, decentralized

decimals

declaration, declaration, declaration, declaration

Declarations

decomposition

DELETE, DELETE, DELETE, DELETE, DELETE, DELETE, DELETE, DELETE, DELETE,

DELETE, DELETE, DELETE, DELETE, DELETE

Deleting

demand

departments, departments

dependability

dependencies, dependencies, dependencies, dependencies, dependencies, dependencies

deployment, deployment, deployment, deployment, deployment

DEPLOYMENT, DEPLOYMENT

deployment

DEPLOYMENT

deployment, deployment, deployment, deployment, deployment, deployment, deployment

Descendant

descendants

design

designer

Designers

Designing

Desktops

develop, develop, develop, develop, develop, develop, develop, develop, develop, develop,
develop, develop, develop, develop, develop, develop, develop

Developer, Developer

developer, developer, developer

Developer

developer, developer, developer, developer, developer, developer, developer, developer,

developer, developer

Developer, Developer, Developer

developer, developer, developer, developer, developer, developer, developer, developer

Developer

developer, developer, developer, developer, developer, developer, developer, developer,

developer, developer, developer, developer, developer, developer, developer, developer,
developer, developer, developer, developer, developer, developer, developer, developer,
developer, developer, developer, developer, developer, developer, developer, developer,
developer, developer, developer, developer, developer

Developers

developers, developers, developers, developers, developers, developers

Developers

developers, developers, developers, developers

Developers
developers, developers, developers, developers, developers, developers, developers,
developers, developers, developers, developers, developers, developers, developers,
developers, developers, developers, developers, developers, developers, developers,
developers, developers, developers, developers, developers, developers, developers,
developers, developers

Developers

developers

Developers, Developers

developers, developers, developers, developers, developers, developers, developers,

developers, developers, developers, developers, developers, developers, developers

Developers

developers, developers, developers, developers, developers, developers

Developers

developers

Developers

developers

Developers

developers, developers, developers, developers

Developers

developers, developers, developers, developers, developers, developers, developers,

developers, developers, developers, developers

Developers

developers, developers

development, development, development, development, development, development,

development, development, development, development, development, development,
development, development, development, development, development, development,
development, development, development, development, development, development,
development, development, development, development, development, development,
development, development, development, development, development, development,
development, development, development, development, development, development,
development, development, development, development, development, development,
development, development, development, development, development, development,
development, development, development, development, development, development,
development, development, development, development, development, development,
development, development, development, development, development, development,
development, development, development, development, development

diagnose

digital, digital, digital, digital, digital, digital, digital, digital, digital

dimensions

directions, directions, directions

directory, directory, directory, directory, directory, directory, directory, directory, directory,

directory, directory, directory, directory, directory, directory, directory, directory, directory,
directory, directory, directory, directory, directory, directory, directory, directory

Displaying

Distributed, Distributed

distributed, distributed

Distributed, Distributed

distributed

div, div

divisions

Django, Django, Django, Django

DLT

DML

DNS, DNS, DNS, DNS, DNS, DNS, DNS, DNS, DNS, DNS, DNS, DNS, DNS, DNS, DNS,
DNS

Docker, Docker

doctype
DOCTYPE

doctype

Doctype

doctype

dollar

DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM,
DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM,
DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM,
DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM, DOM,
DOM

domain, domain, domain, domain, domain, domain, domain, domain, domain, domain,
domain, domain, domain, domain, domain, domain, domain, domain, domain, domain,
domain, domain, domain, domain, domain, domain, domain, domain, domain, domain,
domain, domain

DoS

download, download

Download, Download, Download, Download, Download, Download

downloaded, downloaded

driven

drivers

DTD

DVCS

dynamic, dynamic, dynamic, dynamic, dynamic, dynamic, dynamic, dynamic

eavesdropping

ECMA, ECMA

ECMAScript, ECMAScript, ECMAScript, ECMAScript, ECMAScript, ECMAScript,

ECMAScript, ECMAScript
eCommerce

ecosystem

Edge, Edge, Edge, Edge, Edge

editor, editor, editor, editor, editor

editor's

editors

EER, EER, EER

EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS,
EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS, EJS

element, element, element, element, element, element, element, element, element,

element, element, element, element, element, element, element, element, element,
element, element

elements, elements

Elements

elements

EMACS

email

Email, Email

embedded, embedded, embedded, embedded, embedded, embedded, embedded,

embedded

emitter, emitter

employee, employee, employee, employee, employee, employee, employee, employee,

employee, employee

Employees, Employees

Employment

encapsulated, encapsulated

encapsulates
encapsulation

Encode

encoding, encoding, encoding, encoding, encoding

encodings

encrypted, encrypted, encrypted, encrypted

encryption, encryption, encryption, encryption, encryption, encryption, encryption,

encryption, encryption, encryption

endpoint, endpoint, endpoint, endpoint, endpoint, endpoint

Endpoint

endpoint, endpoint, endpoint, endpoint

Engineers

entities, entities, entities, entities, entities, entities, entities, entities, entities, entities, entities,
entities, entities, entities, entities, entities

environment, environment, environment, environment, environment, environment,

environment, environment, environment, environment, environment, environment,
environment, environment, environment, environment, environment, environment,
environment, environment, environment, environment, environment, environment

ER, ER, ER, ER, ER, ER, ER

ERDs, ERDs, ERDs

ERM, ERM, ERM, ERM

error

Errors, Errors, Errors, Errors

errors

ES6

ETag

event, event, event, event, event, event, event, event, event, event, event, event, event,
event, event, event, event, event, event, event, event, event
event-driven, event-driven, event-driven, event-driven, event-driven

EventMachine

Events

executable, executable, executable

execute, execute, execute, execute

Execute

execute, execute, execute

Execute

execute

Execute

execute, execute, execute, execute, execute, execute, execute, execute

executed

executes, executes, executes, executes, executes, executes, executes, executes

execution, execution, execution, execution, execution, execution, execution, execution,

execution, execution, execution

export

exports

Express, Express, Express, Express, Express, Express, Express, Express, Express,

Express, Express, Express, Express, Express, Express, Express, Express, Express,
Express, Express, Express, Express, Express, Express, Express, Express, Express,
Express, Express, Express, Express, Express, Express, Express, Express, Express,
Express

expression, expression, expression, expression, expression, expression, expression,

expression, expression

expressions, expressions, expressions, expressions, expressions, expressions, expressions

ExpressJS, ExpressJS

extension, extension, extension, extension, extension, extension, extension, extension

external

External, External

external

External

external

External

Extract

extract, extract, extract, extract

facebook

Facebook, Facebook, Facebook, Facebook, Facebook, Facebook, Facebook, Facebook,

Facebook, Facebook, Facebook, Facebook, Facebook, Facebook, Facebook, Facebook

facial

factors, factors, factors, factors, factors, factors, factors, factors

factory

false

Familiarize

fetch, fetch, fetch, fetch, fetch, fetch

fetched

fetching

Filesnodejs

fingerprint

Firefox, Firefox, Firefox, Firefox, Firefox, Firefox

firewalls

fix

fixed
Flexbox

flexible

floating, floating, floating, floating

floats

fonts, fonts

FONTS

footer, footer, footer, footer, footer, footer, footer, footer, footer

footers

foreign, foreign, foreign, foreign, foreign, foreign, foreign, foreign

foreign key

Foreign key

foreign key, foreign key

forked

Forking

Forking's

Form, Form, Form

formatting, formatting, formatting, formatting

forwarded, forwarded

FOSS

frame

framework, framework, framework, framework, framework, framework, framework,

framework, framework, framework, framework, framework, framework, framework,
framework, framework, framework, framework, framework, framework, framework,
framework, framework, framework, framework, framework, framework, framework

frameworks, frameworks, frameworks, frameworks, frameworks, frameworks, frameworks,

frameworks, frameworks, frameworks, frameworks, frameworks, frameworks, frameworks,
frameworks, frameworks, frameworks, frameworks
front end, front end, front end, front end, front end, front end, front end, front end, front end,
front end, front end, front end, front end, front end, front end

front-end, front-end, front-end, front-end, front-end, front-end, front-end, front-end, front-

end, front-end, front-end, front-end, front-end, front-end, front-end, front-end, front-end

Frontend

frontend

Frontend, Frontend

frontend, frontend

FTP

full stack

Full Stack, Full Stack, Full Stack, Full Stack, Full Stack, Full Stack

full stack, full stack, full stack, full stack

Full Stack

full stack, full stack

Full Stack

full stack

full-stack, full-stack, full-stack, full-stack, full-stack, full-stack, full-stack, full-stack, full-stack,

full-stack, full-stack, full-stack, full-stack, full-stack, full-stack, full-stack

Full-stack, Full-stack

function, function, function, function, function, function, function, function, function, function,
function, function, function, function, function, function, function, function, function, function,
function, function, function, function, function, function, function, function, function, function,
function, function, function, function, function, function, function, function, function, function,
function, function, function, function, function, function, function, function, function, function,
function, function, function, function, function, function, function, function, function, function,
function, function, function, function, function, function, function, function, function, function,
function, function, function, function, function, function, function, function, function, function,
function, function, function, function, function, function

functionalities, functionalities, functionalities

functionality, functionality, functionality, functionality, functionality, functionality, functionality,
functionality, functionality, functionality, functionality, functionality, functionality, functionality

functions

Functions

functions, functions, functions, functions

Functions
functions, functions, functions, functions, functions, functions, functions, functions,
functions, functions, functions, functions, functions, functions, functions, functions,
functions, functions, functions, functions, functions, functions, functions, functions,
functions, functions, functions, functions, functions, functions, functions, functions,
functions, functions, functions, functions, functions, functions, functions

fundamental, fundamental, fundamental, fundamental, fundamental, fundamental,

fundamental, fundamental, fundamental, fundamental, fundamental

games, games, games, games

gedit

general-purpose, general-purpose, general-purpose, general-purpose, general-purpose

generate, generate, generate, generate, generate, generate, generate, generate, generate

generic

Geolocation

GET, GET, GET, GET, GET, GET, GET, GET, GET, GET, GET, GET, GET, GET, GET,
GET, GET, GET, GET, GET, GET, GET, GET, GET, GET, GET

getElementById

Git, Git, Git, Git, Git, Git, Git, Git, Git, Git, Git, Git, Git, Git, Git, Git

git

Git, Git, Git

git

GitHub, GitHub, GitHub, GitHub, GitHub, GitHub, GitHub, GitHub, GitHub, GitHub, GitHub,
GitHub, GitHub, GitHub, GitHub, GitHub, GitHub, GitHub, GitHub, GitHub, GitHub, GitHub,
GitHub, GitHub, GitHub, GitHub, GitHub, GitHub, GitHub

Github, Github, Github, Github, Github, Github, Github, Github, Github, Github, Github,
Github, Github, Github

Global
global, global

Global, Global, Global, Global

GmbH

GNU, GNU, GNU, GNU

Google, Google, Google, Google, Google, Google, Google, Google, Google, Google,
Google, Google, Google, Google, Google, Google, Google, Google, Google, Google,
Google, Google, Google

graphic, graphic, graphic, graphic, graphic

graphical, graphical, graphical, graphical, graphical, graphical

GraphQL

Grid, Grid

GUI, GUI, GUI, GUI

guidelines

hacked

hacker, hacker, hacker, hacker

Hackers

handlers, handlers

HASHING

head, head, head, head

HEAD

header, header, header, header, header, header, header, header, header, header, header,
header, header, header, header, header, header, header, header, header, header, header,
header

headers

headings
height

Helvetica

Heroku, Heroku, Heroku, Heroku, Heroku, Heroku, Heroku, Heroku, Heroku, Heroku,
Heroku

hierarchical

hierarchy, hierarchy, hierarchy, hierarchy, hierarchy

Hierarchy

hierarchy

homepage

hook, hook, hook, hook, hook, hook, hook, hook, hook, hook, hook, hook

hooks

HOOKS

Hooks

hooks

Hooks, Hooks, Hooks, Hooks, Hooks

hooks

Hooks, Hooks, Hooks, Hooks, Hooks, Hooks, Hooks, Hooks, Hooks

hooks

Hooks

hooks

Hooks

Hooks'

host, host, host, host

Host, Host

host, host, host, host

Host
host, host, host, host, host

hosted, hosted, hosted, hosted, hosted

hosting, hosting

HOSTING

hosting, hosting, hosting, hosting, hosting, hosting, hosting, hosting, hosting, hosting,
hosting, hosting, hosting, hosting, hosting, hosting, hosting, hosting, hosting, hosting,
hosting, hosting, hosting, hosting, hosting, hosting, hosting, hosting, hosting, hosting,
hosting, hosting, hosting, hosting, hosting

Hostwinds, Hostwinds, Hostwinds

href, href

HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML

html

HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML

html, html

HTML

html
HTML, HTML, HTML, HTML

html, html, html, html

HTML, HTML, HTML, HTML, HTML

html

HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML, HTML,
HTML, HTML, HTML, HTML, HTML, HTML

HTML5, HTML5, HTML5, HTML5, HTML5, HTML5, HTML5, HTML5

HTTP, HTTP, HTTP, HTTP, HTTP, HTTP

http

HTTP, HTTP

http

HTTP

http, http

HTTP, HTTP

http

HTTP, HTTP

http

HTTP, HTTP, HTTP

http

HTTP

http, http

HTTP, HTTP

http, http, http

HTTP, HTTP, HTTP, HTTP

http, http
HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP,
HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP

http

HTTP, HTTP, HTTP, HTTP

http

HTTP, HTTP

http

HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP,
HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP,
HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP, HTTP

http

HTTP, HTTP

http, http

HTTP

Https

Hyper

hyperlinks, hyperlinks

Hyperlinks

IBM, IBM

ICANN

icons

ID, ID, ID, ID, ID, ID, ID, ID

id

ID, ID, ID, ID, ID, ID, ID, ID, ID, ID

identified
Identifiers, Identifiers

IDEs

IEEE, IEEE

IF

Iframes

IIS

image, image, image

images, images, images, images, images, images

Images

images

Images

implement

implementation, implementation, implementation, implementation, implementation,

implementation

Index, Index

[Link], [Link], [Link], [Link]

Inherit

inherit

inheritance, inheritance

Inheritance

inheritance

inherited

initial

initiate, initiate, initiate

Inline

inline, inline
Input, Input

input, input, input

INSERT, INSERT, INSERT, INSERT

install, install, install

Install

install, install, install, install, install, install, install, install, install, install, install, install, install,
install, install, install, install, install, install, install, install, install, install, install, install, install,
install, install, install, install, install

installation, installation, installation, installation, installation, installation, installation,

installation, installation, installation, installation, installation, installation

installed, installed, installed, installed, installed, installed, installed, installed, installed,

installed, installed, installed, installed, installed, installed, installed, installed, installed,
installed, installed, installed, installed, installed, installed, installed, installed, installed,
installed

installer

installing, installing, installing

Installing, Installing, Installing, Installing, Installing, Installing

installing

instructions, instructions, instructions, instructions, instructions, instructions, instructions,

instructions, instructions, instructions, instructions, instructions, instructions

interaction

Interactivity

interconnected

interface

Interface

interface, interface

Interface
interface, interface, interface, interface, interface, interface, interface, interface, interface,
interface, interface, interface, interface, interface, interface, interface, interface

interfaces, interfaces, interfaces, interfaces, interfaces, interfaces, interfaces, interfaces,

interfaces, interfaces, interfaces, interfaces, interfaces, interfaces, interfaces, interfaces,
interfaces, interfaces

internal

Internal, Internal

Internet

internet

Internet

internet

Internet

internet, internet, internet, internet, internet

Internet

internet

Internet

internet

Internet

internet

Internet, Internet, Internet, Internet

internet

Internet

internet, internet, internet

Internet, Internet

internet, internet

Internet

internet
Internet

internet

Internet

internet, internet, internet, internet

Internet, Internet

introspection, introspection

inventions

inventor

invocation

invoke

Invoke

invoked, invoked, invoked

invokes

iOS

IP, IP, IP, IP, IP, IP, IP, IP, IP, IP, IP, IP

isShow, isShow

IT, IT, IT

italicization

iterates

Java, Java, Java, Java, Java, Java, Java, Java, Java, Java, Java, Java, Java, Java, Java,
Java, Java, Java, Java, Java, Java, Java, Java, Java, Java

JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,

JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript

Javascript

JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,

JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript,
JavaScript, JavaScript, JavaScript, JavaScript, JavaScript

JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN,
JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN, JOIN

JOINS, JOINS, JOINS, JOINS

jQuery, jQuery, jQuery, jQuery, jQuery, jQuery, jQuery, jQuery, jQuery, jQuery, jQuery,
jQuery, jQuery, jQuery, jQuery, jQuery, jQuery, jQuery, jQuery, jQuery, jQuery, jQuery,
jQuery

jQuery's, jQuery's

JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON,
JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON,
JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON,
JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON, JSON,
JSON, JSON, JSON, JSON

JSX, JSX, JSX, JSX, JSX, JSX, JSX, JSX, JSX, JSX, JSX, JSX, JSX, JSX, JSX, JSX, JSX,
JSX, JSX, JSX, JSX, JSX, JSX, JSX

JVM, JVM

JWT

kernels
keyword, keyword, keyword, keyword, keyword

Language

language, language, language, language, language, language, language, language,

language, language, language, language, language, language, language, language,
language, language, language, language, language, language, language, language

Language, Language

language, language, language

Language

language, language, language, language, language, language, language, language,

language, language, language, language

Language

language, language

Language

language, language, language, language, language, language, language, language

languages, languages, languages, languages, languages, languages, languages,

languages, languages, languages, languages, languages, languages, languages,
languages, languages, languages, languages, languages, languages, languages,
languages, languages, languages, languages, languages, languages, languages,
languages, languages, languages, languages, languages, languages

Laravel, Laravel, Laravel

layer, layer, layer, layer, layer, layer, layer, layer, layer, layer, layer, layer, layer, layer, layer,
layer, layer

Layers

layers, layers, layers, layers, layers

layout, layout

Layout
layout

layouts

Layouts

layouts

Layouts

layouts, layouts

learn

Ledger

libraries, libraries, libraries, libraries, libraries

library, library, library, library, library, library, library, library, library, library, library, library,
library, library, library, library, library, library, library, library, library, library

License, License, License, License

line

link, link, link, link, link

linking

links, links, links, links, links

Linux, Linux, Linux, Linux, Linux, Linux, Linux, Linux, Linux, Linux, Linux, Linux, Linux,
Linux, Linux, Linux, Linux, Linux, Linux, Linux, Linux

literals, literals

live, live, live, live, live, live

Live

live, live

Live

live

LiveScript

Loadmill
local, local, local, local, local, local, local, local, local, local, local, local, local, local, local,
local, local, local, local, local, local, local, local, local, local, local, local, local, local

logic, logic, logic, logic

Logic

logic, logic, logic, logic, logic, logic, logic, logic, logic, logic, logic, logic, logic, logic, logic,
logic, logic, logic, logic, logic

logical, logical

Logical

logical, logical, logical, logical, logical, logical, logical, logical, logical, logical, logical, logical,
logical

login, login, login, login, login, login, login, login, login, login, login, login

loop

Loop, Loop

loop, loop, loop, loop, loop

Loop

loop, loop

Loops, Loops

loops, loops

machine, machine, machine

Machine, Machine

machine, machine

Machine

machine, machine, machine

machines, machines, machines, machines, machines

macOS, macOS, macOS, macOS

Management

mapper, mapper, mapper, mapper

mapping, mapping, mapping, mapping, mapping, mapping, mapping

margin

margins, margins

MariaDB, MariaDB, MariaDB

Markup, Markup

markup, markup

Markup, Markup

markup, markup, markup

Markup

markup, markup, markup, markup, markup, markup

mechanism, mechanism, mechanism, mechanism, mechanism, mechanism, mechanism,

mechanism, mechanism, mechanism, mechanism, mechanism, mechanism

mechanisms

Memcached

memory, memory, memory, memory, memory, memory, memory, memory

metadata, metadata

metaprogramming

Meteor

Method

method, method, method, method, method, method, method, method, method, method,
method, method, method, method

Method

method, method, method, method, method, method

Method, Method

method, method, method, method, method

Method

method

Method

method

Method

method, method

Method

method, method, method, method, method, method, method, method, method, method,
method, method, method, method, method, method, method, method, method, method,
method, method, method, method, method, method, method, method, method, method,
method, method, method, method, method, method, method, method, method, method,
method, method, method, method, method

METHOD()

Methods

methods, methods, methods, methods, methods, methods, methods, methods, methods,

methods, methods, methods, methods, methods, methods, methods, methods, methods,
methods, methods, methods, methods, methods, methods, methods, methods, methods,
methods, methods, methods, methods, methods, methods, methods, methods, methods

Microsoft, Microsoft, Microsoft, Microsoft, Microsoft, Microsoft, Microsoft, Microsoft,

Microsoft, Microsoft, Microsoft, Microsoft, Microsoft, Microsoft, Microsoft, Microsoft,
Microsoft, Microsoft, Microsoft

Microsoft’s

Middleware

middleware

Middleware

middleware, middleware

Middleware
middleware, middleware, middleware, middleware, middleware, middleware, middleware

Middleware

middleware, middleware, middleware, middleware, middleware, middleware, middleware

Middleware

middleware, middleware, middleware, middleware, middleware, middleware, middleware,

middleware, middleware, middleware, middleware, middleware, middleware, middleware,
middleware, middleware, middleware, middleware

MIME

MIT

ML

mobile, mobile, mobile, mobile, mobile, mobile, mobile

mockup, mockup

Mockup, Mockup

mockups

modal

Model

model

Model

model, model, model

MODEL

model, model, model, model, model, model, model, model, model, model, model, model,
model, model, model, model, model, model, model, model, model, model, model, model,
model, model, model, model, model, model, model, model, model, model

MODEL

model, model, model, model

MODEL

model, model, model, model, model

modeling, modeling, modeling, modeling, modeling, modeling

Modeling, Modeling

modeling, modeling

Modeling

modeling, modeling, modeling, modeling, modeling

Modeling

modeling

Modeling

modeling

Modeling

modeling, modeling, modeling

models

Modern

modern

modifications

modified

modifier

modifying

module, module, module, module, module, module, module, module, module, module,
module, module, module, module, module, module, module, module, module, module,
module, module, module, module, module, module, module, module, module, module,
module, module, module, module, module

modules, modules, modules, modules, modules, modules, modules, modules, modules,

modules, modules, modules, modules, modules, modules

Modules

modules

Modules, Modules
modules, modules

Modules

modules, modules, modules, modules

Modules'

Mongo

mongo

Mongo, Mongo, Mongo, Mongo, Mongo, Mongo, Mongo, Mongo

mongo, mongo, mongo

Mongo

mongo, mongo

Mongo

mongo

Mongo, Mongo

mongo, mongo, mongo

Mongo

MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB,

MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB,
MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB,
MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB,
MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB,
MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB, MongoDB,
MongoDB, MongoDB, MongoDB, MongoDB

Mongoose

MONGOOSE, MONGOOSE

Mongoose, Mongoose, Mongoose, Mongoose, Mongoose, Mongoose, Mongoose,

Mongoose

MONGOOSE

Mongoose
multiline, multiline, multiline

MVC, MVC, MVC, MVC, MVC, MVC, MVC, MVC

MX, MX

MySQL, MySQL, MySQL, MySQL, MySQL, MySQL, MySQL, MySQL, MySQL, MySQL,
MySQL, MySQL, MySQL, MySQL, MySQL, MySQL, MySQL

name, name, name, name, name, name, name, name, name, name, name, name, name,
name, name, name, name, name, name, name, name, name, name, name, name, name,
name, name, name, name, name, name, name, name, name, name, name, name, name,
name, name, name, name, name, name, name, name, name, name, name, name, name,
name, name, name, name, name, name, name, name, name, name, name, name, name,
name, name, name, name, name, name, name

Namecheap, Namecheap, Namecheap, Namecheap

namespace, namespace

naming

Native, Native

navbar, navbar

navigate

Navigating

navigation, navigation, navigation

Navigator

network, network, network, network, network, network, network, network, network, network,
network, network

Network

network, network, network

Networking

networking, networking, networking

networks, networks, networks, networks, networks

Nginx

NGINX

node

Node, Node, Node, Node, Node, Node, Node, Node

node

Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node,
Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node

node, node, node, node

Node, Node, Node, Node, Node, Node, Node, Node

node

Node, Node

node, node

Node

node

Node, Node, Node, Node, Node, Node, Node, Node

node

Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node

node, node

Node, Node, Node, Node

node, node, node, node, node, node

Node, Node, Node, Node

node, node

Node, Node

node
Node

node, node

Node, Node

node, node

Node

node

Node, Node, Node

node, node

Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node, Node

node

Node, Node

node

Node, Node, Node, Node

node

Node

node

Node, Node, Node, Node

node

Node, Node, Node, Node, Node, Node, Node, Node, Node, Node

node

Node, Node

node, node, node, node

Node

node, node, node, node

Node
node, node, node, node

Node

Node JS

[Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link],
[Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link],
[Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link],
[Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link],
[Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link],
[Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link],
[Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link],
[Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link],
[Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link],
[Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link],
[Link]

NodeJS, NodeJS, NodeJS, NodeJS, NodeJS, NodeJS, NodeJS, NodeJS, NodeJS,

NodeJS, NodeJS, NodeJS, NodeJS, NodeJS, NodeJS, NodeJS, NodeJS, NodeJS,
NodeJS, NodeJS, NodeJS, NodeJS, NodeJS, NodeJS, NodeJS

Nodes

nodes

non-blocking, non-blocking, non-blocking, non-blocking, non-blocking, non-blocking, non-

blocking, non-blocking, non-blocking

Normalization

normalization, normalization

NoSQL, NoSQL, NoSQL, NoSQL, NoSQL, NoSQL, NoSQL, NoSQL, NoSQL, NoSQL,
NoSQL, NoSQL, NoSQL, NoSQL, NoSQL, NoSQL, NoSQL, NoSQL, NoSQL, NoSQL,
NoSQL, NoSQL, NoSQL, NoSQL, NoSQL

Notepad

notepad

NPM

npm, npm, npm, npm, npm, npm, npm, npm, npm

NPM
npm, npm

NPM

npm

NPM, NPM

npm

NPM

npm, npm, npm

NPM

npm, npm

NPM

npm, npm, npm

NPM

npm

NPM

npm, npm

NPM

npm

NPM

npm

NPM

npm, npm

NPM

npm, npm, npm, npm

NPM

npm

NPM, NPM
npm, npm, npm, npm, npm, npm, npm, npm

NPM

npm, npm, npm

NPM

npm

npx, npx, npx

NSFW

number

Numbers

numerical

OAuth, OAuth, OAuth, OAuth, OAuth, OAuth, OAuth, OAuth, OAuth, OAuth, OAuth, OAuth,
OAuth, OAuth

OAuth2

Object

object

Object, Object

object, object

Object

object, object, object, object, object, object, object, object, object, object, object, object,
object, object, object, object, object, object

Object, Object

object, object

Object

object, object, object

Object
object

Object, Object, Object

object

Object

object, object, object, object, object, object, object, object, object

Object

object, object, object, object, object, object, object, object, object, object, object, object,
object, object, object, object, object, object, object

object notation

object-oriented

Object-oriented, Object-oriented, Object-oriented

object-oriented, object-oriented, object-oriented, object-oriented, object-oriented

Object-oriented

object-oriented, object-oriented, object-oriented, object-oriented, object-oriented

objects, objects, objects

ODBC

official, official, official, official, official, official, official, official, official, official, official, official,
official

OK

online, online, online, online, online, online, online, online, online, online, online, online,
online, online, online, online, online, online

OOP, OOP, OOP

Opera

operating

Operating

operating, operating, operating, operating, operating, operating, operating, operating,

operating, operating, operating, operating, operating, operating, operating, operating
operations, operations, operations, operations, operations, operations, operations,
operations, operations, operations, operations, operations, operations, operations,
operations, operations, operations, operations, operations, operations, operations,
operations, operations, operations, operations, operations, operations, operations

operator, operator, operator, operator, operator, operator, operator, operator, operator,

operator

operator's

operators, operators, operators, operators, operators

optimization, optimization, optimization

OPTIONS

Oracle, Oracle, Oracle, Oracle, Oracle, Oracle, Oracle, Oracle, Oracle, Oracle, Oracle,
Oracle

Ordered

Ordering

ORM, ORM, ORM, ORM, ORM

ORMs, ORMs, ORMs, ORMs

OS, OS, OS, OS, OS, OS, OS, OS, OS, OS, OS, OS, OS, OS, OS

OTP

output, output, output, output, output, output, output, output, output, output, output

Overflow

package, package, package, package, package, package, package, package, package,

package, package, package, package, package, package, package, package, package,
package, package, package, package, package, package, package, package, package,
package, package, package, package, package, package, package, package, package,
package, package, package, package, package

packaged, packaged
packages, packages, packages, packages, packages, packages, packages, packages,
packages, packages

padding, padding, padding

page, page, page, page, page, page, page, page, page, page, page, page, page, page,
page, page, page, page, page, page, page, page, page, page, page, page, page, page,
page, page, page, page, page, page, page

pages, pages

pagination

paradigms, paradigms

paragraph, paragraph, paragraph

Paragraphs

paragraphs, paragraphs

parameter1

parameters, parameters, parameters

parent

parent component, parent component, parent component, parent component, parent

component, parent component, parent component

parentheses

parenthesis

partials, partials, partials, partials, partials, partials, partials, partials

pass, pass, pass, pass

PASSING

Password

password, password, password, password, password, password

Password

password, password, password, password, password, password, password, password,

password, password, password, password, password, password, password, password,
password

PASSWORDS

PATCH, PATCH, PATCH, PATCH

PATH

path, path, path, path, path, path, path, path, path, path, path, path, path, path, path, path

paths, paths

payload, payload, payload, payload, payload, payload, payload

PC

Performance, Performance

Perl, Perl

phenomenon

PHP, PHP, PHP, PHP, PHP, PHP, PHP, PHP, PHP, PHP, PHP, PHP, PHP, PHP, PHP

phrase, phrase, phrase, phrase

Pipes

placeholder

planning

platforms

plug

Plug-ins

plugging

plugins

Polymorphism

popup

Port, Port

positioning, positioning, positioning

POSIX
POST, POST, POST, POST, POST, POST, POST, POST, POST, POST, POST, POST,
POST, POST, POST

Post, Post

POST, POST, POST

Post-debugging

PostgreSQL, PostgreSQL, PostgreSQL, PostgreSQL, PostgreSQL, PostgreSQL,

PostgreSQL, PostgreSQL, PostgreSQL, PostgreSQL, PostgreSQL

postings

POSTman

PowerShell

Pragma, Pragma

Pre-bugging

presentation, presentation, presentation, presentation, presentation, presentation,

presentation

primary, primary, primary, primary, primary, primary, primary, primary, primary, primary,
primary, primary, primary, primary, primary, primary, primary, primary, primary, primary,
primary

primary domain

Primary Key

print

prints, prints, prints

priority

Priority

procedural

professional, professional

profiles

program, program, program, program, program, program, program, program, program

Program
program, program, program

Program

program, program, program, program, program, program, program, program, program,

program, program, program, program, program, program, program, program, program,
program, program, program, program, program, program, program, program, program,
program

Programmable

Programmers

programmers, programmers, programmers, programmers

programming

Programming

programming, programming, programming, programming, programming, programming

Programming

programming

Programming

programming

Programming

programming, programming, programming, programming, programming, programming,

programming, programming, programming

Programming, Programming

programming, programming, programming, programming, programming

Programming

programming, programming, programming, programming

Programming, Programming

programming, programming, programming, programming, programming, programming,

programming, programming, programming, programming, programming, programming,
programming, programming, programming, programming, programming, programming,
programming, programming, programming, programming, programming, programming,
programming, programming, programming, programming, programming, programming,
programming, programming, programming, programming, programming, programming,
programming, programming, programming, programming, programming, programming,
programming, programming, programming

programs, programs, programs, programs, programs, programs, programs, programs,

programs, programs, programs, programs, programs, programs, programs, programs,
programs, programs, programs, programs, programs, programs, programs, programs,
programs, programs, programs, programs, programs, programs, programs, programs,
programs, programs, programs, programs, programs, programs, programs, programs,
programs, programs, programs, programs, programs, programs, programs

Project, Project

project, project

Project

project

Project

project, project, project, project, project, project, project, project, project, project, project,
project

Project

project, project, project, project, project, project

Project

project, project, project, project

Project

project, project, project

Project

project, project, project, project, project, project, project, project, project, project, project,
project, project, project, project, project, project, project, project

Project

project

project's
projects, projects, projects, projects, projects, projects, projects, projects

Projects

projects

proliferation

Prompt

prompt, prompt, prompt, prompt, prompt

Prompt

prompt, prompt

prompts, prompts, prompts

properties, properties, properties, properties, properties, properties, properties

property, property, property, property, property, property, property, property, property,

property

Props

props, props, props

Props

props, props

Props

props

Props

props, props, props

Props

props, props, props, props, props, props, props, props, props, props, props, props

Pros

protection, protection

protocol, protocol, protocol, protocol, protocol, protocol, protocol, protocol, protocol,

protocol, protocol, protocol, protocol, protocol
prototype, prototype, prototype, prototype, prototype, prototype, prototype, prototype,
prototype, prototype, prototype

prototypes, prototypes, prototypes

proxy, proxy, proxy

pseudo

Pseudo

pseudo

pseudo-class

publication

push, push, push, push

Push, Push

PUT, PUT, PUT, PUT, PUT, PUT, PUT, PUT, PUT, PUT, PUT, PUT, PUT

Python, Python, Python, Python, Python, Python, Python, Python, Python, Python, Python,
Python, Python

Python's

queries, queries, queries, queries, queries, queries, queries, queries, queries, queries,
queries, queries, queries, queries, queries, queries, queries, queries, queries

Queries

queries

query, query, query

QUERY

query, query, query

Query

query

Query, Query
query

QUERY

query, query, query, query, query

Query

query, query, query, query, query, query, query, query, query, query, query, query, query,
query, query

Query

query, query, query, query, query

querying, querying, querying

Rancher

RBC

RDBMS, RDBMS, RDBMS, RDBMS, RDBMS, RDBMS, RDBMS

React, React, React, React, React, React, React, React, React, React, React, React,
React, React, React, React, React, React, React, React, React, React, React, React,
React, React, React, React, React, React, React, React, React, React, React, React,
React, React, React, React, React, React, React, React, React, React, React, React,
React, React, React, React, React, React, React, React, React, React, React, React,
React, React, React, React, React, React, React, React, React, React, React, React,
React, React, React, React, React, React, React, React, React, React, React, React,
React, React, React, React, React, React, React, React, React, React, React, React,
React, React, React

ReactDOM, ReactDOM, ReactDOM, ReactDOM, ReactDOM, ReactDOM, ReactDOM,

ReactDOM, ReactDOM, ReactDOM, ReactDOM, ReactDOM, ReactDOM, ReactDOM

ReactJS

read, read, read, read, read, read, read

READ

read, read, read, read, read, read, read, read, read, read, read, read, read, read, read, read,
read, read, read, read, read, read
READ, READ

read, read

READ

read

READ, READ

read, read, read, read

readability

reader

readers

real-time, real-time, real-time, real-time, real-time, real-time, real-time

records, records, records, records, records, records, records, records, records, records,
records, records, records, records, records, records, records, records, records, records,
records, records, records, records

Redis

Refactoring, Refactoring, Refactoring, Refactoring

refactoring

Refactoring

reference, reference, reference, reference

Registration

Relation

relational, relational

Relational

relational, relational, relational

Relational, Relational

RELATIONAL

relational, relational, relational

RELATIONAL

relational, relational

Relational

RELATIONAL

relational

RELATIONAL

relational, relational

RELATIONAL

Relational

relational, relational, relational, relational

Relational

RELATIONAL

relational, relational, relational, relational, relational, relational, relational, relational,

relational, relational, relational

Relational

relational, relational, relational, relational, relational, relational, relational

relationship, relationship, relationship, relationship, relationship, relationship, relationship,

relationship, relationship, relationship, relationship, relationship, relationship, relationship,
relationship, relationship, relationship, relationship, relationship, relationship, relationship,
relationship, relationship, relationship

relationships, relationships, relationships

Relationships

relationships

Relationships

relationships

Relationships, Relationships
relationships, relationships, relationships, relationships, relationships, relationships,
relationships, relationships, relationships, relationships, relationships, relationships,
relationships, relationships, relationships, relationships, relationships, relationships,
relationships, relationships, relationships, relationships

Relationships, Relationships

relationships

Relationships

relationships

remote, remote

Remote, Remote, Remote

Remotes

remove, remove, remove, remove, remove, remove, remove, remove, remove, remove,
remove, remove

render, render, render, render, render, render, render, render, render, render, render,
render, render, render, render, render, render, render, render, render, render, render,
render, render, render, render, render, render, render

rendered
rendering, rendering, rendering

Rendering

rendering, rendering, rendering, rendering, rendering, rendering, rendering, rendering,

rendering, rendering, rendering, rendering, rendering, rendering

RENDERING

rendering, rendering, rendering, rendering

Rendering

rendering, rendering

RENDERING

Rendering

RENDERING

rendering, rendering

repeating

Repeats

repetition, repetition

REPL, REPL, REPL, REPL, REPL, REPL, REPL, REPL, REPL, REPL, REPL, REPL,
REPL, REPL, REPL, REPL, REPL, REPL, REPL

repo

repositories, repositories

Repositories, Repositories

repositories, repositories, repositories

repository, repository, repository, repository, repository, repository, repository, repository,

repository, repository, repository, repository, repository, repository, repository, repository,
repository, repository, repository, repository, repository, repository, repository, repository,
repository, repository, repository, repository, repository, repository, repository, repository

request, request, request, request, request, request, request, request, request, request,
request, request, request, request, request, request, request, request, request, request,
request, request, request, request, request, request, request, request, request, request,
request, request, request, request, request, request, request, request, request, request,
request, request, request, request, request, request, request, request, request, request,
request, request, request, request, request, request, request, request, request, request,
request, request, request, request, request, request, request, request, request, request,
request, request, request, request, request, request, request, request, request, request,
request, request, request, request, request, request, request, request, request, request,
request, request, request, request, request, request, request, request, request, request,
request, request, request, request

requests, requests, requests, requests, requests, requests, requests, requests

Requests, Requests

requests, requests, requests, requests, requests, requests

Requests, Requests

requests, requests

Requests, Requests

requests, requests, requests, requests

Requests, Requests

requests, requests, requests, requests, requests, requests, requests, requests, requests,

requests, requests

resources

response, response, response, response, response, response, response, response,

response, response, response, response, response, response, response, response,
response, response, response, response, response, response, response, response,
response, response, response, response, response, response, response, response,
response, response, response, response, response, response, response, response,
response, response, response, response, response, response

Responsive

responsive, responsive

Responsive, Responsive, Responsive, Responsive

responsive

REST, REST, REST, REST, REST, REST, REST, REST, REST, REST, REST, REST,
REST, REST, REST, REST

Rest

REST, REST, REST

RESTful

RESTFUL, RESTFUL, RESTFUL

RESTful, RESTful, RESTful, RESTful, RESTful

retrieve

reused

Robo, Robo, Robo, Robo, Robo, Robo, Robo, Robo, Robo, Robo

Robo 3T, Robo 3T, Robo 3T, Robo 3T, Robo 3T, Robo 3T, Robo 3T, Robo 3T, Robo 3T,
Robo 3T

root

route, route, route, route, route, route, route, route, route, route, route, route, route, route,
route, route, route, route, route, route

router, router

Router

router, router

Router, Router

router's

routing, routing, routing, routing

Routing

rows

Rows, Rows, Rows, Rows

Ruby, Ruby, Ruby, Ruby, Ruby, Ruby, Ruby, Ruby, Ruby

rulesets

Run, Run, Run, Run, Run, Run, Run, Run

runs, runs, runs, runs, runs

runtime, runtime, runtime, runtime, runtime, runtime, runtime

Sabre

Safari, Safari

Sass

Scala, Scala

scalability, scalability, scalability, scalability, scalability, scalability, scalability

scalable, scalable, scalable, scalable, scalable, scalable, scalable, scalable, scalable

scale

ScaleGrid, ScaleGrid, ScaleGrid, ScaleGrid, ScaleGrid

schedules

schema, schema, schema, schema, schema, schema, schema, schema, schema, schema,
schema, schema, schema, schema, schema, schema, schema, schema, schema, schema,
schema, schema, schema, schema

SCHEMA

schema, schema

SCHEMA

schema, schema

SCHEMA

schema, schema, schema

SCHEMA

schema
schemas, schemas, schemas, schemas, schemas, schemas, schemas, schemas,
schemas, schemas

scope

Scope

scope, scope, scope, scope, scope, scope, scope, scope

screen

screenshot, screenshot, screenshot, screenshot, screenshot, screenshot, screenshot,

screenshot, screenshot, screenshot, screenshot, screenshot, screenshot, screenshot,
screenshot, screenshot, screenshot, screenshot, screenshot, screenshot, screenshot,
screenshot, screenshot, screenshot, screenshot, screenshot, screenshot, screenshot

script, script, script, script, script, script, script, script, script, script, script, script, script,
script, script, script, script, script, script, script, script

scripting, scripting, scripting, scripting, scripting, scripting, scripting

scripts

search

secondary domain

section

sections

Security

security, security, security, security, security, security, security, security, security, security,
security, security, security, security, security, security, security, security, security, security,
security, security, security, security, security, security, security, security

SELECT, SELECT, SELECT, SELECT, SELECT

selection

selector, selector, selector, selector, selector, selector, selector, selector, selector

Selector

selector, selector

Selectors
selectors

Selectors

selectors, selectors

self-closing

Semantic, Semantic, Semantic

semantic

Semantics

send, send

SEO, SEO

Separating

Separation, Separation

separation

SERIALIZATION

serialization

Serialization

serialization, serialization, serialization

Serialization

serialization

serialized, serialized

series

server, server, server, server, server, server, server, server, server, server, server, server,
server, server, server, server, server, server, server, server, server, server, server, server,
server, server, server, server, server, server, server, server, server, server, server, server,
server, server, server, server, server, server, server

Server

server

Server
server

Server

server, server, server, server, server, server, server, server, server

Server

server, server, server, server, server

Server, Server

server, server, server, server, server, server, server, server, server, server, server, server,
server, server, server, server, server, server, server, server, server, server, server, server,
server, server, server, server, server, server, server, server, server, server, server, server,
server, server, server, server, server, server, server

Server

server, server, server, server, server, server, server

Server

server, server, server, server, server, server, server, server, server, server, server, server,
server, server, server, server, server, server, server, server, server, server, server, server

Server

server, server, server, server, server, server, server, server, server

Server, Server

server, server

Server

server, server

Server, Server

server

Server, Server

server, server

Server, Server
server, server

Server, Server, Server, Server, Server, Server

server

Server

server, server, server, server, server, server, server, server, server, server, server, server,
server, server, server, server, server, server, server, server, server, server, server, server,
server, server, server, server, server, server, server, server, server, server, server, server,
server, server, server, server

server side, server side, server side, server side, server side, server side, server side,
server side, server side

server-side

servers, servers, servers, servers, servers, servers, servers, servers, servers, servers,
servers, servers, servers, servers, servers, servers, servers, servers, servers, servers,
servers, servers, servers, servers, servers, servers, servers, servers, servers, servers,
servers, servers, servers, servers, servers, servers, servers, servers

session, session, session, session, session, session, session, session, session, session,
session, session

setState, setState, setState, setState

setTimeout, setTimeout, setTimeout, setTimeout

setups

SGML, SGML, SGML

Sheets

shell, shell, shell, shell, shell, shell, shell

Shell

shell, shell

Shell

shell, shell, shell, shell, shell, shell, shell, shell

Shell
shell, shell, shell, shell, shell, shell, shell, shell, shell, shell, shell

sidebar, sidebar

sign-up

signature, signature, signature, signature, signature

Signup

signup

skills, skills, skills, skills, skills, skills

Skimmability

slideshow

snippet

SOAP, SOAP, SOAP, SOAP, SOAP, SOAP, SOAP, SOAP

SOD

software, software, software, software, software, software, software, software, software,

software, software, software, software, software, software, software, software, software,
software, software, software, software

Software

software, software, software, software, software, software, software, software, software,

software, software, software, software, software

Software

software, software, software, software, software, software, software, software, software,

software, software, software, software, software

Software

software, software

sorting, sorting

Source

source, source, source, source, source, source, source, source, source, source, source,
source, source, source, source, source, source, source, source, source, source, source,
source, source, source, source, source, source, source, source

SPAN

specificity

Spring

SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL,
SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL,
SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL,
SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL, SQL

SQLite, SQLite

SSHing

SSJS

SSL

stack, stack, stack, stack, stack, stack

stacks, stacks, stacks, stacks, stacks

Staff

Staged

state

State, State

state

State

state, state, state

State

state

State

state, state, state

State

state, state, state, state, state, state

State

state, state, state, state, state, state, state, state, state, state, state, state, state, state, state

State

state, state, state

State

state, state, state, state, state, state

State

state, state

State

state, state, state, state

State

state, state, state, state, state, state, state, state, state, state, state, state, state, state, state,
state, state, state, state

State

state

State

state

statement

statements, statements

static, static, static, static, static, static, static, static, static, static, static

Static Web

Status, Status, Status, Status

storage, storage, storage, storage, storage, storage, storage, storage, storage, storage,
storage, storage, storage, storage, storage, storage, storage, storage, storage, storage,
storage, storage, storage, storage

stretched

String
string

String

Strings

strings, strings, strings, strings

structure, structure, structure, structure, structure, structure, structure, structure, structure,

structure, structure, structure, structure, structure, structure, structure, structure, structure,
structure, structure, structure, structure, structure, structure, structure, structure, structure,
structure, structure, structure, structure, structure, structure, structure

STRUCTURED

structures, structures, structures, structures

Style

style, style, style, style, style, style, style, style, style

style sheets, style sheets, style sheets, style sheets

styled

styles, styles, styles

stylesheet, stylesheet, stylesheet, stylesheet, stylesheet

stylesheets, stylesheets, stylesheets

styling, styling

sub-domain

subclass

subclasses

subdirectories, subdirectories, subdirectories

subdirectory

subdomain, subdomain, subdomain, subdomain, subdomain

Sublime

supports, supports, supports, supports, supports, supports, supports, supports, supports,

supports
SVG

switch, switch, switch, switch, switch, switch, switch, switch

switches

switching

SWR, SWR, SWR, SWR

symbols

symlink, symlink, symlink, symlink

syntax, syntax

Syntax

syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax,
syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax,
syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax,
syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax, syntax,
syntax, syntax

System

systems, systems, systems, systems, systems, systems, systems, systems, systems,

systems, systems, systems, systems, systems, systems, systems, systems, systems,
systems, systems, systems, systems, systems, systems, systems, systems, systems,
systems, systems, systems, systems

table, table, table, table, table, table

Table

table, table

Table, Table

table, table, table, table, table, table, table, table, table, table, table, table, table, table, table,
table, table, table, table, table, table, table, table

Table
table, table, table, table, table, table, table, table, table, table, table, table, table, table, table,
table, table, table, table, table, table

Table

table, table, table, table, table, table

Table

table, table

Table

table, table

Tables

tablets

tag

tags

TCP, TCP, TCP, TCP, TCP, TCP

TDD, TDD

tech

Tech skills, Tech skills

Techniques, Techniques, Techniques

technological

technologies, technologies, technologies, technologies, technologies, technologies,

technologies, technologies, technologies, technologies, technologies, technologies,
technologies, technologies, technologies, technologies, technologies, technologies,
technologies, technologies, technologies, technologies, technologies

technology, technology, technology, technology, technology, technology, technology,

technology, technology, technology, technology, technology, technology, technology,
technology, technology, technology, technology, technology, technology, technology,
technology, technology, technology, technology, technology, technology, technology,
technology, technology

technology stack, technology stack, technology stack, technology stack, technology stack
template, template, template, template, template, template, template, template, template,
template, template, template, template, template, template, template, template, template,
template, template, template

template engine, template engine, template engine, template engine, template engine,
template engine

Templates

templates, templates, templates, templates, templates

ternary, ternary

testing, testing, testing, testing, testing, testing, testing, testing, testing, testing

texture

third-party, third-party, third-party, third-party, third-party, third-party, third-party, third-party,

third-party, third-party, third-party, third-party, third-party, third-party, third-party, third-party,
third-party

Timer, Timer

timers, timers

Timesheet

timesheet, timesheet, timesheet, timesheet, timesheet

Timesheets

TLS

toggles

token, token, token, token, token, token, token, token, token, token, token, token, token,
token, token, token, token, token, token, token

token-based

tools, tools, tools, tools, tools

Tools

tools

Tools

tools, tools, tools, tools, tools, tools, tools, tools, tools, tools, tools, tools, tools
track, track, track, track, track, track, track, track, track, track

Trailer

transactions, transactions, transactions, transactions

Transfer

translator

transparency

traversal

triggered, triggered

Troubleshooting

troubleshooting

tuples, tuples

Twisted

TypedArray

Typescript

TypeScript

typographic

Typography

typography, typography, typography, typography

Ubuntu

UDF

UI, UI, UI, UI, UI, UI, UI, UI, UI, UI, UI, UI, UI, UI, UI, UI, UI, UI, UI, UI

UML

underscore

Unicode
unique, unique, unique, unique, unique, unique, unique, unique, unique, unique, unique,
unique, unique, unique

Unix, Unix, Unix

UNIX, UNIX

Unix, Unix

Unix-based

unordered, unordered, unordered

update, update, update, update, update, update, update, update, update

Update, Update

update, update, update, update

Update

update, update

Update

update, update, update, update, update, update, update

UPDATE, UPDATE

update

Update

update

UPDATE, UPDATE

update, update

UPDATE, UPDATE, UPDATE

update

Update

update, update, update

Update
update, update

updates, updates, updates, updates, updates, updates, updates, updates, updates,

updates, updates, updates, updates, updates

updating, updating, updating, updating, updating, updating, updating, updating, updating

upload

upskilling

URI, URI, URI, URI, URI, URI

URL, URL, URL, URL, URL, URL, URL, URL, URL, URL, URL, URL, URL, URL, URL, URL,
URL, URL, URL, URL, URL, URL, URL, URL, URL, URL, URL, URL, URL, URL, URL, URL

URLs, URLs

user, user, user, user, user, user, user, user, user, user, user, user, user, user, user, user,
user, user, user, user, user, user, user, user, user, user, user, user, user, user, user, user,
user, user, user, user, user, user, user, user, user, user, user, user, user, user, user, user,
user, user, user, user, user

userID

username, username

users

Users, Users, Users

users, users, users, users, users, users, users, users, users

Users, Users

users, users, users, users, users, users, users, users, users

Users

users, users, users, users, users, users, users, users, users, users, users, users, users,
users, users, users, users, users, users, users, users, users, users

useState, useState, useState, useState, useState, useState, useState, useState, useState,

useState, useState, useState, useState

UTF
UX, UX

validation

Variable

variable, variable, variable, variable, variable, variable, variable, variable, variable, variable,
variable, variable, variable, variable, variable, variable, variable

variables

Variables, Variables

variables, variables, variables, variables, variables, variables

Variables, Variables, Variables, Variables

Version

version, version, version

Version

version, version, version, version, version, version, version, version, version, version,
version, version, version, version, version, version, version, version, version, version,
version, version, version, version, version, version, version, version, version, version,
version, version, version, version, version, version, version, version, version, version,
version, version, version, version, version, version, version, version, version, version

versions

video, video, video, video

Video

videos

View, View

view

viewport

virtual, virtual

VIRTUAL
virtual, virtual, virtual

virtual assistance, virtual assistance

virtualization

visitor's

visual, visual

Visual Basic

visualization

VMs

VPS, VPS, VPS

Vue, Vue

Vulnerability

W3, W3

W3C's

Web

web

Web, Web

web

Web

web

Web, Web, Web

web, web, web, web, web, web, web

Web

web, web, web, web, web

Web
web, web, web

Web

web, web, web

Web

web

Web, Web

web

Web

web

Web

web, web

Web, Web, Web, Web

web

Web

web

Web, Web, Web

web, web

Web, Web

web

Web

web, web

Web, Web

web, web, web

Web

web, web, web, web, web

Web
web, web, web, web

Web, Web

web

Web

web, web, web, web

Web

web

Web

web

Web

web, web, web, web, web

Web, Web

web, web, web, web, web, web, web

Web

web, web, web

Web, Web

web, web, web, web, web, web

Web

web

Web

web, web, web, web, web, web, web, web, web, web, web, web, web, web, web, web, web,
web, web, web, web, web, web, web

Web

web, web, web

Web

web, web, web, web, web, web, web, web, web, web, web, web
Web

web, web, web, web, web, web, web, web, web, web, web, web

Web

web, web, web, web, web, web, web, web, web

Web

web

Web

web, web, web

Web

web, web, web, web, web, web, web, web, web

Web

web, web, web, web, web, web, web, web

Web

web, web, web, web, web, web

Web

web, web, web, web, web, web, web, web, web, web, web, web, web, web, web, web, web,
web, web, web

Web

web, web, web, web, web, web, web

Web 1.0, Web 1.0

Web 2.0, Web 2.0

Web 3.0, Web 3.0

web developer, web developer

Web Engineer

webpages

webserver, webserver
website, website, website, website, website, website, website, website, website, website,
website, website, website, website, website, website

Website

website, website, website, website, website, website, website, website, website, website,
website, website, website, website, website, website, website, website, website, website,
website, website, website, website, website, website, website, website, website, website,
website, website, website, website, website, website, website, website, website, website,
website, website, website, website, website, website, website, website, website, website,
website, website, website, website, website, website, website, website, website, website,
website, website, website, website, website, website, website, website, website, website,
website, website, website, website, website, website, website, website, website, website,
website, website, website, website, website, website, website, website, website, website,
website, website, website, website, website, website, website, website, website, website,
website, website, website, website

websites, websites, websites, websites, websites, websites, websites, websites, websites,

websites, websites, websites, websites, websites, websites, websites, websites, websites,
websites, websites, websites, websites, websites, websites, websites, websites, websites,
websites

Websites

websites, websites, websites, websites, websites, websites, websites, websites, websites

Websites, Websites

websites, websites, websites, websites

Websites

websites, websites, websites, websites, websites, websites, websites, websites, websites,

websites

WebSocket

WHERE, WHERE, WHERE, WHERE

Wide

width

Wikipins
window, window, window, window, window, window, window, window, window, window,
window, window, window

Windows, Windows, Windows, Windows, Windows, Windows, Windows, Windows,

Windows, Windows, Windows, Windows, Windows, Windows, Windows, Windows,
Windows, Windows, Windows, Windows, Windows, Windows, Windows, Windows,
Windows, Windows

wireframe

wireframes

WordPress, WordPress, WordPress, WordPress, WordPress, WordPress, WordPress

worldwide, worldwide, worldwide, worldwide

wrapped

write, write, write, write, write, write, write, write, write, write, write, write, write, write, write,
write, write, write, write

WWW

Xcode, Xcode, Xcode, Xcode, Xcode, Xcode, Xcode

XML, XML, XML, XML, XML, XML, XML, XML, XML, XML, XML, XML, XML, XML, XML,
XML, XML, XML, XML, XML, XML, XML, XML, XML, XML, XML, XML, XML, XML, XML,
XML, XML, XML, XML, XML

XMLHTTPRequest

XPath

zoom