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 1 2 3 4 const getScrollbarWidth = () => window.innerWidth - document.documentElement.clientWidth; getScrollbarWidth(); Get a element scroll bar width 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const getScrollbarWidth = (el) => { const leftBorder = parseInt( getComputedStyle(el).

generic types optional To make a generic type optional, you have to assign the void as the default value. 1 2 3 4 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.

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: 1 2 3 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 1 2 3 4 5 6 7 8 9 10 11 12 13 const createDataBaseClass = (dbName: DBOption) => { switch (dbName) { case 'InMemo': return InMemoryDataBase; case 'SQL': return SQL_DB; // ... // you can add anything else default: break; } }; Singleton pattern 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 export const createDataBase = <T extends BaseRecord>() => { const db = new InMemoryDataBase<T>(); return db; }; const pokemonDB = createDataBase<Pokemon>(); pokemonDB.

type Union type & Literal type 1 2 3 4 5 6 7 8 9 10 11 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 1 2 3 4 5 6 type Book = { id: string; name: string; }; let books: Book[] = []; unknown 1 2 3 4 5 6 7 8 9 10 11 12 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<– 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 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 1 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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 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 .