To my surprise, i came to know about that there is a stuff called as global ignore in git. In this blog i will jot down notes on setting up global .gitignore file.

Git allows you to ignore certain files and directories using a .gitignore file. However, if you frequently work on multiple projects, you might want to configure a global .gitignore file to avoid repeating the same ignore rules across repositories.

Why Use a Global .gitignore?

A global .gitignore file is beneficial when you want to exclude common files across all Git repositories on your system. Some examples include,

• OS-specific files (e.g., macOS .DS_Store, Windows Thumbs.db)
• Editor/IDE-specific files (e.g., .vscode/, .idea/)
• Common compiled files (e.g., *.pyc, node_modules/, dist/)
• Personal configurations that should not be committed (e.g., .env files)
• Or you can just define a format like *.ignore.* , which you can use to ignore any file needed.

Setting Up a Global .gitignore File

1. Create the Global .gitignore File

Run the following command to create a global .gitignore file in your home directory:

 touch ~/.gitignore_global

You can use any path, but ~/.gitignore_global is commonly used.

2. Configure Git to Use the Global .gitignore

Tell Git to use this file globally by running

 git config --global core.excludesFile ~/.gitignore_global

3. Add Rules to the Global .gitignore

Edit the ~/.gitignore_global file using a text editor

 nano ~/.gitignore_global

Example content

# Ignore system files
.DS_Store
Thumbs.db

# Ignore editor/IDE settings
.vscode/
.idea/
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# Ignore compiled files
*.o
*.pyc
*.class
node_modules/
dist/

# Ignore environment files
.env
.env.local

Save the file and exit the editor.

4. Verify the Global Ignore Configuration

To check if Git recognizes your global .gitignore file, run

 git config --global core.excludesFile

It should return the path to your global ignore file, e.g., ~/.gitignore_global.

Managing the Global .gitignore

• To update the file, edit ~/.gitignore_global and add/remove rules as needed.
• If you ever want to remove the global .gitignore setting, run:git config --global --unset core.excludesFile
• To list all global configurations, use:git config --global --list

Setting up a global .gitignore file is a simple yet powerful way to maintain cleaner repositories and avoid committing unnecessary files. By following these steps, you can streamline your workflow across multiple Git projects efficiently.

REST API

A REST API (Representational State Transfer) is a web service that allows different applications to communicate over the internet using standard HTTP methods like GET, POST, PUT, and DELETE. It follows REST principles, making it lightweight, scalable, and easy to use.

REST API Principles

Client-Server Architecture

A REST API follows a client-server architecture, where the client and server are separate. The client sends requests, and the server processes them and responds, allowing different clients like web and mobile apps to communicate with the same backend.

Statelessness

Before understanding statelessness, you need to understand statefulness.

• Statefulness: The server stores and manages user session data, such as authentication details and recent activities.
• Statelessness: The server does not store any information. Each request is independent, and the client must include all necessary data, like authentication details and query parameters, in every request.

This behavior makes the server scalable, reliable, and reduces server load.

Caching

Caching improves performance by storing responses that can be reused, reducing the need for repeated requests to the server. This minimizes response time and server load.

Uniform Interface

A uniform interface ensures consistency by using standard HTTP methods like GET, POST, PUT, and DELETE. This makes the API predictable and easy to use.

Layered System

A layered system divides tasks into separate layers, like security, caching, and user requests. The client only interacts with the top layer, making the system easier to manage and more flexible.

Start To Code

I use Node.js and some popular packages:

• Express: A Node.js web framework used for building web applications and APIs.
• Joi: A package used to validate user input, ensuring data integrity and security.

basic code

const express = require("express");
const app = express();
const joi = require("joi");
app.use(express.json());

//data
customers = [
    {name : "user1", id : 1},
    {name : "user2", id : 2},
    {name : "user3", id : 3}
]

//listen
const port = process.env.PORT || 8080;
app.listen(port, ()=> console.log("listening on ",port));

//function
function validateUserName(customer){
    schema = joi.object({
	name : joi.string().min(3).required()
    });
    return schema.validate(customer)
}

GET

app.get('/api/customers',(req,res)=>{
    res.send(customers);
});

get specific user details

app.get('/api/customer/:id', (req,res)=>{
    const user_details = customers.find(user => req.params.id == user.id );
    if(!user_details){
        res.status(404).send("Data Not Found");
    }else{
        res.status(200).send(user_details)
    }
});

POST

The POST method is used to upload data to the server. The response code is 201, and I used the validateUserName function to validate a username.

app.post('/api/customer/add',(req, res)=>{
    const {error} = validateUserName(req.body);
    if(error){	
	res.status(400).send(error.details[0].message);
    }
    else{
	customer = {
	    name : req.body.name,
	    id   : customers.length + 1
	}
	customers.push(customer);
	res.status(201).send("data inserted successfully");
    }
});

PATCH

The PATCH method is used to update existing data partially. To update the entire user data, the PUT method should be used.

app.patch('/api/customer/:id', (req, res)=>{
    const customer = customers.find(user => user.id == req.params.id);
    const {error} = validateUserName(req.body);
    if(!customer){
	res.status(404).send("Data Not Found");
    }
    else if(error){
	console.log(error)
	res.status(400).send(error.details[0].message);
    }
    else{
	customer.name = req.body.name;
	res.status(200).send("successfully updated");
    }
});

DELETE

The DELETE method is used to remove user data.

app.delete('/api/customer/:id', (req,res)=>{
    const user = customers.find(user => user.id == req.params.id);
    index = customers.indexOf(user);
    if(!user){
	console.log("test")
	res.status(404).send("Data Not Found");
    }
    else{
	customers.splice(index,1);
	res.status(200).send("successfully deleted");
    }
});

What I Learned

CRUD Operations with REST API

I learned the basics of REST API and CRUD operations, including the uniform methods GET, POST, PUT, PATCH, and DELETE.

Status Codes

REST APIs strictly follow status codes:

• 200 – OK
• 201 – Created successfully
• 400 – Bad request
• 204 – No content
• 404 – Page not found

Joi Package

For server-side validation, the Joi package is used. It helps verify user data easily.

Middleware

Using app.use(express.json()) as middleware ensures that for POST, PATCH, and PUT methods, JSON-formatted user data is parsed into an object accessible via req.body.

Introduction

I created a website called Vinmeen that allows users to rent products for temporary needs at a low cost. The goal was to design a simple UI for users to easily rent things they need temporarily.

Technologies Used

• Node.js & Express
• Node Packages
  • Express
  • EJS
  • Nodemailer
  • Bcrypt
  • Multer
  • Sync-SQL
  • MySQL
• MySQL

What I Learned from This Project

This project helped me understand how dynamic websites work and how template rendering is done. I used EJS for rendering templates, MySQL for database handling, and Bcrypt for securely storing user passwords through hashing. I also learned how to send email notifications with OTP and rent requests, among other things.

Hosting

I hosted the site using two different services

Website Hosting – Render.com

Render provides free hosting for experimentation and student projects. This plan has minimal resources, but it’s great for learning and testing.

MySQL Database – Filess.io:

Files.io offers a free MySQL database with a 10MB size limit and a maximum of 5 concurrent connections. It’s ideal for students and self-study projects, but not recommended for startups or businesses.

Links

• Website : vinmeen
• SourceCode(Github) : code

<!DOCTYPE html>

<html>

<head>

<style>

html{

background-color: gray;

}

body{

width:400px;

height:400px;

margin:0 auto;

margin-top: 50px;

background-color: red;

}

.row{

width:50px;

height:50px;

float:left;

}

.color1{

width:50px;

height:50px;

background-color:white;

border-color: black;

border-right:none;

border-style:groove;

border-width: 1px;

float:left;

}

.color2{

width:50px;

height:50px;

background-color:red;

border-color: black;

border-right:none;

border-style:groove;

border-width: 1px;

float:left;

}

</style>

</head>

<body>

<div class=”row”>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

</div>

<div class=”row”>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

</div>

<div class=”row”>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

</div>

<div class=”row”>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

</div>

<div class=”row”>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

</div>

<div class=”row”>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

</div>

<div class=”row”>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

</div>

<div class=”row”>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

</div>

</body>

</html>

Redis, a high-performance in-memory key-value store, is widely used for caching, session management, and various other scenarios where fast data retrieval is essential. One of its key features is the ability to set expiration times for keys. However, when using the SET command with the EX option, developers might encounter unexpected behaviors where the expiration time is seemingly lost. Let’s explore this issue in detail.

Understanding SET with EX

The Redis SET command with the EX option allows you to set a key’s value and specify its expiration time in seconds. For instance

SET key value EX 60

This command sets the key key to the value value and sets an expiration time of 60 seconds.

The Problem

In certain cases, the expiration time might be unexpectedly lost. This typically happens when subsequent operations overwrite the key without specifying a new expiration. For example,

SET key value1 EX 60
SET key value2

In the above sequence,

1. The first SET command assigns a value to key and sets an expiration of 60 seconds.
2. The second SET command overwrites the value of key but does not include an expiration time, resulting in the key persisting indefinitely.

This behavior can lead to subtle bugs, especially in applications that rely on key expiration for correctness or resource management.

Why Does This Happen?

The Redis SET command is designed to replace the entire state of a key, including its expiration. When you use SET without the EX, PX, or EXAT options, the expiration is removed, and the key becomes persistent. This behavior aligns with the principle that SET is a complete update operation.

When using Redis SET with EX, be mindful of operations that might overwrite keys without reapplying expiration. Understanding Redis’s behavior and implementing robust patterns can save you from unexpected issues, ensuring your application remains efficient and reliable.

How I Adopted a Lean Startup Mindset in My Team’s Product Development 🚀

Developing innovative products in a world of uncertainty requires a mindset shift. At my team, we’ve adopted the Lean Startup mindset to ensure that every product we build is validated by real user needs and designed for scalability. Here’s how we integrated this approach into our team:

1. Value Hypothesis: Testing What Matters Most

We start by hypothesizing the value our product delivers. Since customers may not always articulate their needs, we focus on educating them about the problem and demonstrating how our solution fits into their lives. Through early user engagement and feedback, we validate whether the product solves a real problem.

2. Growth Hypothesis: Building for Scalability

Once we validate the product's value, we focus on testing its technical scalability. We run controlled experiments with system architecture, performance optimization, and infrastructure design to ensure our solution can handle growing user demands. Each iteration helps us identify potential bottlenecks, improve system reliability, and establish robust engineering practices that support future growth.

3. Minimum Viable Product (MVP): Launching to Learn

Instead of waiting to perfect our product, we launch an MVP to get it in front of users quickly. The goal is to learn, not to impress. By observing how users interact with the MVP, we gain valuable insights to prioritize features, fix pain points, and improve the user experience.

Fostering a Lean Mindset

Adopting the Lean Startup framework has been transformative for our team. It’s taught us to embrace experimentation, view failures as learning opportunities, and focus on delivering value to our users.

If you’re building a product and want to innovate smarter, consider adopting the Lean Startup mindset.

Today, i learned about bulk head pattern and how it makes the system resilient to failure, resource exhaustion. In this blog i jot down notes on this pattern for better understanding.

In today’s world of distributed systems and microservices, resiliency is key to ensuring applications are robust and can withstand failures.

The Bulkhead Pattern is a design principle used to improve system resilience by isolating different parts of a system to prevent failure in one component from cascading to others.

What is the Bulkhead Pattern?

The term “bulkhead” originates from shipbuilding, where bulkheads are partitions that divide a ship into separate compartments. If one compartment is breached, the others remain intact, preventing the entire ship from sinking. Similarly, in software design, the Bulkhead Pattern isolates components or services so that a failure in one part does not bring down the entire system.

In software systems, bulkheads:

• Isolate resources (e.g., threads, database connections, or network calls) for different components.
• Limit the scope of failures.
• Allow other parts of the system to continue functioning even if one part is degraded or completely unavailable.

Example

Consider an e-commerce application with a product-service that has two endpoints

1. /product/{id} – This endpoint gives detailed information about a specific product, including ratings and reviews. It depends on the rating-service.
2. /products – This endpoint provides a catalog of products based on search criteria. It does not depend on any external services.

Consider, with a fixed amount of resource allocated to product-service is loaded with /product/{id} calls, then they can monopolize the thread pool. This delays /products requests, causing users to experience slowness even though these requests are independent. Which leads to resource exhaustion and failures.

With bulkhead pattern, we can allocate separate client, connection pools to isolate the service interaction. we can implement bulkhead by allocating some connection pool (10) to /product/{id} requests and /products requests have a different connection pool (5) .

Even if /product/{id} requests are slow or encounter high traffic, /products requests remain unaffected.

Scenarios Where the Bulkhead Pattern is Needed

1. Microservices with Shared Resources – In a microservices architecture, multiple services might share limited resources such as database connections or threads. If one service experiences a surge in traffic or a failure, it can exhaust these shared resources, impacting all other services. Bulkheading ensures each service gets a dedicated pool of resources, isolating the impact of failures.
2. Prioritizing Critical Workloads – In systems with mixed workloads (e.g., processing user transactions and generating reports), critical operations like transaction processing must not be delayed or blocked by less critical tasks. Bulkheading allocates separate resources to ensure critical tasks have priority.
3. Third-Party API Integration – When an application depends on multiple external APIs, one slow or failing API can delay the entire application if not isolated. Using bulkheads ensures that issues with one API do not affect interactions with others.
4. Multi-Tenant Systems – In SaaS applications serving multiple tenants, a single tenant’s high resource consumption or failure should not degrade the experience for others. Bulkheads can segregate resources per tenant to maintain service quality.
5. Cloud-Native Applications – In cloud environments, services often scale independently. A spike in one service’s load should not overwhelm shared backend systems. Bulkheads help isolate and manage these spikes.
6. Event-Driven Systems – In event-driven architectures with message queues, processing backlogs for one type of event can delay others. By applying the Bulkhead Pattern, separate processing pipelines can handle different event types independently.

What are the Key Points of the Bulkhead Pattern? (Simplified)

• Define Partitions – (Think of a ship) it’s divided into compartments (partitions) to keep water from flooding the whole ship if one section gets damaged. In software, these partitions are designed around how the application works and its technical needs.
• Designing with Context – If you’re using a design approach like DDD (Domain-Driven Design), make sure your bulkheads (partitions) match the business logic boundaries.
• Choosing Isolation Levels – Decide how much isolation is needed. For example: Threads for lightweight tasks. Separate containers or virtual machines for more critical separations. Balance between keeping things separate and the costs or extra effort involved.
• Combining Other Techniques – Bulkheads work even better with patterns like Retry, Circuit Breaker, Throttling.
• Monitoring – Keep an eye on each partition’s performance. If one starts getting overloaded, you can adjust resources or change limits.

When Should You Use the Bulkhead Pattern?

• To Isolate Critical Resources – If one part of your system fails, other parts can keep working. For example, you don’t want search functionality to stop working because the reviews section is down.

• To Prioritize Important Work – For example, make sure payment processing (critical) is separate from background tasks like sending emails.
• To Avoid Cascading Failures – If one part of the system gets overwhelmed, it won’t drag down everything else.

When Should You Avoid It?

• Complexity Isn’t Needed – If your system is simple, adding bulkheads might just make it harder to manage.

• Resource Efficiency is Critical – Sometimes, splitting resources into separate pools can mean less efficient use of those resources. If every thread, connection, or container is underutilized, this might not be the best approach.

Challenges and Best Practices

1. Overhead: Maintaining separate resource pools can increase system complexity and resource utilization.
2. Resource Sizing: Properly sizing the pools is critical to ensure resources are efficiently utilized without bottlenecks.
3. Monitoring: Use tools to monitor the health and performance of each resource pool to detect bottlenecks or saturation.

References:

1. AWS https://aws.amazon.com/blogs/containers/building-a-fault-tolerant-architecture-with-a-bulkhead-pattern-on-aws-app-mesh/
2. Resilience https://resilience4j.readme.io/docs/bulkhead
3. https://medium.com/nerd-for-tech/bulkhead-pattern-distributed-design-pattern-c673d5e81523
4. Microsoft https://learn.microsoft.com/en-us/azure/architecture/patterns/bulkhead

Today, I learnt about Sidecar Pattern. Its seems like offloading the common functionalities (logging, networking, …) aside within a pod to be used by other apps within the pod.

Its just not only about pods, but other deployments aswell. In this blog, i am going to curate the items i have learnt for my future self. Its a pattern, not an strict rule.

What is a Sidecar?

Imagine you’re riding a motorbike, and you attach a little sidecar to carry your friend or groceries. The sidecar isn’t part of the motorbike’s engine or core mechanism, but it helps you achieve your goals—whether it’s carrying more stuff or having a buddy ride along.

In the software world, a sidecar is a similar concept. It’s a separate process or container that runs alongside a primary application. Like the motorbike’s sidecar, it supports the main application by offloading or enhancing certain tasks without interfering with its core functionality.

Why Use a Sidecar?

In traditional applications, all responsibilities (logging, communication, monitoring, etc.) are bundled into the main application. This approach can make the application complex and harder to manage. Sidecars address this by handling auxiliary tasks separately, so the main application can focus on its primary purpose.

Here are some key reasons to use a sidecar

1. Modularity: Sidecars separate responsibilities, making the system easier to develop, test, and maintain.
2. Reusability: The same sidecar can be used across multiple services. And its language agnostic.
3. Scalability: You can scale the sidecar independently from the main application.
4. Isolation: Sidecars provide a level of isolation, reducing the risk of one part affecting the other.

Real-Life Analogies

To make the concept clearer, here are some real-world analogies:

1. Coffee Maker with a Milk Frother:
   • The coffee maker (main application) brews coffee.
   • The milk frother (sidecar) prepares frothed milk for your latte.
   • Both work independently but combine their outputs for a better experience.
2. Movie Subtitles:
   • The movie (main application) provides the visuals and sound.
   • The subtitles (sidecar) add clarity for those who need them.
   • You can watch the movie with or without subtitles—they’re optional but enhance the experience.
3. A School with a Sports Coach:
   • The school (main application) handles education.
   • The sports coach (sidecar) focuses on physical training.
   • Both have distinct roles but contribute to the overall development of students.

Some Random Sidecar Ideas in Software

Let’s look at how sidecars are used in actual software scenarios

1. Service Meshes (e.g., Istio, Linkerd):
   • A service mesh helps microservices communicate with each other reliably and securely.
   • The sidecar (proxy like Envoy) handles tasks like load balancing, encryption, and monitoring, so the main application doesn’t have to.
2. Logging and Monitoring:
   • Instead of the main application generating and managing logs, a sidecar can collect, format, and send logs to a centralized system like Elasticsearch or Splunk.
3. Authentication and Security:
   • A sidecar can act as a gatekeeper, handling user authentication and ensuring that only authorized requests reach the main application.
4. Data Caching:
   • If an application frequently queries a database, a sidecar can serve as a local cache, reducing database load and speeding up responses.
5. Service Discovery:
   • Sidecars can aid in service discovery by automatically registering the main application with a registry service or load balancer, ensuring seamless communication in dynamic environments.

How Sidecars Work

In modern environments like Kubernetes, sidecars are often deployed as separate containers within the same pod as the main application. They share the same network and storage, making communication between the two seamless.

Here’s a simplified workflow

1. The main application focuses on its core tasks (e.g., serving a web page).
2. The sidecar handles auxiliary tasks (e.g., compressing and encrypting logs).
3. The two communicate over local connections within the pod.

Pros and Cons of Sidecars

Pros:

• Simplifies the main application.
• Encourages reusability and modular design.
• Improves scalability and flexibility.
• Enhances observability with centralized logging and metrics.
• Facilitates experimentation—you can deploy or update sidecars independently.

Cons:

• Adds complexity to deployment and orchestration.
• Consumes additional resources (CPU, memory).
• Requires careful design to avoid tight coupling between the sidecar and the main application.
• Latency (You are adding an another hop).

Do we always need to use sidecars

No. Not at all.

a. When there is a latency between the parent application and sidecar, then Reconsider.

b. If your application is small, then reconsider.

c. When you are scaling differently or independently from the parent application, then Reconsider.

Some other examples

1. Adding HTTPS to a Legacy Application

Consider a legacy web service which services requests over unencrypted HTTP. We have a requirement to enhance the same legacy system to service requests with HTTPS in future.

The legacy app is configured to serve request exclusively on localhost, which means that only services that share the local network with the server able to access legacy application. In addition to the main container (legacy app) we can add Nginx Sidecar container which runs in the same network namespace as the main container so that it can access the service running on localhost.

2. For Logging (Image from ByteByteGo)

Sidecars are not just technical solutions; they embody the principle of collaboration and specialization. By dividing responsibilities, they empower the main application to shine while ensuring auxiliary tasks are handled efficiently. Next time you hear about sidecars, you’ll know they’re more than just cool attachments for motorcycle they’re an essential part of scalable, maintainable software systems.

Also, do you feel its closely related to Adapter and Ambassador Pattern ? I Do.

References:

1. Hussein Nasser – https://www.youtube.com/watch?v=zcJWvhzkPsw&pp=ygUHc2lkZWNhcg%3D%3D
2. Sudo Code – https://www.youtube.com/watch?v=QU5WcwuFpZU&pp=ygUPc2lkZWNhciBwYXR0ZXJu
3. Software Dude – https://www.youtube.com/watch?v=poPUzN33Oug&pp=ygUPc2lkZWNhciBwYXR0ZXJu
4. https://medium.com/nerd-for-tech/microservice-design-pattern-sidecar-sidekick-pattern-dbcea9bed783
5. https://dzone.com/articles/sidecar-design-pattern-in-your-microservices-ecosy-1

JavaScript is a versatile programming language primarily used to create dynamic and interactive features on websites.
JavaScript is a scripting language that allows you to implement complex features on web pages.
Browsers have Interpreters. It will converts JAVASCRIPT code to machine code.
Browsers have its own interpreters like

• Chrome – V8-engine
• Edge – Chakra

JavaScript- Identifiers :

var message; –> Variable (Identifier)
message = ‘Javascript’;

func sayHello() {
console.log(‘Hello’)
}

//sayHello Is the identifier for this function.

//variables , objects,functions,arrays ,classes names are identifiers in js.

SCOPE :
In JavaScript, scope refers to the context in which variables and functions are accessible. It determines the visibility and lifetime of these variables and functions within your code. There are three main types of scope in JavaScript.

Global Scope:.

• Variables declared outside any function or block have global scope.
• These variables are accessible from anywhere in the code

example :

let globalVar = "I'm global";

function test() {
  console.log(globalVar); // Accessible here
}

test();
console.log(globalVar); // Accessible here too

Function Scope

• Variables declared within a function are local to that function.
• They cannot be accessed from outside the function.

example :

function test() {
  let localVar = "I'm local";
  console.log(localVar); // Accessible here
}

test();
console.log(localVar); // Error: localVar is not defined

Block Scope:

• Introduced with ES6, variables declared with let or const within a block (e.g., inside {}) are only accessible within that block

example :

{
  let blockVar = "I'm block-scoped";
  console.log(blockVar); // Accessible here
}

console.log(blockVar); // Error: blockVar is not defined

Keywords | Reserved Words

Keywords are reserved words in JavaScript that cannot use to indicate variable labels or function names.

Variables

variables ==> stored values ==> it will stored to ram / It will create separate memory.so we need memory address for access the values.

Stores Anything :
JavaScript will store any value in the variable.

Declaring Variable :

 * Var
 * let
 * const    

we can declare variable using above keywords:

Initialize Variable :

Using assignment operator to assign the value to the variables.

var text = "hello";

JavaScript is a versatile programming language primarily used to create dynamic and interactive features on websites.
JavaScript is a scripting language that allows you to implement complex features on web pages.
Browsers have Interpreters. It will converts JAVASCRIPT code to machine code.
Browsers have its own interpreters like

• Chrome – V8-engine
• Edge – Chakra

JavaScript- Identifiers :

var message; –> Variable (Identifier)
message = ‘Javascript’;

func sayHello() {
console.log(‘Hello’)
}

//sayHello Is the identifier for this function.

//variables , objects,functions,arrays ,classes names are identifiers in js.

SCOPE :
In JavaScript, scope refers to the context in which variables and functions are accessible. It determines the visibility and lifetime of these variables and functions within your code. There are three main types of scope in JavaScript.

Global Scope:.

• Variables declared outside any function or block have global scope.
• These variables are accessible from anywhere in the code

example :

let globalVar = "I'm global";

function test() {
  console.log(globalVar); // Accessible here
}

test();
console.log(globalVar); // Accessible here too

Function Scope

• Variables declared within a function are local to that function.
• They cannot be accessed from outside the function.

example :

function test() {
  let localVar = "I'm local";
  console.log(localVar); // Accessible here
}

test();
console.log(localVar); // Error: localVar is not defined

Block Scope:

• Introduced with ES6, variables declared with let or const within a block (e.g., inside {}) are only accessible within that block

example :

{
  let blockVar = "I'm block-scoped";
  console.log(blockVar); // Accessible here
}

console.log(blockVar); // Error: blockVar is not defined

Keywords | Reserved Words

Keywords are reserved words in JavaScript that cannot use to indicate variable labels or function names.

Variables

variables ==> stored values ==> it will stored to ram / It will create separate memory.so we need memory address for access the values.

Stores Anything :
JavaScript will store any value in the variable.

Declaring Variable :

 * Var
 * let
 * const    

we can declare variable using above keywords:

Initialize Variable :

Using assignment operator to assign the value to the variables.

var text = "hello";

Objective: Create and host a personal portfolio website using HTML and CSS.

Step 1: Design Selection

• Objective: Choose a user interface (UI) and user experience (UX) design that aligns with your vision for the portfolio.
• Action:
  • Searched online for a simple and clean portfolio design template.
  • Selected and saved the design to serve as a foundation for your project.

Step 2: Code Reference and Customization

• Objective: Obtain a starting point for your HTML and CSS code and customize it to suit your needs.
• Action:
  • Uploaded the selected design to ChatGPT and requested a sample code.
  • Used the provided code as a reference.
  • Opened the code in Visual Studio Code (VS Code) and began customizing it to reflect your personal information and preferences.
  • Downloaded and included necessary images and emojis, such as your profile photo, ensuring they were all stored in a folder named “portfolio.”

Step 3: Code Implementation and Testing

• Objective: Implement the code and ensure it functions correctly.
• Action:
  • Edited the HTML and CSS files in VS Code, adapting the layout, text, and images to create a personalized portfolio.
  • Regularly saved changes and previewed the website in your browser to ensure it displayed as intended.
  • Made adjustments and refinements until the portfolio met your satisfaction.

(HTML)index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAKTHIVEL | Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>SAKTHIVEL <span class="highlight">S</span></h1>
        <p>FullStack Developer</p>
    </header>

    <section class="container">
        <div class="sidebar">
            <img src="profile.jpg" alt="sakthi" style="width:150px; height:150px;">
            <h3>SAKTHIVEL SARAVANAN</h3>
            <div class="contact-info">                
                <a href="https://www.linkedin.com/in/sakthivel-saravanan" target="_blank" style="margin-right: 20px;"><img src="linked-in.svg" alt="LinkedIn" style="width:40px; height:40px;"></a>
                <a href="https://github.com/SakthivelS2001" target="_blank"><img src="github.svg" alt="GitHub" style="width:50px; height:45px;"></a>

            </div>
            <div class="details">
                <p><strong>Phone:</strong> +91 9514552154</p>
                <p><strong>Email:</strong> sakthivelricky@gmail.com</p>
                <p><strong>Location:</strong> Velachery, Chennai</p>
                <a href="resume.pdf" target="_blank" class="download-resume">Download Resume</a>
            </div>
        </div>

        <div class="main-content">
            <section class="about">
                <h2>ABOUT ME</h2>
                <p>I'm Sakthivel, a passionate software developer with a strong foundation in computer science, holding a Bachelor's degree in Computer Science from Sri Sankara Arts and Science College, Kanchipuram. Currently, I'm advancing my expertise with a Master's degree in Information Technology from Arignar Anna Arts and Science College, Cheyyar.</p>
                <p>With a deep interest in front-end development, I have honed my skills in HTML, CSS, and JavaScript, creating user-friendly and visually appealing interfaces. My proficiency in Python, along with a basic understanding of SQL and version control using Git/GitHub, equips me to tackle various programming challenges.</p>
                <p>I thrive in collaborative environments where teamwork and innovation are key. I'm also committed to continuous learning, constantly seeking new ways to improve my skills and stay up-to-date with the latest industry trends.</p>
                <p>In addition to my technical abilities, I'm dedicated to overcoming personal challenges like stage fear, which has made me a more confident and effective communicator.</p>
                <p>Whether you're here to explore my work or discuss potential opportunities, I'm excited to connect and share more about how I can contribute to your projects.</p>
            </section>
            
            <section class="skills">
                <h2>Education & Skills</h2>
                <div class="skill-card">
                    <h3>Post Graduate</h3>
                    <p><b>Master's degree, Information Technology <b></p>
                    <p>Marks % : 77 |  Year : 2018 - 2021<p>

                </div>
                <div class="skill-card">
                    <h3>Under Graduate</h3>
                    <p><b>Bachelor's degree, Computer Science <b></p>
                    <p>Marks % : 77 |  Year : 2018 - 2021<p>
                </div>
                <div class="skill-card">
                    <h3>Skills</h3>
                    <p>Python|SQL|HTML|CSS|JAVASCRIPT|Git/Github</p>
                </div>
                <div class="skill-card">
                    <h3>Operating System</h3>
                    <p>Windows | Linux</p>
                </div>
            </section>
        </div>
    </section>
</body>
</html>

(CSS)styles.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #f8f8f8;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
}

header .highlight {
    color: orange;
    font-weight: 700;
}

header p {
    margin: 5px 0;
    font-size: 18px;
    color: #555;
}

.container {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
}

.sidebar {
    flex: 1;
    max-width: 300px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.sidebar img {
    width: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.contact-info a {
    margin: 0 10px;
}

.details {
    margin-top: 20px;
}

.details p {
    margin: 10px 0;
    font-size: 14px;
}

.download-resume {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: orange;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.main-content {
    flex: 2;
    margin-left: 20px;
}

.about {
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.about h2 {
    font-size: 24px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
}

.skills {
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.skills h2 {
    font-size: 24px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
}

.skill-card {
    margin-top: 20px;
}

.skill-card h3 {
    font-size: 20px;
    color: orange;
}

.skill-card p {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
}

Now the output was displaying in local browser

Step 4: Web Hosting

• Objective: Host your portfolio online so it can be accessed publicly.
• Action:
  • Chose Neocities.org as your hosting platform, a site known for its ease of use in hosting simple websites.
  • Uploaded the entire project folder (named “portfolio”) to Neocities.org.
  • Successfully received a unique online link for your website, making it accessible to others.

Search the neocities from google and click the official website

Enter your website name you like to host use different name if username taken notify is shown.

Enter the password and Mail ID

And verify the “I am human” Box and click “Create My Site” Button

Now click the Free option.

Enter the verification code from gmail.

click the dashboard to continue.

now we need to upload our project folder

click the “New Folder”

enter the name

folder created

next we upload the files

click the folder

click upload

select the files to upload

now open the index.html file

this was open click to view button on right side top

now our project successfully hosting on internet

copy the above link and share your friends and family

Portfolio Link : https://sakthivels.neocities.org/Sakthivel%20Portfolio/

Git Link : https://github.com/SakthivelS2001/portfolio.git

Step 5: Final Review

• Objective: Ensure everything is working properly and the portfolio is complete.
• Action:
  • Conducted a final review of the live website to verify all elements were displayed correctly.
  • Confirmed that the website was fully functional and ready to share.

Skills Used:

• HTML & CSS: For structuring and styling the website.
• Web Hosting: Using Neocities.org to make your website accessible online.
• VS Code: For code editing and customization.

Outcome: Successfully created and hosted a personalized portfolio website.

Conclusion:

This project marks my first real-time experience in creating and hosting a personal portfolio website. Throughout the process, I gained valuable knowledge and practical skills, which were instrumental in the successful completion of this project.

I would like to extend my gratitude to the following resources that significantly contributed to my learning:

• ChatGPT: For providing guidance and code references that helped shape the structure of my portfolio.
• YouTube Channel: Error Makes Clever: For offering insightful tutorials that deepened my understanding of HTML, CSS, and web development practices.
• Youtube Channel: Brototype Tamil: For sharing practical tips and techniques that enhanced my coding skills.

This project not only allowed me to apply my skills but also provided an opportunity to explore new tools and methods, reinforcing my passion for web development.