WEB CHEATSHEET

web-cheatsheet.md

WEB CHEATSHEET

What is the maximum length of a url in different browsers?

https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers#:~:text=Short%20answer%20%2D%20de%20facto%20limit,of%20client%20and%20server%20software.

KB to string

https://stackoverflow.com/questions/1515884/using-javascript-to-truncate-text-to-a-certain-size-8-kb

function toBytesUTF8(chars) {
    return unescape(encodeURIComponent(chars));
}
function fromBytesUTF8(bytes) {
    return decodeURIComponent(escape(bytes));
}

function truncateByBytesUTF8(chars, n) {
    var bytes= toBytesUTF8(chars).substring(0, n);
    while (true) {
        try {
            return fromBytesUTF8(bytes);
        } catch(e) {};
        bytes= bytes.substring(0, bytes.length-1);
    }
}

Which size should you choose to create a text column in MYSQL?

https://chartio.com/resources/tutorials/understanding-strorage-sizes-for-mysql-text-data-types/#:~:text=TINYTEXT%3A%20255%20characters%20%2D%20255%20B,requires%20a%201%20byte%20overhead.

What are common Authorization Models?

https://casbin.org/docs/en/supported-models

RBAC

• https://profsandhu.com/cs6393_s12/lecture-rbac96.pdf

RBAC

https://www.informit.com/articles/article.aspx?p=782116#:~:text=Mutually%20exclusive%20roles%20are%20roles,the%20set%20for%20a%20session.

RBAC Libs

• https://casl.js.org/v5/en/

Visualize

UA : User Assignment
PA : Permission Assignment

JWT

• https://docs.microsoft.com/en-us/azure/active-directory/develop/id-tokens
• https://jwt.io/

Firebase Realtime Database

Create new project

• https://console.firebase.google.com/u/0/

Step 1

Step 2

Step 3

Add new firebase realtime database

Select your database region

Test Mode Enable

Finally, you will have this new database with the generated URI

Let’s design a simple notification database

"notifications": {
  "$userId": {
        "notificationId": 1,
        "content": "hello",
        "notificationType": 1,
        "isRead": false,
        "isSent": false
   },
}
{
  "notifications": {
    "1": [
      {
        "userId": 1,
        "notificationId": 1,
        "content": "hello",
        "notificationType": 1,
        "isRead": false,
        "isSent": false
      },
      {
        "userId": 1,
        "notificationId": 2,
        "content": "hey",
        "notificationType": 2,
        "isRead": false,
        "isSent": false
      }
    ],
    "2": [
      {
        "userId": 2,
        "notificationId": 3,
        "content": "heyo",
        "notificationType": 1,
        "isRead": false,
        "isSent": false
      }
    ]
  }
}

Import

After imported

Connect and get DB instance

/* eslint-disable import/no-anonymous-default-export */
import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

export default {
  getInstance: (databaseURL) => {
    const firebaseConfig = {
      // ...
      // The value of `databaseURL` depends on the location of the database
      databaseURL,
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);

    // Initialize Realtime Database and get a reference to the service
    return getDatabase(app);
  },
};

Subscribe for changes

• Ref

function App() {
  const [notifications, setNotifications] = useState([]);
  const subcribeOnNotification = () => {
    const db = firebaseService.getInstance(FIREBASE_DATABASE_URL);
    const userId = 1;
    const dbRef = ref(db, "/notifications/" + userId);
    onValue(
      dbRef,
      (snapshot) => {
        if (snapshot.val()) {
          setNotifications([...notifications, ...snapshot.val()]);
        }
      },
      {
        onlyOnce: false,
      }
    );
  };
  // init
  useEffect(() => {
    subcribeOnNotification();
  }, []);
  return (
    <>
      <h1>Firebase Realtime Database Notififcation Sample</h1>
      <ul>
        {notifications.map((n) => (
          <li key={n.notificationId}>{JSON.stringify(n)}</li>
        ))}
      </ul>
    </>
  );
}

export default App;

Secure your firebase database

1. Security rules

• Ref : https://firebase.google.com/docs/database/security/rules-conditions

Sample: User can only read his records

"notifications": {
  "$userId": {
        "notificationId": 1,
        "content": "hello",
        "notificationType": 1,
        "isRead": false,
        "isSent": false
   },
}

2. In this case user must login with firebase to allow they can access their record

There are several ways to authenticate a user with firebase. In this case we will use custom token through our API server to shared the same user id of our system with firebase

3. Enable Authentication on Firebase

Access your firebase console and enable authentication product

• firebase/quickstart-js#534

4. Create custom Auth

5. Get configuration

5.1. Generate admin service account to use in your API Server

5.2. Generate app configuration

Add app -> select web app

    // Initialize Firebase connection
import { onValue, ref } from "firebase/database";
import {
  getAuth,
  onAuthStateChanged,
  signInWithCustomToken,
} from "firebase/auth";
import { getDatabase } from "firebase/database";
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);
    const db= getDatabase(app);
    // login
    signInWithCustomToken(auth, customToken)
      .then((userCredential) => {
        console.log(userCredential);
      })
      .catch((error) => {
        console.error(error);
      });
   // listen on login state
    onAuthStateChanged(auth, (user) => {
      
      // user = null | Object
      if (user) {
       // do anything you want
      }
    });   
   // db manipulation : listen on change
    const userId = 1;
    const dbRef = ref(db, "/notifications/" + userId);
    onValue(
      dbRef,
      (snapshot) => {
        if (snapshot.val()) {
          setNotifications([...notifications, ...snapshot.val()]);
        }
      },
      {
        onlyOnce: false,
      }
    );

6. Samples

Backend API

const admin = require("firebase-admin");

const serviceAccount = require("./jsguru-firebase-admin-sdk.json");
var auth = null;
// connect Firebase
  const app = admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
  });
  auth = admin.auth(app);

const getAuth = () => {
  return auth;
};

app.post("/generate-firebase-token", async (req, res) => {
  const userId = "1";
  const additionalClaims = {
    premiumAccount: false,
  };
  // Custom auth without generate your custom JWT
  await new Promise((resolve) => {
    getAuth()
      .createCustomToken(userId, additionalClaims)
      .then((customToken) => {
        // Send token back to client
        resolve(customToken);
        res.send({
          customToken,
        });
      })
      .catch((error) => {
        res.send({
          customToken: "",
        });
        console.log("Error creating custom token:", error);
      });
  });
});

Application

// firebase.service.js
/* eslint-disable import/no-anonymous-default-export */
import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

export default {
  getInstance: () => {
    const firebaseConfig = {
      // ...
      // The value of `databaseURL` depends on the location of the database
      apiKey: `${process.env.REACT_APP_apiKey}`,
      authDomain: `${process.env.REACT_APP_authDomain}`,
      databaseURL: `${process.env.REACT_APP_databaseURL}`,
      projectId: `${process.env.REACT_APP_projectId}`,
      messagingSenderId: `${process.env.REACT_APP_messagingSenderId}`,
      appId: `${process.env.REACT_APP_appId}`,
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);

    // Initialize Realtime Database and get a reference to the service
    return {
      app,
      db: getDatabase(app),
    };
  },
};

// App.jsx

async function postData(url = "", data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, *cors, same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: "follow", // manual, *follow, error
    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

const getFirebaseToken = () => {
  return postData("http://localhost:1337/login");
};

const { app, db } = firebaseService.getInstance();
const auth = getAuth(app);

function App() {
  const [notifications, setNotifications] = useState([]);
  const doLogin = async () => {
    const res = await getFirebaseToken();
    console.log(auth);
    console.log(app);
    signInWithCustomToken(auth, res.customToken)
      .then((userCredential) => {
        console.log(userCredential);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  const subcribeOnNotification = () => {
    const userId = 1;
    const dbRef = ref(db, "/notifications/" + userId);
    onValue(
      dbRef,
      (snapshot) => {
        if (snapshot.val()) {
          setNotifications([...notifications, ...snapshot.val()]);
        }
      },
      {
        onlyOnce: false,
      }
    );
  };

  // init
  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      console.log("user", user);
      if (user) {
       // do something with realtime database
      subcribeOnNotification();
      }
    });
  }, []);

  return (
    <>
      <h1>Firebase Realtime Database Notififcation Sample</h1>
      <ul>
        {notifications.map((n) => (
          <li key={n.notificationId}>{JSON.stringify(n)}</li>
        ))}
      </ul>
      <button onClick={() => doLogin()}>Login</button>
    </>
  );
}

Setup 1 project REST Api với NestJS như thế nào cho chuẩn

Tổng quan Architecture

Ứng dụng

Xây dựng REST API cung cấp dữ liệu thời gian thực giá vàng

Tính năng cập nhật giá vàng

1. Cập nhật giá vàng theo ngày : nhập thông thường
2. Cập nhật giá vàng hàng loạt: import tập tin excel theo định dạng
3. Cập nhật giá vàng tự động: thiết lập link liên kết lấy giá vàng, khoảng thời gian lấy

Tính năng hiển thị giá vàng

Dạng hiện thị : dạng bảng hoặc dạng biểu đồ

1. Hiển thị giá vàng theo giờ
2. Hiển thị giá vàng theo ngày
3. Hiển thị giá vàng theo tuần
4. Hiển thị giá vàng theo tháng
5. Hiển thị giá vàng theo năm

Phân tích

Output

Lựa chọn database và cách lưu trữ

1. MongoDB
2. Nested Object

Coding

Database first

1. Install mongoose package for NestJS
2. Configure mongoose connection
3. Create Model
4. Generate dataseed
5. Write tests for create, read, update, delete

Setup firebase base cloud messaging

Optimize and secure your images

Performance

1. Size
2. Quality
3. Preload
4. Lazy load
5. Caching
6. CDN
7. SVG

SEO

1. Alt
2. Title
3. Specific image's size : width, height
4. FCP : first content paintful
5. Adaptive and responsive images
6. image/webp format
7. Place holder

Security

1. External images
2. SVG
3. CDN