DEV Community: Ezhil Arasan

Variables and Datatypes in JavaScript

Ezhil Arasan — Wed, 03 Jun 2026 07:08:46 +0000

Variables and Data Types in JavaScript are fundamental concepts used to store and manage data in a program. They define how information is declared, stored, and manipulated during execution.
Variables: Declared using var, let, and const to store data values.
Primitive Data Types: Includes Number, String, Boolean, Null, Undefined, BigInt, and Symbol.
Non-Primitive Data Types: Includes Object, Array, and Function used to store complex data.

Variables

A variable is like a container that holds data that can be reused or updated later in the program. In JavaScript, variables are declared using the keywords var, let, or const.

1. var Keyword

The var keyword is used to declare a variable. It has a function-scoped or globally-scoped behaviour.

var n = 5;
console.log(n);

var n = 20; // reassigning is allowed
console.log(n);

2. let Keyword

The let keyword is introduced in ES6, has block scope and cannot be re-declared in the same scope.


let  n= 10;
n = 20; // Value can be updated
// let n = 15; //can not redeclare
console.log(n)

3. const Keyword

The const keyword declares variables that cannot be reassigned. It's block-scoped as well.

const n = 100;
// n = 200; This will throw an error
console.log(n)

The Variable Name

There are certain rules that apply when naming a variable. Some rules are programming-language specific, others apply to all programming languages:
A variable name cannot contain spaces.
A variable name cannot start with a number.
A variable name cannot be a reserved word like if, else, for, function etc.

Difference between static and non-static variables in Java
In Java, variables are mainly categorized into two main types based on their working and memory allocation, and these two variables are static variables and non-static variables. The main difference between them is listed below:
Static variables: These are variables that are shared among all the instances of a class.
Non-static variables: These are variables that belong to each individual instance of a class.

Java Static Variables

When a variable is declared as static, then a single copy of the variable is created and shared among all objects at a class level. Static variables are essentially, global variables.

// Java program to demonstrate execution
// of static blocks and variables

class Geeks {
    // static variable
    static int a = m1();

    // static block
    static { System.out.println("Inside static block"); }

    // static method
    static int m1()
    {
        System.out.println("from m1");
        return 20;
    }

    public static void main(String[] args)
    {
        System.out.println("Value of a : " + a);
        System.out.println("from main");
    }
}

Output

from m1 Inside static block Value of a : 20 from main

Java Non-static variables

Non-static variables are variables that belongs to a specified object of a class, it is also known as instance variable. These variables are declared outside of a method, constructor or block. Each object created from the class gets its own separate copy of these variables.

// Java program to demonstrates 
// the working of non-static variables

public class Geeks 
{  
    // declaration of non-static variables.
    public String name; 
    String division;
    private int age;    

    // Constructor that initialize non-static variable.
    public Geeks(String sname)  
    {  
        name = sname;  
    }  

    //Method to initialize non-static variable. 
    public void setDiv(String sdiv)  
    {  
        division = sdiv;  
    }  

    public void setAge(int sage)  
    {  
        age = sage;  
    }  

    // Method to display the values
    public void printstud()  
    {  
        System.out.println("Student Name: " + name );  
        System.out.println("Student Division: " + division);   
        System.out.println("Student Age: " + age);  
    }  

    public static void main(String args[])  
    {  
        Geeks g = new Geeks("Monica");  
        g.setAge(14);  
        g.setDiv("B");  
        g.printstud();  
    }  
}

Output
Student Name: Monica Student Division: B Student Age: 14

Data Types

JavaScript supports various datatypes, which can be broadly categorized into primitive and non-primitive types.
Primitive Datatypes

Primitive datatypes represent single values and are immutable.

1. Number: Represents numeric values (integers and decimals).

let n = 42;
let pi = 3.14;

2. String: Represents text enclosed in single or double quotes.

let s = "Hello, World!";

3. Boolean: Represents a logical value (true or false).

let bool= true;

4. Undefined: A variable that has been declared but not assigned a value.

let notAssigned;
console.log(notAssigned);

5. Null: Represents an intentional absence of any value.


let empty = null;

6. Symbol: Represents unique and immutable values, often used as object keys.

let sym = Symbol('unique');

7. BigInt: Represents integers larger than Number.MAX_SAFE_INTEGER.

let bigNumber = 123456789012345678901234567890n;

**
Non-Primitive Datatypes**

Non-primitive types are objects and can store collections of data or more complex entities.

1. Object: Represents key-value pairs.


let obj = {
    name: "Amit",
    age: 25
};

2. Array: Represents an ordered list of values.


let a = ["red", "green", "blue"];

3. Function: Represents reusable blocks of code.


function fun() {
    console.log("GeeksforGeeks");
}

Bits and Bytes in Programming
Bits and bytes are the smallest units of data in a computer.
A bit is a single binary digit, with a value of either 0 or 1.
A byte is a group of 8 bits.

What is a Bit?

A bit is the smallest possible unit of data in a computer.
One bit holds a value of either 0 or 1.
Bits are stored in different ways:

In computer memory, a bit is stored as electrical voltage, where a voltage above a certain threshold represents a 1, and a voltage below that threshold represents a 0.
In hard disk drives, a bit is stored as magnetism, where an area magnetized in one orientation represents a 1, and a magnetized area in the opposite orientation represents a 0.
In CDs, DVDs, and Blu-ray discs, a bit is stored as either a pit, or a flat area. A pit is an area where the surface is lower than the surrounding surface, and that represents a 1. A flat area is when there is no pit, and that represents a 0.

What is a Byte?

A byte is a group of 8 bits, like 10001011 for example.

Each bit can be either 0 or 1, and with 8 bits in a byte, there are 28 = 256 different values a byte can have.

But simply storing just one bit is not very useful. We need to store more bits together to represent larger amounts of data.

Storing Groups of Bytes

Like we have seen, it is possible to use a single byte to store a single character, a number, or a color.

But normally, modern computers use more than one byte to store something.

Data Storage Units

When storing data, we can use different units to measure the size of the data.

In data measurement units, the capital letter "B" is used to represent "byte", and the lower case letter "b" is used to represent "bit".

Storing many bytes, we use units:

Bytes (B)
Kilobytes (kB)
Megabytes (MB)
Gigabytes (GB)
Terabytes (TB)

The International System of Units (SI) defines the prefixes:

kilo- (k), meaning 1 000
mega- (M), meaning 1 000 000
giga- (G), meaning 1 000 000 000
tera- (T), meaning 1 000 000 000 000

Refrence
https://www.geeksforgeeks.org/javascript/javascript-tutorial/
https://www.w3schools.com/programming/prog_binary_numbers.php
https://www.w3schools.com/programming/prog_variables.php
https://www.geeksforgeeks.org/javascript/variables-datatypes-javascript/
https://www.geeksforgeeks.org/java/difference-between-static-and-non-static-variables-in-java/

Java Script

Ezhil Arasan — Wed, 03 Jun 2026 06:23:47 +0000

What Can JavaScript Do?
JavaScript is the programming language of the web.
It can calculate, manipulate and validate data.
It can update and change both HTML and CSS.

JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":

JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the<head> section of an HTML page, or in both.

JavaScript in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

JavaScript in <body>

In this example, a JavaScript function is placed in the <body> section of an HTML page.

The function is invoked (called) when a button is clicked:

 <!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Java script
JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.
Client Side: On the client side, JavaScript works along with HTML and CSS. HTML adds structure to a web page, CSS styles it, and JavaScript brings it to life by allowing users to interact with elements on the page, such as actions on clicking buttons, filling out forms, and showing animations. JavaScript on the client side is directly executed in the user's browser.
Server Side: On the Server side (on Web Servers), JavaScript is used to access databases, file handling, and security features to send responses, to browsers.

Why Learn JavaScript?
1) Core language for web development, enabling dynamic and interactive features in websites with fewer lines of code.
2) Highly in demand, offering many job opportunities in Frontend, Backend (Node.js), and Full Stack Development.
3) Supports powerful frameworks and libraries like React, Angular, Vue.js, Node.js, and Express.js, widely used in modern web applications.
4) Object-oriented and event-driven language, ideal for building scalable and responsive applications.
5) Cross-platform and runs directly in all modern web browsers without the need for installation.
6) Major companies like Google, Facebook, and Amazon use JavaScript in their tech stacks.

JavaScript Hello World Program

Mostly browsers can run JavaScript directly, so there's no need to install a compiler. However, the built-in browser console isn’t very beginner-friendly. That’s why we’ve added an online editor below to help you get started easily.

console.log("Hello World!");

Refrence
https://www.geeksforgeeks.org/javascript/variables-datatypes-javascript/
https://www.w3schools.com/js/js_whereto.asp

Selectors

Ezhil Arasan — Wed, 03 Jun 2026 06:00:40 +0000

CSS selectors

The CSS selectors module defines the patterns to select elements to which a set of CSS rules are then applied along with their specificity. The CSS selectors module provides us with more than 60 selectors and five combinators. Other modules provide additional pseudo-class selectors and pseudo-elements.

In CSS, selectors are patterns used to match, or select, the elements you want to style. Selectors are also used in JavaScript to enable selecting the DOM nodes to return as a NodeList.

Selectors, whether used in CSS or JavaScript, enable targeting HTML elements based on their type, attributes, current states, and even position in the DOM. Combinators allow you to be more precise when selecting elements by enabling selecting elements based on their relationship to other elements.

Selectors
:active :any-link :autofill :buffering :checked :default :defined :dir() :disabled :empty :enabled :first-child :first-of-type :focus :focus-visible :focus-within :fullscreen :future :has() :hover :in-range :indeterminate :interest-source :interest-target :invalid :is() :lang() :last-child :last-of-type :link :matches() (obsolete legacy selector alias for :is()) :modal :muted :not() :nth-child() :nth-of-type() :nth-last-child() :nth-last-of-type() :only-child :only-of-type :open :optional :out-of-range :past :paused :picture-in-picture :placeholder-shown :playing :popover-open :read-only :read-write :required :root :scope :seeking :stalled :target :user-invalid :user-valid :valid :visited :volume-locked :where() :-webkit- pseudo-classes Attribute selectors Class selector ID selectors Type selectors Universal selectors

The CSS selectors module also introduces the :blank, :current, and :local-link pseudo-classes. Currently, no browsers support these features.

Terms
1)Pseudo-class glossary term
2)Functional pseudo-classes
3)Combinators
4)Simple selector
5)Compound selector
6)Complex selector
7)Relative selector
8)Specificity

Media Queries

Ezhil Arasan — Fri, 29 May 2026 02:37:12 +0000

CSS Media Queries
CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page.
CSS media queries are essential for creating responsive web pages.
The CSS @media rule is used to add media queries to your style sheet.

Media Query Syntax
A media query consists of an optional media-type and one or more media-features, which resolve to either true or false.

@media [not] media-type and (media-feature: value) and (media-feature: value) {
  /* CSS rules to apply */
}

The media-type is optional. However, if you use not, you must also specify a media-type.

The result of a media query is true if the specified media-type matches the type of device, and all media-features are true. When a media query is true, the corresponding style rules are applied, following the normal cascading rules.

Meaning of the not and and keywords:

not: This optional keyword inverts the meaning of the entire media query.

and: This keyword combines a media-type and one or more media-features.

CSS Media Types
The optional media type specifies the type of media the styles are for. If media type is omitted, it will be set to "all".

all - Used for all media type devices
print - Used for print preview mode
screen - Used for computer screens, tablets, and smart-phones

CSS Media Features
The media feature specifies a specific characteristic of the device.

Here are some commonly used media features:

max-height - Maximum height of the viewport
min-height - Minimum height of the viewport
height - Height of the viewport (including scrollbar)
max-width - Maximum width of the viewport
min-width - Minimum width of the viewport
width - Width of the viewport (including scrollbar)
orientation - Orientation of the viewport

resolution - Screen resolution
prefers-color-scheme - User's preferred color scheme

Using media queries

Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.

Media queries are used for the following:
To conditionally apply styles with the CSS @media, @custom-media and @import at-rules.
To target specific media for the <style>, <link>, <source>, and other HTML elements with the media=orsizes=" attributes.
To test and monitor media states using theWindow.matchMedia()and EventTarget.addEventListener() methods.

Syntax

A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators. Media queries are case-insensitive.
Media types define the broad category of device for which the media query applies: all, print, screen.
The type is optional (assumed to be all) except when using the only logical operator.
Media features describe a specific characteristic of the user agent, output device, or environment:
any-hover
any-pointer
aspect-ratio
color
color-gamut
color-index
device-aspect-ratio
device-height
device-posture
device-width
display-mode
dynamic-range
forced-colors
grid
height
hover
inverted-colors
monochrome
orientation
overflow-block
overflow-inline
pointer
prefers-color-scheme
prefers-contrast
prefers-reduced-motion
prefers-reduced-transparency
resolution
scripting
update
video-dynamic-range
width
For example, the hover feature allows a query to check whether the device supports hovering over elements. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.
Logical operators can be used to compose a complex media query: not, and, and only. You can also combine multiple media queries into a single rule by separating them with commas.
A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. Queries involving unknown media types are always false.

Targeting media types
Media types describe the general category of a given device. Although websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screen readers. For example, this CSS targets printers:


@media print {
  /* … */
}

You can also target multiple devices. For instance, this @media rule uses two media queries to target both screen and print devices:


@media screen, print {
  /* … */
}

See media types for the list of available media types. Because media types describe devices in very broad terms, most of the originally-defined media types were deprecated, with just screen, print, and all remaining. To target more specific attributes, use media features instead.

Targeting media features
Media features describe the specific characteristics of a given user agent, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or devices that are being used in low-light conditions. This example applies styles when the user's primary input mechanism (such as a mouse) can hover over elements:


@media (hover: hover) {
  /* … */
}

Media features are either range or discrete.

Discrete features take their value from an enumerated set of possible keyword values. For example, the discrete orientation feature accepts either landscape or portrait.

@media print and (orientation: portrait) {
  /* … */
}

Many range features can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's viewport width is equal to or narrower than 1250px:


@media (max-width: 1250px) {
  /* … */
}

Refrence
https://www.w3schools.com/css/css3_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using#syntax

Server/404

Ezhil Arasan — Sat, 23 May 2026 17:43:55 +0000

what is server?
A server is a hardware device or software that processes requests sent over a network and replies to them. A client is the device that submits a request and waits for a response from the server. The computer system that accepts requests for online files and transmits those files to the client is referred to as a server in the context of the Internet.

Server
A Server is a program or a device that provides functionality for called clients which are other programs or devices. This architecture is called the client-server model.

A single overall computation is distributed across multiple processes or devices. Servers can provide various functionalities called services. These services include sharing data or resources among multiple clients or performing computations for a client. Multiple clients can be served by a single server, and a single client can use multiple servers.

Key Characteristics of a Server

Provides Services: Servers perform specific tasks like hosting websites, managing emails, storing files, or running applications. These services can vary depending on the server’s purpose. Each type of server performs a specific, well-defined task and is optimized for that role.
File Server: Stores and lets users share files over a network.
Mail Server: Sends, receives, and stores emails (e.g., Microsoft Exchange, Postfix).
Database Server: Provides database access and handles queries (e.g., MySQL, Oracle).
Game Server: Hosts online multiplayer games and syncs game data between players.
Web Server: Serves web pages to browsers (e.g., Apache, Nginx)

Components of Server
Specific components will differ based on the form factor and function of a given server, but common components are covered here.

Hardware: The dedicated server's central processing unit (CPU) , memory , storage device , network interfaces, and the server chassis are all included in this.

Network Connectivity: Over a local area network (LAN) , wide area network (WAN) , or the internet , server programs connect to the network architecture and communicate with client devices. To offer redundancy and accommodate various network setups, certain server form factors contain several network interfaces.

Server OS: This operating system (OS) was created with a particular kind of client/server environment in mind.

Management and Monitoring Tools: Instruments for remote management and performance monitoring are frequently included with servers.

Server Software: This server software supports a particular use case. Software for email servers, web servers, and database servers are a few examples.

High-Availability Features: High-availability (HA) capabilities are included on some servers to reduce downtime and guarantee continuous operation. This involves having access to numerous storage systems, backup power supply and network interfaces, and configuration management tools that enable automatic failover and load balancing .

Types of Servers and Their Applications

Application Server
These servers host web apps (computer programs that run inside a web browser) allowing users in the network to run and use them preventing the installation of a copy on their own computers. These servers need not be part of the World Wide Web. Their clients are computers with a web browser.

Catalog Server
These servers maintain an index or table of contents of information that can be found across a large distributed network. Distributed networks may include computers, users, files shared on file servers, and web apps. Examples of catalog servers are directory servers and name servers.
Their clients are any computer program that needs to find something on the network. An example can be a domain member attempting to log in, an email client looking for an email address, or a user looking for a file

Communication Server
These servers maintain an environment needed for one communication endpoint to find other endpoints and then communicate with them.
These servers may or may not include a directory of communication endpoints and a presence detection service, depending on the openness and security parameters of the network. Their clients are communication endpoints.

Computing Server
These servers share vast amounts of computing resources which include CPU and random-access memory over a network. Any computer program that needs more CPU power and RAM than a personal computer can probably afford can use these types of servers.
The client must be a networked computer to implement the client–server model which is a necessity.

Database Server
These servers maintain and share any form of database over a network. A database is an organized collection of data with predefined properties that may be displayed in a table.
Clients of these servers are spreadsheets, accounting software, asset management software, or virtually any computer program that consumes well-organized data, especially in large volumes.

Fax Server
These servers share one or more fax machines over a network which eliminates the hassle of physical access. Any fax sender or recipient is the client of these servers.

File Server
Shares files and folders, storage space to hold files and folders, or both, over a network. Networked computers are the intended clients, even though local programs can be clients.

Game Server
These servers enable several computers or gaming devices to play multiplayer games. Personal computers or gaming consoles are their clients.

Mail Server
These servers make email communication possible in the same way as a post office makes snail mail communication possible. Clients of these servers are senders and recipients of email.

Print Server
These servers share one or more printers over a network which eliminates the hassle of physical access. Their clients are computers in need of printing something.

Proxy Server
This server acts as an intermediary between a client and a server accepting incoming traffic from the client and sending it to the server.

Reasons to use a proxy server include content control and filtering, improving traffic performance, preventing unauthorized network access, simply routing the traffic over a large and complex network. Their clients are any networked computer.

Web Server
These servers host web pages. A web server is responsible for making the World Wide Web possible. Each website has one or more web servers. Their clients are computers with a web browser.

404 Not Found
The HTTP 404 Not Found client error response status code indicates that the server cannot find the requested resource. Links that lead to a 404 page are often called broken or dead links and can be subject to link rot.

A 404 status code only indicates that the resource is missing without indicating if this is temporary or permanent. If a resource is permanently removed, servers should send the 410 Gone status instead.

404 errors on a website can lead to a poor user experience for your visitors, so the number of broken links (internal and external) should be minimized to prevent frustration for readers. Common causes of 404 responses are mistyped URLs or pages that are moved or deleted without redirection. For more information, see the Redirections in HTTP guide.

** Custom error page in Apache**
For the Apache server, you can specify a path to a custom 404 page in a .htaccess file. The example below uses notfound.html as a page to show visitors on 404s, although a common approach is to name the file 404.html or 404.php (depending on the server-side technology) at the top-level of the server

- Apache HTTP Server
The Apache HTTP Server is a free, open-source cross-platform web server managed by the Apache Software Foundation. It powers millions of websites globally by processing HTTP requests and delivering content over the internet. It is highly valued for its reliability, flexible configuration, and extensive module support
A fast, reliable, and extensible open-source web server for modern operating systems.

- Flexible configuration — .htaccess per-directory config, virtual hosts, dynamic module loading.
- Security — TLS/SSL, authentication modules, fine-grained access control.
- Performance — event MPM, HTTP/2, content caching, reverse proxy.
- Extensibility — 100+ modules for rewriting, proxying, load balancing, scripting, and more.
- Portability — runs on Linux, Windows, macOS, and most Unix-like systems.

Refrence
https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/404#custom_error_page_in_apache
https://www.geeksforgeeks.org/computer-networks/what-is-server/
https://httpd.apache.org/

git commands

Ezhil Arasan — Fri, 22 May 2026 15:43:37 +0000

Git status
Status shows, well, the status of your working tree. Specifically, you'll be able to see your current branch, tracked and untracked files, as well as staged and unstaged changes:

So, in the example above we can see that the current branch is master. The main.rb file is already tracked by Git and it has some changes that are not yet staged for commit (we will see how to achieve that a bit later).

Git add
add is probably one of the most common Git commands. So, what operation does it perform? Basically, it updates the index with the content found in your working tree thus making the content staged for the next commit. An index is like a snapshot of your working tree. When you perform a commit, this snapshot is utilized. Therefore, before doing a commit you should perform git add for any files that were modified or created.

In the simplest case you can say:

git add .

This dot . means "take all the files in the working tree" and add them to the index.

However, you can also add individual files and folders as well as use fileglobs

git add single_file.txt
git add my_folder
git add *.rb

So, to summarize: after you have performed some changes in your project, you will need to run git add before doing a commit.

Git commit
commit is one of the most important Git commands as it records the changes to the repository based on the current index (the snapshot that you've created). To perform a new commit and add a small informational message for it, run:

git commit -m "My first commit"

Now all the staged files will be commited and added to the project history. Also, you can use the -a option to automatically stage and then commit all the files that have been modified and deleted:

git commit -am "My first commit"

Unfortunately, this option will ignore untracked files, therefore you will still have to say git add . for these new files.

Git push/pull
Push Git command allows you to send local changes to the remote repository which is usually hosted on services like GitHub, Bitbucket, GitLab, or Azure DevOps repos.

First of all, you will need to actually add information about this remote repository by running something like:

git remote add origin https://github.com/username/repo.git

Usually this command will be supplied to you by the service you're using. What it does? It creates something like a "pointer" to a remote repository that is stored on github.com. This remote repository has an alias origin but you can call it anything you'd like (for example, just github).

Now, when the remote repository is provided, you can push your local changes:
git push origin master

git push origin master

In this example we're taking the contents of the master branch and push it to the remote repository which has an alias origin.

You can also set origin as "upstream" by saying:

git push -u origin master

Now you don't need to provide origin anymore. Just say

git push

However, please note that it will work only for the master branch which was mentioned when creating an upstream — for all other branches you will still have to say:

git push origin another_branch

To grab changes from the remote repository and apply them locally, use:

git pull origin master

This command works in the same way as git push. If you have specified an upstream, you can simply say:

git pull

Please note that merge conflicts might occur and you will need to resolve them manually .

Git clean
Removes untracked files from the working directory. This is the logical counterpart to git reset, which (typically) only operates on tracked files.

Git clone
Creates a copy of an existing Git repository. Cloning is the most common way for developers to obtain a working copy of a central repository.

Git config
A convenient way to set configuration options for your Git installation. You’ll typically only need to use this immediately after installing Git on a new development machine.

Git merge
A powerful way to integrate changes from divergent branches. After forking the project history with git branch, git merge lets you put it back together again.

Git checkout
In addition to checking out old commits and old file revisions, git checkout is also the means to navigate existing branches. Combined with the basic Git commands, it’s a way to work on a particular line of development.

Git reset
Undoes changes to files in the working directory. Resetting lets you clean up or completely remove changes that have not been pushed to a public repository.

Refrence
https://lokalise.com/blog/10-git-commands-for-day-to-day-work/
https://www.atlassian.com/git/glossary#terminology

html command

Ezhil Arasan — Thu, 21 May 2026 16:52:24 +0000

What is command?
A command in computing is a specific instruction given to a computer or software program to perform a particular task. It acts as a direct order, such as telling the system to open a file, delete data, or run a program.

In HTML, "commands" are technically called tags. They are the building blocks used to structure and format web pages.

Basic steps: using tags
HTML uses tags to communicate to the client (browser) how to display text and images. Tags are contained in< >symbols. In most cases you start with the beginning tag, put in the word or words that will be affected by this tag, and at the end of the string of word(s), you place a closing tag.

For example, to create a title for a document you would do the following:

<title>My First HTML Document</title>

The closing tag normally contains a "/" before the directive to indicate the termination of the action.

HTML tags are not case-sensitive, although URLs generally are. In most cases (with the exception of preformatted text) HTML collapses many spaces to one space and does not read blank lines. However, when you write your text you should leave several blank lines between paragraphs to make editing your HTML source document easier.

The HTML tag
Although not currently required by all clients, the <html> tag signals the point where text should start being interpreted as HTML code. It's probably a good idea to include it in all your documents now, so you don't have to go back to your files and add it later.

The <html> tag is usually placed on the first line of your document. At the end of your document you should close with the </html> tag.

The head tag
Just like the header of a memo, the head of an HTML document contains special information, like its title. The head of a document is demarcated by <head> and </head> respectively.

For the purposes of this class, only the title tag, below, should be included in the document head. A typical head section might look like


<html>
<head>
<title>My First HTML Document</title>
</head>

Remember, the title usually doesn't appear in the document itself, but in a title box or bar at the top of the window.

The body tag
Like you might expect, the body tags <body> and </body> define the beginning and end of the bulk of your document. All your text, images, and links will be in the body of the document.

The body should start after the head. A typical page might begin like

`<html>
<head>
<title>My First HTML Document</title>
</head>
<body>`

<!DOCTYPE html>
<html>
<head>
    <title>Description List</title>
</head>
<body>

<h2>Programming Languages</h2>

<dl>
    <dt>HTML</dt>
    <dd>Used to create web pages</dd>

    <dt>CSS</dt>
    <dd>Used for styling web pages</dd>
</dl>

</body>
</html>

Headers
There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another.

<h1>This is a header 1 tag</h1>
Headers, as you notice, not only vary in size(h1,h2,h3,h4,h5), they are also bold and have a blank line inserted before and after them. It's important to use headers only for headings, not just to make text bold (we cover the bold tag later).

Paragraphs
In HTML, a paragraph tag <p> should be put at the end of every paragraph of "normal" text (normal being defined as not already having a tag associated with it).

`<p>` causes a line break and adds a trailing blank line 
`<br>` causes a line break with no trailing blank line

As a convenience to yourself and others who might have to edit your HTML documents, it's a very good idea to put two or three blank lines between paragraphs to facilitate editing.

Blockquote
The blockquote tag indents the text (both on the left and right) inside the tags. The blockquote tag looks like this:

<blockquote>...</blockquote>

Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Again, note that the text here is indented on both the left and the right margins.

list

there are three types of lists:
1) ordered lists: <ol>,</ol>
the elements of the list are introduced by <li> (list item)
the end tag </li>is not optional
to change the current label to 30, use <li value="30">
2) unordered lists: <ul>,</ul>
the elements of the list are introduced by <li> (list item)
the end tag </li> is not optional
3) definition lists: <dl>, </dl>
the elements of the list are pairs term-definition introduced by
<dt>(definition term)
<dd>(definition definition)
the end tags </dt> and </dd> are not optional

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List</title>
</head>
<body>

<h2>Subjects</h2>

<ol>
    <li>Maths</li>
    <li>Science</li>
    <li>English</li>
    <li>Computer</li>
</ol>

</body>
</html>

Tables

<table>, </table>: encloses the table
<thead>, </thead>: encloses the table head; this helps the browser display the head on each page, if the table is longer.
<tfoot>, </tfoot>: encloses the footer of the table; it must precede the<tbody> -<tbody>, </tbody>: encloses the body of the table
<tr>, </tr>: table row
<th>, </th>: table header cell; used within <tr>
<td>, </td>: table data cell; used within `

Strike-through

Should you want it, there is a strike-through tag which displays text with a strike.

<strike>This is struck through text</strike>

displays as:

This is struck through text

Addresses
The <address> tag normally appears at the end of a document and is used most frequently to mark information on contacting the author or institution that has supplied this information. Anything contained within the address tag appears in italics. The address tag is another example of a logical tag, and although it currently does nothing but make text appear in italics, this could change as HTML code advances.

Here is an example of how an address might appear:

`html
Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu
`

And it would appear as:
Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu

Horizontal Rule
To separate sections in a document, you can insert a horizontal rule tag
. A horizontal rule is displayed as follows:
Center

You can center text, images, and headings with the center tag:

<center>This is a centered sentence</center>

The center tag automatically inserts a line break after the closing center tag.

** Image**
<img>
purpose: inline image
example: <img src="../picture.jpg" height="20%" alt="campus map">

Refrence
https://www.apu.ac.jp/~gunarto/html.html
https://www.math.uh.edu/~torok/math_6298/html/commands.html

Git

Ezhil Arasan — Thu, 21 May 2026 15:14:56 +0000

What is git?

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
Git is lightning fast and has a huge ecosystem of GUIs, hosting services, and command-line tools.
96% of professional developers use Git.

Tools
The community has built a huge number of tools to make it easier to use Git. While you can use Git on its own, most Git users use some of these extra tools. There are editor integrations, GUIs, tools for resolving merge conflicts, hosting services, and much more.

Git
1) A web-based platform that hosts Git repositories and enables collaboration through pull requests, issues and team management.
2) Works on a centralized hosting model for sharing and managing repositories online.
3) Provides a web-based UI + integrations along with Git command support.
4) Hosted on the cloud (web platform).
5) Focuses on collaboration workflows like pull requests, issues and code reviews.
6) Hosts repositories and manages team collaboration and access control.

GitLab

GitLab is a repository hosting manager tool developed by GitLab Inc and used for the software development process. It provides a variety of management by which we can streamline our collaborative workflow for completing the software development lifecycle. It also allows us to import the repository from Google Code, Bitbucket, etc.It is owned by GitLab Inc.

Features of GitLab
1) Open-source community edition repository management platform.
2) Easy Maintaining of a repository on a server.
3) Offers tools like Group Milestones, Time Tracking Issue Tracker, etc. for effective development.
4) More Spontaneous User interface and authentication features.
5) User Permission and Branch protection are enhanced.

Advantages
1) GitLab is freely available and is open source for community edition
2) It is a cloud-native application and is highly secure.

Disadvantage
1) GitLab is available with many bugs and it makes the user experience sloppy.
2) It is difficult to manage code reviews for first-timers.

GitHub

GitHub is a repository hosting service tool that features collaboration and access control. It is a platform for programmers to fix bugs together and host open-source projects. GitHub is designed for the developers and to help them track their changes into a project through the repository.It is owned by Microsoft Corporation.

Features of GitHub
1) Specifies milestones and labels to the projects.
2) Comparison view between branches is allowed.
3) GitHub Pages allows us to publish and host websites within GitHub.
4) Syntax highlight feature.
5) It allows third-party API integrations for bug tracking and cloud hosting.

Advantage
1) It helps us create an organized document for the project.
2) It is used for sharing the work in front of the public.

Disadvantage
1) It is not open-source.
2) It supports only Git version control.

Refrence
https://git-scm.com/community
https://www.geeksforgeeks.org/git/git-vs-github/
https://www.geeksforgeeks.org/git/difference-between-gitlab-and-github/

Git / Github / Gitlab

Ezhil Arasan — Wed, 20 May 2026 13:51:46 +0000

What is git?

Why Use Git?
Using Git helps developers manage their code more effectively, reduces the risk of conflicts, and enhances collaboration. It’s an essential tool for both individual projects and team-based development.

GitLab

Why Use GitLab?
GitLab is ideal for teams looking for a comprehensive solution that combines version control with project management and CI/CD. Its flexibility and extensive features make it a popular choice among organizations of all sizes.

Advantages
1) GitLab is freely available and is open source for community edition
2) It is a cloud-native application and is highly secure.

Disadvantage
1) GitLab is available with many bugs and it makes the user experience sloppy.
2) It is difficult to manage code reviews for first-timers.

GitHub

Why Use GitHub?
GitHub not only simplifies the process of using Git but also offers a social aspect to coding, allowing developers to connect, share knowledge, and contribute to open-source projects. It’s an invaluable resource for building a portfolio and gaining visibility in the developer community.

Advantage
1) It helps us create an organized document for the project.
2) It is used for sharing the work in front of the public.

Disadvantage
1) It is not open-source.
2) It supports only Git version control.

Refrence
https://git-scm.com/community
https://www.geeksforgeeks.org/git/git-vs-github/
https://www.geeksforgeeks.org/git/difference-between-gitlab-and-github/

Linux

Ezhil Arasan — Tue, 19 May 2026 17:47:25 +0000

What is Linux?
Linux is an open source operating system (OS) created by Linus Torvalds in 1991. Today, it has a massive user base, and is used in the world’s 500 most powerful supercomputers. Users gravitate toward it for its versatility and security capabilities, among other reasons. The Linux kernel is maintained by a worldwide community of open source enthusiasts and has hundreds of unique distros.

What is Operating System?
An OS is the software that directly manages a system’s hardware and resources, like the CPU, memory, and storage. The OS sits between applications and hardware and makes the connections between all your software and the physical resources that do the work.

Humans can interact with computers in many ways. Most people’s primary interaction with their hardware happens through an OS, which helps them access a computer’s core functions. There are lots of OS options, from proprietary software made by large companies to open source projects created and supported by volunteers.

Think about an OS like a car engine. An engine can run on its own, but it becomes part of a functional car when it’s connected with a transmission, axles, and wheels. Without the engine running properly, the car won’t work.

How does Linux work?
Linux was designed to be similar to UNIX, but has evolved to run on a wide variety of hardware from phones to supercomputers. Every Linux-based OS includes the Linux kernel—which manages hardware resources—and a set of software packages that make up the rest of the operating system. Organizations can also choose to run their Linux OS on a Linux server.

Linux includes some common core components, like GNU tools, among others. These tools give the user a way to manage the resources provided by the kernel, install additional software, configure performance and security settings, and more. All these tools bundled together make up the functional operating system. Because Linux is an open source OS, combinations of software can vary between Linux distributions.

Benefits
1) Versatility.
Linux is flexible enough to adapt for virtually any need you can imagine. It powers all kinds of technology, from small, data-gathering edge devices to complex, cloud-native applications that the world’s largest companies depend on. And because Linux is open source, it’s easier to avoid being locked in to any 1 vendor’s solution. If a part of your technology stack isn’t working for you, chances are there’s a Linux-based, open source alternative you can use instead.
2) Security
Linux’s modularity is especially beneficial in your approach to security, because you can monitor every aspect of the OS. SELinux has been a part of the Linux kernel since 2003, giving administrators visibility into and granular control over user access and application permissions. It’s 1 aspect of a holistic approach to security that Linux makes possible.
3) Community
A worldwide community of practice around Linux has existed for decades, and thousands of smaller communities have formed around specific projects. That means there’s always someone willing to share ideas, troubleshooting tips, and new innovations.

Popular Linux use cases
With each new release of the Linux OS, new hardware resources, applications and capabilities become available to Linux users. Today, Linux is used for various purposes, including as an OS for web servers, scientific and edge computing instances, smartphones through the Android OS and more. Here are some of the most popular ways in which Linux is being used around the world.

Network servers
Linux is widely used to connect devices and systems across a range of ecosystems for the purpose of exchanging information and resources over a network. As a network OS, Linux is used on routers, switches, domain name system (DNS) servers and many other devices critical to networking.

A server that uses Linux OS is known as a Linux server. Cisco, for example, relies on the Linux kernel to underpin a version of its popular Cisco Internetwork Operating System (IOS). According to a recent survey by W3Techs, Linux powers more than half of the web servers operating global.

DevOps environments

DevOps, a software development methodology used to speed the delivery of applications, relies heavily on the Linux OS. Linux’s open source nature and extensive interface capabilities make it critical for adding automation and infrastructure control features in the DevOps environment.

Refrence
https://www.redhat.com/en/topics/linux/what-is-linux
https://www.ibm.com/think/topics/linux

HTML

Ezhil Arasan — Fri, 15 May 2026 05:54:05 +0000

What is Html?
HTML stands for Hyper Text Markup Language, it is the standard markup language for creating Web pages. It describes the structure of a Web page. IT consists of a series of elements.
HTM elements tell the browser how to display the content, elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.HTML is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by < and >.

Uses:
Registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.

Basic tags used in Html:

The <!DOCTYPE html> declaration defines that this document is an HTML5 document.
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page.
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The<body> element defines the document's body, and is a container for all the visible contents, such as headings,paragraphs, images, hyperlinks, tables, lists, etc.
The<h1> element defines a large heading.
The<p> element defines a paragraph.

Reference: