

## Version Control System {#Version-Control-System}

![What is VCS](/BL-1001/vcs.png)


A version control system (VCS) is a software tool that helps developers manage changes to their code over time. When working on a project, it's common for multiple developers to be making changes to the same codebase, and it can be difficult to keep track of who made what changes, when those changes were made, and why they were made. 

The most popular VCS is Git, which was created by Linus Torvalds in 2005. Git works by tracking changes to files in a repository (a collection of files and directories), and creating a history of those changes. Each time a developer makes a change to a file, Git creates a new version of the file and records information about the change, such as who made the change, when it was made, and what was changed. This information is stored in a "commit", which is like a snapshot of the code at a specific point in time.


## What is git? {#What-is-git}

Git is a tool used to keep track of changes made to files and projects over time. It is commonly used by programmers to keep track of changes to code, but it can also be used for any type of files.

Git also makes it easy to collaborate with others on the same project. Everyone can work on their own version of the project and then merge their changes together to create a final version.

Git is often used in combination with online platforms like GitHub or GitLab, where you can store your code and collaborate with others. These platforms make it easy to share your work with others, keep track of changes, and work on projects with people from around the world.

## What Is GitHub? {#What-Is-GitHub}

GitHub is a cloud-based hosting service that lets us manage Git repositories. It’s an online database that allows you to keep track of and share your Git version control projects outside of your local computer.
Other Git repository hosting services also exist: Eg:- GitLab, BitBucket, and SourceForge

GitHub just takes things a little bit further than Git, offering more functionality and resources, as well as a place online to store and collaborate on projects. And because GitHub is cloud-based, an individual’s Git repositories can be remotely accessed by any authorized person, from any computer, anywhere in the world.

Through GitHub, one can share code with others, giving them the power to make revisions or edits on your various Git branches. This makes it possible for entire teams to coordinate together on single projects in real-time. As changes are introduced, new branches are created, allowing the team to continue to revise the code without overwriting each other's work.

## Conclusion {#Conclusion}

![Diffrence between git and github](/BL-1001/gitVsGithub.webp)

## Why Use a Version Control System? {#Why-Use-a-Version-Control-System}

- Collaboration
- Storing Versions
- Restoring Previous Versions


Understanding the  difference between Git and Github with examples and their main use cases

An Introduction to Git and Github


## Client Side Rendering {#Client-Side-Rendering}

![Client Side Rendering](/BL-1002/csr.png)

When we talk about client-side rendering,it’s about rendering content in the browser using JavaScript.

So instead of getting all the content from the HTML document itself, a simple HTML document with a JavaScript file in initial loading itself is received, which renders the rest of the site using the browser.

With client-side rendering, the initial page load is naturally a bit slow. However, after that, every subsequent page load is very fast. In this approach, communication with server happens only for getting the run-time data. Moreover, there is no need to reload the entire UI after every call to the server. The client-side framework manages to update UI with changed data by re-rendering only that particular DOM element.

## Server Side Rendering {#Server-Side-Rendering}

![Server Side Rendering](/BL-1002/ssr.png)

In server-side rendering when a user makes a request to a webpage, the server prepares an HTML page by fetching user-specific data and sends it to the user’s machine over the internet. Webpages are generated on your server for every request. This entire process of fetching data from the database, creating an HTML page and serve it to user is known as SSR.

## Static Site Generation {#Static-Site-Generation}

At build time, your app will fetch all the data required and compile it down to static webpages. After a production build is created, every request is going to reuse that statically generated HTML file. This provides the best performance and can easily be cached on a CDN.

## Problems with React.js {#Problems-with-React.js}

React uses Client Side Rendering. With React, nothing gets displayed until all of your JavaScript loads. Your HTML is nearly empty and React injects your content in your HTML with JavaScript.
This leads multiple problems:-

- When the browser is loading the JavaScript, the screen is blank because `<div id="root"></div>` does not show anything. Depending on the size of your JavaScript bundle, this could lead to your visitors staring at a white screen for a couple of seconds.

- Most SEO crawlers do not have JavaScript enabled. DuckDuckGo, Google, Bing and any other search engine would not actually know what is on your website since it requires JavaScript to display the content. You will not be ranked at all on Search Engines.

## Methods for Prerendering using Next.js {#Methods-for-Prerendering-using-Next.js}

Next.js offers `(Server Side Rendering)SSR` and `(Static Site Generation)SSG` using `getStaticProps` and `getServerSideProps`.

### getStaticProps {#getStaticProps}

getStaticProps is a server-side function that will only be called at build time. The build will then use the response from getStaticProps to generate a static webpage.

Since stale data is a problem with static generated pages, there is an option you can set to revalidate your static page and rebuild it if data changes. revalidate: 60 will check your data every 60 seconds and rebuild the page if needed.

Example Use:

```
// This function gets called at build time on server-side.
export async function getStaticProps() {
const res = await fetch('https://.../data');
const data = await res.json();

// By returning { props: data }, the Dashboard component
// will receive `data` as a prop at build time
return {
props: {
data
},
// Check if data changes every 60 seconds.
// Rebuild page if different
revalidate: 60
};
}

// data will be populated at build time by getStaticProps()
export default function Dashboard({ data }) {
return <div>{data}</div>;
}
```

### getServerSideProps {#getServerSideProps}

getServerSideProps is similar to getStaticProps but is called every time the page loads instead of at build time. This ensures that all of your initial data is up to date on every load.

Since this is called on every load, you do not need to revalidate like getStaticProps. This also leads to a slower load time since you are no longer serving a static file, but have to rebuild on every load.

Example Use:

```
// This function gets called at build time on server-side.
export async function getServerSideProps() {
const res = await fetch('https://.../data');
const data = await res.json();

// By returning { props: data }, the Dashboard component
// will receive `data` as a prop at build time
return {
props: {
data
}
};
}

// data will be populated at build time by getServerSideProps()
export default function Dashboard({ data }) {
return <div>{data}</div>;
}
```

## Benefits of using Next.js {#Benefits-of-using-Next.js}

- Search engines can crawl the site for better SEO.
- The initial page load is faster.
  ![nextjs pros and cons](/BL-1002/nextjs-pros-and-cons.png)

**References:**

- <a href="https://nextjs.org/docs/getting-started" target="_blank">Next.js</a>


Difference between different types of rendering techniques and advantage of Next.js over React.js.

Client Vs Server Side Rendering

# Intro to React Concepts

## Main Concepts {#main-concepts}

## Hello World

The smallest React example looks like this 

```jsx
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
```

It displays a heading saying “Hello, world!” on the page.

Try it out on [Codepen](https://codepen.io/gaearon/pen/MjrdWg?editors=1010)

## JSX

Consider this variable declaration:

```jsx
const element = <h1>Hello, world!</h1>;
```

This syntax is neither a string or HTML

It is called JSX, and it is a syntax extension to JavaScript. It is recommended to use with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React “elements”. We will explore rendering them to the DOM in the [next section](https://reactjs.org/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.****

************************Why use JSX?************************

In React, the way a component is rendered is inherently coupled with other aspects of the UI, such as how events are handled, how the component's state changes over time, and how the data is prepared for display. This is because React is designed to be a component-based library, where components are the building blocks of the UI.

React components are responsible for rendering a piece of the UI, and they can be composed together to create more complex UIs. A component's rendering logic is often coupled with how the component handles events, such as when the user clicks a button or enters text into a form. In React, event handling is typically done using `props` (properties), which are passed to the component from its parent component.

Instead of artificially separating *technologies* by putting markup and logic in separate files, React [separates *concerns](https://en.wikipedia.org/wiki/Separation_of_concerns)* with loosely coupled units called “components” that contain both. React [doesn’t require](https://reactjs.org/docs/react-without-jsx.html) using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

**************************Some Examples**************************

In this example, we declare a variable called `id` and then use it inside JSX by using curly braces and reference 

```jsx
const id = '13245245';
const element = <h1>Hello, {name}</h1>;
```

You can put any valid [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) inside the curly braces in JSX.

In this example, we import **`React`** and **`useState`** from the **`react`** library, and define a function component called **`App`**.

```jsx
import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState(['item 1', 'item 2', 'item 3']);
  const [showItems, setShowItems] = useState(true);

  const handleButtonClick = () => {
    setShowItems(!showItems);
  };

  return (
    <div>
      <h1>List of Items</h1>
      <button onClick={handleButtonClick}>
        {showItems ? 'Hide Items' : 'Show Items'}
      </button>
      {showItems && (
        <ul>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;
```

Inside the **`App`** function, we use the **`useState`** hook to define two state variables: **`items`** and **`showItems`**. The **`items`** variable is an array of strings that represents the list of items to be displayed, and **`showItems`** is a boolean variable that represents whether the list should be displayed or hidden.

Next, we define a **`handleButtonClick`** function that toggles the **`showItems`** variable when the button is clicked.

In the **`return`** statement, we use JSX to define the UI elements. We display the title of the list, a button to show or hide the list, and conditional rendering of the list itself. If **`showItems`** is true, we render a **`<ul>`** element with each item in the **`items`** array displayed as an **`<li>`** element. We use the **`map()`** function to iterate over the **`items`** array and generate a list of **`<li>`** elements.

Finally, we return the JSX code as the output of the **`App`** component.

When this code is rendered in a React application, it will display a title, a button, and a list of items. Clicking on the button will toggle the display of the list.

## Rendering Elements

Elements are the smallest building blocks of React apps, 

An element describes what you want to see on the screen 

```jsx
const element = <h1>Hello, world</h1>;
```

Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.

<aside>
💡 One might confuse elements with a more widely known concept of “components”. Elements are what components are “made of”, and we encourage you to read this section before jumping ahead.****

</aside>

**Rendering an Element into the DOM**

Let’s say there is a `<div>` somewhere in your HTML file:

```jsx
<div id="root"></div>
```

We call this a “root” DOM node because everything inside it will be managed by React DOM.

Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.

To render a React element, first pass the DOM element to `[ReactDOM.createRoot()](https://reactjs.org/docs/react-dom-client.html#createroot)`, then pass the React element to `root.render()`:

```jsx
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);
```

## Components

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. You can find a [detailed component API reference here](https://reactjs.org/docs/react-component.html).

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.****

### **Function and Class Components**

The simplest way to define a component is to write a JavaScript function:

```jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
```

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.

You can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component:

```jsx
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
```

The above two components are equivalent from React’s point of view.

### Rendering a Component

When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.

For example, this code renders “Hello, Sara” on the page:

```jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);
```

Let’s recap what happens in this example:

1. We call `root.render()` with the `<Welcome name="Sara" />` element.
2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.

## Conditional Rendering

In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.

Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like `[if](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)` or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.

Consider these two components:

```jsx
function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}
```

We’ll create a `Greeting` component that displays either of these components depending on whether a user is logged in:

```jsx
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);
```

This example renders a different greeting depending on the value of `isLoggedIn` prop.****

### Element Variables

You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn’t change.

Consider these two new components representing Logout and Login buttons:

```jsx
function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}
```

In the example below, we will create a [stateful component](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`.

It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:

```jsx
class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);
```

While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.****

## Lists

First, let’s review how you transform lists in JavaScript.

Given the code below, we use the `[map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)` function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:

```jsx
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
```

This code logs `[2, 4, 6, 8, 10]` to the console.

In React, transforming arrays into lists of [elements](https://reactjs.org/docs/rendering-elements.html) is nearly identical.

### Rendering Multiple Components

You can build collections of elements and [include them in JSX](https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.

Below, we loop through the `numbers` array using the JavaScript `[map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)` function. We return a `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`:

```jsx
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);
```

Then, we can include the entire `listItems` array inside a `<ul>` element:

`<ul>{listItems}</ul>`

# Composition vs Inheritance

React has a powerful composition model, and it is recommendex using composition instead of inheritance to reuse code between components.

### Containment

Some components don’t know their children ahead of time. This is especially common for components like `Sidebar` or `Dialog` that represent generic “boxes”.

We recommend that such components use the special `children` prop to pass children elements directly into their output:

```jsx
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}
```

This lets other components pass arbitrary children to them by nesting the JSX:

```jsx
function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}
```

Anything inside the `<FancyBorder>` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `<div>`, the passed elements appear in the final output.

While this is less common, sometimes you might need multiple “holes” in a component. In such cases you may come up with your own convention instead of using `children`:

```jsx
function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}
```

React elements like `<Contacts />` and `<Chat />` are just objects, so you can pass them as props like any other data. This approach may remind you of “slots” in other libraries but there are no limitations on what you can pass as props in React.

### Specialization

Sometimes we think about components as being “special cases” of other components. For example, we might say that a `WelcomeDialog` is a special case of `Dialog`.

In React, this is also achieved by composition, where a more “specific” component renders a more “generic” one and configures it with props:

```jsx
function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}
```

Composition works equally well for components defined as classes:

```jsx
function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}
```

# More Content

You can check out the new React Documentation [here](https://beta.reactjs.org/)


Learning some of the fundamental concepts of React.js

Introduction to React.js Concepts


Welcome to this blog post about storage metrics! In this post, we'll be discussing two important measurements in the world of storage: IOPS and throughput. By understanding the differences between these two metrics, you can gain a better understanding of how your storage system is performing. We'll also touch on a third important metric, latency, and how it factors into storage performance.



## IOPS {#IOPS}

Input Output operations per second

IOPS are storage measurement of the number of I/O operations per second. IOPS is frequently referenced by storage vendors to characterize performance in solid-state drives (SSD), hard disk drives (HDD) and storage area networks. However, an IOPS number is not an actual benchmark, and numbers promoted by vendors may not correspond to real-world performance.

![IOPS](/BL-1004/IOPS.png)



## Throughput {#Throughput}

Throguhput measures how many units of information a system can process in a period of time. Large files are read from beginning to end and hence throughput operations are measured in Mega Byte per second (MB/s). This storage metric describes the amount of data able to flow through a point in the data path over a given time. Throughput is typically the best storage metric when measuring data that needs to be streamed rapidly, such as images and video files.



## IOPS vs Throughput {#IOPS-vs-Throughput}

To summarize the difference in throughput vs. IOPS, IOPS is a count of the read/write operations per second, but throughput is the actual measurement of read/write bits per second that are transferred over a network. 

Here is a good example I found on [stack overflow](https://stackoverflow.com/questions/15759571/iops-versus-throughput) going over the key differences between the two, 

Think of it as:

You have 4 buckets (Disk blocks) of the same size that you want to fill or empty with water.

You'll be using a jug to transfer the water into the buckets. Now your question will be:

At a given time (per second), how many jugs of water can you pour (write) or withdraw (read)? This is IOPS.

At a given time (per second) what's the amount (bit, kb, mb, etc) of water the jug can transfer into/out of the bucket continuously? This is throughput.

Additionally, there is a delay in the process of you pouring and/or withdrawing the water. This is Latency.

There's 3 things to consider when talking about IOPS and Throughput:

Size (file size/block size)
Patterns (Random/Sequential)
Mix (Read/Write) percentage




## Latency {#Latency}
Latency is the time between request to storage and the response received. Once this process is completed, latency also includes the time it takes find the required data blocks and to prepare to transfer data.

Latency is measured in units of time. 

With regards to IOPS, latency is a measure of the length of time it takes for a single I/O request to be completed from the application's point of view.

While not providing a complete picture, combining latency, IOPS and throughput measurements can help gauge performance.


Going over the key differences and similarities of IOPS and throughput with examples

IOPS vs Throughput vs Latency



## Introduction to JavaScript {#Introduction-to-JavaScript}

JavaScript is a popular programming language that is used to create interactive and dynamic web pages. It was first created in 1995 by Brendan Eich, and has since become one of the most widely used programming languages on the web.

## What is JavaScript {#What-is-JavaScript}

JavaScript is a client-side scripting language, meaning that it is executed in the user's web browser. It is used to add interactivity to web pages, such as validating forms, creating animations, and updating content without requiring a page refresh.

JavaScript is a high-level, dynamic, and interpreted language, which means that it is easy to read and write, can be executed without compilation, and is capable of handling a variety of data types.

## Getting Started with JavaScript {#Getting-Started-with-JavaScript}
Here's an example of a simple JavaScript program:

```javascript
// Define a variable and assign it a value
let message = "Hello, world!";

// Display the value of the variable in the console
console.log(message);

```

## Basic JavaScript Concepts {#Basic-JavaScript-Concepts}

Here are some basic concepts that you should learn when getting started with JavaScript:

**Variables**: Learn how to declare and assign values to variables. Variables are used to store data.

**Data types**: JavaScript has several built-in data types, including strings, numbers, booleans, and objects. Learn how to use each data type and how to convert between them.

**Operators**: Learn about arithmetic, comparison, and logical operators. These are used to perform calculations and make decisions in your code.

**Control structures**: Learn how to use conditional statements (if/else) and loops (for/while) to control the flow of your code.

**Functions**: Learn how to define and call functions. Functions are reusable blocks of code that can perform specific tasks.

## Examples {#Examples}

### Variables
```javascript
let name = "John";
let age = 30;
let isMarried = true;
```
In this example, we've created three variables: name, age, and isMarried. name is a string, age is a number, and isMarried is a boolean.


### Array
Arrays are used to store multiple values in JavaScript. Here's an example:

```javascript
let numbers = [1, 2, 3, 4, 5];

console.log(numbers[2]); // Output: 3
```

### Control Structures
Control structures are used to control the flow of your code in JavaScript. Here are some examples:


#### If/Else Statements 
```javascript
let age = 25;

if (age < 18) {
  console.log("You are not old enough to vote.");
} else {
  console.log("You are old enough to vote.");
}
```
In this example, the if statement checks if the age variable is less than 18. If it is, it displays a message saying the user is not old enough to vote. If not, it displays a message saying the user is old enough to vote.



#### For Loops
```javascript
for (let i = 0; i < 10; i++) {
  console.log(i);
}

```
In this example, the for loop counts from 0 to 9 and logs each number to the console.


#### While Loops
```javascript
let i = 0;

while (i < 10) {
  console.log(i);
  i++;
}
```
In this example, the while loop counts from 0 to 9 and logs each number to the console.


### Functions
Functions are reusable blocks of code that perform a specific task. Here's an example:

```javascript
function addNumbers(num1, num2) {
  return num1 + num2;
}

let result = addNumbers(5, 10);

console.log(result); // Output: 15
```
In this example, we've created a function called addNumbers that takes two parameters, num1 and num2, and returns their sum. We've then called the function with the values 5 and 10, and stored the result in a variable called result. Finally, we've printed the result to the console.



If you want to learn more about JavaScript, there are many great resources available online, including tutorials, videos, and courses. You can also check out the official JavaScript documentation for a comprehensive guide to the language.


## Conclusion {#Conclusion}
These are just some of the basic JavaScript concepts that every beginner should learn. 

If you want to learn more about JavaScript, there are many great resources available online, including tutorials, videos, and courses. You can also check out the official JavaScript documentation for a comprehensive guide to the language.

Check out some of these sources 

|[Javascript MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript)|
|[Tutorial](https://javascript.info/)|
|[Wes Bos 30 Day Challenge](https://github.com/wesbos/JavaScript30)|


Learning some of the fundamental concepts of Javascript and questions asked in javascript interview.

Introduction to JavaScript


Browser JavaScript execution flow, as well as in Node.js, is based on an event loop. The event loop concept is very simple. There’s an endless loop, where the JavaScript engine waits for tasks, executes them, and then sleeps, waiting for more tasks.

`The event loop is the secret behind JavaScript’s asynchronous programming.`

## Event Loop Visualisation/Basic Architecture {#Event-Loop-VisualisationBasic-Architecture}

![Event Loop](/BL-1008/eventloop.png)

### Memory Heap {#Memory-Heap}

This is where all the memory allocation happens for your variables, that you have defined in your program.

### Call Stack {#Call-Stack}

This represents the single thread provided for JavaScript code execution. This is where all your javascript code gets pushed and executed one by one as the interpreter reads your program, and gets popped out once the execution is done. It is responsible for keeping track of all the operations in line to be executed. Whenever a function is finished, it is popped from the stack.

### Browser or Web APIs {#Browser-or-Web-APIs}

They are built into your web browser and are able to expose data from the browser and surrounding computer environment and do useful complex things with it. They are not part of the JavaScript language itself, rather they are built on top of the core JavaScript language, providing you with extra superpowers to use in your JavaScript code.

For example, the Geolocation API provides some simple JavaScript constructs for retrieving location data so you can say, plot your location on a Google Map. In the background, the browser is actually using some complex lower-level code (e.g. C++) to communicate with the device’s GPS hardware (or whatever is available to determine position data), retrieve position data, and return it to the browser environment to use in your code. But again, this complexity is abstracted away from you by the API.

**Common browser APIs**

- APIs for manipulating documents
- APIs that fetch data from the server
- Audio and Video APIs
- Client-side storage APIs

### Event or Callback Queue {#Event-or-Callback-Queue}

This is where your asynchronous code gets pushed to, and waits for the execution.

### Event Loop {#Event-Loop}

It has one simple job `to monitor the call stack and the callback queue.`
It keeps running continuously and checks the Main stack, if it has any frames to execute, if not then it checks Callback queue, if Callback queue has codes to execute then it pops the message from it to the Main Stack for the execution.

### Job Queue or Microtask Queue {#Job-Queue-or-Microtask-Queue}

Apart from Callback Queue, browsers have introduced one more queue which is “Job Queue”, reserved only for new Promise() functionality. So when you use promises in your code, you add .then() method, which is a callback method. These `thenable` methods are added to Job Queue once the promise has returned/resolved, and then gets executed.

## Execution of async function in javascript {#Execution-of-async-function-in-javascript}

Whenever an async function is called, it is sent to a browser API. These are APIs built into the browser.

`An example of this is the setTimeout method. When a setTimeout operation is processed, it is sent to the corresponding API which waits till the specified time to send this operation back in for processing.`

`This operation is then send to the callback queue. Hence, we have a cyclic system for running async operations in JavaScript. The language itself is single-threaded, but the browser APIs act as separate threads.`

The `event loop` facilitates this process. It has one simple job `to monitor the call stack and the callback queue.` If the call stack is empty, the event loop will take the first event from the queue and will push it to the call stack, which effectively runs. If it is not, then the current function call is processed.

```
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

Output:
First
Third
Second
```

![Callback Queue](/BL-1008/callbackqueue.gif)

## Why Job Queue or Microtask Queue {#Why-Job-Queue-or-Microtask-Queue}

Micro-tasks has high priority in executing callbacks, if event loop tick comes to Micro-tasks, it will execute all the jobs in job queue first until it gets empty, then will move to callback queue.

- The primary reason for prioritizing the micro-task queue is to improve the user experience.
- Micro-tasks include mutation observer callbacks as well as promise callbacks.

![micro-task Queue](/BL-1008/microtask.gif)

Example:

```
console.log('Message no. 1: Sync');

setTimeout(function() {
   console.log('Message no. 2: setTimeout');
}, 0);

var promise = new Promise(function(resolve, reject) {
   resolve();
});

promise.then(function(resolve) {
   console.log('Message no. 3: 1st Promise');
})
.then(function(resolve) {
   console.log('Message no. 4: 2nd Promise');
});

console.log('Message no. 5: Sync');

// Message no. 1: Sync
// Message no. 5: Sync
// Message no. 3: 1st Promise
// Message no. 4: 2nd Promise
// Message no. 2: setTimeout
```

All `thenable` callbacks of the promise are called first, then the setTimeout callback is called.

**References:**

- <a href="https://towardsdev.com/event-loop-in-javascript-672c07618dc9" target="_blank">Event Loop</a>


Understanding how javascript works under the hood, how it executes our asynchronous javascript code and event loop

Javascript Event Loop

**What Is a One-to-Many Relationship in a Database? An Explanation with Examples**

*One-to-many relationships are one of the most common database relationships. If you want to learn when and how to use one-to-many relationships, then this article is a great starting point.*

You will surely use one-to-many relationships to store information in any relational database, whether you are designing enterprise-level software or just creating a simple database to keep track of your uncle’s stamp collection.

## A Brief Introduction to the Relational Model {#-intro-model}

Relational databases are a core component of any modern transactional application. The relational model is composed of tables (data organized in rows and columns) that have at least one unique key that identifies each row. Each table represents an entity. This is shown in the following example, a very simple version of a table representing customer orders:

![https://vertabelo.com/blog/one-to-many-relationship/order_table.png](https://vertabelo.com/blog/one-to-many-relationship/order_table.png)

The above diagram, Each row in the table represents one order, and each column (also known as an *attribute*) represents each individual piece of information contained in an order.



## What Are Relationships and Why Do We Need Them? {#relationships-importance}

If we take a deeper look at the table used in the prior example, we will see that it does not really represent a complete order. It does not have all the information you would expect it to have. You will notice that it does not include any data related to the customer that made the order, nor does it have anything about the products or services ordered.

What should we do to complete this design to store order data? Should we add customer and product information to the **Order** table? That would require adding new columns (attributes) for customer names, tax identifiers, addresses, etc. as shown below:

If we do that, we’ll soon run into problems. Most customers place more than one order, so this system will store customer information many times, once for each order of each customer. That does not seem like a smart move.

Moreover, what happens when a customer changes their phone number? If someone needs to call the customer, they may find the old number on previous orders – unless someone updates hundreds (or even thousands) of existing orders with the new information. And the same would go for any other change.

A relational model requires us to define each entity as a separate table and establish relationships between them. Storing all the information in a single table just doesn’t work.

There are several types of relationships between tables, but probably the most common is the one-to-many relationship, which is often written as 1:N. This kind of relationship means that one row in a table (usually called  the parent table) can have a relationship with many rows in another table (usually called child table). Some common examples of one-to-many relationships are:

- A car maker makes many different models, but a particular car model is built only by a single car maker.
- One customer may make several purchases, but each purchase is made by a single customer.
- One company can have many phone numbers, but a phone number belongs to one company.
- 

Going back to our initial order example, the **`Customer`** table would be the parent table and the **`Order`** table the child; a customer can have many orders, while an order can belong to a single customer.

Please note that the one-to-many definition allows a row in the parent table to be associated to many rows on each child table, but it does not require it. Actually, the design allows a customer to have zero orders (i.e. a new customer who has not yet made their first purchase), one order (a relatively new customer who has made a single purchase) or many orders (a frequent customer).

## Showing One-to-Many Relationships in an ER Diagram {#one-to-many-diagram}

Let’s take a look at a more complete example of a simple customer ordering system using an ER (or entity relationship) diagram. 

![pic](/BL-1009/one-to-many.png)

This is a more realistic design. You will notice that there are new entities (tables) in the diagram, which now contains the tables **`Customer`**, **`Order`, `Order Detail`**, and **`Product`**. However, the most important thing you notice is that there are now **relationships** **between the tables**.

In a database model, relationships are represented by lines connecting two entities. The characteristics of these relationships are represented by different connectors:

- When there is a single vertical line, the entity nearest that connector has only one row affected by the relationship. It’s the ‘one’ in one-to-many.
- When there is a multi-line connector that looks like a crow foot, the entity nearest that connector has multiple rows affected by the relationship; it’s the ‘many’.

![one-example](/BL-1009/one-many.jpeg)

Looking at the image and knowing the notation, it is simple to understand that the diagram defines that each Order can have many Order Details and that each Order Detail belongs to a single Order.



What Is a One-to-Many Relationship in a Database? An Explanation with Examples

One-to-Many Relationships in Relational Databases


# A Guide to SEO Best Practices 

If you own, manage, monetize, or promote online content via Google Search, this guide is meant for you. You might be the owner of a growing and thriving business, the website owner of a dozen sites, the SEO specialist in a web agency or a DIY SEO expert passionate about the mechanics of Search: this guide is meant for you. If you're interested in having a complete overview of the basics of SEO according to our best practices, you are indeed in the right place. This guide won't provide any secrets that'll automatically rank your site first in Google (sorry!), but following the best practices will hopefully make it easier for search engines to crawl, index, and understand your content.

## Getting Started {#Getting-Started}

Search engine optimization (SEO) is often about making small modifications to parts of your website. When viewed individually, these changes might seem like incremental improvements, but when combined with other optimizations, they could have a noticeable impact on your site's user experience and performance in organic search results. You're likely already familiar with many of the topics in this guide, because they're essential ingredients for any web page, but you may not be making the most out of them.

Here are a few basic questions to ask yourself about your website when you get started.

- Is my website showing up on Google?
- Do I serve high-quality content to users?
- Is my local business showing up on Google?
- Is my content fast and easy to access on all devices?
- Is my website secure?

## Influencing your title links and snippets in search results {#Influencing-your-title-links-and-snippets-in-search-results} 

- Accurately describe the page's content
- Choose title text that reads naturally and effectively communicates the topic of the page's content.
- Create unique title elements for each page
- Use the meta description tag
- Use unique descriptions for each page
- Add structured data markup

## Creating a Simple Navigational Page {#Creating-a-Simple-Navigational-Page}

- Create a simple navigational page for users
- Create a naturally flowing hierarchy
- Use text for navigation
- Create a navigational page for users, a sitemap for search engines
- Show useful 404 pages
- Simple URLs convey content information

## Analyzing your Search Performance and User Behavior {#Analyzing-your-Search-Performance-and-User-Behavior}

- Analyzing your search performance
- Understanding your users
- Analyzing your content
- Maintaining your site

This guide is not meant to be an exhaustive list of everything you need to know about SEO, but it does cover most of the basics and best practices that are important to follow. Happy optimizing!


Learn With Me 👻