Understanding offsetWidth, clientWidth, scrollWidth Note All these property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect(). Get Scrollbar width Reference: https://www.30secondsofcode.org/js/s/get-scrollbar-width/ Get window scroll bar width const getScrollbarWidth = () => window.innerWidth - document.documentElement.clientWidth; getScrollbarWidth(); Get a element scroll bar width const getScrollbarWidth = (el) => { const leftBorder = parseInt( getComputedStyle(el).getPropertyValue('border-left-width'), 10 ); const rightBorder = parseInt( getComputedStyle(el).getPropertyValue('border-right-width'), 10 ); return el.offsetWidth - el.

generic types optional To make a generic type optional, you have to assign the void as the default value. const fetchData = <T = void>(url: string): T => { const res: T = fetch(url); return res; }; https://garbagevalue.com/blog/optional-generic-typescript#quick-solutions-make-generic-type-optional string[ ] & [ string, …string[ ] ] The main difference is that type [string, ...string[]] at least have one element. [] will alert error. string[] could be empty. [] is ok.

Reference official https://ffmpeg.org blog https://fireship.io/lessons/ffmpeg-useful-techniques/ node js https://www.npmjs.com/package/fluent-ffmpeg example concatenate ffmpeg -f concat -i vids.txt -c copy out.mp4 vids.txt: file 'name1.mov' file 'name2.mov' file 'name3.mov' Type convention ffmpeg -i in.mp4 out.mov ffmpeg -i in.mp4 out.gif Scale It very common to reduce size of output file. Change scale usually the common and efficient way to do so. ffmpeg -i in.mov -vf scale=960:-1 out.gif Reference from ffmpeg wiki

Design pattern Factory pattern const createDataBaseClass = (dbName: DBOption) => { switch (dbName) { case 'InMemo': return InMemoryDataBase; case 'SQL': return SQL_DB; // ... // you can add anything else default: break; } }; Singleton pattern export const createDataBase = <T extends BaseRecord>() => { const db = new InMemoryDataBase<T>(); return db; }; const pokemonDB = createDataBase<Pokemon>(); pokemonDB.set({ id: 'Bulbasaur', attack: 59, defense: 10, }); console.log(pokemonDB.get('Bulbasaur')); // A CPP way to do const createDataBase2 = <T extends BaseRecord>() => { class InMemoryDataBase2 implements DataBase<T> { private db: Record<string, T> = {}; static instance: InMemoryDataBase2 = new InMemoryDataBase2(); private constructor() {} // private constructor is necessary public set(newValue: T): void { this.

type Union type & Literal type const add = ( a: number | string, b: number | string, type?: 'number' | 'string' ): number | string => { if (type === 'string') { return a.toString() + b.toString(); } else return +a + +b; }; console.log(add(1, 2)); Array type Book = { id: string; name: string; }; let books: Book[] = []; unknown let test1: unknown; let test2: string; test1 = 'xyz'; // ok // test2 = test1; // error function f1(a: any) { a.

React logic extraction Check this post Example code This example demonstrate one single feature using four different feature to archive code split Code running there: –>Link<– import { useState, useEffect } from React; const Styles = { redBorder: { border: '1px solid #f00', }, }; const MouseDisplay = ({ x, y }) => { return ( <div> Mouse at x: {x} ; y: {y} </div> ); }; const MouseDisplay2 = ({ x, y }) => { return ( <div style={{ color: 'teal' }}> Mouse at x: {x} ; y: {y} </div> ); }; // Normal export const MouseInfoAndDisplay = () => { const [x, setX] = useState(0); const [y, setY] = useState(0); const handleMove = (e) => { setX(e.

React –>Look this post<– WEB basic Please Stop Using Local Storage https://www.rdegges.com/2018/please-stop-using-local-storage/ JWT authentication: When and how to use it https://blog.logrocket.com/jwt-authentication-best-practices/#:~:text=A%20JWT%20needs%20to%20be,storage%20(or%20session%20storage). Graphql Dispatch This: Using Apollo Client 3 as a State Management Solution https://www.apollographql.com/blog/dispatch-this-using-apollo-client-3-as-a-state-management-solution/ Apollo Client update cache when delete an item from list https://github.com/apollographql/apollo-client/issues/6451#issuecomment-775242381 Several things for Graphql Security https://ithelp.ithome.com.tw/articles/10208008 should I put useQuery inside a useEffect and should I store returned data in state? https://github.com/trojanowski/react-apollo-hooks/issues/158 How to Use GraphQL DataLoader https://rahmanfadhil.

Modal box Demo Cursor & hover effect Demo Pure Css hamburger button This is a hamburger button using pure css to style it. Demo Loading Demo Sidebar Demo Profile Demo

webpack is a static module bundler for modern JavaScript applications. Document: https://webpack.js.org/concepts/ Installation npm i -D webpack webpack-cli webpack core concept Entry An entry point indicates which module webpack should use to begin building out its internal dependency graph. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly). Output The output property tells webpack where to emit the bundles it creates and how to name these files.

Jest is a JavaScript Testing Framework Document: https://jestjs.io/docs/en/getting-started How to use Jest function.js const axios = require('axios'); const functions = { add: (num1, num2) => num1 + num2, isNull: () => null, checkValue: (x) => x, createUser: () => { const user = { firstName: 'Brad' }; user['lastName'] = 'Traversy'; return user; }, fetchUser: () => axios .get('https://jsonplaceholder.typicode.com/users/1') .then((res) => res.data) .catch((err) => 'error'), }; module.exports = functions; function.test.js