DEV Community: Varun

Singleton Design Pattern

Varun — Thu, 16 May 2024 10:37:06 +0000

There are many scenarios where we need to restrict the object creation to 1. So, ensure that a class has only one instance and provide a global point of access to it.

Solution: Restrict instantiation of a class to a single object and provide a global access point to that instance.

Now, Real-life Application Examples:

Logger: Ensuring only one logger instance exists across the application.
DB Connection : It requires only 1 object for db connection
Configuration Settings: Having a single object to manage configuration settings.

The Singleton pattern ensures that a class has only one instance and provides a global point of access to that instance. There are several variations of implementing the Singleton pattern in Java, each with its own characteristics and considerations:

Eager Initialization:
- In this approach, the singleton instance is created eagerly, i.e., at the time of class loading.
- It guarantees thread safety since the instance is created before any thread can access it.
- static associates with class, which means the class cannot be reinitialized and all instances of class share same static variable
- getInstance() Method exposed as public will return same object also static so only 1 object is returned.
```
public class Singleton {
    private static final Singleton instance = new Singleton();

    private Singleton() {} // Private constructor

    public static Singleton getInstance() {
        return instance;
    }
}
```
Lazy Initialization :
- In this approach, the singleton instance is created only when needed, i.e., on the first call to getInstance().
- Now when instance is equal to null then only new object is created.
```
public class Singleton {
    private static Singleton instance;

    private Singleton() {} // Private constructor

    public static Singleton getInstance() {
        if (instance == null) {
            instance = new Singleton();
        }
        return instance;
    }
}
```
Problem: But It is not thread-safe, meaning multiple threads can potentially create multiple instances if called simultaneously.
Suppose there 2 threads coming at same time they both will check that its null and create 2 objects.
Synchronized Method:

This approach improves performance by avoiding synchronization after the singleton instance is created.

Synchronized puts lock when one thread comes and creates instance it locks for other threads.

public class Singleton {
    private static volatile Singleton instance;

    private Singleton() {} // Private constructor

      synchronized public static Singleton getInstance() {
                if (instance == null) {
                    instance = new Singleton();
                }
        return instance;
    }
}

Problem: Its very expensive when 1000 threads come, 1st will lock create, 2 will lock, 3rd lock every time it will lock.

Double Locking
- It uses double-checked locking to ensure thread safety, but it's susceptible to the "Double-Checked Locking Problem" in Java versions prior to Java 5.
Working: When 2 threads come at same time in initially as null, so they both enter into if condition, because of synchronized only t1 will be allowed then it checks object is null and creates the object now t2 comes it denies that object==null and goes out and returns the object.

        public class Singleton {
            private static volatile Singleton instance;

            private Singleton() {} // Private constructor

            public static Singleton getInstance() {
                if (instance == null) {
                    synchronized (Singleton.class) {
                        if (instance == null) {
                            instance = new Singleton();
                        }
                    }
                }
                return instance;
            }
        }

Problems:

Reordering of instruction:

Suppose we are creating new variable with member variable value, like
instance = new Singleton(10);
so during this the process are

allocation of memory
Initialize Member variable if not available
assign reference of memory to object

now for performance improvement CPU reorders these steps, so it can assign the reference of memory before initializing, and it will be assigned some random compiler value.
Now even before initializing variable with value 10, the object will be pointed to memory pointer, and for 2nd thread when it comes in 1st if for object==null it will be false as its got some random value. and it will return same object.

Memory Issue: Suppose 1 thread has started the process to allocate memory and creation of object but at same time thread 2 accessed by another core.
Now look this structure.
```
    | Core1 | Core2 |
    | --- | --- |
    | Cache1 | Cache2 |
    | Common Memory Common Memory |
```
But when thread 2 accesses the core, both the cache was not synced so it will check for obj==null which will be true and so it will ask to memory which was not synced by cache, and will create another Object.
Using Volatile:

using the volatile keyword is a solution to address some of the potential issues associated with the double-checked locking pattern. By declaring the reference to the singleton instance as volatile, you ensure that changes to the instance are immediately visible to all threads. This helps prevent the visibility problem that can occur due to optimizations performed by the Java Virtual Machine (JVM) and CPU.
```
javaCopy code
public class Singleton {
    private static volatile Singleton instance; // Declare as volatile

    private Singleton() {} // Private constructor

    public static Singleton getInstance() {
        if (instance == null) {
            synchronized (Singleton.class) {
                if (instance == null) {
                    instance = new Singleton();
                }
            }
        }
        return instance;
    }
}
```
With the volatile keyword, changes made to the instance variable are immediately visible to other threads, ensuring that they see the fully initialized singleton instance. This helps prevent the possibility of a partially constructed instance being visible to other threads.

Lazy Initialization with Static Inner Class (Thread-Safe, Post-Java 5):

This approach provides thread safety with lazy initialization and is guaranteed to work in all versions of Java.

It leverages the behavior of static inner classes to ensure lazy loading and thread safety.

public class Singleton {
    private Singleton() {} // Private constructor

    private static class SingletonHolder {
        private static final Singleton INSTANCE = new Singleton();
    }

    public static Singleton getInstance() {
        return SingletonHolder.INSTANCE;
    }
}

Each approach has its trade-offs in terms of thread safety, performance, and compatibility. Choosing the appropriate Singleton implementation depends on the specific requirements of your application.

Easiest explanations for SOLID Principles

Varun — Wed, 08 May 2024 07:31:31 +0000

The SOLID principles are a set of guidelines for writing software that is more understandable, flexible, and maintainable. The principles conceptualized by Robert C. Martin have become foundational in object-oriented design and programming. Each letter in "SOLID" stands for a different principle:

Single Responsibility Principle (SRP):

Definition: A class should have only one reason to change, meaning it should have only one job or responsibility.
Basically, A class should not contain an excessive number of methods that handle disparate concerns or responsibilities. Ideally, each class should encapsulate a single responsibility, ensuring that all its methods are cohesive and related to that responsibility. If multiple responsibilities emerge, consider refactoring them into separate classes.

WHY: This principle aims to reduce the complexity of the class by limiting its responsibilities. It helps in minimizing the impact of changes by isolating them to specific components.

Earlier Problem: A class that handles both user data management and user notification responsibilities. Now, if we need to fix one feature rest of the code can be prone to bugs. So, its recommended to have one responsibility.


class UserManager {
    saveUser(user: User): void {
        // logic to save the user
    }

    sendEmail(user: User, message: string): void {
        // logic to send an email
    }
}

Solution it provides: Split the class into two distinct classes, each handling a single responsibility.

class UserDataManager {
    saveUser(user: User): void {
        // logic to save the user
    }
}

class UserNotifier {
    sendEmail(user: User, message: string): void {
        // logic to send an email
    }
}

Open/Closed Principle (OCP):

Definition: Software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification. Suppose, a class with methods is developed, tested and live then why would you modify it, you should extend it and add methods related to it.

Modifying Existing class to add new methods is prone to bug.

WHY: This principle promotes the use of interfaces and abstract classes to enable the behavior of a module to be extended without modifying the source code of the module itself. This is useful for maintaining code health over time, particularly when changes are required.

Earlier Problem: A class that needs modification every time a new filter condition needs to be added for a product.

class ProductFilter {
    filterByColor(products: Product[], color: string): Product[] {
        return products.filter(product => product.color === color);
    }

    filterBySize(products: Product[], size: number): Product[] {
        return products.filter(product => product.size === size);
    }
}

Solution it provides: Use a specification pattern that allows for extending filter capabilities without modifying existing code. ie create interface of that class and with new classes implement or extend original class for standard method and for new methods separate new classes for each.
So, in future when you want other new feature, create another class which will extend original class with new feature.

interface Specification<T> {
    isSatisfied(item: T): boolean;
}

class ColorSpecification implements Specification<Product> {
    constructor(private color: string) {}

    isSatisfied(product: Product): boolean {
        return product.color === this.color;
    }
}

class SizeSpecification implements Specification<Product> {
    constructor(private size: number) {}

    isSatisfied(product: Product): boolean {
        return product.size === this.size;
    }
}

class ProductFilter {
    filter(products: Product[], spec: Specification<Product>): Product[] {
        return products.filter(product => spec.isSatisfied(product));
    }
}

Liskov Substitution Principle (LSP):

Definition: Objects of a superclass should be replaceable with objects of its subclasses without affecting the correctness of the program. If Class B is subclass of Class A then we should be able to replace object of A with B without breaking behavior of our program.
WHY: This principle ensures that a subclass can stand in for its superclass without errors or unexpected behavior, promoting the reliability and reusability of components. Subclass should extend capability of parent class, should not narrow it down.

Earlier Problem: A subclass that throws an exception for a method inherited from its superclass, which is not expected behavior.
If a program is using class A now B is subclass of A with different implementation of methods extended from A. Then program should be able to replace A with B. Yes, B can have different outputs but it should not remove existing methods for B, ie raise errors for them / breaking the code.
```
class Bird {
    fly(): void {
        console.log("Fly");
    }
}

class Duck extends Bird {}

class Penguin extends Bird {
    fly(): void {
        throw new Error("Cannot fly");
    }
}
```
Solution it provides: Restructure the class hierarchy to ensure that subclasses can fully substitute their superclasses.
Here Penguin will break the code for implementing the fly method which its extending from Bird Class.
So, make parent class such that it has only common methods, and for additional methods create another subclass with the features required for other classes.
```
class Bird {}

class FlyingBird extends Bird {
    fly(): void {
        console.log("Fly");
    }
}

class Duck extends FlyingBird {}

class Penguin extends Bird {}
```

Interface Segregation Principle (ISP):

Definition: No client should be forced to depend on methods it does not use. Interfaces should be such that the client should not implement unnecessary functions that they don't even need.
WHY: This principle encourages creating more specific interfaces rather than a general-purpose, do-it-all interface. It promotes smaller, more focused interfaces that better cater to specific clients, reducing the dependencies between clients and their classes.

Interface is used for general template which will be used by specific classes based on their features.

Earlier Problem: A bulky interface that forces implementations to implement methods they don't use.
Generic interface should not implement any specific methods else those classes that extend this interface would need to implement these methods unnecessarily.
```
interface Machine {
    print(): void;
    scan(): void;
    fax(): void;
}
```
Solution it provides: Break the interface into more specific parts. Different interfaces for different methods and these interfaces can be used as base templates for future classes.
```
interface Printer {
    print(): void;
}

interface Scanner {
    scan(): void;
}

interface FaxMachine {
    fax(): void;
}

class AllInOnePrinter implements Printer, Scanner, FaxMachine {
    print(): void { /* logic to print */ }
    scan(): void { /* logic to scan */ }
    fax(): void { /* logic to fax */ }
}
```

Dependency Inversion Principle (DIP):

Definition: High-level modules should not depend on low-level modules. Both should depend on abstractions (e.g., interfaces). Abstractions should not depend on details. Details (concrete implementations) should depend on abstractions.

Basically, class should depend on interfaces rather than concrete classes.

WHY: By depending on abstractions rather than concrete classes, this principle helps to decouple the high-level components from the low-level components, making the system easier to manage and modify.

Earlier Problem: High-level modules directly depend on low-level modules.
Suppose interfaces have defined certain classes, now a class wants to implement and use these classes/methods. Should it directly use these classes/methods? No.
Instead of interface if we use concrete classes/methods directly then we won't be able to modify or extend it based on needs.

class LightBulb {
    turnOn(): void {
        console.log("Light bulb turned on");
    }

    turnOff(): void {
        console.log("Light bulb turned off");
    }
}

class Switch {
    private bulb: LightBulb = new LightBulb();
    private on: boolean = false;

    press(): void {
        if (this.on) {
            this.bulb.turnOff();
            this.on = false;
        } else {
            this.bulb.turnOn();
            this.on = true;
        }
    }
}

Solution it provides: Use abstractions to decouple high-level modules from low-level modules.
The class should implement the interface and from that it should decouple interface from specific methods. Create interface objects and using constructor injection we can use classes of that interface for implementation.

interface Switchable {
    turnOn(): void;
    turnOff(): void;
}

class LightBulb implements Switchable {
    turnOn(): void {
        console.log("Light bulb turned on");
    }

    turnOff(): void {
        console.log("Light bulb turned off");
    }
}

class Switch {
    private on: boolean = false;

    constructor(private device: Switchable) {}

    press(): void {
        if (this.on) {
            this.device.turnOff();
            this.on = false;
        } else {
            this.device.turnOn();
            this.on = true;
        }
    }
}

Following the SOLID principles helps in creating software that is:

Scalable: Easier to scale the software with fewer issues as new requirements arise.
Manageable: Simpler to manage as the software complexity grows.
Reusable: Increases the reusability of code through cleaner, more organized structures.
Extensible: Facilitates the extension of software functionalities without a significant rework.
Testable: Improves testability due to reduced dependencies and better separation of concerns.

Now we will go through real life application integrated with SOLID Principles.

Web Application: User Account Management

1. Single Responsibility Principle (SRP)

We'll create separate classes for handling user data management and user authentication.

// UserDataManager.ts
class UserDataManager {
    saveUser(user: User): void {
        // logic to save user data
    }

    deleteUser(userId: string): void {
        // logic to delete user data
    }
}

// UserAuthenticator.ts
class UserAuthenticator {
    authenticateUser(username: string, password: string): boolean {
        // logic to authenticate user
        return true; // or false
    }
}

2. Open/Closed Principle (OCP)

We'll create an interface for authentication strategies, allowing us to add new authentication methods without modifying existing code.

// AuthenticationStrategy.ts
interface AuthenticationStrategy {
    authenticate(username: string, password: string): boolean;
}

// UsernamePasswordStrategy.ts
class UsernamePasswordStrategy implements AuthenticationStrategy {
    authenticate(username: string, password: string): boolean {
        // logic to authenticate using username and password
        return true; // or false
    }
}

// OAuthStrategy.ts
class OAuthStrategy implements AuthenticationStrategy {
    authenticate(username: string, password: string): boolean {
        // logic to authenticate using OAuth
        return true; // or false
    }
}

3. Liskov Substitution Principle (LSP)

Our authentication strategies can be used interchangeably without affecting the correctness of the authentication process.

const usernamePasswordStrategy: AuthenticationStrategy = new UsernamePasswordStrategy();
const oauthStrategy: AuthenticationStrategy = new OAuthStrategy();

usernamePasswordStrategy.authenticate("user", "password");
oauthStrategy.authenticate("user", "token");

4. Interface Segregation Principle (ISP)

We'll create separate interfaces for user data management and authentication to avoid implementing unnecessary methods.

// UserDataManagement.ts
interface UserDataManagement {
    saveUser(user: User): void;
    deleteUser(userId: string): void;
}

// UserAuthentication.ts
interface UserAuthentication {
    authenticateUser(username: string, password: string): boolean;
}

5. Dependency Inversion Principle (DIP)

Our high-level modules will depend on abstractions rather than concrete implementations.

// UserAccountController.ts
class UserAccountController {
    private userDataManager: UserDataManagement;
    private userAuthenticator: UserAuthentication;

    constructor(userDataManager: UserDataManagement, userAuthenticator: UserAuthentication) {
        this.userDataManager = userDataManager;
        this.userAuthenticator = userAuthenticator;
    }

    registerUser(user: User): void {
        this.userDataManager.saveUser(user);
    }

    loginUser(username: string, password: string): boolean {
        return this.userAuthenticator.authenticateUser(username, password);
    }
}

Explanation of SOLID Principles Integration

SRP: UserDataManager is responsible for managing user data, while UserAuthenticator handles user authentication. Each class has a single responsibility.
OCP: By introducing the AuthenticationStrategy interface, we can add new authentication methods like OAuth without modifying existing authentication logic.
LSP: The UsernamePasswordStrategy and OAuthStrategy can be used interchangeably, fulfilling the same contract of the AuthenticationStrategy interface.
ISP: We split interfaces UserDataManagement and UserAuthentication into smaller, focused interfaces to avoid implementing unnecessary methods.
DIP: The UserAccountController depends on abstractions (UserDataManagement and UserAuthentication interfaces) rather than concrete implementations, allowing for easy substitution and testing.

Now, by using these principles, our web application becomes more modular, easier to maintain, and less prone to bugs when adding new features or changing existing ones. Each component is highly cohesive and loosely coupled, promoting flexibility and scalability.

Angular Crash Course in One Shot🚀🔥

Varun — Mon, 31 Jul 2023 09:55:25 +0000

Hi Guys👋, Today We will go through Angular for an Experienced DEV. This will be useful to go through after learning everything or if you are preparing for an Interview. So lets Start 🚀🔥

Components in ANGULAR Folder :

package.json:

It contains basic info about project.
Required for every project
records imp metadata about project, such as name, description, script, dependencies.

package.lock.json:

automatically generates for operations with chanage in node_modules
allows to install same dependencies for future devs
contains name, dependencies, locked version of the project

ROUTE GUARD:

Angular route guards can be used to control whether the user can navigate to or away from the given route based on some condition.
Used to secure route or perform some operation before navigating to a route or leaving the route.

e.g where can we use the route guards?
suppose we are using the application to buy some stuff, but we havent logged in. Now when a user clicks on buy button, he should be redirected to checkout page only if
he is a logged in. otherwise first he should be sent to login, and then only to checout page., so here route guard is helpful

route gaurd can also be used to

Confirm the navigation operation
allow access to certain parts of application to specific users.
validating certain parameters before navigating to the root.
fetch data before showing component view

Types of Route Guards:

CanActivate:
CanDeactivate:
Resolve:
CanLoad:
CanActivateChild:

Process:

Create a route guard as service
The Service class should implement route guard interface.
Take interface and provide the method inside the service class
from this method we need to return True or False.
if true navigation process will continue else it will stop.

cmd: ng g g guardname

@Injectable()
export class StuffRouteService implements CanActivate{

    // this is service class which implements CanActivate Interface 
    // and below is method to be provided

    canActivate()
       { 
        //check if route can be activated
     if (condition)
        { return true;}

     else { return false}

        }
}

Use route guard on the route which required to be guard in routers

eg. {path: 'stuff', component: BuyStuffComponent, canActivate: [StufffRouteService] }

DATA BINDING

Interpolation Binding: data is being taken from compoenent to HTML view. Allows user to bind values to user interface

    comoponent: 
    public data= "this is the req data"

    HTML: 
        `<h1>{{data}}<\h1>`

Property Binding:
one way data binding, sets property for HTML elements
updating property value in component for HTML element

eg. public image = "/assets/Logo.png"
Event Binding:
one way data binding, opposite of property binding
when user clicks a button, event bind to it inform of method
in component gets a call.
so data flows from view to component

eg. Subscribe
Two Way Binding:
data flows from compoenent to view and back.
this binding ensures changes made in app, gets reflected
immediately on both ends. general syntax: [()]

    component:
    public data= ""

    HTML:
    <input [(ngModel)]="data" type="text"]>

    {{data}}

so here data is defined in .ts file and input is taken and it is
stored as data, and again data is interpolated in view.

Single Page Applications:

applications which loads only once and to display new features,
new page does not need to be loaded completely, instead with the
DOM manipulation of JS, content is generated dynamically, on the 
existing page itself.

Decorators:

design pattern that define how an angular feature works. They make 
prior modifications to class, service.

Class Decorators:
this tells to angular if perticular class is component or module.
eg @Component and @NgModule

Property Decorators:
allows to decorate some properties within our classes
eg: @Input, @Output, @Override
for @Input angular compiler will create an input binding with the
property name and link it

Method Decorators:
Method decorators are used to decorate the method defined in class with functionality, eg: @HostListener

Parameter Decorators:
Applied to constructor parameter of the class and
used generally to inject a provider in constructor.
eg.

export class ParameterExample{
constructor(@Inject(ExampleService) exampServ)
console.log(exampServ);}

Dependency injection:

Components dependent on other components can be easily worked around using this feature.

Angular Forms:

to build angular forms, import forms module
and create a form in HTML and define #formID = "ngForm" and create a submit event (ngSubmit)="getData()"
and define getData method in .ts file.

and at the end make a register button.

SO this is basic structure of form.

Pipes:

pipes are used to transform values from one type to other
eg, we want to change lowercase to uppercase, change date format, change currency format etc

eg.

<h1>{{title | uppercase}}</h1>

<h1>{{today | date: 'fullDate'}}</h1>

now these operations can be made by creating functions and calling those here, but it takes times
so we use pipes to save time and make code simpler.

Slicing:
if title= 'ANGULAR TUTORIAL'

<h1>{{title | slice: 3: 6 }}</h1>

it will show, 'ULA'

JSON pipe:

user= {name: 'Raj'}

<h1>{{user | json}}</h1> 

output will show: {name: 'Raj'}

Decimal Pipe:
<h1>{{2000.30 | number: 2.3-4}}</h1>

max digits will shown
before decimal 2 ie if there was 002000 it will remove first zeros
after decimal min 3 max 4

op 2000.300

currency pipe:


<h1>{{50 | currency: 'USD' }}</h1>

op: $50.00

Create Custom PIPE:

ng g p pipename

we can give arguments to custom Pipe, like we have given in currency.

html:
`<h1>{{50 | newpipe: 100 }}</h1>`

pipe file:

transform (value: number, ...args: number[]):
unknown{
    let x = args;
    return value* x[0]
    //here in arguments we can also add multiple arguments 
}

op: 5000

Angular Directives:

First Of all Angular has 3 type of Directives

Structural Directives
Component Directives
Attribute Directives

1. Structural Directives:

1. NgIf
2. NgFor
3. NgSwitch

2. Component Directives:

These are most common and widely used Directives. components are like main builiding block of an angular project comoponents are used with templates, which consists of

HTML template that declared what need to be rendered on the page
a typescript class which defines the behaviour of elements and methods
CSS selector which defines how the component is used in the template
and optionally, css styles are used on the template.

3. Attribute Directives:

These Directives changes appearances of elements, comoponents and other Directives.

NgClass - adds and removes set of css classes
NgStyle - adds and removes HTML styles
ngModel - adds two way databiding to HTML form element

so these Directives listen and modify behaviour of HTML elements, Attributes and properties.

NgClass:

for single style we can use class binding

<h1 [style.background]="white"> element </h1>
otherwise for multiple styles to be added use a style class and assign it to NgClass
<h1 [ngClass]= "logged" ? 'loggedstyles' : '' > element </h1>

this will apply loggedstyles to h1 element if the user is logged in else nothing Applied

FOR METHODS:

in the comoponent file:

applyClasses= Record<string, boolean>= {}                       

setapplyClasses(){ 
// this will apply css classes based on the boolean values 
// if the boolean value is True, class will be applied 
// else if its False not applied

this.applyClasses= {
    save: this.canSave,
    update: !this.notChanged,
       };
}

In HTML:

<div [ngClass]= "applyClasses"> save or update </div>
Note:
In example Angular applies classes on initialization and in case of changes. the example calls the setapplyClasses initially with ngOnInit(), and when properties changes.

NgStyle:

With NgStyle we can define multiple inline styles simultaneously, with state of the component add method to component class

applyStyles= Record<string, boolean>= {}                        

setapplyStyles(){

// this will apply css style based on the boolean values 
// if the boolean value is True, first style will be applied 
// else if its False other style will be applied

this.applyStyles= {
    'font-weight': this.canSave ? 'bold': 'normal',
    'font-style': !this.logged ? 'italic' : 'normal'
    };
}

In HTML:

<div [ngStyle]= "applyStyles"> Change Styles </div>

Note:
In example Angular applies styles on initialization and in case of changes, the example calls the setapplyStyles initially with ngOnInit(), and when properties changes.

NgModel:

NgModel directive is used to disply a data property and update that property when the user makes changes.
first of all include FormsModule in app.module.ts

<label for="example">[(ngModel)]:</label>
<input [(ngModel)]="currentItem.name" id="example">

That's all for Now🌱. Hope this helps in your Web Dev Journey, Happy Learning 🚀!!

MEAN Stack Project: Create Quick File Share Application: Part 2 Backend

Varun — Fri, 06 Jan 2023 17:15:37 +0000

This is continuation of the File Share Application using MEAN Stack.
If you have not read it, its Important to understand the structure:
https://dev.to/varun21vaidya/mean-stack-project-create-quick-file-share-application-878

Here we will use NodeJS and ExpressJS on server side.

lets start by running this command

npm init

This will be our Project Structure:

now first install all the required dependencies, we will see their use along the way.

npm i cors dotenv ejs express mongoose multer nodemon uuid

Now Start with Server.js

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
const path = require('path');

app.use(express.json());

app.listen(PORT, console.log(`Listening on port ${PORT}.`));

follow this to create your Mongo Atlas Cluster:
https://www.mongodb.com/docs/drivers/node/current/quick-start/

and Put the MONGO_CONNECTION_URL in .env file.

and now create db.js in config folder.


require("dotenv").config();
const mongoose = require("mongoose");
function connectDB() {
    mongoose
        .connect(process.env.MONGO_CONNECTION_URL, {
            useNewUrlParser: true,
            useUnifiedTopology: true,
        })
        .then(() => console.log('DB connection successful!')).catch((e) => {
            console.log('error while connencting database');
            console.log(e);
        });
}

// mIAY0a6u1ByJsWWZ
module.exports = connectDB;

now use this db in server.js

const dotenv = require('dotenv')
dotenv.config({ path: './.env' })
const connectDB = require('./config/db');
connectDB();

Now we need to create a Schema for our filesystem, which will contain

filename
path: file stored location
size: filesize that should be shown on view
uuid: encrypted file name
sender
reciever

file.js in Models Folder

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const fileSchema = new Schema({
    filename: { type: String, required: true },
    path: { type: String, required: true },
    size: { type: Number, required: true },
    uuid: { type: String, required: true },
    sender: { type: String, required: false },
    receiver: { type: String, required: false },
}, { timestamps: true });

module.exports = mongoose.model('File', fileSchema);

Now in the routes folder, create *files.js
*
this will be controller, and will contain post method to upload the file.

Now we are going to use uuid which stores unique uuid for file to store in database.
Because uuid is so unique that no one with one download link would be able to change the id and download other previous documents.
Otherwise if it was just 1,2,3.. others could be able to download by entering previous index.

const { v4: uuidv4 } = require('uuid');

Now to store and upload the file we will use multer.
Multer is a node.js middleware for handling multipart/form-data , which is primarily used for uploading files.


// diskStorage Returns a StorageEngine implementation configured
// to store files on the local file system.
let storage = multer.diskStorage({

    // destination stores file at given folder
    destination: (req, file, cb) => cb(null, 'uploads/'),
    // gives filename
    filename: (req, file, cb) => {

        // create a unique file name
        // path.extname takes extension name from file and saves it as same
        // 38974612841-129834729432.png
        const uniqueName = `${Date.now()}-${Math.round(Math.random() * 1E9)}${path.extname(file.originalname)}`;
        cb(null, uniqueName)
    },
});

First with multer we will set the file limits to be uploaded, which will handle uploading of file and store it in uploads section.
Storage returns multer instance providing methods for generating middleware that process uploaded files.

let upload = multer({ storage, limits: { fileSize: 1000000000 * 100 }, }).single('myfile'); //100mb

Now its time to create POST request API.
we will create post request and create an upload method, which will create and make db model through schema with the filename, created uuid, path and size and returns a downloadable link which will be fetched by the client side in Angular.
which will look like this http://localhost:3000/files/234dfhsebrg-2342dvsdvsdk


router.post('/', (req, res) => {
    upload(req, res, async (err) => {
        if (err) {
            return res.status(500).send({ error: err.message });
        }
        const file = new File({
            filename: req.file.filename,
            // gets unique uuid 

            uuid: uuidv4(),

            // gets path from destination + filename recieved from multer
            path: req.file.path,
            size: req.file.size
        });

        // response will give download link

        // save this with await while upload is async
        const response = await file.save();
        res.json({ file: `${process.env.APP_BASE_URL}/files/${response.uuid}` });
        // download link will look like
        // http://localhost:3000/files/234dfhsebrg-2342dvsdvsdk

    });
});

This is the full code for controller.
file.js in router.

const router = require('express').Router();
const multer = require('multer');

// path gives extension of the uploaded file
const path = require('path');
const File = require('../models/file');

// stores unique uuid for file to store in db

// WHY UUID: cz its so unique that no one with one download link
// would be able to change the id and download other previous documents
// if it was just 1,2,3.. others could be able to download by entering previous index
const { v4: uuidv4 } = require('uuid');


// diskStorage Returns a StorageEngine implementation configured
// to store files on the local file system.
let storage = multer.diskStorage({

    // destination stores file at given folder
    destination: (req, file, cb) => cb(null, 'uploads/'),
    // gives filename
    filename: (req, file, cb) => {

        // create a unique file name
        // path.extname takes extension name from file and saves it as same
        // 38974612841-129834729432.png
        const uniqueName = `${Date.now()}-${Math.round(Math.random() * 1E9)}${path.extname(file.originalname)}`;
        cb(null, uniqueName)
    },
});

// handle uploading of file and store it in uploads section with multer

// middleware for handling form-data, ie used for uploading files

// storage returns multer instance providing
// methods for generating middleware that process uploaded files
// storage: storage,
let upload = multer({ storage, limits: { fileSize: 1000000000 * 100 }, }).single('myfile'); //100mb

router.post('/', (req, res) => {
    upload(req, res, async (err) => {
        if (err) {
            return res.status(500).send({ error: err.message });
        }
        const file = new File({
            filename: req.file.filename,
            // gets unique uuid 

            uuid: uuidv4(),

            // gets path from destination + filename recieved from multer
            path: req.file.path,
            size: req.file.size
        });

        // response will give download link

        // save this with await while upload is async
        const response = await file.save();
        res.json({ file: `${process.env.APP_BASE_URL}/files/${response.uuid}` });
        // download link will look like
        // http://localhost:3000/files/234dfhsebrg-2342dvsdvsdk

    });
});
module.exports = router;

Now we need to create a server side rendering view to show the filesystem and download button.

Show.js in routes
This will create a rendering view when the user takes download link after completing the upload button.
Here we need to create GET API which will show the view showing the filename, size, and a download button to download the actual file.
IT will take uuid and find the file data in database.
and if file is present will generate the view.

This will also send the download link to the frontend to show when the user completes file upload.

// router
const router = require('express').Router()
// model import
const File = require('../models/file')

// function to try and get data from database with dynamic parameter uuid
// and render download page else in catch return err
router.get('/:uuid', async (req, res) => {
    try {
        const file = await File.findOne({ uuid: req.params.uuid })

        // if file not present return error
        // in download section
        if (!file) {
            return res.render('download', { error: 'link has expired' })
        }

        // generate a download page with the details to download the file
        return res.render('download', {
            uuid: file.uuid,
            fileName: file.filename,
            fileSize: file.size,
            // download link
            downloadLink: `${process.env.APP_BASE_URL}/files/download/${file.uuid}`
        })
    }
    catch (err) {
        return res.render('download', { err: 'something went wrong' })
    }
});

module.exports = router;

But first create GET API to download the file by giving the uuid.

download.js in routes

const router = require('express').Router();
const File = require('../models/file');


router.get('/:uuid', async (req, res) => {
    const file = await File.findOne({ uuid: req.params.uuid })


    // if file not present return error
    // in download section
    if (!file) {
        return res.render('download', { error: 'link has expired' })
    }

    // to download file we need filepath
    // if you check database you will find each file has mentioned file.path
    const filePath = `${__dirname}/../${file.path}`;

    // downloading in express just require res.download(filepath)
    res.download(filePath);

})

module.exports = router;

Now we have to create a view to show all the data and donwload button.We can create it with ejs and css

first create ejs in Views folder as shown in file structure.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download Page</title>
    <link href="../public/css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <section class="container">
        <div class="drop-zone">
            <!-- if there is error in link or uuid has expired or invalid
            show.js will give error and this error is printed here-->
            <% if(locals.error) { %>
                <h4>
                    <%= locals.error %>
                </h4>
                <% } else { %>

                    <!-- else provide the link to download file -->
                    <div class="icon-container">
                        <img src="../public/img/download-icon.png" alt="download-icon">
                    </div>
                    <div class="content">
                        <h3>Your File is Ready to Download</h3>
                        <p>Link Exprires in 24 Hours</p>
                        <!-- file name and filesize are in show.js -->
                        <h4>
                            <%- fileName -%>
                        </h4>
                        <!-- filesize is available in bytes so convert it using /1000
                and to remove decimal places use parseInt -->
                        <small>
                            <%- parseInt(fileSize/1000) -%>KB
                        </small>
                        <div class="send-btn-container">
                            <a href="<%- downloadLink %>">Download File</a>
                        </div>
                    </div>
                    <% } %>
        </div>
    </section>

</html>

And Inside the public folder, create css file, which will give styles to our ejs view.

body,
html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: rgb(189, 255, 255);

  height: 100%;
  width: auto;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: white;
  border-radius: 30px;
  box-shadow: 0px 15px 30px 5px rgba(0, 0, 0, 0.2);
}

.drop-zone {
  width: 300px;
  height: 300px;
  margin: 30px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.content {
  line-height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.send-btn-container {
  background-color: DodgerBlue;
  border: none;
  margin-top: 20px;
  padding: 12px 30px;
  cursor: pointer;
  border-radius: 20px;
}
.send-btn-container a {
  text-decoration: none;
  color: white;
}
.icon-container {
  width: 75px;
  height: 75px;
  position: relative;
}

.icon-container img {
  position: absolute;
  height: 60px;
  width: 60px;
}

Now we need to set ejs in our server.js file
and also need to configure cors

So finally our server.js will have all the routes and cors and is ready to be tested.


const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
const path = require('path');
const dotenv = require('dotenv')
dotenv.config({ path: './.env' })
const connectDB = require('./config/db');
connectDB();

var cors = require('cors');

// use it before all route definitions
// app.use(cors({ origin: ['https://share-now-backend-gi2ea360d-varun21vaidya.vercel.app/', 'https://share-now-file-sharing-app.vercel.app/', 'http://localhost:4200'] }));

// cors policy
app.use(cors({
    origin: ['https://share-now-backend.vercel.app/https://share-now-file-sharing-app.vercel.app/', 'https://share-now-backend.vercel.app/http://localhost:4200'], // use your actual domain name (or localhost), using * is not recommended
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Origin', 'X-Requested-With', 'Accept', 'x-client-key', 'x-client-token', 'x-client-secret', 'Authorization'],
    credentials: true
}))


app.use(express.json());

// setup static files
// using app.use to serve up static CSS files in public/css/ folder
//  when /public link is called in ejs files
// app.use("/route", express.static("foldername"));
app.use('/public', express.static('public'));

//template engine
app.set('views', path.join(__dirname, '/views'));
app.set('view engine', 'ejs');


// Routes 
// to upload file use this route
app.use('/api/files', require('./routes/files'));

// when file is uploaded it returns this route
app.use('/files', require('./routes/show'));


// to download file use this route
app.use('/files/download', require('./routes/download'));


app.listen(PORT, console.log(`Listening on port ${PORT}.`));

So we will test our APIs in POSTMAN:

So as you can see it will return a download link.

So our Final output will look like this !! And we have completed our application.

run both frontend and backend to get working Application.
as like this: https://share-now-file-sharing-app.vercel.app/

You can also get the code from github.

Github link (Don't forget to leave a star🌟):
Frontend Repo: https://github.com/varun21vaidya/ShareNow
Backend Repo: https://github.com/varun21vaidya/ShareNow-Backend

Hope you Enjoyed and learned from this useful project !! Happy Coding !!

MEAN Stack Project: Create Quick File Share Application

Varun — Fri, 06 Jan 2023 15:24:05 +0000

Hey, remember that day when you wanted to share that video or different format file but WhatsApp would reduce its quality or wouldn't support that format. Well we all have faced similar situations when we wanted to share file with our friend or family folder to cousins. But now we are going to make an application where we can directly send Any Type of File to any user and he can download it with just a link.

So here we are going to use Angular 14 for Frontend, NodeJS for Backend, and MongoDB Atlas as Backend and we can even Host this project.

so here I am giving Project Repo to go to if you face any problem
just clone it in your folder by writing this in terminal
git clone repolink
Frontend Repo: https://github.com/varun21vaidya/ShareNow
Backend Repo: https://github.com/varun21vaidya/ShareNow-Backend

Lets First Decide Features we want to build:

User story: I can drag and drop an image to upload it
User story: I can choose to select an image from my folder
User story: When the image is uploaded, It shows that and Provides a Link to Download
User story: I can choose to copy the Link to the clipboard
User story: Download Page with Encoded File Name but Accurate File size to confirm our File
User Story: Download button directly downloads the required File

ANGULAR Part:

ng new frontend

Then we have to create a project structure:
which includes

component 'upload' which will be homepage
component 'completed' which will be shown when we upload file
'fileupload' service which will be used to upload file through backend api and get download link from backend.

ng g c upload
ng g c completed
ng g s fileupload
ng g s sendurl

We will also use bootstrap:
so put this in index.html

for header:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<body>
  <app-root></app-root>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
</body>

app.module will look like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UploadComponent } from './upload/upload.component';
import { HttpClientModule } from '@angular/common/http';
import { CompletedComponent } from './completed/completed.component';
@NgModule({
  declarations: [
    AppComponent,
    UploadComponent,
    CompletedComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now we also need to decide the routes in app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CompletedComponent } from './completed/completed.component';
import { UploadComponent } from './upload/upload.component';

const routes: Routes = [
  { path: 'uploaded', component: CompletedComponent },
  { path: '', component: UploadComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Now we will make global styles.css:

/* You can add global styles to this file, and also import other style files */
html,
body {
  height: 100%;
  background-color: rgb(189, 255, 255);
}

Now Create View for a home page component in upload.component.html

<div class="container">
    <div class="upload-container">
        <div class="headline py-3 px-5 mb-2 bg-primary text-white">
            <h5>Share Your Files Superquickly</h5>
        </div>
        <div class="uploader">
            <h3>Upload Your File</h3>
            <!-- <p>File should be jpeg,png..</p> -->
            <div class="drag-container">

                <div class="dropdiv" [class.processing]="processing" (dragover)="onDrag($event)"
                    (drop)="onDrop($event)">
                    <input type="file" (change)="onChange($event)" style="display:none">
                    <img src="../../assets/files.jpg" alt="icon" class="files rounded mb-3 d-block">
                    <p class="msg mx-2">Drag and Drop your File here</p>
                </div>
            </div>
            <p>Or</p>

            <div class="upload">
                <input type="file" name="uploadfile" id="img" style="display:none;" (change)="selectFile($event)" />
                <label for="img" class="btn btn-primary">Choose a file</label>
            </div>

            <div class="col-2">
                <button class="btn btn-success btn-sm" [hidden]="!selectedFiles" (click)="upload()">
                    Upload
                </button>
            </div>


            <div *ngIf="errmsg" class="alert alert-secondary" role="alert">{{ errmsg }}</div>
        </div>
    </div>
</div>

css file:

.container,
.drag-container,
.upload-container,.uploader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container {
  height: 100vh;
}

.uploader {
  width: 350px;
  height: 420px;
  justify-content: space-evenly;
  border: none;
}

.upload-container{
  border-radius: 10px;
  background-color: white;
  box-shadow: 1px 2px 20px 0px rgb(0 0 0 / 20%);
}

.drag-container {
  box-sizing: border-box;
  background: #f6f8fb;
  border: 2px dashed #97bef49c;
  border-radius: 12px;
}

.files {
  width: 225px;
  height: 130px;
}

Upload Component ts file

Now we have to create two methods, first using choose file from folders and second to drag and drop.

now for drag and drop, use event binding
(dragover)="onDrag($event)" (drop)="onDrop($event)"
which detects a change when a file is dragged into the input section.
while choose file uses (change)="selectFile($event)"

and on submit button upload method is called, which uses upload method from fileupload service to upload file to the server.
The function first checks if file is selected or not and then subscribes to the service method which returns the event and checks the progress with event.type ===HttpEventType.UploadProgress and when it completes it navigates to completed component.

import { HttpEventType, HttpResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { FileuploadService } from '../services/fileupload.service';
import { Router } from '@angular/router';
import { SendurlService } from '../services/sendurl.service';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css'],
})
export class UploadComponent implements OnInit {
  selectedFiles?: FileList;
  currentFile?: File;
  progress = 0;
  message = '';
  errmsg = '';

  fileInfos?: Observable<any>;

  constructor(
    private uploadService: FileuploadService,
    private router: Router,
    private sendurl: SendurlService
  ) {}

  ngOnInit(): void {}

  // drag and drop files
  processing?: boolean;

  onDrag(event: any) {
    event.preventDefault();
  }

  onDrop(event: any) {
    event.preventDefault();

    this.onFileChange(event.dataTransfer.files);
  }

  onChange(event: any) {
    this.onFileChange(event.target.files);
  }

  private onFileChange(files: any) {
    this.processing = true;
    this.selectedFiles = files;
    setTimeout(() => {
      console.log('processed');
      this.processing = false;
    }, 1000);
  }

  // select file
  selectFile(event: any): void {
    this.selectedFiles = event.target.files;
  }
  upload(): void {
    this.progress = 0;

    if (this.selectedFiles) {
      const file: File | null = this.selectedFiles.item(0);
      console.log('file has been selected');
      if (file) {
        this.currentFile = file;

        this.uploadService.upload(this.currentFile).subscribe({
          next: (event: any) => {
            if (event.type === HttpEventType.UploadProgress) {
              this.progress = Math.round((100 * event.loaded) / event.total);
              console.log(this.progress);
              // console.log(event.loaded);
            } else if (event instanceof HttpResponse) {
              console.log('this is file link', event.body.file);
              this.message = event.body.file;

              // this service will send the download link from the server
              // to child component of upload complete
              this.sendurl.link = this.message;
              this.router.navigate(['/', 'uploaded']);
            }
          },
          error: (err: any) => {
            console.log(err);
            this.progress = 0;

            if (err.error && err.error.message) {
              this.errmsg = err.error.message;
            } else {
              this.errmsg = 'Could not upload the file!';
            }

            this.currentFile = undefined;
          },
        });
      }

      this.selectedFiles = undefined;
    }
  }
}

So now your webapp would look like this:

in sendurl service add this:
link?:string;

Now create upload service:

The service takes file and returns an observable httpevent which uses POST Request to send the file to server. Also create getfiles method to get the link.

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class FileuploadService {
  // base url
  // host = 'https://share-now-backend.vercel.app/';
  host = 'https://sharenow.onrender.com/';
  // host = 'http://localhost:3000/';
  uploadURL = `${this.host}api/files`;

  constructor(private http: HttpClient) {}

  upload(file: File): Observable<HttpEvent<any>> {
    const formData: FormData = new FormData();
    formData.append('myfile', file);

    const req = new HttpRequest('POST', `${this.uploadURL}`, formData, {
      reportProgress: true,
      responseType: 'json',
    });

    return this.http.request(req);
  }

  getFiles(): Observable<any> {
    return this.http.get(`${this.uploadURL}`);
  }
}

Now we need to have a component when we upload file successfully, and it should provide the link to download.

completed html:

<div class="container">
    <div class="upload-container">

        <h4 class="mt-2"> <img src="../../assets/checkmark.png" alt="checkmark"> Uploaded Successfully</h4>
        <br>
        <img src="../../assets/completed.jpg" id="showimg" alt="image">
        <br>
        <div class="card-body">
            <div class="input-group">
                <input type="text" value={{link}} #userinput>
                <button type="button" class="btn btn-primary" (click)="copyInputMessage(userinput)">Copy
                    Link</button>
            </div>
        </div>
        <button class="btn btn-success" [routerLink]="['/']">Home</button>
    </div>
</div>

completed css:

.container,
.drag-container,
.upload-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.container {
  height: 100vh;
}

.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  padding: 20px 15px;
  width: 350px;
  height: 500px;
  border: none;
  box-shadow: 1px 2px 20px 0px rgb(0 0 0 / 20%);
  border-radius: 10px;
  background-color: white;
}

#showimg {
  width: 330px;
  height: auto;
  border-radius: 8px;
}

Now to show download link we need to get it from sendurl service

completed component ts file:

import { Component, OnInit, Input } from '@angular/core';
import { SendurlService } from '../services/sendurl.service';

@Component({
  selector: 'app-completed',
  templateUrl: './completed.component.html',
  styleUrls: ['./completed.component.css'],
})
export class CompletedComponent implements OnInit {
  constructor(private geturl: SendurlService) {}
  link = this.geturl.link;
  ngOnInit(): void {}
  /* To copy Text from Textbox */
  copyInputMessage(inputElement: any) {
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }
}

This will show the file upload completed view with the link to download the file.

This Completes our Angular App !! Hope you Enjoyed working on this app, and learned something new.

Further We will have to make Backend APIs with NodeJS and Express.
Here is Part 2 where we will complete our FULL STACK APP:
https://dev.to/varun21vaidya/mean-stack-project-create-quick-file-share-application-part-2-backend-22c3

HAPPY CODING !!

🎯How WEB Works and Intro To Frontend 🌱

Varun — Fri, 06 Jan 2023 14:42:09 +0000

Hi Guys👋, Today we will see How to Start Web Dev Journey🧑‍💻
And if you have already started this can be your first lesson 🌟

0️⃣ Pillars of Front End:

HTML: hypertext markup language, to define building blocks of web pages (markup language)

CSS: cascading style sheet and used for styling and making it beautiful (styling language)

JAVASCRIPT: gives functionality to webpages (programming language)

1️⃣ Frontend Frameworks:

REACT

ANGULAR

VUE

2️⃣ HOW THE WEB WORKS

the address we type in address bar is URL (Uniform Resource Location), it is a way to locate a resource on the internet like web pages, images videos..

CLIENT SERVER MODEL:

WWW -world wide web is a collection of web documents and resourses which are accessible over the internet.

URL: uniform resource locator uniformly locates a particular in the internet. it has following components

protocol://host:port/path

http : // www.myapp.com/ results

protocol: used for client server communication

host and port : name of the connected server along with port number

each device connected on the internet will be accessible with unique host name also called as domain name.

and different servises will be provided through specific port numbers, if explicit port is not mentioned default will be used

standard port for HTTP is 80 and 443 for HTTPS

path: path to access the resource / web root

3️⃣ HTTP:

HTTP is a request transfer based protocol as client establishes a connection with server and sends a request over the same connection server sends the response

when client wants to send request again new connection request will be created

A client requests a service and server provides it.. so here browser asks a server about info of specific website.

now this msg is formatted according to a protocol called HTTP (Hypertext Transfer Protocol) , so its a plain language for communicating over the internet

HTTPS - HTTP with encryption

SO when browser asks a request like this

**GET /index.html HTTP/1.1
Host: www.google.com
Accept-Language: en-us**

browser sends a response like this:

HTTP/1.1 200 OK
Date: 1 Jan 2021 09:00
Content-Type: text/html

<!DOCTYPE html>
<html>

    ...

</html>

So when the browser reads this HTML documents it creates DOM - Document Object Model

this is model that represents objects and elements in HTML document ie elements like building blocks, paragraphs of text, images links etc..

So when browser reads the doc, it sends requests to access the images videos link as separate HTTP request to server, and to increase loading speeds, they are sent parallelly

one the browser has all the necessary resources the browser renders HTML document.

MIME : Multipurpose Internet Mail Extension

indicates the format of the resource content from server to the client

contents such as text, image, videos, application (json, sql, javascript) .

4️⃣ HTML & CSS

The following are some key elements in HTML that form the basic structure of a web page.

<!DOCTYPE html> declaration update the browser about the version of HTML being used. By default, it points to HTML5, the latest version.
The tag encapsulates the complete web page content. All other tags are 'nested' within the tag.
Any HTML document or web page consists of two main sections the 'head' and the 'body'.
- The head section starts with the start tag and ends with the end tag .
HTML is not case sensitive language but generally we write in lowercase
IN css style, if if border-radius is more than half of width it can become circle.

represents anchor element (link to another website)

href="https://www.youtube.com/"> this represents HTML attribute which modifies how an element behaves

href is attribute name and “...” is value.

target=”_blank” ensures the link will open in new tab if its not present link will open in current page.

<a href="https://www.youtube.com/" target=”_blank”>Link to Youtube</a>

💡 Extra spaces are ignored in HTML

<style>
button {
background-color: red;

here button is CSS Selector

and background-color is a property.

TO CREATE EFFECTS ON BUTTONS WHEN WE HOVER ON THEM,

to change color when we hover on them,

.subcribe-btn:hover {
background-color: rgba(252, 48, 48, 0.747);
}

💡 :hover is psudo-class, these psudo classes adds extra styles in certain situations

Similarly,

:active Psudo-class adds functionalities when we click on the button

to change the opacity we can use opacity between 0 to 1

.join-btn:active {
opacity: 0.7;
}

to adjust transition speed of the hover property ie not instantaneously (but use this in base css style not in hover style)

transition: opacity 1s;

to create shadows after hovering

.Tweet-btn:hover {
box-shadow: 1px 5px 15px rgba(0, 0, 255, 0.2);
}

We should not set the height and width to the buttons, as if the text length is more it would flow out of box.

instead we can use inside space of button, ie padding.

span is generic element used to give special characteristics to certain text in paragraph using class

<p class="offer">
  Shop early for best selection of holiday favourites.
    <span class="shop">Shop Now !</span>
</p>

and in css we can give styles

.shop {
    color: white;
    text-decoration: none;

  }
  .shop:hover {
    text-decoration: underline;
  }

That's all for now⌚, as you ready to get into this Web Dev Field.
Further, there are tons of things to learn from this vast internet 🕸️. I hope I have made you more curious about them, Happy Learning 🚀!!