This blog is built in Next.js and deployed to Vercel

Regular Expressions



## Positive Lookahead:
The positive lookahead asserts that the fist part of the expression must be followed by the lookahead expression.
(T|t)he(?=\sfat) Match The or the only if it's followed by the word fat.

## Negative Lookahead:
Get all the matches that are not followed by a certain pattern. (T|t)he(?!\sfat) which means get all The or the words from the input string that are not followed by a space character and the word fat.

## Positive Lookbehind
Used to get all the matches that are preceded by a specific pattern. (?<=(T|t)he\s)(fat|mat) means: get all fat or mat words from the input string that come after the word The or the.

## Negative Lookbehind
Used to get all the matches that are not preceded by a specific pattern. (?<!(T|t)he\s)(cat) means: get all cat words from the input string that are not after the word The or the.


How does CSS actually work


The browser loads the HTML(e.g. receives it from the network)

It converts the HTML into a DOM(Document Object Model). The DOM represents the document in the computer's memory. 

The browser then fetches most of the resources that are linked by the HTML document, such as embedded images and videos ... and linked CSS! JavaScript is handled a bit later on in the process. 

The browser parses the fetched CSS, and sorts the different rules by their selector types into different "buckets", e.g. element, class, ID, and so on. Based on the selectors it finds, it works out which rules should be applied to which nodes in the DOM, and attaches style to them as required (this intermediate step is called a render tree).

The render tree is laid out in the structure it should appear in after the rules have been applied to it.

The visual display of the page is shown on the screen (this stage is called painting).

Each element, attribute, and piece of text becomes a DOM node in the DOM tree structure. The nodes are defined by their relationship to other DOM nodes.

DOM is where the content and style(CSS) meet up.

## Flow direction and display
Block elements(display: block) follow flow direction whereas inline elements(display: inline) follow writing direction


JavaScript


JS is an implementation of ECMAScript standard. It runs in the browser and other JS environments such as Node.js

JS is a compiled langauge, the tools process and verify a program before it executes
Each seperate JS file is its own program so that means there needs to be an entry point for the application.
Values are data, they are how the program maintains state. Values comes in two forms in JS: primitive and object
greeting("My name is Inder."); There is a primitive string literal 
const cannot be re-assigned a different value later. 

So what's the difference between reassigned and unchangeable?
if we use const in objects then the variable will remain the same but the object contents might be different later 

In JS function could mean a "procedure", a collection of statements that can be invoked one or more times, may be provided some inputs, and may give back one or more outputs.


``` 
function awesomeFunction(coolThings) {
	//..
	return amazingStuff;
}
```

the name of the function and the value it represents is associated in the compilation phase of the code

To return multiple values from a function we can wrap them into a single object/array

"===" disallows any type coercion 
Special cases of === : NaN === NaN; // false , May be use Number.isNaN(..)
0 === -0; // true  use Object.is(..) , Does it deep checking, quadruple-equals instead of triple-equals
When the types are equal '==' & '===' do the same exact thing so implicit coercion might be easier and preferable

Strings are immutable because they are primitive values

Well in this case we are reassigning pet to a totally new block of information which happens to be a string of characters.


### Variables and Blocks

The primary purpose of variables in JavaScript is managing program state. Its value might change over the course of the program. In other words state is tracking the changes to values as your program runs.

Grouping a series of statements together is called a block.

```
var amount = 99.99;

// a general block
{
	amount = amount * 2;
	console.log( amount );
}

```

A more common type of block is the one attached to an if statement or a loop.

#### If statements

If a value is not a Boolean inside a conditional JS coerces it into a boolean. The values which become false upon coercion are called "falsy" and the rest are "truthy". 

#### Loops

Repeating a set of actions only while the condition still holds is the job of programming loops. Each time the loop block executes, that's called an iteration.

### Three Pillars of JS

* Types / Coercion
* Scopes & Closures
* this & Prototypes
Which values if we try to convert them will become false?
""
0, -0
null
NaN
false
undefined
All others values become a true 

'<' like comparison operators automatically converts the operands into a number if one of them is a number.

#### this & Prototypes

a this-aware function can have a dynamic context depending upon its execution.
Remember it's how a function is called is what matters not how it's defined.

```
var workshop = {
	teacher: "Kyle",
	ask(question) {
		console.log(this.teacher, question);
	},
};

workshop.ask("What is implicit binding?");
// Kyle What is implicit binding?

```
Arrow functions don't get their own 'this' so it's not important not to use them as methods.
The decision to make is whether we know in what way the function will be called. In case of dynamic calling it's better to use an arrow function whereas if need the 'this' value to point to the given object's variable, it's better to use a normal function 



You Don't Know JS!


Variables is just giving a useful name to a piece of memory. It's good to think of variables as wires pointing going from your code to a universe of JavaScript values  
### Functions

A function is generally a named section of code that can be "called" by name, and the code inside it will run each time.

```
function greetStudent(student) {
	console.log(
		`Hello, ${student.name} !`	
	);
}

function timeRemaining(timeElapsed, endTime) {
	return endTime - timeElapsed;
}

var left = timeRemaining(42,240);

left;

```

Learning programming is like building blocks. To build a tall tower, you start first by putting block on top of block on top of block. Some essential programming building blocks: 

- You need *operators* to perform actions on values.
- You need values and *types* to perform different kinds of actions like math on *numbers* or output with *strings*.
- You need *variables* to store data (aka state) during your program's execution.
- You need *loops* to repeat tasks until a condition stops being true.
- You need *functions* to organize your code into logical and reusable chunks. 

## 

Why build Server Side Rendered applications?


## Static Site Generators
Creating HTML pages from templates or components and a given content source. You just give it some text files and content, and the generator will give you back a complete website. The site pages are generated at build time and the content only changes when you add new components.

*May be good if the content doesn't change too often.*

*The risk of static files being vulnerable to cyber attacks is minimal.*

*But remember you have to build the whole site again if the content changes too often.*

## Server Side Rendering

The web pages are displayed on the server and passed to the client instead of rendering it in the browser. With Client side rendering you can only render the page when the client navigate to the page, making it slower. If the content changes too often this is a better approach so that the user is able to see the updated content as soon as possible.

*It is also good for tailored content*

*Cannot deploy to a CDN*

### Static Site Generators                               
Can easily be deployed to a static CDN                   

Content and pages generated at build time                

Content may become stale quickly                         

Fewer API calls since it only makes it at build time     

### Server-Side Rendering
 Cannot be deployed to a static CDN

 Content and pages generated per request

 Content is always up to date

 Makes API calls each time a new page is visited.


Welcome to my blog!