_HTML_ stands for Hyper Text Markup Language
_HTML_ is used for creating web pages and websites.

## Boilerplate Code

```html
<html>
  <head>
    <title>Hello</title>
  </head>
  <body></body>
</html>
```

The `<html>` tag is used to define an HTML document.
The `<head>` tag contains meta information about HTML page.
The `<title>` tag is used to define Title for HTML page.
The `<body>` tag everything we need in html page like images, text, links, tables and many more.

## HTML Comments

Comments are piece of code ignored by browsers. Comments are used to indicate sections or to keep notes.

```html


<h1>Hello</h1>


```

## Headings Tag `<h1>`... `<h6>`

```html
<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
```

## Paragraph Tag `<p>`

`<p>` tag is used to structure your text into different paragraphs.

```html
<p>This is the paragraph</p>
```

## Pre-Formatted Text Tag `<pre>`

`<pre>` tag is defines pre-formatted text.

```html
<pre> Hello World </pre>
<pre> This is pre-formatted text example </pre>
```

## Code Tag `<code>`

Code tag is used to define code block.

```
<code>
  print("Hacking NASA using HTML...")
  print("Hacking Failed Successfully")
</code>
```

## Division Tag `<div>`

`<div>` tag is used to make division or block in document.

```html
<div>
  <p>This is example of div tag</p>
</div>
```

# _to be continue..._

HTML basics. the barebones of web.


# NODE JS

**Is an asynchronous event-driven javascript runtime**

Nodejs (non-blockin I/O) runtime has,

- a V8 Javascript engine (parse javascript),
- APIs has fs, http, path, crypto (that leaves in libuv)
- bindings, calls async/sync in C++ between libuv and V8
- a [Libuv](https://libuv.org/), the input output tasks.

### REPL - *R*ead *E*val *P*rint *L*oop

### _Browsers has window object and nodejs has global object_

## process.argv[]

```
node hello.js test
const p =  process.argv[2]

result: p = test
```

## ASYNC

```
global.setTimeout(() => console.log("🐇 finishes!"), 1000); // _settime accepts as argument a callback_
global.console.log("🐢 finishes!");

result:
🐢 finishes!
🐇 finishes!
```

JS out of the box is **Synchronous** but it has **APIs** _to call_ **LIBUV** that can execute code **Asynchronous**

## THREADS

- a process shares memory and thread but not the call stacks
- threads can run on diferent processors of the CPU
- threads run in paralel
- **javascript** is a single thread language, so no deadlocks
- the javascript code is run on main thread, and the async code is put on event loop
- **libuv** that executes the async calls, has a pool o threads
- nodejs process has 1x main thread (_engine_) + pool of thread _4x by default_
- threads are reused, so no creation or destruction of new threads
- **only a few async I/O uses the thread pool** example file system.
- LIVUB network I/O, doesn't use the thread pool, instead uses the core system that has multi-thread (_the kernel is does the multithread realy well_) and then it will signal the event loop
- as developer, we do not take care the multi-thread, nodejs will do it.

## EVENT LOOP

leaves in libuv
**processes all callbacks until the program exits**

```
while(!shouldExit){
  processEvents()
}
```

## CALLBACKS QUEUES

**_executed in first in first out queue_**
processed in background. LIBUV will send to the pool of threads or into the core system.
_there are others phases but they are internal_

**event loop phases** queues _each one has its own queues of callbacks_

loops in:
1 timers (setTimeout, setInterval)
2 I/O callbacks // pool queue
3 setImmediate
4 close callbacks

## OBSERVER PATERN

_relation one-to-many_

```
const EventEmitter = require("events");
const celebrity = new EventEmitter();

//Subscrive to celebrity for observer 1
celebrity.on("race", (res) => {
  if (res === "win") {
    console.log("🎉 Congratulations!");
    return;
  }
  console.log("✨");
});
//Subscrive to celebrity for observer 2
celebrity.on("race win", () => console.log("😎 you are the best there is"));

process.on("exit", (code) => console.log("Process exit on code:", code));

celebrity.emit("race win");
celebrity.emit("race", "win");

```

## MODULES

- module.exports = {test} : to export func test
- const mod = require('./test') : to import the test func
- with ecma
  - import {test} from './test**.mjs**'
  - export {test}
- modules are cached. _leaves on require.cache_
- index.js treats folders as module **Ryan Dahl, is against, index.js brings complex**

```
//index.js
module.exports={
  ...require('./test')
  ...require('./test2')
}
```

## STREAM API

for huge data. is based on event emitter.
**readable.pipe(writable)**

```
import { parse } from "csv-parse";
import fs from "fs";

const habitablePlanets = [];

function isHabitablePlanet(planet) {
  return (
    planet["koi_disposition"] === "CONFIRMED" &&
    planet["koi_insol"] > 0.36 &&
    planet["koi_insol"] < 1.11 &&
    planet["koi_prad"] < 1.6
  );
}

// fs.createReadStream return event 'end' or 'data' etc
fs.createReadStream("./kepler_data.csv")
  //pipe is meant to connect readable stream to a writable stream
  .pipe(
    parse({
      comment: "#",
      columns: true,
    })
  )
  .on("data", (data) => {
    if (isHabitablePlanet(data)) {
      habitablePlanets.push(data);
    }
  })
  .on("error", (err) => console.log("ERROR:", err))
  .on("end", () => {
    console.log(`${habitablePlanets.length} habitable planets found!`);
    console.log("we are done");
  });
```

## HTTP SERVER

### Same origin

example : (1)https:// (2)www.google.com (3):443 /maps

if one of the 3x things changes, we are not in same origin

**same origin policy from javascript** for instance, to avoid facebook steal data from google, meaning, when I'm on google, facebook cannot access my browser at the moment.

on the browser I'm on google.com, if I request from wikipedia from google, javascript will allow, because is a response from google.
now, if I'm still on google.com and I fetch \*_from browser terminal_ wikipidia, I will be blocked by CORS.

### CORS. Cross Origin Resource Sharing

Access-Control-Allow-Orign: [whitelist]

example on [Github/http server](https://github.com/xtophe02/nodejs)

```
import http from "http";
const PORT = 3000;

//EventEmitter class
const server = http.createServer();
server.on("request", (req, res) => {
  const friends = [
    { id: 0, name: "Chris" },
    { id: 1, name: "Idalia" },
    { id: 2, name: "Nicole" },
    { id: 3, name: "Noah" },
  ];
  //req is readble streams and res is a writale stream
  const params = req.url.split("/");

  if (req.method === "POST" && params[1] === "friends" && params.length < 3) {
    req.on("data", (data) => {
      console.log(data.toString());
      friends.push(JSON.parse(data.toString()));
    });
    req.pipe(res);
  }

  if (req.method == "GET" && params[1] === "friends" && params.length < 3) {
    res.writeHead(200, {
      "Content-Type": "application/json",
    });

    res.end(JSON.stringify(friends)); //signals that headers/body are done to be sent
  }
  if (params.length >= 3) {
    res.setHeader("Content-Type", "application/json");
    res.statusCode = 200;
    res.end(JSON.stringify(friends[parseInt(params[2])]));
  }
  if (req.url === "/list") {
    res.setHeader("Content-Type", "text/html");
    res.statusCode = 200;
    res.write("<html>");
    res.write("<body>");
    res.write("</body>");
    res.write("<ul>");
    res.write("<li>Chris</li>");
    res.write("<li>Idalia</li>");
    res.write("<li>Nicole</li>");
    res.write("<li>Noah</li>");
    res.write("</ul>");
    res.write("</html>");
    res.end();
  } else {
    res.statusCode = 404;
    res.end();
  }
});
server.listen(PORT, () => console.log(`server listen on port: ${PORT}`));

```

## NODE CSV READER

**csv-reader**: package to read csv files

example on [Github/csv](https://github.com/xtophe02/nodejs) under planets stream folder

## EXPRESS

_how to stay organized if you project get bigger_

![folder structure](express-folder-structure.png)

example on [Github/express](https://github.com/xtophe02/nodejs) under express folder

## EXPRESS - SECURITY

- **login/logout**: with google
- **https**: add your own SSL TLS certificates
- **protected routes**: middleware to protect routes. only authenticated users can access
- **error handling**: redirect if not authenticated or authorized

### dependecies

- **dotenv** : to avoid upload secrets
- **cookie-session**: send secure cookies to clients
- **passport-google-ouath20** : sign with google accounts
- **helmet**: middleware to prevent leak info from server

example on [Github/express-security](https://github.com/xtophe02/nodejs) under security folder

## EXPRESS - PERFORMANCE

### CLUSTERING

**N PROCESSES AND N NODE INSTANCES**

- **pm2** : for clustering. PM2 will automaticaly create independentant workers, one per cpu core, and perform load balance. its a great tool for _zero downtime restart_, meaning, if you need to restart workers, no need to restart all of them at same time, so your app can run without being off.

example on [Github/express-performance](https://github.com/xtophe02/nodejs) under performace folder

### WORKER THREADS

**1 PROCESS AND N NODE INSTANCES**
is built-in package from nodejs. those can share memory. because is the same process.

example on [Github/express-performance](https://github.com/xtophe02/nodejs) under workers folder

## GRAPHQL - APOLLO SERVER

_how to stay organized if you project get bigger_

![folder structure](graphql-folder-structure.png)

example on [Github](https://github.com/xtophe02/nodejs) under graphql folder


Nodejs Best Pratices examples


# this is a title

this is a regular text with a [link](https://google.com)


Getting Started with Command Line


### why? Ubuntu is better suited for development.

**1 Make a Backup of your windows System** _optional_
I recommend you to backup all your data to an external storage and make a backup of your windows system, incase if something fails utterly, you can always have windows operating system to install on your pc again.

**2 Download Ubuntu**
Here is the [link](https://ubuntu.com/download/desktop) to official website and I also recommend you to go through the [installation guide](https://ubuntu.com/tutorials/install-ubuntu-desktop#1-overview) given in website.

**3 Create a live USB of ubuntu**
There are many free applications available that will help you create a live USB of Ubuntu.
Let's go with [Rufus](https://rufus.ie/en/) to create a live USB. download the .exe file.

Plug in your USB. This device will be formatted so make sure that you don’t have any important data on this USB disk.

Run the Rufus tool you downloaded, it will automatically detect your USB disk. Now, browse the ISO image file you just downloaded from Ubuntu website.

Finally, hit the start button

**4 Make some free space on your computer to install Ubuntu**
Usually an option is provided for many systems to make disk partition for ubuntu while installing. But, that is not in all the cases. It is better to make some space for Ubuntu before installing.

In the Windows search, search for _‘disk partitions’_ and go to _‘Create and format hard disk partitions’_

In the Disk Management tool, right-click on the drive which you want to partition and select **_shrink volume_**.
Take 30GB at minimum.

**5 Boot from live USB**
Plug the live Ubuntu USB in the computer.
Let's see how to boot from Live USB. You can access the UEFI firmware within the windows.

Go to the _Advanced startup_ option and click on Restart now button.
On next screen click on _'Use a device'_ option

Recognize the USB disk with the help of name and size. It may also be displayed as _'EFI USB Device'_.

Now it will power off your system and reboot into the disk you chose which should be the live USB disk.

**6 Installing Ubuntu along windows**
After that, The first 2 steps are simple, you will be asked to choose the language and select the keyboard layout.

On the next screen, choose Normal installation. _No need_ to download updates or install _third-party software_ just yet. You may do it after installation completes.

The next task will give you the option to create a partition for Ubuntu by dragging the divider. You can allocate appropriate disk (step 4) space to Linux here.


dualboot ubuntu with windows 10


JavaScript powers the web - it's **the** most important programming language you need to know as a web developer.

For example, you should understand code like this:

```js
const basics = 'Okay, that should not be too difficult actually';

function printBasics() {
  console.log(basics):
}

printBasics();
```

Learn more about it [here](https://google.com).


Mastering JavaScript


If you're new into **full-stack development**, then stick around because I'll be compiling the most common words and phrases related to full-stack development.This article just summarizers to give you an idea of these words and phrases so that you can understand what people are referencing with them when talking about certain areas of full-stack development.

**Front-end**
The part of an application or website with which the user interacts directly.

**Back-end**
The part of an application or website with which the user cannot see or interact with directly.

**Full-stack**
The entirety of an application or website, comprising both the front end and the back end.

**DOM**
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.

**API**
API stands for: Application Programming Interface. It's purpose is to provide a way for programs to easily access and exchange data.

**Encryption**
The process of converting information or data into a code, especially to prevent unauthorized access.

**Decryption**
While encryption converts information into a code, the purpose of decryption is to convert the same information's code back to it's original form.

**HTTP**
Hypertext Transport (or Transfer) Protocol, the data transfer protocol used on the World Wide Web.

**HTTPS**
Basically the same as HTTP, but uses encryption methods to secure the data passed to and from webpages.

**CI/CD**
CI/CD stands for: Continuous Integration, Continuous Delivery,
and the purpose of CI/CD systems is to deliver code changes to an application or website more frequently and reliably.

**UI**
UI stands for: User Interface. UI developers try to make a website's interface easy to use and navigate.

**UX**
UX stands for: User Experience. UX developers focus on making a website's design more appealing to it's visitors.

**Serverless**
As written on the cloudflare blog: Serverless computing is a method of providing backend services on an as-used basis. A serverless provider allows users to write and deploy code without the hassle of worrying about the underlying infrastructure. A company that gets backend services from a serverless vendor is charged based on their computation and do not have to reserve and pay for a fixed amount of bandwidth or number of servers, as the service is auto-scaling. Note that despite the name serverless, physical servers are still used but developers do not need to be aware of them.

**Backend operations**
These are operations that are performed in the backend because they're either too time or memory intensive for the front-end, or these operations simply cannot be performed in the frontend because they require libraries or frameworks that only work on the backend.

**Request/Response**
The way the frontend and backend communicate with each other is with requests and responses. A frontend script can request data from the backend, and a script in the backend can then send that data as a response.

**Cache**
The cache is where data can be temporarily stored on a browser or computer in order to save time loading the same data over and over again every time it is required.

**Command-line / CLI**
The command-line is an interface for typing commands directly to a computer's operating system. This is the most direct and fastest way to perform operations on a computer's operating system like launching a PHP server, creating directory, executing scripts, changing file permissions and much more...

**Virtual machine / VM**
A virtual machine is a computer system that emulates a physical, remote machine in order to perform operations on that machine like hosting a website, or storing data.

**AWS**
AWS, which stands for: Amazon Web Services, is currently the biggest provider of these virtual machines, plus many other services like file storage.

**Database**
A database is a structured collection of data, most of the time databases are needed for storing high volumes of user data.


Fullstack web development vocabulary


# NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](nextjs-file-based-routing.png)

... More content ...
