Skip to content

Latest commit

 

History

History
4450 lines (3527 loc) · 127 KB

web-dev.md

File metadata and controls

4450 lines (3527 loc) · 127 KB

🔖Web Dev Tools</>

Frontend

Useful Links

React

React Ecosystem

  1. Getting Started

  2. Auth

  3. Routing

  4. State Management

  5. Form

  6. Schema Validator

  7. Styling

  8. UI Component

  9. Other UI libs

  10. Drag and Drop

  11. Animation

  12. Data Visualization Chart Table

  13. PDF Doc

  14. Markdown Rich Text Editor

  15. Tour Guide

  16. HTTP

  17. Date Time

  18. Internationalization

  19. Rendering Performance

  20. Testing

  21. Documentation

  22. Type Checking

  23. Visual Editors

  24. Other Libraries

    • Haiku is a simple & lightweight React library with the goal of saving you time by offering a large collection of hooks & utilities that will help you get the job done faster & more efficiently!
    • Xterm.js Build terminals in the browser.
    • Socket.io is a library that enables real-time, bidirectional communication between web clients and servers.
    • mitosis Write components once, run everywhere.
    • Storybook Build UIs without the grunt work.
    • copilotkit CopilotKit is the simplest way to integrate production-ready Copilots into any product.
    • react-tweet Allows you to embed tweets in your React application.
    • react-advanced-cropper This react cropper library gives you the possibility to create croppers that exactly suited for your website design.
    • json-editor JSON Editor takes a JSON Schema and uses it to generate an HTML form.

  25. DevTools

Folder Structure

Level 1:

└── src/
    ├── assets/
    ├── api/
    ├── configs/
    ├── components/
    │   ├── SignUpForm.tsx
    │   ├── Employees.tsx
    │   ├── PaymentForm.tsx
    │   └── Button.tsx
    ├── hooks/
    │   ├── usePayment.ts
    │   ├── useUpdateEmployee.ts
    │   ├── useEmployees.ts
    │   └── useAuth.tsx
    ├── lib/
    ├── services/
    ├── states/
    ├── utils/
    ├── main.tsx
    └── App.tsx

Level 2:

└── src/
    ├── assets/
    ├── api/
    ├── configs/
    ├── components/
    │   ├── auth/
    │   │   └── SignUpForm.tsx
    │   ├── payment/
    │   │   └── PaymentForm.tsx
    │   ├── common/
    │   │   └── Button.tsx
    │   └── employees/
    │       ├── EmployeeList.tsx
    │       └── EmployeeSummary.tsx
    ├── hooks/
    │   ├── auth/
    │   │   └── useAuth.ts
    │   ├── payment/
    │   │   └── usePayment.ts
    │   └── employees/
    │       ├── useEmployees.ts
    │       └── useUpdateEmployee.ts
    ├── lib/
    ├── services/
    ├── states/
    ├── utils/
    ├── main.tsx
    └── App.tsx

Level 3:

└── src/
    ├── assets/
    ├── core/
    │   ├── services/
    │   ├── store/
    │   ├── api/
    │   └── ...
    ├── modules/
    │   ├── payment/
    │   │   ├── components/
    │   │   │   └── PaymentForm.tsx
    │   │   ├── hooks/
    │   │   │   └── usePayment.ts
    │   │   ├── index.tsx
    │   │   └── ...
    │   ├── auth/
    │   │   ├── components/
    │   │   │   └── SignUpForm.tsx
    │   │   ├── index.tsx
    │   │   └── ...
    │   ├── employees/
    │   │   ├── components/
    │   │   │   ├── EmployeeList.tsx
    │   │   │   └── EmployeeSummary.tsx
    │   │   ├── hooks/
    │   │   │   ├── useEmployees.ts
    │   │   │   └── useUpdateEmployee.ts
    │   │   ├── index.tsx
    │   │   └── ...
    │   └── ...
    ├── shared/
    │   ├── components/
    │   │   └── Button.tsx
    │   ├── constants/
    │   ├── enums/
    │   ├── hooks/
    │   │   └── useAuth.ts
    │   ├── models/
    │   ├── types/
    │   ├── utils/
    │   └── ...
    └── ...

Note

These are just to give you an idea about how to structure you project and not the absolute you should always follow.

React Best Practices

Fundamental building blocks of React, known as primitives:

1. Components:

  • Reusable pieces of UI that encapsulate their own logic and rendering.
  • Can be classified as:
    • Functional Components: Simple JavaScript functions that return JSX.
    • Class Components: Extend React.Component and manage state and lifecycle methods using this.

2. JSX:

  • A syntax extension for JavaScript that allows writing HTML-like structures within code.
  • Elements in JSX can represent both React components and DOM elements.

3. Props:

  • Data passed from parent components to child components.
  • Used to customize the behavior and appearance of child components.

4. State:

  • Data that can change over time within a component.
  • Managed using the useState hook in functional components or this.state in class components.
  • Changes to state trigger re-renders of the component and its children.

5. Rendering:

  • The process of generating the UI based on the component's state and props.
  • React uses a virtual DOM to efficiently update only the necessary parts of the actual DOM.

6. Lifecycle Methods:

  • Methods that are called at different stages of a component's lifecycle (mounting, updating, unmounting).
  • Used for tasks like data fetching, subscriptions, or cleanup.
  • Available in class components, but functional components can use hooks for similar effects.

7. Hooks:

  • Functions that allow you to "hook into" React features like state and lifecycle methods from functional components.
  • Examples include useState, useEffect, useContext, useMemo, and more.

8. Virtual DOM:

  • An in-memory representation of the actual DOM.
  • React uses it to compare changes and apply only the necessary updates to the real DOM, improving performance.

9. Reconciliation:

  • The process of comparing the virtual DOM with the actual DOM to determine the minimal changes needed.
  • React's efficient reconciliation algorithm is a key factor in its performance.

useMemo

// The useMemo hook is used to memoize the result of a computation. Memoization is a technique where the result of a function is cached and returned when the same inputs occur again, instead of recomputing the result. This can be useful for optimizing performance in certain scenarios, especially when dealing with expensive calculations or rendering.

import React, { useState, useMemo } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [toDos, setToDos] = useState([{ id: 1, text: "Learn React" }]);

  const filteredToDos = useMemo(() => {
    // Expensive filtering operation
    return toDos.filter((todo) => todo.id !== count);
  }, [toDos, count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ul>
        {filteredToDos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

The best way to filter using useSearchParam

export default function App() {
  const [searchParam, setSearchParam] = useSearchParam({ q: "", isActive: false });

  const q = searchParam.get("q");
  const isActive = searchParam.get("isActive") === "true";

  return (
    <>
      <input
        type="text"
        id="q"
        value={q}
        onChange={(e) =>
          setSearchParam(
            (prev) => {
              prev.set("q", e.target.value);
              return prev;
            },
            { replace: true },
          )
        }
      />
      <input
        type="checkbox"
        id="isActive"
        value={isActive}
        onChange={(e) =>
          setSearchParam((prev) => {
            prev.set("isActive", e.target.checked);
            return prev;
          })
        }
      />
    </>
  );
}

The best way to change state in react and get the updated value instantly

export default function App() {
  const [array, setArray] = useState([1, 2, 3]);

  const addToStart = (num) => {
    setArray((prev) => {
      return [num, ...prev];
    });
  };
  const addToEnd = (num) => {
    setArray((prev) => {
      return [...prev, num];
    });
  };

  return (
    <>
      {array}
      <button
        onClick={() => {
          addToStart(0);
          addToEnd(0);
        }}
      >
        Add
      </button>
    </>
  );
}

To change tab title or html page title in React

// Add this to the page components and change the title based on the page
document.title = "A new title";

Functions

// ES5
function getSum(a, b) {
  return a + b;
}

// ES6
const getSum = (a, b) => a + b;

Template Literal String

// ES5
var name = "Name";
console.log("My name is " + name);

// ES6
const name = "Name";
console.log(`My name is ${name}`);

Use const & let instead of var

// ES5
var fruits = ["apple", "banana"];

// ES6
let fruits = ["apple", "banana"];
fruits.push("mango");

const workingHours = 8;

Object Destructuring

var person = {
  name: "John",
  age: 32,
};

// ES5
var name = person.name;
var age = person.age;

// ES6
const { name, age } = person;

Defining Objects

var name = "John";
var age = 32;
var designations = "Game Developer";
var workingHours = 8;

// ES5
var person = {
  name: name,
  age: age,
  designation: designation,
  workingHours: workingHours,
};

// ES6
const person = { name, age, designation, workingHours };

Component Name Should be in PascalCase

const helloText = () => <div>Hello</div>; // wrong

const HelloText = () => <div>Hello</div>; // correct

Variable & Function Names Should be in camelCase

const working_hours = 10; // bad approach

const workingHours = 10; // good approach

const get_sum = (a, b) => a + b; // bad approach

const getSum = (a, b) => a + b; // good approach

ID & Class Names Should be in kebab-case

<!--bad approach-->
<div className="hello_word" id="hello_world">Hello World</div>

<!--good approach -->
<div className="hello-word" id="hello-world">Hello World</div>

Always Check null & undefined for Objects & Arrays

const person = {
  name: "John",
  state: "LA",
};
console.log("Age", person.age); // error
console.log("Age", person.age ? person.age : "Not available"); // correct
console.log("Age", person.age ?? "Not available"); //correct

const oddNumbers = undefined;
console.log(oddNumbers.length); // error
console.log(oddNumbers.length ? oddNumbers.length : "Array is undefined"); // correct
console.log(oddNumbers.length ?? "Array is undefined"); // correct

Avoid Inline Styling

const text = <div style={{ fontWeight: "bold" }}>Happy Learning!</div>; // bad approach

const text = <div className="learning-text">Happy Learning!</div>; // good approach

In .css file

.learning-text {
  font-weight: bold;
}

Avoid DOM Manipulation

Bad approach

<div id="error-msg">Please enter a valid value</div>
document.getElementById("error-msg").visibility = visible;

Good approach

const [isValid, setIsValid] = useState(false);

<div hidden={isValid}>Please enter a valid value</div>;

Always Remove Every Event Listener in useEffect

const printHello = () => console.log("HELLO");
useEffect(() => {
  document.addEventListener("click", printHello);
  return () => document.removeEventListener("click", printHello);
});

Avoid Repetition, Use Generic Components

const Input=(props)=>{
  const [inputValue, setInputValue]=useState('');
  return(
    <label>{props.thing}</label>
    <input type='text' value={inputValue} onChange={(e)=>setInputValue(e.target.value)} />
  )
}

// Import Input and use instead of JSX
<div>
    <Input thing="First Name" />
    <Input thing="Second Name" />
</div>

Use Ternary Operator Instead of if/else if Statements

// Bad approach
if (name === "Ali") {
  return 1;
} else if (name === "Bilal") {
  return 2;
} else {
  return 3;
}

// Good approach
name === "Ali" ? 1 : name === "Bilal" ? 2 : 3;

Make index.js File Name to Minimize Importing Complexity

// If you have a file named index.js in a directory named actions and you want to import action from it in your component, your import would be like this

import { pageName } from "src/components/pages/index"; // Bad
import { pageName } from "src/components/pages"; // Good

Destructuring of Props

// Bad approach
const Details = (props) => {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.age}</p>
      <p>{props.designation}</p>
    </div>
  );
};

// Good approach
const Details = ({ name, age, designation }) => {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
      <p>{designation}</p>
    </div>
  );
};

Don't Try to Access Modified State Variable in the Same Function

// In a function, if you are assigning a value to a state variable then you won't be able to access that assigned value even after it has been assigned in that function

const Message = () => {
  const [message, setMessage] = useState("Hello World");
  const changeMessage = (messageText) => {
    setMessage("Happy Learning");
    console.log(message); // It will print Hello World on console
  };

  return <div>{message}</div>;
};

Use === Operator instead of ==

// While comparing two values, strictly checking both values and their data types is a good practice.

"2" == 2 ? true : false; // true
"2" === 2 ? true : false; // false

Interview Questions

Find 2nd largest number in array

function nextBiggest(arr) {
  let max = 0,
    result = 0;

  for (const value of arr) {
    const nr = Number(value);
    if (nr > max) {
      [result, max] = [max, nr]; // save previous max
    } else if (nr < max && nr > result) {
      result = nr; // new second biggest
    }
  }
  return result;
}

const arr = ["20", "120", "111", "215", "215", "215", "54", "78"];
console.log(nextBiggest(arr));

IIFE

(async () => {
  await asyncCodeHere();
})();

Suspense

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

Angular

Component Libraries

  1. Angular Material
  2. NG Bootstrap
  3. NGX-Bootstrap
  4. PrimeNG
  5. ApexCharts
  6. Nebular
  7. Clarity
  8. Core UI
  9. Ignite UI for Angular

Angular CLI

  1. Setup

    npm install -g @angular/cli

  2. New Application

    ng new <app-name>

  3. Lint for Formatting

    The Lint command fixes code smells and corrects improper formatting.

    ng lint my-app --fix

    This command shows warnings:

    ng lint my-app

    If you want to format the code, you can use the following command.

    ng lint my-app --format stylish

  4. Blueprints

    Generate spec:

    --spec

    Check whether the template will be a.ts file or not:

    --inline-template (-t)

    Check whether the style will be in the.ts file or not:

    --inline-style (-s)

    Create a directive:

    ng g d directive-name

    Create a pipeline:

    ng g p init-caps

    Create customer class in the models folder:

    ng g cl models/customer

    Creates a component without the need for the creation of a new folder.

    ng g c my-component --flat true

    Assign a prefix:

    --prefix

    Create an interface in the models folder:

    ng g i models/person

    Create an ENUM gender in the models folder:

    ng g e models/gender

    Create a service:

    ng g s <service-name>

  5. Building Serving

    Build an app to /dist folder:

    ng build

    Optimize and build an app without using unnecessary code:

    ng build --aot

    Create a build for production:

    ng build --prod

    Specify serve with opening a browser:

    ng serve -o

    Reload when changes occur:

    ng serve --live-reload

    Serve using SSL:

    ng serve -ssl

  6. Add New Capabilities

    Add angular material to project:

    ng add @angular/material

    Create a material navigation component:

    ng g @angular/material:material-nav --name nav

  7. Component Life Cycles

    ngOnInit Called once, after the first ngOnChanges()

    ngOnChanges Called before ngOnInit() and whenever one of the input properties changes.

    ngOnDestroy Called just before Angular destroys the directive/component.

    ngDoCheck Called during every change detection run.

    ngAfterContentChecked Called after the ngAfterContentInit() and every subsequent ngDoCheck()

    ngAfterViewChecked Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().

    ngAfterContentInit Called once after the first ngDoCheck().

    ngAfterViewInit Called once after the first ngAfterContentChecked().

  8. Template Syntax

    Interpolation - generates user name.

    {{user.name}}

    property binding - bind image url for user to src attribute

    <img [src]="user.imageUrl" />

    Event - assign function to click event

    <button (click)="do()" ... />

    Show button when user.showSth is true

    <button \*ngIf="user.showSth" ... />

    Iterate through the items list

    *ngFor="let item of items"

    Angular ngClass attribute

    <div [ngClass]="{green: isTrue(), bold: itTrue()}" />

    Angular ngStyle attribute

    <div [ngStyle]="{'color': isTrue() ? '#bbb' : '#ccc'}" />

  9. Input and Output

    Input() To pass value into child component

    Sample child component implementation:

    export class SampleComponent {
    @Input() value: any/string/object/…;
    ...
}

    Sample parent component usage:

    <app-sample-component [value]="myValue"></app-sampe-component>
Output() Emitting event to parent component
Sample child component:
@Output() myEvent: EventEmitter = new EventEmitter();
onRemoved(item: MyModel) {
this.myEvent.emit(item);
}

    Sample parent component:

    <app-my-component (myEvent)="someFunction()"></app-my-component>

    onRemoved in the child component is calling the someFunction() method in the parent component, as we can see in the above two child and parent components.

  10. Content Projection

    Content projection in Angular is a pattern in which you inject the desired content into a specific component.

    Here’s an example of a parent component template:

    <component>
  <div>(some html here)</div>
</component>

    Child component template:

    <ng-content></ng-content>

    Let us now inject the following HTML code in the parent component template:

    <div well-body>(some html here)</div>

    It will look like:

    <component>
  <div well-title>(some html here)</div>
  <div well-body>(some html here)</div>
</component>

    When we combine both the above parent and child template, you get the following result:

    <component>
  <div well-title>(some html here)</div>
  <div well-body>(some html here)</div>
</component>
<ng-content select="title"></ng-content>
<ng-content select="body"></ng-content>

  11. ViewChild Decorator

    Offers access to child component/directive/element:

    @ViewChild(NumberComponent) private numberComponent: NumberComponent; increase() {
this.numberComponent.increaseByOne(); //method from child component } decrease() {
this.numberComponent.decreaseByOne(); //method from child component }

    Sample for element: html:

    <div #myElement></div>

    component:

    @ViewChild('myElement') myElement: ElementRef

    Instead ElementRef can be used for specific elements like FormControl for forms.

    Reference to element in html:

    <button (click)="doSth(myElement)"></button>

  12. Routing

    The Angular Router enables navigation from one view to the next as users perform application tasks.

    Sample routing ts file:

    const appRoutes: Routes = [
  { path: "crisis-center", component: CrisisListComponent },
  { path: "prod/:id", component: HeroDetailComponent },
  {
    path: "products",
    component: ProductListComponent,
    data: { title: "Products List" },
  },
  {
    path: "",
    redirectTo: "/products",
    pathMatch: "full",
  },
  { path: "**", component: PageNotFoundComponent },
];

    Then, this should be added inside Angular.module imports:

    RouterModule.forRoot(appRoutes);

    You can also turn on console tracking for your routing by adding enableTracing:

    imports: [RouterModule.forRoot(routes,{enableTracing: true})],

    Usage

    <a routerLink="/crisis-center" routerLinkActive="active"> Crisis Center </a>

    routerLinkActive="active" will add active class to element when the link's route becomes active

    //Navigate from code
this.router.navigate(["/heroes"]);
// with parameters
this.router.navigate(["/heroes", { id: heroId, foo: "foo" }]);
// Receive parameters without Observable
let id = this.route.snapshot.paramMap.get("id");

    CanActivate and CanDeactivate In Angular routing, two route guards are CanActivate and CanDeactivate. The former decides whether the route can be activated by the current user, while the latter decides whether the router can be deactivated by the current user.

    CanActivate:

    class UserToken {}
class Permissions {
  canActivate(user: UserToken, id: string): boolean {
    return true;
  }
}

    CanDeactivate:

    class UserToken {}
class Permissions {
  canDeactivate(user: UserToken, id: string): boolean {
    return true;
  }
}

  13. Modules

    Angular apps are modular and Angular has its own modularity system called NgModules. NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.

    Sample Module with Comments

    import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule({
  declarations: [AppComponent], // components, pipes, directives
  imports: [BrowserModule, AppRoutingModule], // other modules
  providers: [], // services
  bootstrap: [AppComponent], // top component
})
export class AppModule {}

  14. Services

    Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data. Instead, they should focus on presenting data and delegate data access to a service.

    Sample service with one function:

    @Injectable()
export class MyService {
  public items: Item[];
  constructor() {}
  getSth() {
    // some implementation
  }
}

    When you create any new instance of the component class, Angular determines the services and other dependencies required by that component by looking at the parameters defines in the constructor as follows:

    constructor(private dogListService: MyService){ }

    The above constructor requires the service: MyService

    Register MyService in the providers module:

    providers: [MyService];

  15. HttpClient

    This command handles and consumes http requests.

    Add import to module:

    import { HttpClientModule } from "@angular/common/http";

    You can use the above statement in the following way:

    import {HttpClient} from '@angular/common/http';
...

// GET
public getData(): Observable {
    return this.http.get('api/users/2');
}

// POST
public send(val1: any, val2: any): Observable {
    const object = new SendModel(val1, val2);
    const options = {headers: new HttpHeaders({'Content-type': 'application/json'})};
    return this.http.post(environment.apiUrl + 'api/login', object, options);
}

  16. Dependency Injection

    This injects a class into another class:

    @Injectable({
  providedIn: "root",
})
export class SomeService {}

    It accepts 'root' as a value or any module of your application.

  17. Declare Global Values

    Class:

    import { InjectionToken } from "@angular/core";
export const CONTROLS_GLOBAL_CONFIG = new InjectionToken("global-values");
export interface ControlsConfig {
  firstGlobalValue: string;
}

    Module:

    providers: [{provide: CONTROLS_GLOBAL_CONFIG, useValue: {firstGlobalValue : 'Some value' }},

    Usage (for example in component):

    constructor(@Optional() @Inject(CONTROLS_GLOBAL_CONFIG) globalValues: ControlsConfig) {}

  18. Pipes

    Pipes transform data and values to a specific format. For example:

    Show date in shortDate format:

    {{model.birthsDay | date:'shortDate'}}

    Pipe implementation:

    @Pipe({ name: "uselessPipe" })
export class uselessPipe implements PipeTransform {
  transform(value: string, before: string, after: string): string {
    let newStr = `${before} ${value} ${after}`;
    return newStr;
  }
}

    usage:

    {{ user.name | uselessPipe:"Mr.":"the great" }}

  19. Directives

    An Attribute directive changes A DOM element’s appearance or behavior. For example, [ngStyle] is a directive.

    Custom directive:

    import { Directive, ElementRef, HostListener, Input } from "@angular/core";
@Directive({
  selector: "[appHighlight]",
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}
  @Input("appHighlight") highlightColor: string;
  @Input("otherPar") otherPar: any; //it will be taken from other attribute named [otherPar]
  @HostListener("mouseenter") onMouseEnter() {
    this.highlight(this.highlightColor || "red");
  }
  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

    Usage:

    <p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>

  20. Animations

    Animations allow you to move from one style state to another before adding BrowserModule and BrowserAnimationsModule to the module.

    Implementation:

    animations: [
  trigger("openClose", [
    state(
      "open",
      style({
        height: "400px",
        opacity: 1.5,
      }),
    ),
    state(
      "closed",
      style({
        height: "100px",
        opacity: 0.5,
      }),
    ),
    transition("open => closed", [animate("1s")]),
    transition("closed => open", [animate("1s")]),
  ]),
];

    Usage:

    <div [@openClose]="isShowed ? 'open' : 'closed'"></div>

  21. Angular Forms

    In this section of our Angular 4 cheat sheet, we’ll discuss different types of Angular forms.

    Template Driven Forms

    Form logic (validation, properties) are kept in the template.

    sample html:

    <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
  <div class="form-group">
    <label for="firstName">First Name</label>

    <input
      type="text"
      class="form-control"
      name="firstName"
      [(ngModel)]="model.firstName"
      #firstName="ngModel"
      [ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }"
      required
    />
    <div *ngIf="f.submitted && firstName.invalid" class="invalid-feedback">
      <div *ngIf="firstName.errors.required">First Name is required</div>
    </div>
  </div>
  <div class="form-group">
    <button class="btn btn-primary">Register</button>
  </div>
</form>

    Sample component:

    @ViewChild("f") form: any;

firstName: string = "";
langs: string[] = ["English", "French", "German"];
onSubmit() {
    if (this.form.valid) {
        console.log("Form Submitted!");
        this.form.reset();
    }
}

    Reactive Forms

    Form logic (validation, properties) are kept in the component.

    Sample HTML:

    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label>Email</label>
    <input
      type="text"
      formControlName="email"
      class="form-control"
      [ngClass]="{ 'is-invalid': submitted && f.email.errors }"
    />
    <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
      <div *ngIf="f.email.errors.required">Email is required</div>
      <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
    </div>
  </div>
  <div class="form-group">
    <button [disabled]="loading" class="btn btn-primary">Register</button>
  </div>
</form>

    Sample component:

    registerForm: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
    this.registerForm = this.formBuilder.group({
    firstName: [{{here default value}}, Validators.required],
    lastName: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(6)]]
    });
}

// convenience getter for easy access to form fields
get f() { return this.registerForm.controls; }
onSubmit() {
    this.submitted = true;
    // stop here if form is invalid
    if (this.registerForm.invalid) {
        return;
    }
    alert('SUCCESS!! :-)')
}

    Custom Validator for Reactive Forms

    Function:

    validateUrl(control: AbstractControl) {
    if (!control.value || control.value.includes('.png') || control.value.includes('.jpg')) {
        return null;
    }
    return { validUrl: true };
}

    Usage:

    this.secondFormGroup = this._formBuilder.group({
  imageCtrl: ["", [Validators.required, this.validateUrl]],
});

    Multi-field validation:

    validateNameShire(group: FormGroup) {
    if (group) {
        if (group.get('isShireCtrl').value && !group.get('nameCtrl').value.toString().toLowerCase().includes('shire')) {
            return { nameShire : true };
        }
    }
    return null;
}

    Multi-field validation usage:*

    this.firstFormGroup.setValidators(this.validateNameShire);

    Error handling:

    <div *ngIf="firstFormGroup.controls.nameCtrl.errors.maxlength">Name is too long</div>

<div *ngIf="firstFormGroup.errors.nameShire">
  Shire dogs should have "shire" in name
</div>

    Custom Validator Directive for Template-Driven Forms

    Shortly, we’ll cover how to register our custom validation directive to the NG_VALIDATORS service. Thanks to multi-parameter we won't override NG_VALIDATORS but just add CustomValidator to NG_VALIDATORS).

    Here’s what you use:

    @Directive({
    selector: '[CustomValidator]',
    providers: [{provide: NG_VALIDATORS, useExisting: CustomValidator, multi:true}]
})

    Example:

    @Directive({
    selector: '[customValidation]',
    providers: [{provide: NG_VALIDATORS, useExisting: EmailValidationDirective, multi: true}]
})

export class CustomValidation implements Validator {
    constructor() { }
    validate(control: AbstractControl): ValidationErrors {
        return (control.value && control.value.length <= 300) ?
        {myValue : true } : null;
    }
}
For multiple fields:
validate(formGroup: FormGroup): ValidationErrors {
    const passwordControl = formGroup.controls["password"];
    const emailControl = formGroup.controls["login"];
    if (!passwordControl || !emailControl || !passwordControl.value || !emailControl.value) {
        return null;
    }
    if (passwordControl.value.length > emailControl.value.length) {
        passwordControl.setErrors({ tooLong: true });
    } else {
        passwordControl.setErrors(null);
    }
    return formGroup;
}

    ngModel in Custom Component

    Add to module:

    providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => TextAreaComponent),
    multi: true
    }]

Implement ControlValueAccessor interface
interface ControlValueAccessor {
    writeValue(obj: any): void
    registerOnChange(fn: any): void
    registerOnTouched(fn: any): void
    setDisabledState(isDisabled: boolean)?: void
}

    registerOnChange

    Register a function to tell Angular when the value of the input changes.

    registerOnTouched

    Register a function to tell Angular when the value was touched.

    writeValue

    Tell Angular how to write a value to the input.

    Sample implementation:

    @Component({
  selector: "app-text-area",
  templateUrl: "./text-area.component.html",
  styleUrls: ["./text-area.component.less"],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TextAreaComponent),
      multi: true,
    },
  ],
})
export class TextAreaComponent implements ControlValueAccessor, OnInit {
  @Input() value: string;
  private _onChange = (data: any) => {
    console.log("changed: " + data);
  };
  private _onTouched = (data?: any) => {
    console.log("touched: " + data);
  };
  ngOnInit(): void {
    const self = this;
  }
  constructor() {}
  writeValue(obj: any): void {
    this.value = obj;
  }
  registerOnChange(fn) {
    this._onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this._onTouched = fn;
  }
}

  22. Tests

    Every software application under development needs to be tested to verify its correctness, and so do the Angular applications. Testing implies executing various tests or test cases on an application to validate it functionality and correctness.

    Unit tests

    Unit testing, in general, is a type of software testing level that checks various components of an application separately. In Angular, the default unit testing framework is Jasmine. It is widely utilized while developing an Angular project using CLI.

    Service:

    describe('MyService', () => {
    let service: MyService;
    beforeEach(() => service = new MyService();
    it('#fetch should update data', () => {
    service.fetchData();
    expect(service.data.length).toBe(4);
    expect(service.data[0].id).toBe(1);
    });
});

    For async functions:

    it("#fetch should update data", (done: DoneFn) => {
  // some code
  done(); // we need 'done' to avoid test finishing before date was received
  // some code
});

    example async test:

    it("http client works", (done: DoneFn) => {
  service.getUser().subscribe((data) => {
    expect(data).toBe("test");
    done();
  });
});

  23. Spy and stub

    When you make calls during the testing process, a stub provides canned answers to all those calls. It does not respond to anything outside the program under test.

    A spy is a stub that records the information based on the calls you make during the test.

    Spy:

    // create spied object by copy getDataAsync from HttpService
const valueServiceSpy = jasmine.createSpyObj("HttpService", ["getDataAsync"]);

    Stub:

    const stubValue = of("StubValue");
valueServiceSpy.getDataAsync.and.returnValue(stubValue);

    TestBed Mock whole module/environment for unit tests:

    beforeEach(() => {
  let httpClientMock = TestBed.configureTestingModule({
    providers: [{ provide: MyService, useValue: new MyService(httpClientMock) }],
  });
});

    Then use tested object (for example service) like this:

    service = TestBed.get(MyService);

    We can add schemas: [NO_ERRORS_SCHEMA]. This means that we don’t have to mock child component dependencies of this component because Angular won’t yell if we don’t include them!

  24. Miscellaneous

    Http Interceptor An HTTP interceptor can handle any given HTTP request.

    Class:

    @Injectable()
export class MyInterceptor implements HttpInterceptor {
    constructor() { }
    intercept(request: HttpRequest, next: HttpHandler): Observable> {
        // do sth (like check and throw error)
        return next.handle(request); //if want continue
    }
}

    Parameters:

    • req: HttpRequest<any> - It is the object that handles outgoing requests. next: HttpHandler
    • next: HttpHandler - It indicates the next interceptor in the line or the backend in case there are no interceptors.

    Returns:

    An HTTP interceptor returns the observable of the event stream.

    Observable<HttpEvent<any>>

HTML Snippet

html structure 

/* Enabling design mode will make the entire web page editable, just by clicking and typing. To use it,
open up the console and run: */

document.designMode = "on";
<input type="range" min="1" max="5" value="2" />
<input type="search" />
<input type="tel" />
<input type="time" />
<input type="color" />
<input type="datetime-local" />
<input type="week" />
<input type="month" />
<input type="url" />

HTML Tricks

<!-- Can give tooltip to any tag with title -->

<p title="Tooltip">Tooltip</p>
<!-- different favicon for light and dark mode -->

<head>
  <link
    rel="icon"
    type="image/svg+xml"
    href="dark-icon.svg"
    media="(prefers-color-scheme:dark)"
  />
  <link
    rel="icon"
    type="image/svg+xml"
    href="light-icon.svg"
    media="(prefers-color-scheme:light)"
  />
</head>
<!-- When you need to run some calculations on your inputs and get a result instantly, you can use the <output> element to display the results without writing any external JS -->

<form
  oninput="total.value=Number(amount.value) + (Number(amount.value) * Number(tip.value)/100)"
>
  <input type="number" id="amount" value="0" /> +
  <input type="number" id="tip" value="0" /> =
  <output name="total" for="amount tip"></output>
</form>
<!-- You can add a special <meta> tag inside of your document head to refresh the page at a set interval or to redirect users to different websites after a set delay -->

<!-- refresh after 30s -->
<meta http-equiv="refresh" content="30" />

<!-- redirect after 30s -->
<meta http-equiv="refresh" content="30;https://www.youtube.com/" />
<!-- For users who are on mobile devices, you can use the <input/> tag with a capture attribute to open the user's camera and allow them to take a photo or video to upload to your website. On desktop the default behavior of uploading files is kept -->

<!-- Opens back facing camera to take video -->
<input type="file" capture="environment" accept="video/*" />

<!-- Opens front facing camera to take photo -->
<input type="file" capture="user" accept="image/*" />
<!-- When you have lots of images in your website but you don't wanna wait a longer time for the browser to load all the images then show the content of the site you can lazy load images it will show other content of the site then slowly load images  -->

<img src="image.png" loading="lazy" alt="image" />
<!-- Disable right click for the entire website -->
<body oncontextmenu="return false"></body>

<!-- Disable right click for a specific element-->
<section oncontextmenu="return false"></section>
<!-- input suggestion -->
<input list="lists" />
<datalist id="lists">
  <option value="1"></option>
  <option value="2"></option>
  <option value="3"></option>
</datalist>
<!-- multiple image with different widths have a single scaling -->
<picture>
  <source media="{min-width:650px}" srcset="image.png" />
  <source media="{min-width:550px}" srcset="image.png" />
  <img src="image.png" style="width:auto" />
</picture>
<!-- This lets the page be rendered first and then render the images slowly -->
<img src="image.png" loading="lazy" />
<!-- This is useful where you have many anchors tag but their base url is same -->
<head>
    <base href="http://twitter.com/" target="_blank"> />
</head>
<body>
    <a href="Elon musk">
</body>
<!-- This will redirect the user to provided url in 4s and then set to 0 for an immediate redirect -->
<head>
  <meta http-equiv="refresh" content="4;URL=URL" />
</head>
<!-- Group the options -->
<select>
  <optgroup label="Fruit">
    <option>Apple</option>
    <option>Mango</option>
    <option>Banana</option>
  </optgroup>
  <optgroup label="Car">
    <option>Bugatti</option>
    <option>Lamborgini</option>
    <option>Koenigseg</option>
  </optgroup>
</select>

Useful HTML attributes you may not know

  1. Dialog/Modal

    <dialog>
  <form>
    <input type="text" />
    <button formmethod="dialog" type="submit">Cancel</button>
    <button type="submit">Submit</button>
  </form>
</dialog>
    const dialog = document.querySelector("dialog");
dialog.show(); // Opens a non-modal dialog
dialog.showModal(); // Opens a modal

dialog.addEventListener("click", (e) => {
  const dialogDimensions = dialog.getBoundingClientRect();
  if (
    e.clientX < dialogDimensions.left ||
    e.clientX > dialogDimensions.right ||
    e.clientY < dialogDimensions.top ||
    e.clientY > dialogDimensions.bottom
  ) {
    dialog.close(); // Closes the dialog
  }
});

  2. Accordion

    <details>
  <summary>Open</summary>
  <p>lorem ipsem</p>
</details>

  3. Progress bar

    <label for="prog">Download</label> <progress id="prog" value="50" max="100"></progress>

  4. Autocomplete

    <input list="lists">
 <datalist id="lists">
   <option>op1</option>
   <option>op2</option>
   <option>op3</option>
 </datalist>
</input>

  5. Popover

    <button popovertarget="pop">Open</button>
<div id="pop" popover>
  <p>lorem ipsem</p>
</div>

  6. Multiple

    <input type="file" multiple />

    The multiple attribute allows the user to enter multiple values on an input. It is a boolean attribute valid for file or email input types and the select element. For an email input, if and only if the multiple attribute is specified, the value can be a list of comma-separated email addresses. Any whitespace is removed from each address in the list. For a file input, the user can select multiple files in the as usual (holding down Shift or Crtl).

  7. Accept

    <input type="file" accept=".png, .jpg" />

    The input element has the accept attribute that allows you to specify the types of files the user can upload. You need to pass it a string containing a comma-separated list of unique file type specifiers. You can also use it to specify only audio, image, or video format.

  8. Contenteditable

    <div contenteditable="true">I'm a cool editable div ;)</div>

    contenteditable is a global attribute (common to all HTML elements) that makes the HTML content editable by the user or not. However, be careful with changes only made to visible content vs the DOM content.

  9. Spellcheck

    <p contenteditable="true" spellcheck="true">Thanks furr checkinng my speling :)</p>

    The spellcheck is another global attribute that you can use to check spelling and grammar on HTML elements such as input fields and other editable elements. Note: Typically non-editable elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the browser supports spellchecking.

  10. Translate

    <footer><p translate="no">LearnPine</p></footer>

    translate tells the browser whether the content should be translated or not. For instance, you can use it to prevent Google Translate from automatically trying to translate your company's or brand's name.

  11. Poster

    <video controls src="https://bit.ly/3nWh78w" poster="posterImage.png"></video>

    Use the poster attribute to specify an image to be shown while the video is downloading, or until the user hits the play button. If the image isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

  12. Download

    <a href="index.html" download="fileName">Download me :)</a>

    Use the download attribute combined with an a element to instruct browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. You can also specify the file name.

  13. Style

    <body>
  <style contenteditable style="display:block; white-space:pre;">
    html {
      background: #bada55;
    }
  </style>
</body>

Semantic HTML tags

  • <header> and <footer>: These elements represent the header and footer of a document or a section.
  • <nav>: This element is used for the part of the website that contains navigation links.
  • <article>: This element represents a self-contained composition in a document, like a blog post, a news story, or a forum post.
  • <section>: This element represents a standalone section of a document, which doesn’t have a more specific semantic element to represent it.
  • <aside>: This element is used for content that is indirectly related to the main content, like a sidebar or pull quotes.
  • <figure> and <figcaption>: These elements are used for representing a piece of self-contained flow content, optionally with a caption.
  • <details>: Defines additional details that the user can view or hide.
  • <summary>: Defines a visible heading for a <details> element.
  • <main>: Specifies the main content of a document.
  • <mark>: Defines marked/highlighted text.
  • <time>: Defines a date/time

Basic HTML tags

<p hidden></p>
hide the content of the element
<video poster="image.png"></video> Shown while the video isn't playing
<optgroup></optgroup>
is a great way to add a little definition between groups of options inside a select box
<acronym></acronym> is a way to define or further explain a group of words. When you hover
over text that has the acronym tag used, a box appears below with the text from the title
tag.
<wbr></wbr> Defines a word break opportunity in a long string of text.
<address></address>
Describes an address information
<article></article>
Defines an article
<aside></aside>
Describes contain set(or write) on aside place in page contain
<audio></audio> Specific audio content
<video></video> Used to embed video content.
<base /> Define a base URL for all the links with in a web page
<bb></bb> Define browser command, that command invoke as per client action
<bdo></bdo> Specific direction of text display
<blockquote></blockquote>
Specifies a long quotation
<canvas></canvas> Specifies the display graphics on HTML web document
<caption></caption>
Define a table caption
<cite></cite> Specifies a text citation
<code></code> Specifies computer code text
<command></command> Define a command button, invoke as per user action
<datalist></datalist> Define a list of pre-defined options surrounding input tag
<details></details>
Define a additional details hide or show as per user action
<embed /> Define a embedding external application using a relative plug-in
<figcaption></figcaption>
Represents a caption text corresponding with a figure element
<kbd></kbd>Used to identify text that are represents keyboard input.
<legend></legend>
Used to add a caption (title) to a group of related form elements that are grouped
together into the fieldset tag.
<map></map>Defines an clickable image map.
<mark></mark>Used to highlighted (marked) specific text.
<menu></menu> Used to display a unordered list of items/menu of commands.
<meter></meter>Used to measure data within a given range.
<param />
Provides parameters for embedded object element.
<pre></pre>
Used to represents preformatted text.
<progress></progress>Represents the progress of a task.
<samp></samp> Represents text that should be interpreted as sample output from a computer
program.
<sub></sub> Represents inline subscript text.
<sup></sup>Represents inline superscript text.
<time></time>Represents the date and/or time in an HTML document.

HTML Table Generator
HTML Marquee Generator
HTML Marquee Falling Text Code Generator

Reserved Characters in HTML

Character Decimal Entity Name Entity Description
  None Breaking Space
" " " Double Quotation mark
' ' ' Single Quotation mark
& & & ampersand
< < < less-than
> > > greater-than
# # Hass Sign
% % Percentage Sign
( ( Left Parenthesis
) ) Right Parenthesis
* * Left Parenthesis
+ + Plus Sign
- - Hyphen
/ / Slash

Copyright,Trademark and Registered Entities

Character Decimal Entity Name Entity Description
© © © Copyright Symbol
™ ™ ™ Trademark Symbol
® ® ® Registered Symbol

Currency Symbols

Character Decimal Entity Name Entity Description
¢ ¢ ¢ Cent Currency(�)
£ £ £ English Pound Currency
¤ ¤ ¤ General Currency
¥ ¥ ¥ Japanese Yen
€ € € European Euro
$ $ $ Dollar Sign
₣ ₣ ₣ Franc Sign

Quotation Mark and Apostrophe Entities

Character Decimal Entity Name Entity Description
' ‘ ‘ Left/Opening single quote
' ’ ’ Right/Closing single quote
" “ “ Left/Opening double quote
" ” ” Right/Closing double quote

Arrow Entities

Character Decimal Entity Name Entity Description
← ← Leftward Arrow
↑ ↑ Upward Arrow
→ → Rightward Arrow
↓ ↓ Downward Arrow

Suit Entities

Character Decimal Entity Name Entity Description
♠ ♠ Spade Suit
♣ ♣ Club Suit
♥ ♥ Heart Suit
♦ ♦ Diamond Suit

CSS Snippet

display selectors grid flexbox

CSS Selectors

Basic

Name CSS
Universal *{}
Type div{}
Class .className{}
Id #idName{}

Combination

Name CSS
Descendent div a {}
Direct Child div > a {}
General Sibling div ~ a {}
Adjacent sibling div + a {}
Or div, a {}
And div.c {}

Attribute

Name CSS
Has [a]
Exact [a="1"]
Begin With [a^="1"]
Ends With [a$="1"]
Substring [a*="1"]

Pseudo Element

Name CSS
Before div::before {}
After div::after {}

Pseudo Class

Name CSS
Hover button::hover {}
Focus button::focus {}
Required input::required {}
Checked input::checked {}
Disabled input::disabled {}
First Child div::first-child {}
Last Child div::last-child {}
Nth Child div::nth-child(2n) {}
Nth Last Child div::nth-last-child(3) {}
Only Child div::only-child {}
First of Type div::first-of-type {}
Last of Type div::last-of-type {}
Nth of Type div::nth-of-type(2n) {}
Nth Last of Type div::nth-last-of-type(2) {}
Only of Type div::only-of-type {}
Not div::not(span) {} 
.html {
  cursor: url("image.png"), auto; /*Set image as cursor*/
}
/* To Toggle Dark/light mode */
.html {
  filter: invert(1) hue-rotate(180deg);
}
/* List bullet-point marker change */
li::marker {
  content: "@";
  font-size: 1.2rem;
}

Scroll Snap

html {
  scroll-snap-type: y mandatory;
  /* if you have a nav that is 30px in height */
  scroll-padding-top: 30px;
}
section {
  height: 100vh;
  scroll-snap-align: start;
}

Css Nesting

.card {
  .heading {
    font-weight: bold;
    h1 {
      color: goldenrod;
    }
  }
}

Container Queries

.article {
  container-type: inline-size;
}

@container (min-width:700px) {
  .card {
    flex-direction: column;
    font-size: max(1.2rem, 1em + 2cqi);
  }
}

Mix Color

body {
  background-color: color-mix(in srgb, red 10%, blue);
}

Media Queries

body {
  background: black;
}

/* Before */
@media (min-width: 300px) and(max-width:600px) {
  body {
    background: green;
  }
}
/* Now */
@media (300px <= width <= 600px) {
  body {
    background: green;
  }
}
@media (width <= 600px) or (orientation: landscape) {
  body {
    background: white;
  }
}
.class {
  all: initial; /* Reset all properties.*/
  pointer-events: none; /* Define pointer hover or click events.*/
  perspective: 1000px; /* Define how far the object is away from the user.*/
  scroll-behavior: smooth; /*Smoothly animate scroll instead of straight jump*/
  user-select: none; /*Whether text of an element can be selected*/
  writing-mode: vertical-rl; /*Laid out of the text horizontal or vertical*/
}
.img {
  filter: drop-shadow(2px, 4px, 8px, #585858); /*Add shadow to transparent image*/
}
p {
  -webkit-line-clamp: 3; /*Limit the content of a block container to specified number of line*/
}
/* Animate hiding and showing with auto height */
.body {
  height: 0;
  transition: height 0.5s;
}
.body.show {
  height: calc-size(auto);
}
/* Starting style animation */
.box {
  background-color: red;
  height: 100px;
  width: 100px;
  transition: scale 1s;

  @starting-style {
    scale: 0;
  }
}

Tailwind CSS

<!-- Will clamp the text to max line <3> or give value -->
<div className="line-clamp-3">text</div>

<!-- Will clamp the text to max 1 line -->
<div className="truncate">text</div>
<!-- put space between children without flex box -->
<div className="divide-y-8">
  <div className="size-8"></div>
  <div className="size-8"></div>
  <div className="size-8"></div>
</div>
<!-- gradient -->
<div
  className="h-48 w-full bg-gradient-to-r from-red-500 to-green-500 via-white from-20%"
></div>
<!-- button focus rings -->
<button className="size-8 bg-red-500 ring-4 ring-green-500">Click</button>
// To style the console
console.log(
  "%c Demo status: %c loaded ",
  "background: #ddd; color: #000; padding: 4px; border-radius: 2px",
  "background: #6f6; color: #000; padding: 4px; border-radius: 2px; margin-left: 1ch",
);
// It will make the Demo status white and loaded green background

JS Snippet

Table of Contents

  1. Generate a random number in a given range
  2. Find the difference between two arrays
  3. Convert truthy/falsy to boolean(true/false)
  4. Repeat a string
  5. Check how long an operation takes
  6. Two ways to remove an item in a specific in an array
  7. Did you know you can flat an array?
  8. Get unique values in an array
  9. Copy Text to Clipboard
  10. Nested Destructuring
  11. URLSearchParams
  12. Count elements in an array
  13. Aliases with JavaScript Destructuring
  14. The Object.is() method determines whether two values are the same value
  15. Freeze an object
  16. Printing Object keys and values
  17. Capture the right click event
  18. In HTML5, you can tell the browser when to run your JavaScript code
  19. Nullish coalescing operator
  20. Optional chaining
  21. globalThis
  22. The second argument of JSON.stringify lets you cherry-pick 🍒 keys to serialize.
  23. Fire an event listener only once.
  24. Vanilla JS toggle
  25. Check if a string is a valid JSON
  26. getBoundingClientRect
  27. Check if a node is in the viewport
  28. Notify when element size is changed
  29. Date Formatter
  30. Reversing string
  31. JavaScript Performance API
  32. Array
  33. Closure
  34. Intl Formatter Docs
  35. Console Logging Methods
  36. UUID and Date
  37. Discriminating Union
  38. Hide the Source Code of a Web Page
  39. Swapping Values
  40. Copy to Clipboard
  41. Destructuring Aliases
  42. Get Value as Data Type
  43. Remove Duplicates from Array
  44. Compare Two Arrays by Value
  45. Shuffling Array
  46. Comma Operator

cheatsheet

array hoisting array asyncjs var-let-const

How to generate a random number in a given range

// Returns a random number(float) between min (inclusive) and max (exclusive)

const getRandomNumber = (min, max) => Math.random() * (max - min) + min;

getRandomNumber(2, 10);

// Returns a random number(int) between min (inclusive) and max (inclusive)

const getRandomNumberInclusive = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

getRandomNumberInclusive(2, 10);

⬆ Back to Top

How to find the difference between two arrays

const firstArr = [5, 2, 1];
const secondArr = [1, 2, 3, 4, 5];

const diff = [
  ...secondArr.filter((x) => !firstArr.includes(x)),
  ...firstArr.filter((x) => !secondArr.includes(x)),
];
console.log("diff", diff); //[3,4]

function arrayDiff(a, b) {
  return [
    ...a.filter((x) => b.indexOf(x) === -1),
    ...b.filter((x) => a.indexOf(x) === -1),
  ];
}
console.log("arrayDiff", arrayDiff(firstArr, secondArr)); //[3,4]

const difference = (a, b) => {
  const setA = new Set(a);
  const setB = new Set(b);

  return [...a.filter((x) => !setB.has(x)), ...b.filter((x) => !setA.has(x))];
};

difference(firstArr, secondArr); //[3,4]
console.log("difference", difference(firstArr, secondArr));

Convert truthy falsy to boolean

const myVar = null;
const mySecondVar = 1;

console.log(Boolean(myVar)); // false
console.log(!!myVar); // false

console.log(Boolean(mySecondVar)); // true
console.log(!!mySecondVar); // true

Repeat a string

let aliens = "";

for (let i = 0; i < 6; i++) {
  aliens += "👽";
}
//👽👽👽👽👽👽

Array(6).join("👽");
//👽👽👽👽👽👽

"👽".repeat(6);
//👽👽👽👽👽👽

⬆ Back to Top

Check how long an operation takes

//The performance.now() method returns a DOMHighResTimeStamp, measured in milliseconds.
//performance.now() is relative to page load and more precise in orders of magnitude.
//Use cases include benchmarking and other cases where a high-resolution time is required
//such as media (gaming, audio, video, //etc.)

var startTime = performance.now();
doSomething();
const endTime = performance.now();
console.log("this doSomething took " + (endTime - startTime) + " milliseconds.");

⬆ Back to Top

Two ways to remove an item in a specific in an array

//Mutating way ✔
const muatatedArray = ["a", "b", "c", "d", "e"];
muatatedArray.splice(2, 1);
console.log(muatatedArray); //['a','b','d','e']

//Non-mutating way ✔
const nonMuatatedArray = ["a", "b", "c", "d", "e"];
const newArray = nonMuatatedArray.filter((item, index) => !(index === 2));
console.log(newArray); //['a','b','d','e']

⬆ Back to Top

Did you know you can flat an array ✔

const myArray = [2, 3, [4, 5], [7, 7, [8, 9, [1, 1]]]];

myArray.flat(); // [2, 3, 4, 5 ,7,7, [8, 9, [1, 1]]]

myArray.flat(1); // [2, 3, 4, 5 ,7,7, [8, 9, [1, 1]]]

myArray.flat(2); // [2, 3, 4, 5 ,7,7, 8, 9, [1, 1]]

//if you dont know the depth of the array you can use infinity
myArray.flat(infinity); // [2, 3, 4, 5 ,7,7, 8, 9, 1, 1];

⬆ Back to Top

Get unique values in an array

const numbers = [1, 1, 3, 2, 5, 3, 4, 7, 7, 7, 8];

//Ex1
const unieqNumbers = numbers.filter((v, i, a) => {
  console.log(v);
  console.log(i);
  console.log(a);
  a.indexOf(v) === i;
});
console.log(unieqNumbers); //[1,3,2,5,4,7,8]

//Ex2
const unieqNumbers2 = Array.from(new Set(numbers));
console.log(unieqNumbers2); //[1,3,2,5,4,7,8]

//Ex3
const unieqNumbers3 = [...new Set(numbers)];
console.log(unieqNumbers3); //[1,3,2,5,4,7,8]

//EX4 lodash
const unieqNumbers4 = _.uniq(numbers);
console.log(unieqNumbers4); //[1,3,2,5,4,7,8]

⬆ Back to Top

Copy Text to Clipboard

function copyToClipboard() {
  const copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("copy");
}
//new API
function copyToClipboard() {
  navigator.clipboard.writeText(document.querySelector("#myInput").value);
}

⬆ Back to Top

Nested Destructuring ✔

const user = {
  id: 459,
  name: "JS snippets",
  age: 29,
  education: {
    degree: "Masters",
  },
};

const {
  education: { degree },
} = user;
console.log(degree); //Masters

⬆ Back to Top

URLSearchParams

//The URLSearchParams interface defines utility methods to work with the query string of a URL.

const urlParams = new URLSearchParams("?post=1234&action=edit");

console.log(urlParams.has("post")); // true
console.log(urlParams.get("action")); // "edit"
console.log(urlParams.getAll("action")); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append("active", "1")); // "?post=1234&action=edit&active=1"

⬆ Back to Top

Count elements in an array

const myFruits = ["Apple", "Orange", "Mango", "Banana", "Apple", "Apple", "Mango"];

//first option
const countMyFruits = myFruits.reduce((countFruits, fruit) => {
  countFruits[fruit] = (countFruits[fruit] || 0) + 1;
  return countFruits;
}, {});
console.log(countMyFruits);
// { Apple:3, Banana:1, Mango:2, Orange:1 }

//seconf option ✔
const fruitsCounter = {};

for (const fruit of myFruits) {
  fruitsCounter[fruit] = fruitsCounter[fruit] ? fruitsCounter[fruit] + 1 : 1;
}

console.log(fruitsCounter);
// { Apple:3, Banana:1, Mango:2, Orange:1 }

⬆ Back to Top

Aliases with JavaScript Destructuring ✔

//There are cases where you want the destructured variable to have a different name than the property name

const obj = {
  name: "JSsnippets",
};

// Grabs obj.name as { pageName }
const { name: pageName } = obj;

//log our alias
console.log(pageName); // JSsnippets

⬆ Back to Top

The Object.is() method determines whether two values are the same value

Object.is("foo", "foo"); // true

Object.is(null, null); // true

Object.is(Nan, Nan); // true 😱

const foo = { a: 1 };
const bar = { a: 1 };
Object.is(foo, foo); // true
Object.is(foo, bar); // false

⬆ Back to Top

Freeze an object ✔

const obj = {
  name: "JSsnippets",
  age: 29,
  address: {
    street: "JS",
  },
};

const frozenObject = Object.freeze(obj);

frozenObject.name = "weLoveJS"; // Uncaught TypeError

//Although, we still can change a property’s value if it’s an object:

frozenObject.address.street = "React"; // no error, new value is set

delete frozenObject.name; // Cannot delete property 'name' of #<Object>

//We can check if an object is frozen by using
Object.isFrozen(obj); //true

⬆ Back to Top

Printing Object keys and values

const obj = {
  name: "JSsnippets",
  age: 29,
};

//Object.entries() method is used to return an array consisting of enumerable property
//[key, value] pairs of the object which are passed as the parameter.

for (let [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

//expected output:
// "name: Jssnippets"
// "age: 29"
// order is not guaranteed

⬆ Back to Top

Capture the right click event

window.oncontextmenu = () => {
  console.log("right click");
  return false; // cancel default menu
};
//or

window.addEventListener(
  "contextmenu",
  () => {
    console.log("right click");
    return false; // cancel default menu
  },
  false,
);

⬆ Back to Top

In HTML5, you can tell the browser when to run your JavaScript code

//Without async or defer, browser will run your script immediately, before rendering the elements that's below your script tag.
<script src="myscript.js"></script>

//With async (asynchronous), browser will continue to load the HTML page and render it while the browser load and execute the script at the same time.
//Async is more useful when you really don't care when the script loads and nothing else that is user dependent depends upon that script loading.(for scripts likes Google analytics)
<script async src="myscript.js"></script>

//With defer, browser will run your script when the page finished parsing. (not necessary finishing downloading all image files.
<script defer src="myscript.js"></script>

⬆ Back to Top

Nullish coalescing operator

// an equality check against nullary values (e.g. null or undefined). Whenever the expression to the left of the ?? operator evaluates to either //undefined or null, the value defined to the right will be returned.

const foo = undefined ?? "default string";
console.log(foo);
// expected output: "default string"

const age = 0 ?? 30;
console.log(age);
// expected output: "0"

⬆ Back to Top

Optional chaining

const car = {};
const carColor = car.name.color;
console.log(carColor);
// error- "Uncaught TypeError: Cannot read property 'carColor' of undefined

//In JavaScript, you can first check if an object exists, and then try to get one of its properties, like this:
const carColor = car && car.name && car.name.color;
console.log(carColor);
//undefined- no error

//Now this new optional chaining operator will let us be even more fancy:

const newCarColor = car?.name?.color;
console.log(newCarColor);
//undefined- no error

//You can use this syntax today using @babel/plugin-proposal-optional-chaining

⬆ Back to Top

globalThis

Accessing the global property in JavaScript has always posed some difficulty. This is because
different platforms have different ways to access it.

Client-side JavaScript uses window or self

Node.js uses global

Web workers use self

The globalThis property provides a standard way of accessing the global 'this' value across environments. you can access the global object in a consistent manner without having to know which environment the code is being run in.

console.log(globalThis) //get the global this depends on your environment

⬆ Back to Top

The second argument of JSON.stringify lets you cherry-pick 🍒 keys to serialize.

const user = {
  id: 459,
  name: "JS snippets",
  age: 29,
  education: {
    degree: "Masters",
  },
};

JSON.stringify(user, [name, age], 2);

/*
returns

{
  "name": "JS snippets",
  "age": 29
}


*/

⬆ Back to Top

Fire an event listener only once

const el = document.getElementById("btn");

function myClickHandler() {
  console.log("this click will only fire once");
}

el.addEventListener("click", myClickHandler, {
  once: true,
});

⬆ Back to Top

Vanilla JS toggle

const span = document.querySelector("span");
let classes = span.classList;

span.addEventListener("click", function () {
  let result = classes.toggle("active");

  if (result) {
    console.log("active class was added");
  } else {
    console.log("active class was removed");
  }
});

⬆ Back to Top

Check if a string is a valid JSON

function isJson(str) {
  try {
    JSON.parse(str);
  } catch (e) {
    //the json is  not ok
    return false;
  }
  //the json is ok
  return true;
}

⬆ Back to Top

getBoundingClientRect

//getBoundingClientRect provides you with important pieces of data about an
//HTML element’s size and positioning.

const bodyBounderies = document.body.getBoundingClientRect();
// =>  {
//       top: Number,
//       left: Number,
//       right: Number,
//       bottom: Number,
//       x: Number,
//       y: Number,
//       width: Number,
//       height: Number,
//     }

⬆ Back to Top

Check if a node is in the viewport

const image = document.querySelector(".animate-me");

observer = new IntersectionObserver((entries) => {
  const [myImg] = entries;
  if (myImg.intersectionRatio > 0) {
    myImg.target.classList.add("fancy");
  } else {
    myImg.target.classList.remove("fancy");
  }
});

observer.observe(image);

⬆ Back to Top

Notify when element size is changed

const foo = document.getElementById("foo");

const observer = new ResizeObserver((entries) => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log = `Size: ${cr.width}px X ${cr.height}px`;
  }
});
observer.observe(foo);

⬆ Back to Top

Date Formatter

// Date Formatter
function formatDate(userDate) {
  // format from M/D/YYYY to YYYYMMDD
  const dateArr = userDate.split("/");
  const day = dateArr[1].length === 2 ? dateArr[1] : "0" + dateArr[1];
  const month = dateArr[0].length === 2 ? dateArr[0] : "0" + dateArr[0];
  const year = dateArr[2];
  return year + month + day;
}
console.log(formatDate("1/31/2014"));

// or

function formatDate(userDate) {
  // format from M/D/YYYY to YYYYMMDD
  console.log("Parse", Date.parse(userDate)); //Parse number
  console.log("new", typeof new Date(userDate)); //new object

  var x = new Date(userDate);
  var y = x.getFullYear().toString();
  var m = (x.getMonth() + 1).toString();
  var d = x.getDate().toString();
  d.length == 1 && (d = "0" + d);
  m.length == 1 && (m = "0" + m);
  var yyyymmdd = y + m + d;
  return yyyymmdd;
}

console.log(formatDate("12/31/2014"));

⬆ Back to Top

Reversing string

// Simply reversing the string wont give the solution.
// Get each word.
// Reverse It
// Again rejoin

var str = "This is fun, hopefully.";
// console.log(str.split("").reverse().join("").split(" ").reverse().join(" "));

console.log(
  str
    .split(" ")
    .map((el) => el.split("").reverse().join(""))
    .join(" "),
);

// with regex
String.prototype.replaceAll = function (find, replace) {
  var target = this;
  return target.replace(new RegExp(find, "g"), replace);
};
str = "ghktestlllltest-sdds";
str = str.replaceAll("test", "");
console.log(str);

// str = "ghktestlllltest-sdds"
// str = str.replace(/test/g, '');
// alert(str)

JavaScript Performance API

The Performance API is designed to help developers locate and solve performance problems and optimize page loading speed and user experience. It can be used in the following scenarios:
- Web Page Performance Monitoring
- Performance Optimization
- User Experience Analysis
- Performance Benchmarking

  • Get Page Load Time:

    const loadTime =
  window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
console.log(`Page load time: ${loadTime}ms`);

  • Measuring Resource Load Time:

    const resourceTiming = window.performance.getEntriesByType("resource");
resourceTiming.forEach((resource) => {
  console.log(`${resource.name} load time: ${resource.duration}ms`);
});

  • Monitor User Interaction Latency:

    const interactionStart = Date.now();
document.addEventListener("click", () => {
  const interactionEnd = Date.now();
  const interactionDelay = interactionEnd - interactionStart;
  console.log(`User click delay:${interactionDelay}ms`);
});

  • Page Load Time Monitoring and Optimization:

    // Monitoring page load time
const loadTime =
  window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
console.log(`Page load time: ${loadTime}ms`);

// Monitor resource load time
const resourceTiming = window.performance.getEntriesByType("resource");
resourceTiming.forEach((resource) => {
  console.log(`${resource.name} load time: ${resource.duration}ms`);
});

  • Resource loading performance analysis:

    // Monitor the load time of a critical resource
const keyResources = [
  "https://example.com/css/style.css",
  "https://example.com/js/main.js",
];
keyResources.forEach((resource) => {
  const resourceEntry = window.performance.getEntriesByName(resource)[0];
  console.log(`${resource} load time: ${resourceEntry.duration}ms`);
});

  • User interaction latency monitoring:

    // Monitor user click latency
const interactionStart = Date.now();
document.addEventListener("click", () => {
  const interactionEnd = Date.now();
  const interactionDelay = interactionEnd - interactionStart;
  console.log(`User click delay: ${interactionDelay}ms`);
});

  • Page Animation Performance Monitoring:

    // Monitoring animation performance
function measureAnimationPerformance() {
  const animationStart = performance.now();
  // Execute animation operations
  requestAnimationFrame(() => {
    const animationEnd = performance.now();
    const animationDuration = animationEnd - animationStart;
    console.log(`Animation execution time: ${animationDuration}ms`);
  });
}

measureAnimationPerformance();

  • :

    const loadTime =
  window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
console.log(`Page load time: ${loadTime}ms`);

    ⬆ Back to Top

Array

Common Functional Array Methods:

  • map(callback):
    • Creates a new array by applying a function to each element of the original array.
    • Example: const doubledNumbers = numbers.map(number => number * 2);
  • filter(callback):
    • Creates a new array containing elements that pass a certain test.
    • Example: const evenNumbers = numbers.filter(number => number % 2 === 0);
  • reduce(callback, initialValue):
    • Reduces an array to a single value by applying a function to each element and accumulating a result.
    • Example: const sum = numbers.reduce((accumulator, number) => accumulator + number, 0);
  • forEach(callback):
    • Executes a function for each element of an array, but doesn't create a new array.
    • Example: numbers.forEach(number => console.log(number));
  • find(callback):
    • Returns the first element in an array that satisfies a test.
    • Example: const firstEvenNumber = numbers.find(number => number % 2 === 0);
  • some(callback):
    • Tests whether at least one element in an array passes a test.
    • Example: const hasEvenNumber = numbers.some(number => number % 2 === 0);
  • every(callback):
    • Tests whether all elements in an array pass a test.
    • Example: const allEvenNumbers = numbers.every(number => number % 2 === 0);

Key Advantages:

  • Concise and expressive: Functional array methods often lead to more concise and readable code compared to traditional loops.
  • Chainable: Array methods can be chained together to create complex operations in a fluent style.
  • Pure and predictable: Functional approaches often emphasize pure functions and immutability, promoting easier testing and reasoning about code.
  • Performance optimizations: Some functional array methods can be optimized by JavaScript engines for better performance.

In essence, functional array functions provide a powerful and elegant way to manipulate and process arrays in JavaScript, leading to cleaner, more maintainable, and potentially more performant code.

// Last element
arr.at(-1);
// 2nd last element
arr.at(-2);

⬆ Back to Top

Closure

A function that has access to variables in its outer (enclosing) function's scope, even after the outer function has returned. Closures can have multiple nested functions, creating closures within closures. This allows for even more encapsulation and control over data access.

function createCounter() {
  let count = 0; // Outer scope variable

  return function () {
    // Inner function (closure)
    count++;
    return count;
  };
}

const counter1 = createCounter();
const counter2 = createCounter();

console.log(counter1()); // Output: 1
console.log(counter2()); // Output: 1 (separate count for each closure)
console.log(counter1()); // Output: 2
console.log(counter2()); // Output: 2

⬆ Back to Top

Intl Formatter Docs

  • Date Time

    const formatter = new Intl.DateTimeFormat("en-US");
console.log(formatter.format(new Date()));

  • Relative Time Format

    const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
console.log(formatter.format(1, "day");

    ⬆ Back to Top

  • Number Format

    const currencyFormatter = new Intl.NumberFormat(undefined, {
  currency: "USD",
  style: "currency",
});
const unitFormatter = new Intl.NumberFormat(undefined, {
  unit: "liter",
  style: "unit",
  unitDisplay: "long",
});
const numberFormatter = new Intl.NumberFormat(undefined, { notation: "compact" });
const fractionFormatter = new Intl.NumberFormat(undefined, {
  maximumFractionDigits: 2,
  minimumFractionDigits: 1,
});
console.log(currencyFormatter.format(15412154));

    ⬆ Back to Top

Console Logging Methods

  • To print array as a table

    const users = [
  { name: "a", age: 25 },
  { name: "b", age: 26 },
];
console.table(users);

  • To print How much Time it take

    console.time("Loop");
for (let i = 0; i < 100000; i++) {
  //
}
console.timeEnd("Loop");

    ⬆ Back to Top

UUID and Date

  • JS Built in uuid generator API

    console.log(crypto.randomUUID());

  • Get time difference between dates in hour

    const today = new Date();
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
const timeDiff = today.getTime() - yesterday.getTime();
const diffInMs = Math.abs(timeDiff);
const diffInMinutes = Math.floor(diffInMs / (1000 * 60 * 60));

    ⬆ Back to Top

Discriminating Union

// Discriminating Union
type LoadingState = {
  state: "Loading";
};
type SuccessState = {
  state: "Success";
  data: { id: string; name: string };
};
type ErrorState = {
  state: "Error";
  error: { message: string };
};
type CurrentState = LoadingState | SuccessState | ErrorState;
function print(loc: CurrentState) {
  switch (location.state) {
    case "Loading":
      console.log(location.state);
      break;
    case "Success":
      console.log(location.data.name);
      break;
    case "Error":
      console.log(location.error.message);
      break;
    default:
      break;
  }
}

⬆ Back to Top

Hide Source Code

<script>
document.addEventListener("contextmenu", e => e.preventDefault(), false);

document.addEventListener("keydown", e => {
  // DISABLE CONTROL AND ALL FUNCTION KEYS
  // if (e.ctrlKey || (e.keyCode>=112 && e.keyCode<=123)) {
  // DISABLE CONTROL AND F12
  if (e.ctrlKey || e.keyCode==123) {
    e.stopPropagation();
    e.preventDefault();
  }
});
</script>

⬆ Back to Top

Swapping Values

let array = [1, 2, 3, 4, 5];
[array[0], array[4]] = [array[4], array[0]];

⬆ Back to Top

Copy to Clipboard

function copyToClipBoard(str) {
  const element = document.createElement("textarea");
  element.value = str;
  document.body.appendChild(element);
  element.select();
  document.execCommand("copy");
  document.body.removeChild(element);
}

function handleClick() {
  let text = document.querySelector("#text");
  copyToClipBoard(text.innerText);
}

⬆ Back to Top

Destructuring Aliases

const language = {
  name: "JavaScript",
  founded: 1995,
  founder: "Brendan Eich",
};

const { name: languageName, founder: creatorName } = language;
console.log(languageName, creatorName); // Output: JavaScript Brendan Eich

⬆ Back to Top

Get Value as Data Type

const element = document.querySelector("#number").valueAsNumber;
console.log(typeof element); // Output: number

⬆ Back to Top

Remove Duplicates from Array

const array = [1, 2, 2, 2, 3, 5, 6, 5];
console.log([...new Set(array)]); // Output: [1, 2, 3, 5, 6]

⬆ Back to Top

Compare Two Arrays by Value

const hasSameElements = (a, b) => {
  return a.length === b.length && a.every((v, i) => v === b[i]);
};

console.log(hasSameElements([1, 2], [1, 2])); // Output: true
console.log(hasSameElements([1, 2], [2, 1])); // Output: false

⬆ Back to Top

Shuffling Array

const numbers = [1, 2, 3, 4, 5, 6];
console.log(numbers.sort(() => Math.random() - 0.5)); // Output: [3, 5, 1, 6, 4, 2] (example, output may vary)

⬆ Back to Top

Comma Operator

let x = 1;
x = (x++, x);
console.log(x); // Output: 2

let y = (2, 3);
console.log(y); // Output: 3

let a = [[1, 2, 3, 4], [3, 4, 5], [5, 6], [7]];
for (let i = 0, j = 3; i <= 3; i++, j--) {
  console.log("a[" + i + "][" + j + "] = " + a[i][j]);
  // Output:
  // a[0][3] = 4
  // a[1][2] = 5
  // a[2][1] = 6
  // a[3][0] = 7
}

⬆ Back to Top

Backend

ASP.NET

CSharp

Polymorphism

  • Method Overriding: Method overriding allows a derived class with override to provide a specific implementation of a method that is already defined in its base class with virtual. This enables you to invoke the method on objects of the derived class through a reference to the base class, and the overridden method will be executed based on the actual type of the object at runtime.

    Preventing Derived class from overriding virtual members For example, if class X has the virtual method "A," class Y is derived from X, and class Z "s "is derived from Y, class Z inherits the virtual method "A" and overrides it with sealed.

  • Method Overloading: Method overloading allows you to define multiple methods with the same name but with different parameter lists. This enables you to provide different implementations of a method based on the number or types of parameters passed to it.

Encapsulation

  • Access Modifiers:

    • public: The member is accessible from any code in the same assembly or referencing assembly.
    • private: The member is accessible only within the same class or struct.
    • protected: The member is accessible within the same class or subclass (derived class).
    • internal: The member is accessible within the same assembly.
    • protected internal: The member is accessible within the same assembly or from within a derived class located in any assembly.

Class types

  • Abstract Class: An abstract class is designed to be a base class for other classes. It cannot be instantiated on its own (i.e. that cannot create an object). It allows you to define common functionality in the base class that can be shared by its derived classes. Can have none abstract in the body.
  • Static Class: Can not create object of static class. In this type of class all methods, variables etc should be static. Static class can be access globally. Use for any Math operations, file manipulation, string manipulation, Configuration etc.
  • Interface: An interface in C# is a contract that defines a set of method and property signatures. It outlines a common set of behaviors that classes must implement, promoting code consistency, polymorphism, and flexibility in software design.

Abstract Class vs Interface

Abstract classes can contain abstract methods, which are methods without implementation also contain non-abstract methods. Abstract methods must be implemented in any non-abstract derived class. Non-abstract methods can have implementations and will be inherited by derived classes.

An interface in is a contract that defines a set of methods, properties, and events that a class must implement. Interfaces are similar to abstract classes in that they cannot be directly instantiated. They are used to define a behavior that can be implemented by multiple unrelated classes.

  • Abstract classes can contain implemented methods, while interfaces only contain method signatures.
  • Classes can implement multiple interfaces, but they can inherit from only one abstract class.
  • Abstract classes can have constructors, while interfaces cannot.
  • Abstract classes can have fields and properties, while interfaces can only have properties.
  • Abstract classes are typically used for creating a base class for other classes to inherit from, while interfaces are used for defining a contract that classes must implement.

Entity Framework

EF Core ALL Relationships

  • 1:1

    Lets say we have two Model Character and Weapon. A Character can only equip one weapon and one weapon can only be equipped by a Character. So, it's a one-to-one relationship.

    Both Model will have references to each other but the one that can't exist without the other Model will have Id references of the other Model.

    Here a Character can exist without a Weapon but the Weapon only exist because theres a Character to equip it so, weapon have one more variable CharacterId.

    If it was other way then there would be one more variable in Character Model as WeaponId and CharacterId from weapons Model will be removed.

    // Character can exist without a weapon
public class Character
{
    public Guid Id { get; set; }
    public Weapon Weapon { get; set; }
}

// weapon cant exist without a character
public class Weapon
{
    public Guid Id { get; set; }
    public Character Character { get; set; }
    public Guid CharacterId { get; set; }
}

  • 1:n

    Lets say we have two Model User and Character. A User can have many Characters but a Character can only have one User. So, it's a one-to-many relationship.

    Since it's a one-to-many relationship then User will have list reference of Character and Character will have only one User reference and UserId.

    // 1 user can have many characters
public class User
{
    public Guid Id { get; set; }
    List<Character> Characters { get; set; }
}

// character has only one user
public class Character
{
    public Guid Id { get; set; }
    public User User { get; set; }
    public Guid UserId { get; set; }
}

  • n:n

    Lets say we have two Model Character and Skill. A Character can have many Skills and a Skill can have be used by many Characters. So, it's a many-to-many relationship. So both Model will have list references of each other.

    public class Character
{
    public Guid Id { get; set; }
    public List<Skill> Skills { get; set; }
}

public class Skill
{
    public Guid Id { get; set; }
    public List<Character> Characters { get; set; }
}

Configuration

Rate Limiter

// program.cs
builder.Services
    .AddRateLimiter(o =>
    o.AddFixedWindowLimiter(policyName: "fixed",
    options =>
    {
        options.PermitLimit = 10;
        options.Window = TimeSpan.FromSeconds(5);
        options.QueueLimit = 2;
    }));

app.UseRateLimiter();

// WeatherController.cs
[EnableRateLimiting("fixed")]
public class WeatherController: Controller
{
    // HTTP Methods
}

Library List

Links

MongoDb

Install

$ npm i mongoose

Connect

import mongoose from "mongoose";

const connectionString = "string from mongodb atlas";

mongoose.connect(connectionString, {
  useNewUrlParser: true,
  useCreateIndex: true,
  useFindAndModify: false,
  useUnifiedTopology: true,
});

Defining a schema

const userSchema = new mongoose.Schema({
  fullName: {
    type: String,
    maxlength: 20,
    required: [true, "Name cant be Empty"],
  },
  phone: Number,
  verified: { type: Boolean, default: false },
});
SchemaTypes
  • String
  • Number
  • Date
  • Buffer
  • Boolean
  • Mixed
  • ObjectId
  • Array

For more SchemaTypes

Query

all query

A model is a constructor compiled from a schema. Model instances represent a collection of documents.

Create a model
const User = mongoose.model("User", userSchema);

const u = User.create({ fullName: "Name", phone: 0123456789, verified: true });

const u = User.insert({ fullName: "Name", phone: 0123456789, verified: true });
$find all
User.find({});
$find by name
User.find({ fullName: "Name" });
$find by multiple values
User.find({ fullName: "Name", id: "123" });
$find one by id
User.findOne({ _id: id });
$update one by id
User.findOneAndUpdate({ _id: id }, updateData, {
  new: true,
  runValidators: true,
  overwrite: true, // it will remove all the old data without default values and add the new data under the id
});
$delete one by id
User.findOneAndDelete({ _id: id });
$delete one by id
User.findByIdAndRemove(id);

SQL