Web development: Road Map

Do you want to learn web development? and you’re confused about where to begin? or what the general road map look like?

These are some great guides for you:


⇨ HTML5: Tags/Balises by category
⇨ HTML5: Attributes
⇨ HTML Semantic Elements
⇨ HTML Forms
⇨ HTML Tables

▩ CSS3

⇨ CSS Selector Reference
⇨ CSS Properties Reference
⇨ CSS Selectors & Properties from CSS Tricks
⇨ Cascade and inheritance
⇨ Specificity
⇨ Specificity Calculator


⇨ FlexBox Cheatsheet
⇨ Flexbox Froggy

CSS Grid

⇨ CSS Grid Cheatsheet

Media Queries

⇨ CSS Media Queries w3schools
⇨ Media Queries for Standard Devices

▩ Emmet

⇨ Emmet cheatsheet PDF

▩ Git, Github, Command lines



⇨ Doc Page/

▩ Bootstrap

⇨ twitter-bootstrap CDN
⇨ Docs

▩ JavaScript

⇨ JavaScript Tutorial
⇨ JavaScript Basics guide
⇨ JavaScript HTML DOM
⇨ JavaScript Advanced guide

▩ jQuery

⇨ jQuery Basics

▩ React

⇨ React lifecycle methods diagram/
⇨ React Router Doc


⇨ Create-React-App Docs
⇨ Adding Images, Fonts, and Files


Frontity: The React framework for WordPress

⇨ Doc page
⇨ If npx frontity create my-app doesn’t work (having white space in your name (Windows)
⇨ Solving:Npm ERR! Unexpected end of JSON input while parsing near…
⇨ Frontity Starter theme
⇨ @frontity/wp-source


⇨ gatsby-source-printful
⇨ Theme UI


▩ GraphQL

⇨ graphql.org/

▩ Node.js/Express.js


▩ Laravel


▩ MongoDB

▩ Firebase

⇨ Firebase: Docs

▩ WordPress

▩ Headless CMS


Open-source Headless CMS wrote with Node.js

⇨ Strapi.js: Docs



⇨ Boost Presets
⇨ Creating a theme based on boost

▩ Open source Modern web Forum

⇨ Discourse
⇨ NodeBB


Installing Symfony

???? With Composer:

$ composer create-project symfony/website-skeleton mon-super-projet

???? Or after installing symfony binary from here Download Symfony

$ symfony new my_project --full


$ cd my_project/
$ symfony serve

If you don’t have the Symfony binary installed, run:

$ php -S localhost:8000 -t public/

Then access the application in your browser at the given URL (https://localhost:8000 by default).

Read more about Installing & Setting up the Symfony Framework

???? Useful link:

Symfony Demo Application: The “Symfony Demo Application” is a reference application created to show how to develop applications following the Symfony Best Practices.


Tools to use to improve performance

webpagetest: Run a free website speed test from multiple locations around the globe

Page Speed Insights from google

GTmetrix: See how your site performs, reveal why it’s slow, and discover optimization opportunities.


Image file format

Learn about images file format and how they differ

???? Les formats des fichiers graphiques : tout ce que vous avez toujours voulu savoir (sans jamais oser le demander)

???? See How Images Affect Your Page Speed

???? GIF, PNG, JPG, or SVG. Which One To Use?

Image Optimizations

zero to mastery




???? To remove image metadata


Delivery optimization

Max parallel http connections in a browser?

Critical Rendering Path

1️⃣ CRP: MDN web docs

2️⃣ CRP: Understanding the Critical Rendering Path CSS-Tricks

3️⃣ CRP: Understanding the critical rendering path, rendering pages in 1 second

Useful links

Web UI Performance — Behind The Scenes



➡ Docker Hub : find containers images and their versions

create dockerfile in your project, an example with node.js version 14.5.0 buster

FROM node:buster
# create dir in the container
WORKDIR /usr/src/smartbrain_API
# copy all the file from the project to the container
COPY ./ ./

RUN npm install

CMD ["/bin/bash"]

Dockerfile reference

Docker Commands

???? Create container:

docker build -t firstcontainer .

???? Access the container:

docker run -it firstcontainer

???? Run Docker on the background

docker run -it -d firstcontainer

???? Show all the containers that are running

docker ps

???? Access a container from the list

docker exec -it [container id] bash

???? Go out of the container


???? Stop the container from running

docker stop [container id]

???? Run the container on port

docker run -it -p 3000:3000 firstcontainer

???? Then run npm start

???? List all the containers

docker container ls -a

???? Remove a container

docker container rm [container id]

???? Remove all stoped containers

docker container prune

???? Removing Docker Images

When you download a Docker image, it is kept on the server until you manually remove it. first, find the image id by this command docker image ls then

docker image rm [image id]

Learn more about removing commands: How To Remove Docker Containers, Images, Volumes, and Networks

Docker Compose

First, we need to create a docker-compose.yml file

version: '3.8'

    container_name: backend
    # image: node:buster
    build: ./ #it use the image from dockerfile
    command: npm start
    working_dir: /usr/src/smartbrain_API
      - "3000:3000"
    volumes: #listening to changes from ./ to container folder
      - ./:/usr/src/smartbrain_API

???????? In order to find the right version for compose: ➡Compose file versions and upgrading

???? Docker Volumes :

Docker Compose Commands

???? Build the container with compose

docker-compose build
  • ⚠⚠ Every time you change the yml file you need to run the docker-composer build to re-read that file.
  • Learn more about docker-compose build

???? Run docker-compose

docker-compose run smart-brain-api

Learn more about docker-compose run

???? To stop all the containers from running

docker-compose down 

???? Docker compose up

docker-compose up --build

➡ learn more about docker-compose up

docker-compose up -d

In order for it to run in the background

???? To execute the container from the shell

docker-compose exec smart-brain-api bash

PostgreSQL with Docker

???? Server:

const db = knex({
  client: 'pg',
  connection: process.env.POSTGRES_URI

???? Docker compose

version: '3.8'

  # Backend API
    container_name: backend
    # image: node:buster
    build: ./ #it use the image from dockerfile
    command: npm start
    working_dir: /usr/src/smartbrain_API
      POSTGRES_URI: postgres://sally@postgres:5432/smart-brain-docker
      #URI: unique resource identifier
      - postgres
      - "3000:3000"
    volumes: #listening to changes from ./ to container folder
      - ./:/usr/src/smartbrain_API
    # Postgres
        POSTGRES_USER: sally
        POSTGRES_PASSWORD: secret
        POSTGRES_DB: smart-brain-docker
        POSTGRES_HOST: postgres
      image: postgres
        - "5432:5432"

???? useful links


TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript tutorial in Visual Studio Code

Static vs Dynamic typed language

Static Typing

Static typed programming languages are those in which variables need not be defined before they’re used. This implies that static typing has to do with the explicit declaration (or initialization) of variables before they’re employed.

Dynamic Typing

Dynamic typed programming languages are those languages in which variables must necessarily be defined before they are used. This implies that dynamic typed languages do not require the explicit declaration of the variables before they’re used.

Strong and Weak typed languages

The main difference, roughly speaking, between a strongly typed language and a weakly typed one is that a weakly typed one makes conversions between unrelated types implicitly, while a strongly typed one typically disallows implicit conversions between unrelated types.

Furthermore, a strongly typed language requires an explicit conversion (by using the cast operator) between related types, when there is a possibility of data loss, while a weakly typed one would carry out the conversion regardless.

TypeScript Commands

???? Install

npm install -g typescript

???? Compile

tsc helloworld.ts

???? tsconfig.json

tsc --init


???? Watch Mode

tsc helloworld.ts --watch

TypeScript Types

let isCool: boolean = false;

let age: number = 56;

let eyeColor: string = 'brown';
let favoriteQuote: string = `I'm not old, I'm only ${age}`;

let pets: string[] = ['cat', 'mouse', 'dragon'];
let pets2: Array<string> = ['pig', 'lion', 'dragon'];

let basket: [string, number];
basket = ['basketball', 10];

enum Size {Small = 1, Medium=2, Large=3}
let sizeName: string = Size[2];
alert(sizeName); // Displays 'Medium' as its value is 2 above
let sizeNumber: number = Size.Small // return 1

//Any ???? BE CAREFUL
let whatever: any = 'aaaaghhhhhh noooooo!';

let sing = (): void => console.log('Lalalala')

//null and undefined
let meh: undefined = undefined;
let noo: null = null;

let error = (): never => {
  throw Error('blah!');
//never: is for a function that doesn't return and doesn't have that endpoint (like console.log) usually throws an error.

// Type Assertions:
let ohhithere: any = "OH HI THERE";

let strLength: number = (ohhithere as string).length;

interface RobotArmy {
  count: number,
  type: string,
  magic?: string // ? that to say: the property is optional
// type RobotArmy = {
//   count: number,
//   type: string,
//   magic?: string
// }

let fightRobotArmy = (robots: RobotArmy) =>{
let fightRobotArmy2 = (robots: {count: number, type: string, magic: string}) =>{
//Interface vs Type alias in TypeScript:  https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c

let fightRobotArmyF = (robots: RobotArmy): void =>{
let fightRobotArmy2F = (robots: {count: number, type: string, magic?: string}): void =>{

// *** Classes
class Animal {
    private sing: string;
    constructor(sound: string) {
        this.sing = sound;
    greet() {
        return "Hello, " + this.sing;

let lion = new Animal("Lion");
// lion.sing

//In TypeScript, there are several places where type inference
//is used to provide type information when there is no explicit
//type annotation. For example, in this code
let x = 3;
// automatimally detexts x is a number.

//Union Type
let confused: string | number = 'hello'


The repository for high-quality TypeScript type definitions


Adding TypeScript to Create React App

Adding TypeScript

CSS Properties

Propriétés de mise en forme du texte

Je résume ici la plupart des propriétés de mise en forme du texte.

Qu’est-ce que la mise en forme de texte ? C’est tout ce qui touche à la présentation du texte proprement dit : le gras, l’italique, le souligné, la police, l’alignement, etc.

PropriétéValeurs (exemples)Description
font-familypolice1, police2, police3, serif, sans-serif, monospaceNom de police
@font-faceNom et source de la policePolice personnalisée
font-size1.3em, 16px, 120%…Taille du texte
font-weightbold, normalGras
font-styleitalic, oblique, normalItalique
text-decorationunderline, overline, line-through, blink, noneSoulignement, ligne au-dessus, barré ou clignotant
font-variantsmall-caps, normalPetites capitales
text-transformcapitalize, lowercase, uppercaseCapitales
fontSuper propriété de police. Combine : font-weightfont-stylefont-sizefont-variantfont-family.
text-alignleft, center, right, justifyAlignement horizontal
vertical-alignbaseline, middle, sub, super, top, bottomAlignement vertical (cellules de tableau ou éléments inline-block uniquement)
line-height18px, 120%, normal…Hauteur de ligne
white-spacepre, nowrap, normalCésure
word-wrapbreak-word, normalCésure forcée
text-shadow5px 5px 2px blue
(horizontale, verticale, fondu, couleur)
Ombre de texte

Propriétés de couleur et de fond

PropriétéValeurs (exemples)Description
colornom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20…Couleur du texte
background-colorIdentique à colorCouleur de fond
background-imageurl(‘image.png’)Image de fond
background-attachmentfixed, scrollFond fixe
background-repeatrepeat-x, repeat-y, no-repeat, repeatRépétition du fond
background-position(x y), top, center, bottom, left, rightPosition du fond
backgroundSuper propriété du fond. Combine : background-imagebackground-repeatbackground-attachmentbackground-position

Propriétés des boîtes

PropriétéValeurs (exemples)Description
width150px, 80%…Largeur
height150px, 80%…Hauteur
min-width150px, 80%…Largeur minimale
max-width150px, 80%…Largeur maximale
min-height150px, 80%…Hauteur minimale
max-height150px, 80%…Hauteur maximale
margin-top23pxMarge en haut
margin-left23pxMarge à gauche
margin-right23pxMarge à droite
margin-bottom23pxMarge en bas
margin23px 5px 23px 5px
(haut, droite, bas, gauche)
Super-propriété de marge.
Combine : margin-topmargin-rightmargin-bottommargin-left.
padding-left23pxMarge intérieure à gauche
padding-right23pxMarge intérieure à droite
padding-bottom23pxMarge intérieure en bas
padding-top23pxMarge intérieure en haut
padding23px 5px 23px 5px
(haut, droite, bas, gauche)
Super-propriété de marge intérieure.
Combine : padding-toppadding-rightpadding-bottompadding-left.
border-width3pxÉpaisseur de bordure
border-colornom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20…Couleur de bordure
border-stylesolid, dotted, dashed, double, groove, ridge, inset, outsetType de bordure
border3px solid blackSuper-propriété de bordure. Combine border-widthborder-colorborder-style.
Existe aussi en version border-topborder-rightborder-bottomborder-left.
border-radius5pxBordure arrondie
box-shadow6px 6px 0px black
(horizontale, verticale, fondu, couleur)
Ombre de boîte

Propriétés de positionnement et d’affichage

PropriétéValeurs (exemples)Description
displayblock, inline, inline-block, table, table-cell, none…Type d’élément (blockinlineinline-blocknone…)
visibilityvisible, hiddenVisibilité
cliprect (0px, 60px, 30px, 0px)
rect (haut, droite, bas, gauche)
Affichage d’une partie de l’élément
overflowauto, scroll, visible, hiddenComportement en cas de dépassement
floatleft, right, noneFlottant
clearleft, right, both, noneArrêt d’un flottant
positionrelative, absolute, staticPositionnement
top20pxPosition par rapport au haut
bottom20pxPosition par rapport au bas
left20pxPosition par rapport à la gauche
right20pxPosition par rapport à la droite
z-index10Ordre d’affichage en cas de superposition.
La plus grande valeur est affichée par-dessus les autres.

Propriétés des listes

PropriétéValeurs (exemples)Description
list-style-typedisc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, noneType de liste
list-style-positioninside, outsidePosition en retrait
list-style-imageurl(‘puce.png’)Puce personnalisée
list-styleSuper-propriété de liste. Combine list-style-typelist-style-positionlist-style-image.

Propriétés des tableaux

PropriétéValeurs (exemples)Description
border-collapsecollapse, separateFusion des bordures
empty-cellshide, showAffichage des cellules vides
caption-sidebottom, topPosition du titre du tableau

Autres propriétés

PropriétéValeurs (exemple)Description
cursorcrosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto…Curseur de souris


<html>Balise principale
<head>En-tête de la page
<body>Corps de la page
<link />Liaison avec une feuille de style
<meta />Métadonnées de la page web (charset, mots-clés, etc.)
<script>Code JavaScript
<style>Code CSS
<title>Titre de la page

Balises de structuration du texte

<blockquote>Citation (longue)
<cite>Citation du titre d’une œuvre ou d’un évènement
<q>Citation (courte)
<strong>Mise en valeur forte
<em>Mise en valeur normale
<mark>Mise en valeur visuelle
<h1>Titre de niveau 1
<h2>Titre de niveau 2
<h3>Titre de niveau 3
<h4>Titre de niveau 4
<h5>Titre de niveau 5
<h6>Titre de niveau 6
<img />Image
<figure>Figure (image, code, etc.)
<figcaption>Description de la figure
<source>Format source pour les balises<audio>et<video>
<a>Lien hypertexte
<br />Retour à la ligne
<hr />Ligne de séparation horizontale
<address>Adresse de contact
<del>Texte supprimé
<ins>Texte inséré
<kbd>Saisie clavier
<pre>Affichage formaté (pour les codes sources)
<progress>Barre de progression
<time>Date ou heure

Balises de listes

Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…)

<ul>Liste à puces, non numérotée
<ol>Liste numérotée
<li>Élément de la liste à puces
<dl>Liste de définitions
<dt>Terme à définir
<dd>Définition du terme

Balises de tableau

<caption>Titre du tableau
<tr>Ligne de tableau
<th>Cellule d’en-tête
<thead>Section de l’en-tête du tableau
<tbody>Section du corps du tableau
<tfoot>Section du pied du tableau

Balises de formulaire

<fieldset>Groupe de champs
<legend>Titre d’un groupe de champs
<label>Libellé d’un champ
<input />Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
<textarea>Zone de saisie multiligne
<select>Liste déroulante
<option>Élément d’une liste déroulante
<optgroup>Groupe d’éléments d’une liste déroulante

Balises sectionnantes

Ces balises permettent de construire le squelette de notre site web.

<nav>Liens principaux de navigation
<footer>Pied de page
<section>Section de page
<article>Article (contenu autonome)
<aside>Informations complémentaires

JavaScript Advanced guide


⇨ JS ES5
⇨ JS ES6
⇨ JS Advanced functions
⇨ JS Advanced objects
⇨ Advanced loops
⇨ JS ES7
⇨ JS ES8
⇨ JS ES10
⇨ JS Debugging
⇨ JS Modules
⇨ JS Promises
⇨ JS ES9

Before diving in each topic, take a look at Javascript versions & the browser supports.
If you’re interested to know why and how Javascript is evolving, read this article JavaScript, ES6, ES7, ES10 where are we?

More on compatibility ➡ECMAScript 6 compatibility table

JS ES5 (2009)

ES5 is also known as ECMAScript 5 and ECMAScript 2009. Let’s discover some of the most relevant ES5 Features:

Array Methods

//* Syntax 1
todos.forEach(function(todo, i ){// is equal to todos[i]
    console.log(todo, i); // 'i' is equal to the index i ==> a number
//* Syntax 2 : better
function logTodos(todo, i ){
    console.log(todo, i)};

???? Example:

const basket = ['apples', 'oranges', 'grapes'];
const detailedBasket = {
    apples : 5,
    oranges : 10,
    grapes : 1000
// with for loop
for (let i=0; i < basket.length; i++){
// with forEach loop
basket.forEach(item => {


const mapArray = array.map(num => num *2);
console.log('map', mapArray);
//* multiple line
const mapArray = array.map(num => {num *2});


const filterArray = array.filter(num => num > 5);
console.log('filter', filterArray);


const reduceArray = array.reduce((accumulator, num) => {
    return accumulator + num
}, 5);// 5 is the initial accumulator's value.
console.log('reduce', reduceArray);

JS ES6 (2015)


const obj = {
    player: "baab",
    exp: 100,
    wizardLevel: false
//before we had to do:
const player = obj.player;
const exp = obj.exp;
let wizardLevel = obj.wizardLevel;
//* Now we can do:
const {player , exp} = obj;
let {wizardLevel}= obj;

Object Properties:

 //todo: exemple1:
const name = 'john dow';
const obj = {
    [name]: 'hello',
    [1 + 3]: 'hihihi'
 //todo: exemple2:
 const a = "simon";
 const b = true;
 const c = {};
 //* before: 
 const obj = {
     a: a,
     b: b,
     c: c
 //* Now if they have the same name
 const obj = {

Template strings:

//* before:
const greeting = "hello" + name + "it\'sblblblblblb" + something + "!";
//*Now with template strings
const name = "sally";
const age = 30;
const pet = "cat";
const greeting = `hello ${name} you seem to be ${age-10}, what a lovely ${pet} you have`;
//? or even better(we can pass default argument):
function greet(name='', age=30, pet='cat'){
    return `hello ${name} you seem to be ${age-10}, what a lovely ${pet} you have`;

type: Symbol:

let sym1 = Symbol();
let sym2 = Symbol('foo');
let sym3 = Symbol('foo');
//* note : sym2 !== sym3 even though they look the same, you make sure there will be never any conflict. most of the times it's used for object properties.
//! Arrow functions:
//* before: 
function add(a,b){
    return a + b;
//* Now
const add = (a,b) => a+b;//? for single return
const add = (a,b) => {//? for multiple return
    c = a+b;
    return c;} 

Arrow Functions

const first = () => {
    const greet = 'Hi';
    const second = () => {
        alert(greet);//? closure 'greet'
    return second;
const newFunc = first ();


  • Rule in javascript
  • child scope always has access to the parent’s scope.
  • ‘closures’ is just saying a function ran, the function executed, it’s never going to execute again. But it’s going to remember that there are references to those variables. So the child scope always has access to the parent scope.

JS Advanced functions


const multiply = (a,b) => a * b;
const curriedMultiply = (a) => (b) => a * b;
curriedMultiply(3); // 3 * b;
curriedMultiply(3)(5); // 3 * 5;
const multiplyBy5 = curriedMultiply(5);
multiplyBy5(8); // 8 * 5;


const compose = (f,g) => (a) => f(g(a));
const sum = (num) => num + 1;
compose(sum, sum)(5);
// it's like fog(x)= f(g(x)) in mathematique;
//* exemple 2:
const compose = (f, g) => (a) => f(g(a));
const add1 = (num) => num + 1;
const add5 = (num) => num + 5;
compose(add1, add5)(10)

Avoiding Side Effects, functional purity:

var a = 1;
function b(){
    a = 2; // Side Effect, it doing something to change the outside scope.
  • make sure that a function always return something we know (a value)(we know exactly what it does)
  • It is really really good practice to be a top-performing developer to have this in mind, of creating functions that minimize side effects and have functional purity. What we call ‘Determinism’, where anything you put into the function it always returns the same thing.
  • What are the two elements of a pure function:
    1. Deterministic –> always produce the same results given the same inputs.
    2. No Side Effects –> It does not depend on any state, or data, change during a program’s execution. It must only depend on its input elements.

JS Advanced objects

Reference type

var object1 = { value: 10};
var object2 = object1;
var object3 = { value: 10};// defrent object: object1 != object3

Context vs Scope

const object4 = {
     a: function() {


class Player {
     constructor(name, type){
         console.log('player', this);
         this.name = name;
         this.type = type;
     introduce() {
        console.log(`Hi I am ${this.name}, I'am a ${this.type}`)
class Wizard extends Player {
     constructor(name, type) {
         super(name, type)
         console.log('wizard', this);
     play() {
         console.log(`Weeeeeee I'am a ${this.type}`);
 const wizard1 = new Wizard('Shelly', 'Healer');
 const wizard2 = new Wizard('shawn', 'Dark Magician');

Pass by reference VS Pass by Value:

  • pass by value creates a new space in the memory
  • pass by reference assign space in the memory to a variable

Create a Clone

let obj = {a: 'a', b: 'b', c: 'c'};
 let obj2 = obj;
 let clone = Object.assign({}, obj);
 let clone2 = {...obj}; //Another way of cloning
 // if we do 
 obj.c  = 5;
 console.log(obj2)//will be effected
 console.log(clone) // will not be effected
 //? Deep cloning:
 let obj = {a: 'a', b: 'b', c: {
     deep: 'try and copy me'
 let superClone = JSON.parse(JSON.stringify(obj));

Type coercion:

mean the language converting a certain type to another type.

1 == '1'; // True
1 === '1'; // False
  • === : three equals in JavaScript means compare the values. But don’t try and coerce the values, be explicit with your comparison and do exactly what I tell you.
  • ==: double equal sign, simply means compare the two values and if they have different types try to coerce one into the same type.

Advanced loops

???? Let’s work with this array

const basket = ['apples', 'oranges', 'grapes'];
const detailedBasket = {
    apples : 5,
    oranges : 10,
    grapes : 1000

➡ For loop

for (let i=0; i < basket.length; i++){

➡ forEach

basket.forEach(item => {

➡ For of:

  • Iterating - arrays, Strings (one by one)
  • both arrays and strings are iterable
for (item of basket){
for (item of 'basket'){

➡ For in:

  • loop over objects- properties
  • enumerating - objects
for (item in detailedBasket){

????‼for of doesn't loop over an object because it's not iterable

ES7 (2016)


'hellooooo'.includes('o');//? true
const pets = ['cat', 'dog', 'bat'];

Exponential operator e(x)

const square = (x) => x**2;
const cube = (x) => y**3;

ES8 (2017)

PadStart(), PadEnd():

'Turtle'.PadStart(10);//=>"     Turtle"
'Turtle'.PadEnd(10);//=>"Turtle      "
//* 10 total spaces used inluding the string

Comma at the end of the function:

const fun = (
) =>{

Now we can add a comma to the end of a function in order just to make things a little bit cleaner, it's just syntactic and just make things look a little bit nicer.

Object.values & object.entries:

//* In order to turn an object to an array we used Before
//* Now
let obj = {
    username0 : 'santa',
    username1 : 'Rudolf',
    username2 : 'Grinch',
Object.keys(obj).forEach((key, index) => {
    console.log(key, obj[key]);

Object.values(obj).forEach(value => {
Object.entries(obj).forEach(value => {
Object.entries(obj).map(value => {
    return value[1] + value[0].replace('username', '');

ES10 (2019)


const array = [1,2,[3,4,[5]]];
array.flat()//=> return [1,2,3,4,[5]]
array.flat(2) //=> return [1,2,3,4,5]

const entries = ['bob', 'sally',,,,,,,'cindy'];
entries.flat() //=> ["bob", "sally", "cindy"]


const array2 = array.flatMap(num => num + 5);
//=>[6, 7, "3,4,55"] Map and flat the result to a deep of 1.

TrimStart() & TrimEnd():

const userEmail = 'eddytheeagle@gmail.com'
const userEmail2 = 'nobody@gmail.com'


userProfiles = [['commanderTom', 23], ['derekZlander', 40], ['hansel', 18]];
Object.fromEntries(userProfiles);//=>{commanderTom: 23, derekZlander: 40, hansel: 18}
const obj = Object.fromEntries(userProfiles);
Object.entries(obj);//=> it give back the userProfiles array

Try ... catch:

//* try something, if there is an error do the inside the catch
    true + 'hi'
  console.log('you messed up')
//? befor we had to pass a parameter: 
    true + 'hi'
  console.log('you messed up' + error)


const flattened =  [[0,1], [2,3], [4,5]].reduce((a,b) => a.concat((b), []));
//* to understand this array 
const flattened =  [[0,1], [2,3], [4,5]].reduce((accumulator,array) => {
    console.log('array', array);
    console.log('accumulator', accumulator);
    return accumulator.concat((array), [])
//? Method 2
const flattened =  [[0,1], [2,3], [4,5]].reduce((accumulator,array) => {
    return accumulator.concat((array), [])
}); //in order to see what happen step by step


????JavaScript file 1

export const add1 = (a,b) => a + b;
export default function add2(a, b) {
    return a + b;

???? JavaScript file 2

import {add} from './add1';
import add from './add2';



JavaScript Object Notation JSON is a syntax for storing and exchanging data. JSON is text, written with JavaScript object notation.

JSON vs XML syntax

everything needs to be a string
JSON can be understood by any server language.
Javascript come with its own functions:

JSON.parse(); //turn a JSON to an object
var obj = JSON.parse('{"name":"John","age":30, "city":"New York"}');
JSON.stringify();//turn an object to JSON
var myJSON = JSON.stringify(obj);

Originally, the only way to submit some form data to a server was through the <form> tag in HTML. As we have learned, it can do a POST or a GET request. With JSON you can now grab the contents of the <input> in a form and submit those with JSON instead of as a form data. You can now submit to the server whenever you want without it necessarily being a <form>, through AJAX.


It allows us to read from a web server after the page has loaded and updated a web page without reloading the page. And finally, send data in the background while the user is interacting with the Website.

???? The new Way: Fetch

fetch('/my/url').then(response => {

???? Example:

myAjaxfunction() {
     .then(response=> response.json())//return a promise
     .then(data => console.log(data));//return an object

Ajax is a combination of tools of using the fetch API, using HTTP, using JSON to communicate with servers.


A promise is an object that may produce a single value sometime in the future. Either a resolved value or a reason that it's not resolved or rejected. A promise maybe in one of three possible states fulfilled, rejected, or pending.

before Promise

???? Example 1

el.addEventListener("click", submitForm);

???? Example 2

// callback pyramid of dom
movePlayer(100, 'Left', function(){
   movePlayer(400, 'Left', function(){
       movePlayer(40, 'Right', function(){
           movePlayer(330, 'Left', function() });

with Promise

movePlayer(100, 'left')
  .then(() => movePlayer(400, 'Left'))
  .then(() => movePlayer(40, 'Right'))
  .then(() => movePlayer(330, 'Left'))

Creating a Promise

const promise = new Promise((resolve, reject) => {
   if (true) {
       resolve('Stuff Worked');
   }else {
       reject('Error, it broke')
// One line
promise.then(result => console.log(result));
// Multiple lines
 .then(result => result + '!')
 .then(result2 => {

Catching an Error

const promise = new Promise((resolve, reject) => {
   if (true) {
       resolve('Stuff Worked');
   }else {
       reject('Error, it broke')

 .then(result => result + '!')
 .then(result2 => {
     throw Error
 .catch(() => console.log('Errooor!'))

The error needs to happen before catch, otherwise, it won't run.

Promise for Asynchronous programming

promises are great for asynchronous programming. When you don't want javascript to block the execution of your code like making API calls, grabbing data from a database, or maybe optimizing an image you use a promise so that the task happens in the back. when the promise gets resolved or rejected then you'll get that response.

const promise = new Promise((resolve, reject) => {
   if (true) {
       resolve('Stuff Worked');
   }else {
       reject('Error, it broke')

const promise2 = new Promise((resolve, reject) => {
   setTimeout(resolve, 100, 'HIII')
const promise2 = new Promise((resolve, reject) => {
   setTimeout(resolve, 1000, 'POOKIE')
const promise2 = new Promise((resolve, reject) => {
   setTimeout(resolve, 5000, 'Is it me you are looking for?')
Promise.all([promise, promise2, promise3, promise4])
.then(values => {

it took 5 seconds in order to execute, because Promise.all() execute according to the longest, which in this case 5 seconds.

Example in a real-time scenario

const urls = [

Promise.all(urls.map(url => {
    return fetch(url).then(resp => resp.json())
})).then(results => {
  }).catch(() => console.log('Error!'))
  //to catch an error if there's one.

So at their most basic promises are a bit like event listeners except a promise can only succeed or fail once it cannot succeed or fail twice. And this is extremely useful for things that are asynchronous. Success and failure such as API call because we're less interested in the exact time something became available and more interested in reacting to the outcome. So we're reacting to something that happens asynchronously.


Async Await is part of ES8 and is built on top of promises. Now underneath the hood an async function is a function that returns a promise. But the benefit of Async Await is that it makes code easier to read.

With Promise

movePlayer(100, 'left')
  .then(() => movePlayer(400, 'Left'))
  .then(() => movePlayer(40, 'Right'))
  .then(() => movePlayer(330, 'Left'))


async function playerStart(){
   const firstMove = await movePlayer(100, 'Left');//pause
   await movePlayer(400, 'Left');//pause
   await movePlayer(10, 'Left');//pause
   await movePlayer(330, 'Left');//pause

The goal with async-await is to make code look synchronous - a code that's asynchronous look synchronous. async-await code are just promises. Underneath the hood, we call this 'syntactic sugar' something that still does the same thing but is just different syntax to make it look prettier.

async function playerStart(){
   const first = await movePlayer(100, 'Left');//pause
   const second = await movePlayer(400, 'Left');//pause
   await movePlayer(10, 'Left');//pause
   await movePlayer(330, 'Left');//pause

Now the cool thing about this is that instead of chaining it like this I can now assign just like asynchronous programming, variable first to await this, and I can assign second to await this and first and second, will have the result of each function but in a variable. So it looks very synchronous. You're not using '.then' you're not chaining.

More realistic example

???? Example 1

    .then(resp => resp.json())
    async function fetchUsers(){
    const resp = await fetch('https://jsonplaceholder.typicode.com/users')
    const data = await resp.json();

???? Example 2

// promise
const urls = [

Promise.all(urls.map(url => {
    return fetch(url).then(resp => resp.json())
})).then(results => {
  }).catch(() => console.log('Error!'))

const getData = async function() {
    try {
    const [ users, posts, albums ] = await Promise.all(urls.map(url => fetch(url).then(resp => resp.json())))
    console.log('users', users)
    console.log('posts', posts)
    console.log('albums', albums)
    } catch(error) {
        console.log('oops, error!', error)
// it's important to give catch a parametre 'error'


You can call a function after the state value has updated:

this.setState({foo: 'bar'}, () => { 
    // Do something here. 

Also, if you have lots of states to update at once, group them all within the same setState:

Instead of:

this.setState({foo: "one"}, () => {
    this.setState({bar: "two"});

Just do this:

    foo: "one",
    bar: "two"

ES9 (2018)

Object spread operator

const animals = {
    tiger: 23,
    lion : 4,
    monkey: 2,
    bird: 40
function objectSpread(p1, p2, p3) {
const {tiger, lion, ...rest} = animals;
objectSpread(tiger, lion, rest);

This return 23, then 5, then {monkey: 2, bird: 40}


???? finally:

finally is great for those times that you need to run a piece of code no matter what After a promise, perhaps you want to send an email to a user regardless of whether their request was successful or failed. Maybe you want to have a little notification icon. There are many ways to use finally and now there is a way to make sure that something happens after a promise.

const urls = [

Promise.all(urls.map(url => {
    return fetch(url).then(people => people.json())
})).then(array => {
    throw Error;
      console.log('1', array[0])
      console.log('2', array[1])
      console.log('3', array[2])
      console.log('4', array[3])
  }).catch(err => console.log('ughhhh fix it!', err))
  .finally(() => console.log('extra'));

finally() will run regardless of what happened before.

???? for await of

const urls = [

const getData = async function() {
    try {
    const [ users, posts, albums ] = await Promise.all(urls.map(url => fetch(url).then(resp => resp.json())));
    console.log('users', users)
    console.log('posts', posts)
    console.log('albums', albums)
    } catch(error) {
        console.log('oops, error!', error)

// For await of
const getData2 = async function() {
    const arrayOfPromises = urls.map(url => fetch(url));
    for await (let request of arrayOfPromises) {
        const data = await request.json();

The only thing that the for await of feature does it allows us to loop through these multiple promises almost as if we're writing synchronous code. So to review we have the finally function that we can run at the end of a promise and we have the for await of that takes each item from an array of promises that returns to us in the correct order.