_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


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


# Simple Recipes

**_data can only be added from CMS Contentful_**

2x ways to add programmatically, through gatsby-node actions.createPage and on pages/{Contentful.title}

- gatsby: framework
- formspree: get email from contact form
- tailwindcss: css
- @tailwindcss/forms: css forms
- gatsby plugin
  - gatsby-plugin-image: deal with images setup
  - gatsby-source-contentful: CMS server to deal with data
  - gatsby-plugin-react-helmet: SEO Google crawlers
- react-icons: css icons


Simple Recipes


# Bookings and Reservations

built in GO and Postgres as database

**GO dependencies**

- [SCS Session Manager](github.com/alexedwards/scs/v2)
- [Chi Router](github.com/go-chi/chi)
- [NoSurf](github.com/justinas/nosurf)
- [GoValidator](https://github.com/asaskevich/govalidator)
- [PGX Postgres connect](https://github.com/jackc/pgx/v4)
- [SMTP GO Simple Email](https://github.com/xhit/go-simple-mail)

**JS dependencies**

- [Notie](https://github.com/jaredreich/notie) for alerts
- [Vanillajs Datepicker](https://github.com/mymth/vanillajs-datepicker) for dates
- [SweetAlert2](https://github.com/sweetalert2/sweetalert2) for modals
- [Simple Data Tables](https://github.com/fiduswriter/Simple-DataTables#readme) for data tables

**others for testing purposes**

- [MailHog] (https://github.com/mailhog/MailHog)


Bookings GO


# Remix Expenses

remix where you can worker server and client code at same level

## libraries used

- **tailwindcss:** CSS framework
- **mongodb** as dababase
- **remix:** framework.
- **prisma:** ORM


Remix Expenses


How, where and when to save my data? we have sequencial, as **SQL** and non-sequecial databases as **Mongodb**. Knowing the principles of each, I take vantage of **ORM** _(Object relational mapping)_


Databases


With the APP or Web site being **ready for production**, and understood its _requirements_, we should choose the best fit **hosting platform**. Here a list of few, but any **hosting platform** with a _ubuntu droplet_ it will work just fine, and then use **GITHUB actions** to have CI/CD _(continuos integration, continuos delivery)_


Hosting Platforms


**HTML**, **CSS** are the barebones of web development. So I taught myself **vanilla CSS**, _basic plain version_, so I could easily understand **CSS** frameworks as:


HTML5 & CSS3


**Javascript** along with **CSS** and **HTML**, is a fundamental pillar of Web
Development. Therefore, right after _vanilla js_, I got curious and went for a few **JS** and **CSS React** frameworks.


Javascript


Normally, renown hosting platforms can manage the **workloads**, but they can be pricy. **Containerized Orchestration** helps with the workloads at **scale** and all of it can be easily **automated** with reduced costs. these _Orchestrations_ are not accessible by nature, so they needs services as **NGINX** or **TRAEFIK** to expose to the _internet_


Orchestration Platforms


A backend server brings to web site or an app, features as **authentication**, **authorization**, **data fetching**, and much, much more. I manage to create my own backend servers, and use third parties as **CMS** (**Content Management System**) to leaverage use of **Jamstack** (Javascript, APIs _Aplication Programming Interface_ and Markup)
