ag grid

API  defines how to access a resource. SDK  is a set of tools that can call APIs for us.

api vs sdk

Are all words in text 
      export default function areWordsInText(wordsArr, text) {
        const wordsArrL = wordsArr.map(el => el.toLowerCase())
        const textL = text.toLowerCase()
        return wordsArrL.every(elem => textL.includes(elem))
      }
       areWordsInText(['a', 'b', 'c'], 'abcd')  =  true areWordsInText(['a', 'b', 'q'], 'abcd')  =  false Is some word in text 
      export default function isSomeWordInText(wordsArr, text) {
        const wordsArrL = wordsArr.map(el => el.toLowerCase())
        const textL = text.toLowerCase()
        return wordsArrL.some(elem => textL.includes(elem))
      }
       isSomeWordInText(['a', 'b', 'c'], 'abcd')  =  true isSomeWordInText(['a', 'b', 'q'], 'abcd')  =  true

are words in text

Declaration 
        let fruits = new Array("Apple", "Pear", "etc")

        // mix of values + training comma are allowed
        let arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello') }, ]
       Access via brackets [] 
        fruits[0] // Apple
        arr[1].name // John
        arr[3]() // hello
        arr[arr.length - 1]() // hello
       Access via .at() Accepts negative numbers. 
        fruits.at(0) // Apple
        arr.at(1).name // John
        arr.at(3)() // hello
        arr.at(-1)() // hello
       Change via brackets MUTATES! 
        fruits[2] = 'Pear' // now ["Apple", "Orange", "Pear"]
        fruits[3] = 'Lemon' // now ["Apple", "Orange", "Pear", "Lemon"]
       Change via with() 
      const correctionNeeded = [1, 1, 3]
      correctionNeeded.with(1, 2) // => [1, 2, 3]
      correctionNeeded // => [1, 1, 3]
       Delete MUTATES! 
        let arr = ["I", "study", "JavaScript", "right", "now"]
        delete arr[1]; 
        arr // ["I", empty, "JavaScript", "right", "now"]

        arr.length = 3 // truncate
        arr // ["I", empty, "JavaScript"]
        arr.length = 0 
        arr // []
       Arrays is reference type 
        let fruits = ["Banana"]
        let arr = fruits // copy by reference (two variables reference the same array)
        arr.push("Pear") // modify the array by reference
        fruits // Banana, Pear - 2 items now
       Arrays is an ordered collection Arrays is an ordered collection & we can destroy array speed if: Add a non-numeric property like  arr.test = 5 Make holes like  arr[0] ,  arr[1000]  & nothing between Fill an array in the reverse order, like  arr[1000] ,  arr[999]  and so on. Keys, values, entries 
        let arr = ['a', 'b', 'c']

        // object methods
        Object.keys(arr) // ['0', '1', '2']
        Object.values(arr)  // ['a', 'b', 'c']
        Object.entries(arr) // [["0",1],["1",2],["2",3]]

        // array iterator methods
        const iterator = arr.values(); // returns a new Array Iterator object that contains the values for each index in the array
        for (const value of iterator) console.log(value); // a // b // c

        const iterator = arr.keys(); // returns a new Array Iterator object that contains the keys for each index in the array.
        for (const key of iterator) console.log(key);  // 0 // 1 // 2

        const iterator = arr.entries();
        for (const entry of iterator) console.log(entry); // [0, "a"] // [1, "b"] // [2, "c"]
       Length 
        let arr = [1, 2, 3, 4, 5]
        arr.length // 5 // greatest numeric index plus one

        arr[123] = "Apple"
        arr // [1, 2, 3, 4, 5, empty × 118, "Apple"]
        arr.length // 124

        arr.length = 2 // truncate to 2 elements
        arr // [1, 2]

        arr.length = 124 // return length back
        arr // [1, 2, empty × 122]

        arr[3] // undefined

        arr.length = 0 // simplest way to clear the array
        arr // []
       Multidimensional arrays 
        let matrix = [
          [1, 2, 3],
          [4, 5, 6],
          [7, 8, 9]
        ];
        matrix[1][1] // 5
       Loops For 
        for (let i = 0; i < arr.length; i++) {
          alert(arr[i]);
        }
       for..of 
        for (let fruit of arr) {
          alert(fruit); // no access to index, only to a value
        }
       for..in DO NOT USE!!! 
        // came from object, 100 times slower 
        for (let key in arr) {
          alert(arr[key]); 
        }
       forEach 
          arr.forEach(function(item, index, array) {
            alert(`${item} is at index ${index} in ${array}`);
          });
       Array.isArray() 
        typeof {} // object
        typeof [] // object
        Array.isArray({}) // false
        Array.isArray([]) // true
       Array.from() Returns a new shallow-copied array instance from iterable object 
        let arrayLike = {  0: "Hello",  1: "World",  length: 2};
        let arr = Array.from(arrayLike); // ["Hello", "World"]

        let arrLike = $('textarea'); // S.fn.init(4) [#word-textarea, #tranalstion-textarea, #example-textarea, #category-textarea, prevObject: S.fn.init(1)]
        let arr = Array.from(arrayLike); // [#word-textarea, #tranalstion-textarea, #example-textarea, #category-textarea]
       push() MUTATES! 
        let arr = ["Apple", "Orange", "Pear"]
        arr.push("Lemon") // 4 // arr = ["Apple", "Orange", "Pear", "Lemon"]
        arr.push("Orange", "Peach")  // 6 
        arr // ["Apple", "Orange", "Pear", "Lemon", "Orange", "Peach"]
       pop() MUTATES! 
        let arr = ["Apple", "Orange", "Pear"]
        arr.pop() // "Pear" 
        arr // ["Apple", "Orange"]
       unshift() MUTATES! 
        // SLOW!
        let arr = ["Apple", "Orange", "Pear"]
        arr.unshift("Lemon") // 4 
        arr // ["Lemon", "Apple", "Orange", "Pear"]
        arr.unshift("Orange", "Peach") // 6 
        arr // ["Orange", "Peach", "Lemon", "Apple", "Orange", "Pear"]
       shift() MUTATES! 
        // SLOW!
        let arr = ["Apple", "Orange", "Pear"]
        arr.shift() // "Apple" 
        arr // ["Orange", "Pear"]
       String() 
        // returns a comma-separated list of elements
        let arr = ["Apple", "Orange", "Pear"];
        String(arr); // "Apple,Orange,Pear"
       toString() 
        const arr = [1, 2, 'a', '1a']
        arr.toString() // "1,2,a,1a"
        arr // [1, 2, 'a', '1a']
       toLocaleString() 
        const  arr = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
        arr.toLocaleString('en', { timeZone: 'UTC' }); // "1,a,12/21/1997, 2:12:00 PM"
       splice() MUTATES! arr.splice(startIndex, [deleteCount], [elemToInsert1], [elemToInsert2]) arr.splice(index, 1)  - remove one element Remove an item by index position modifies arr starting from the startIndex removes deleteCount number of elements inserts elem1, ..., elemN at their place Returns the array of removed elements 
        // remove el
        let arr = ["I", "study", "JavaScript"]
        arr.splice(1, 1) // ["study"] // Starting from the index 1 remove 1 el
        arr // ["I", "JavaScript"]

        // remove & replace els
        let arr = ["I", "study", "JavaScript", "right", "now"]
        arr.splice(0, 3, "Let's", "dance") // ) ["I", "study", "JavaScript"]
        arr // ["Let's", "dance", "right", "now"]

        // insert the elements w/o any removals
        let arr = ["I", "study", "JavaScript"]
        arr.splice(2, 0, "complex", "language") // []
        arr // ["I", "study", "complex", "language", "JavaScript"]

        // Negative indexes are allowed
        // index -1 (one step from the end)
        let arr = [1, 2, 5]
        arr.splice(-1, 0, 3, 4) // []
        arr // [1, 2, 3, 4, 5]
       toSpliced() 
      const months = ["Jan", "Mar", "Apr", "May"];

      // Inserting an element at index 1
      const months2 = months.toSpliced(1, 0, "Feb");
      console.log(months2); // ["Jan", "Feb", "Mar", "Apr", "May"]

      // Deleting two elements starting from index 2
      const months3 = months2.toSpliced(2, 2);
      console.log(months3); // ["Jan", "Feb", "May"]

      // Replacing one element at index 1 with two new elements
      const months4 = months3.toSpliced(1, 1, "Feb", "Mar");
      console.log(months4); // ["Jan", "Feb", "Mar", "May"]

      // Original array is not modified
      console.log(months); // ["Jan", "Mar", "Apr", "May"]
       slice() arr.slice([beginIndex], [endIndex]) returns new array copying all items from beginIndex to endIndex (not including end) start & end can be negative, in that case position from end is assumed 
        let arr = ["t", "e", "s", "t"];
        arr.slice(1, 3); // ["e", "s"] (copy from 1 to 3) 
        arr // ["t", "e", "s", "t"]

        arr.slice(-2); // ["s", "t"] (copy from -2 to the end) 
        arr // ["t", "e", "s", "t"]

        let newArr = arr.slice(); // ["t", "e", "s", "t"] // created a copy
        arr // ["t", "e", "s", "t"]
       concat() arr.concat(arg1, arg2) 
        const arr = [1, 2]
        const newArr = arr.concat([3, 4]) // [1, 2, 3, 4] 
        arr // [1, 2]

        arr.concat([3, 4], [5, 6]) // [1,2,3,4,5,6] 
        arr.concat([3, 4], 5, 6) // [1,2,3,4,5,6] // arr = [1, 2]
       Make iterable concatable 
          let arr = [1, 2]
          let arrayLike = {
            0: "something",
            length: 1,
          }
          arr.concat(arrayLike) // [1,2,[object]]

          let arr = [1, 2];
          let arrayLike = {
            0: "something",
            1: "else",
            [Symbol.isConcatSpreadable]: true,
            length: 2,
          };
          arr.concat(arrayLike) //[1, 2, "something", "else"]
       indexOf(), lastIndexOf() arr.indexOf(item, [fromIndex]) 
        // looks for item starting from index from, and returns the index where it was found, otherwise -1.
        // same methods as for strings

        let arr = [1, 0, false, 1];

        arr.indexOf(0) // 1
        arr.indexOf(false) // 2
        arr.indexOf(null) // -1

        // same, but looks for from right to left
        arr.lastIndexOf(1) // 3
       includes() arr.includes(item, [fromIndex]) 
        //  looks for item starting from fromIndex, returns true if found
        arr.includes(1) // true

        // indexOf() vs includes()
        [NaN].indexOf(NaN) // -1 (should be 0, but === equality doesn't work for NaN)
        [NaN].includes(NaN) // true
       reverse() MUTATES! 
      const items = [1, 2, 3];
      console.log(items); // [1, 2, 3]

      items.reverse();
      console.log(items); // [3, 2, 1]
       toReversed() 
      const sequence = [1, 2, 3];
      sequence.toReversed(); // => [3, 2, 1]
      sequence; // => [1, 2, 3]
       split() 
        let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);
        arr; // [Bilbo, Gandalf]
        "test".split('') // ["t", "e", "s", "t"]
       join() 
        let arr = ['Bilbo', 'Gandalf', 'Nazgul'];
        let str = arr.join(';'); // glue the array into a string using ;
        str; // Bilbo;Gandalf;Nazgul
       fill() MUTATES! arr.fill(value, [startIndex], [endIndex]) 
        let arr = [1, 2, 3, 4];
        arr.fill(0, 2, 4); // [1, 2, 0, 0] // fill with 0 from position 2 until position 4
        arr // [1, 2, 0, 0]

        arr.fill(5, 1); // [1, 5, 5, 5] // fill with 5 from position 1
        arr.fill(6); // [6, 6, 6, 6] // fill all with 6
       copyWithin() arr.copyWithin(targetIndex, [startIndex], [endIndex]) copies part of an array to another location in the same array and returns it w/o modifying its length targetIndex - index where to copy. If negative - counted from the end startIndex - index start copying elements from. If negative - counted from the end. Default - 0 endIndex - index end copying elements from. copyWithin() copies up to but not including end. If negative - counted from the end. Default = arr.length 
        let arr = ['a', 'b', 'c', 'd', 'e'];
        arr.copyWithin(0, 3, 4); // ["d", "b", "c", "d", "e"] // copy to index 0 the element at index 3
        arr // ["d", "b", "c", "d", "e"] 

        arr.copyWithin(1, 3); // ["d", "d", "e", "d", "e"] // copy to index 1 els from index 3 to the end
       flat() arr.flat([depth]) returns a new array with concatenated sub-array elements with specified depth. depth - The depth level specifying how deep a nested array structure should be flattened. Defaults to 1. 
        let arr = [0, 1, 2, [3, 4]]
        arr.flat() // [0, 1, 2, 3, 4]
        arr // [0, 1, 2, [3, 4]] // not mutated

        let arr = [0, 1, 2, [[[3, 4]]]]
        arr.flat(2) // [0, 1, 2, [3, 4]]
        arr.flat() // [0, 1, 2, [[3, 4]]]

        [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]].flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
       map() let result = arr.map(function(item, [index], [array]) {...}, [thisArg]); method calls the function for each element of the array returns an array of function returns It is identical to a map() followed by a flat() of depth 1 
        let arr = ["Bilbo", "Gandalf", "Nazgul"]
        arr.map(item => item.length) // [5, 7, 6]
        arr // ["Bilbo", "Gandalf", "Nazgul"]
       flatMap() arr.flatMap(function callbackFn(currentValue, [index], [array]) {...}, [thisArg])  method returns a new array formed by applying a given callback function to each element of the array Result is flattened by one level It is identical to a map() followed by a flat() of depth 1 
        var arr = [1, 2, 3, 4];
        arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6, 4, 8]
        arr // [1, 2, 3, 4]
       sort() MUTATES! returns sorted modified array sort(function compareFn(firstEl, secondEl) {...}) comparison function is required to return a positive number to say “greater” and a negative number to say “less”. 
        let arr = [ 1, 2, 15 ]
        arr.sort() // [1, 15, 2] // items are sorted as strings by default
        arr // 1, 15, 2

        function compareFn(firstEl, secondEl) {
          if (firstEl > secondEl) return 1; // if the first value is greater than the second
          if (firstEl == secondEl) return 0; // if values are equal
          if (firstEl < secondEl) return -1; // if the first value is less than the second
        }
        arr.sort(compareFn);
        arr // 1, 2, 15

        // shorter function
        let arr = [ 1, 2, 15 ]
        arr.sort(function(a, b) { return a - b })
        arr  // 1, 2, 15

        // or even shorter with an arrow fn
        [ 1, 2, 15 ].sort( (a, b) => a - b ); // [1, 2, 15]
        ['Österreich', 'Andorra', 'Vietnam'].sort(); // ["Andorra", "Vietnam", "Österreich"]
        ['Österreich', 'Andorra', 'Vietnam'].sort( (a, b) => a.localeCompare(b) ); // ["Andorra", "Österreich", "Vietnam"]
       toSorted() 
      const outOfOrder = new Uint8Array([3, 1, 2]);
      outOfOrder.toSorted(); // => Uint8Array [1, 2, 3]
      outOfOrder; // => Uint8Array [3, 1, 2]
       filter() arr.filter(function(element, [index], [array]) {...}, [thisArg])  returns a new array of all matching elements if 'true' item is pushed to results and the iteration continues returns empty array if nothing found 
        // returns array of the first two users
        const users = [{id: 1, name: "John"},{id: 2, name: "Pete"}, {id: 3, name: "Felix"}]
        let someUsers = users.filter(item => item.id < 3); 
        someUsers // [{id: 1, name: "John"},{id: 2, name: "Pete"}]
       some() arr.some(function(element, [index], [array]) {...}, [thisArg])  method tests if one element in the array passes the test function returns true if it finds an el for which the function returns true, otherwise it returns false 
        const array = [1, 2, 3, 4, 5]
        const even = (el) => el % 2 === 0 // checks whether an element is even
        array.some(even) // true
       every() arr.every(function(element, [index], [array]) {...}, [thisArg])  method tests whether all elements in the array pass the test function. returns true or false 
        const isBelowThreshold = (el) => el < 40;
        const arr = [1, 30, 39, 29, 10, 13];
        arr.every(isBelowThreshold); // true
       find() let result = arr.find(function(item, index, array) {}, thisArg) returns index of the first element in the array that passes the test. Otherwise, -1. if fn returns TRUE, item is returned and iteration is stopped for falsy scenario returns undefined index, array, thisArg: optional arguments The find method looks for a single (first) element that makes the function return true. 
        let users = [
          {id: 1, name: "John"},
          {id: 2, name: "Pete"},
          {id: 3, name: "Mary"}
        ];

        let user = users.find(item => item.id == 1); // user = {id: 1, name: "John"}
        user.name; // John
        // item argument is used, other arguments of this function are rarely used
       findIndex() arr.findIndex(function(item, index, array) {...}, thisArg); returns index of the first element in the array that passes the test. Otherwise, -1. 
        let index = users.findIndex(item => item.id == 3); // index = 2
       findLast() & findLastIndex() 
      const arr = [1, 2, 3, 1, 2, 3, 1, 2]

      const three = arr.find(num => num === 3) // 3
      const threeIndex = arr.findIndex(num => num === 3) // 2

      const lastThree = arr.findLast(num => num === 3) // 3
      const lastThreeIndex = arr.findLastIndex(num => num === 3) // 5
       reduce() let value = arr.reduce(function(previousValue, currentValue, [currentIndex], [array]) {...}, [initial]); previousValue  – result of the previous function call, equals initial the first time (if initial is provided) currentValue  – is the current array item [currentIndex]  – is its position [array]  – is the array [initial]  - A value to use as the first argument the result of the previous function call is passed to the next one as the first argument 
        [1, 2, 3, 4, 5].reduce((sum, item) => sum + item) // 15
        [1, 2, 3, 4, 5].reduce((sum, item) => sum + item, 0) // 15
        [1, 2, 3, 4, 5].reduce((sum, item) => sum + item, 10) // 25

        arr.reduceRight() // does the same, but goes from right to left
      

array

Aspect-ratio We can assign width and height to the element. 
      function Square1() {
        return (
          <div css={{
            width: '200px',
            height: '300px',
            background: 'red'
          }}>
            div1
          </div>
        )
      }
        Or can assign one side and add aspect-ratio. 
      function Square2() {
        return (
          <div css={{
            width: '200px',
            aspectRatio: '2/3',
            background: 'red'
          }}>
            div1
          </div>
        )
      }
       

aspect-ratio

NodeJS has built-in assertion  funtions . Basic 
      const assert = require('assert')
      describe('assert', function () {
        it.only('should pass', function () {
          assert(1 > 0)
        })
      })
       
      test
        ✔ assert

      1 passing (1ms)
       Methods equal ,  ok ,  assert ,  notEqual  checks if a value is true with (==) strictEqual ,  notStrictEqual  checks if equal with (===) deepStrictEqual ,  deepEqual ,  notDeepStrictEqual  checks if equal with (===) match ,  doesNotMatch  expects to match the regular expression ifError  test if value is  null  or  undefined throws ,  doesNotThrow ,  rejects ,  doesNotReject ,  fail  NOT clear what they do, check later ok() Same as  assert.equal()  and  assert() 
      const assert = require('assert')

      describe('test', function () {
        it.only('assert', function () {
          assert.ok() // fail
          assert.ok(true)
          assert.ok(false) // fail
          assert.ok(false, 'its false') // fail
          assert.ok(0) // fail
          assert.ok(1)
          assert.ok(typeof 123 === 'number')
          assert.ok(typeof 123 === 'string') // fail
        })
      })
       assert() Same as previous 
      it('assert', function () {
        assert() // fail
        assert(true)
        assert(false) // fail
        assert(false, 'its false') // fail
        assert(0) // fail
        assert(1)
        assert(typeof 123 === 'number')
        assert(typeof 123 === 'string') // fail
      })
       strictEqual 
      const assert = require('assert')

      describe.only('node assert', function () {
        it('strictEqual', function () {
          assert.strictEqual(1, 2) // fail
          assert.strictEqual(1, 1)
          assert.strictEqual('Hello foobar', 'Hello World!') // fail
          const apples = 1
          const oranges = 2
          assert.strictEqual(apples, oranges, `apples ${apples} !== oranges ${oranges}`) // fail
          assert.strictEqual(1, '1', new TypeError('Inputs are not identical')) // fail
        })
      })
       deepStrictEqual 
      it('deepStrictEqual', function () {
        assert.deepStrictEqual({ a: 1 }, { a: '1' }) // false
        const date = new Date()
        const object = {}
        const fakeDate = {}
        Object.setPrototypeOf(fakeDate, Date.prototype)
        assert.deepStrictEqual(object, fakeDate) // false
        assert.deepStrictEqual(date, fakeDate) // false
        assert.deepStrictEqual(NaN, NaN)
        assert.deepStrictEqual(new Number(1), new Number(1))
        assert.deepStrictEqual(new String('foo'), Object('foo'))
        assert.deepStrictEqual(-0, -0)
        assert.deepStrictEqual(0, -0) // false
        const symbol1 = Symbol()
        const symbol2 = Symbol()
        assert.deepStrictEqual({ [symbol1]: 1 }, { [symbol1]: 1 })
        assert.deepStrictEqual({ [symbol1]: 1 }, { [symbol2]: 1 }) // false
      })
       match 
      it('match', function () {
        assert.match('I will fail', /w/)
        assert.match(123, /pass/) // fail
        assert.match('I will pass', /pass/)
      })
       fail 
      it('ifError', function () {
        assert.ifError(null)
        assert.ifError(0) // fail
        assert.ifError('error') // fail
        assert.ifError(new Error()) // fail
      })
      

assert in node

Authorization vs authentication Authorization  - checking if password is correct. Authentication  - checking if the user is the same as authorized initially. Principle & data flow The client is authorized by comparing email and password against database.  On successful authorization the server issues an  access  and a  refresh  tokens for future authentication to avoid asking for credentials on every http request. Client stores  access  token in the local storage or memory and attaches it inside request headers for private api requests. Token is attached by 'request' interceptor in   axiosWithAuth . For protected api 'verifyToken' middleware verifies the token. If a token is ok, the request goes forward. If a token is bad (compromised or outdated) a response with status(401) is returned. Access  token is short and expires in 15 min. 'Response' interceptor in   axiosWithAuth  checks for 401 status and if it is 401, it makes additional request to update  access  token by presenting a  refresh  token, which has 30d expiry time. Refresh  token is stored in secured cookies on the login and also kept in database. If  refresh  token is valid and available in database, then updated  access   and refreshed  refresh  tokens are issued. axiosWithAuth  remembers the request with all parameters when it got 401 and after getting successful refreshed tokens it repeats initial http request. If  refresh  token is invalid or old, then  access  token is not issued, client is considered as unauthorized and new login is required. If a user is deleted from the database, he is still authorized, for short time until   access  token is expired (15 min). We should consider the duration of access token depending on sensitivity of our data. Tokens are also checked and refreshed at the initial app load in useEffect() on Main component mount. That's how we determine if a client logged in or out. For tokens we use JWT tokens, which contain encrypted (not hashed) payload (usually object with user email, role, etc...), validation time and a hash based on a secret keys, which are kept on server. Server can validate the token only if it knows the secrete keys. Secrete keys are kept in environment variables. server 
      // server.ts
      import 'dotenv/config'
      import express, { Request as ReqType, Response as ResType, NextFunction as NextType } from 'express'
      import morgan from 'morgan'
      import cookieParser from 'cookie-parser'
      import cors from 'cors'
      import { loginRouter } from './api/loginRouter'
      import { registerRouter } from './api/registerRouter'
      import { connectToDb } from './db/connectToDb'
      import { logoutRouter } from './api/logoutRouter'
      import { activateRouter } from './api/activateRouter'
      import { refreshRouter } from './api/refreshRouter'
      import { errorHandler } from './middleware/errorHandler'

      const app = express()
      connectToDb()
      app.use(morgan('dev')) // http logs in terminal
      app.use(express.json()) // parses incoming requests with JSON because we use lots of json, let it be default
      app.use(cookieParser())
      app.use(cors())
      app.get('/', (req: ReqType, res:ResType) => res.send('This is from express.js'))
      app.get('/api', (req: ReqType, res:ResType) => res.json({ message: '/api' }))

      app.use('/api/register', registerRouter)
      app.use('/api/login', loginRouter)
      app.use('/api/logout', logoutRouter)
      app.use('/api/activate', activateRouter)
      app.use('/api/refresh', refreshRouter)

      app.use(errorHandler)

      const port = process.env.PORT_BACK_END
      const domain = process.env.DOMAIN

      app.listen(port, () => console.log(`server started at ${domain}:${port}`))
       registerRouter 
      // registerRouter.ts
      import express, { Request as ReqType, Response as ResType, NextFunction as NextType } from 'express'
      // import { connectToDb } from '../db/connectToDb'
      import { UserModel } from '../db/models/user.model'
      import bcrypt from 'bcryptjs'
      import { v4 as uuidv4 } from 'uuid'
      import { sendMail } from '../services/mail/sendMail'
      import { body, validationResult } from 'express-validator'
      const domain = process.env.DOMAIN
      const port = process.env.PORT_FRONT_END

      export const registerRouter = express.Router()
      registerRouter.post(
        '/',
        body('email').isEmail(),
        body('password').isLength({ min: 3 }),
        async (req: ReqType, res: ResType, next: NextType) => {
          try {
            // validation
            const validationErrors = validationResult(req)
            if (!validationErrors.isEmpty()) return res.json({ status: 'error', message: 'validation error', validationErrors })

            // check if user already exists
            // await connectToDb()
            const email = req.body.email.toLowerCase()
            const user = await UserModel.findOne({ email })
            if (user) return res.json({ status: 'error', message: 'user with such email already exists' })

            // save user to db
            const password = await bcrypt.hash(req.body.password, 10)
            const activationLink = `${domain}:${port}/api/activate/${uuidv4()}`
            await UserModel.create({ email, password, activationLink })

            // send email with activation link
            const subject = 'Activation for quotation.app'
            const html = `<div><h1>Follow the link to confirm the registration</h1><a href="${activationLink}">${activationLink}</a></div> `
            // await sendMail({ to: email, subject, html })

            // all went good, send the response
            res.json({ status: 'ok', message: 'user is registered' })
          } catch (error: any) {
            next(error)
          }
        }
      )
       activateRouter 
      // activateRouter
      import express, { Request as ReqType, Response as ResType, NextFunction as NextType } from 'express'
      import { UserModel } from '../db/models/user.model'
      const domain = process.env.DOMAIN
      const port = process.env.PORT_FRONT_END

      export const activateRouter = express.Router()
      activateRouter.get('/:link', async (req: ReqType, res: ResType, next: NextType) => {
        try {
          const activationLink = `${domain}:${port}/api/activate/${req.params.link}`
          const user = await UserModel.findOne({ activationLink })
          if (!user) return res.json({ status: 'error', message: 'no account with such activation link' })
          user.isActivated = true
          await user.save()
          return res.redirect(`${domain}:${port}/login`)
        } catch (error: any) {
          next(error)
        }
      })
       loginRouter 
        // loginRouter.ts
        import express, { Request as ReqType, Response as ResType, NextFunction as NextType } from 'express'
        import { UserModel } from '../db/models/user.model'
        import bcrypt from 'bcryptjs'
        import { getAccessJwtToken, getRefreshJwtToken, refreshJwtTokenExpirationSeconds } from '../services/jwt/jwt'

        export const loginRouter = express.Router()
        loginRouter.post('/', async (req: ReqType, res: ResType, next: NextType) => {
          try {
            // get mail & password from body
            let { email, password } = req.body
            email = email.toLowerCase()

            // check email & password
            const user = await UserModel.findOne({ email })
            const isPasswordValid = user && await bcrypt.compare(password, user.password)
            if (!user || !isPasswordValid) return res.json({ status: 'error', message: 'invalid credentials' })

            // check if account is activated
            if (!user.isActivated) return res.json({ status: 'error', message: 'account is not activated' })

            // generate jwt tokens
            // const refreshJwtTokenExpirationDays = 30
            // const accessJwtToken = jwt.sign({ email }, process.env.JWT_ACCESS_SECRET as string, { expiresIn: '8h' })
            const accessJwtToken = getAccessJwtToken({ email })
            // const refreshJwtToken = jwt.sign({ email }, process.env.JWT_REFRESH_SECRET as string, { expiresIn: `${refreshJwtTokenExpirationDays}d` })
            const refreshJwtToken = getRefreshJwtToken({ email })

            // put refresh token in cookie
            res.cookie('refreshJwtToken', refreshJwtToken, { maxAge: refreshJwtTokenExpirationSeconds * 1000, httpOnly: true })

            // put refresh token in db (also update login date)
            const filter = { email }
            const update = { loggedAt: new Date(), refreshJwtToken }
            await UserModel.findOneAndUpdate(filter, update)

            // return access token to the client
            res.json({ status: 'ok', message: `user with email: ${email} logged in and tokens are refreshed`, accessJwtToken })
          } catch (error: any) {
            next(error)
          }
        })
       refreshRouter 
      // refreshRouter.ts
      import express, { Request as ReqType, Response as ResType, NextFunction as NextType } from 'express'
      import { UserModel } from '../db/models/user.model'
      import { getAccessJwtToken, getRefreshJwtToken, refreshJwtTokenExpirationSeconds, verifyRefreshJwtToken } from '../services/jwt/jwt'

      export const refreshRouter = express.Router()
      refreshRouter.get('/', async (req: ReqType, res: ResType, next: NextType) => {
        try {
          // get refresh token from cookie
          const { refreshJwtToken } = req.cookies
          if (!refreshJwtToken) res.json({ status: 'error', message: 'no refresh token found in cookies during token refresh, probably not authorized' })

          // check if token is ok
          const { email } = verifyRefreshJwtToken(refreshJwtToken)
          if (!email) res.json({ status: 'error', message: 'refresh token is not validated, probably not authorized' })

          // find token in db
          const user = await UserModel.findOne({ refreshJwtToken })
          if (!user) return res.json({ status: 'error', message: 'no user found with such refresh token in db' })

          // generate refresh token and save in db
          const updatedRefreshJwtToken = getRefreshJwtToken({ email })
          res.cookie('refreshJwtToken', updatedRefreshJwtToken, { maxAge: refreshJwtTokenExpirationSeconds * 1000, httpOnly: true })
          await UserModel.findOneAndUpdate({ email }, { refreshJwtToken: updatedRefreshJwtToken })

          // generate access token and send to client
          const accessJwtToken = getAccessJwtToken({ email })

          // send response
          res.json({ status: 'ok', message: `refresh token for email: ${email} is refreshed`, accessJwtToken })
        } catch (error) {
          next(error)
        }
      })
       logoutRouter 
      // logoutRouter.ts
      import express, { Request as ReqType, Response as ResType, NextFunction as NextType } from 'express'
      import { UserModel } from '../db/models/user.model'
      // eslint-disable-next-line camelcase
      import jwt_decode from 'jwt-decode'

      export const logoutRouter = express.Router()
      logoutRouter.get('/', async (req: ReqType, res: ResType, next: NextType) => {
        try {
          // check refresh token
          const { refreshJwtToken } = req.cookies
          if (!refreshJwtToken) res.json({ status: 'error', message: 'no refresh token in cookies, probably already logged out' })

          // get email from refresh token
          const { email }: { email: string } = jwt_decode(refreshJwtToken)
          if (!email) res.json({ status: 'error', message: 'can not retrieve email from refresh token' })

          // delete refreshJwtToken from cookie
          res.clearCookie('refreshJwtToken')

          // delete token from db
          const user = await UserModel.findOne({ refreshJwtToken })
          if (!user) return res.json({ status: 'error', message: 'no user find with such refresh token' })
          user.refreshJwtToken = undefined
          await user.save()

          // send response
          res.json({ status: 'ok', message: `user with email: ${email} logged out` })
        } catch (error) {
          next(error)
        }
      })
       verifyToken middleware 
      // verifyToken.ts
      import { Request as ReqType, Response as ResType, NextFunction as NextType } from 'express'
      import { verifyAccessJwtToken } from '../services/jwt/jwt'

      export function verifyToken(req: any, res: ResType, next: NextType) {
        try {
          const accessJwtToken = req.headers['access-jwt-token'] as string
          const { email } = verifyAccessJwtToken(accessJwtToken)
          req.email = email // can add email in header, maybe useful for something
          next()
        } catch (error: any) {
          return res.status(401).send('accessJwtToken is not verified, user is not authorized')
        }
      }
       get & verify tokens 
      // jwt.ts
      import jwt, { JwtPayload } from 'jsonwebtoken'

      const accessJwtTokenExpirationSeconds = 15 * 60 // 15 min
      export const refreshJwtTokenExpirationSeconds = 30 * 24 * 60 * 60 // 30 days

      export const getAccessJwtToken = (payload: string | object) => jwt.sign(payload, process.env.JWT_ACCESS_SECRET as string, { expiresIn: accessJwtTokenExpirationSeconds })
      export const getRefreshJwtToken = (payload: string | object) => jwt.sign(payload, process.env.JWT_REFRESH_SECRET as string, { expiresIn: refreshJwtTokenExpirationSeconds })
      export const verifyAccessJwtToken = (accessJwtToken: string) => jwt.verify(accessJwtToken, process.env.JWT_ACCESS_SECRET as string) as JwtPayload
      export const verifyRefreshJwtToken = (refreshJwtToken: string) => jwt.verify(refreshJwtToken, process.env.JWT_REFRESH_SECRET as string) as JwtPayload
       Axios 
      // axios.ts
      import axios from 'axios'

      export const axiosWithAuth = axios.create({ withCredentials: true })

      axiosWithAuth.interceptors.request.use((config) => {
        const accessJwtToken = localStorage.getItem('accessJwtToken')
        if (config.headers && accessJwtToken) {
          config.headers['access-jwt-token'] = accessJwtToken
        }
        return config
      })

      axiosWithAuth.interceptors.response.use(
        (config) => {
          return config
        },
        async (error) => {
          const originalRequest = error.config
          if (error.response.status === 401 && error.config && !error.config._isRetry) {
            try {
              originalRequest._isRetry = true
              const response = await axios.get('/api/refresh', { withCredentials: true })
              const accessJwtToken = response.data.accessJwtToken
              accessJwtToken && localStorage.setItem('accessJwtToken', accessJwtToken)
              !accessJwtToken && localStorage.removeItem('accessJwtToken')
              return axiosWithAuth.request(originalRequest)
            } catch (error) {
              console.log('not authorized')
              console.log(error)
            }
          }

          if (error.response.status === 401) {
            // todo: logout in redux
            // todo: suggest to login
          }

          throw error
        }
      )
       Frontend functions 
      async function registerUser(e: EventType) {
        e.preventDefault()
        try {
          const method = 'POST'
          const headers = { 'Content-Type': 'application/json' }
          const { email, password } = inputValue
          const body = JSON.stringify({ email, password })
          const options = { method, headers, body }
          const res = await fetch('/api/register', options)
          const data = await res.json()
          data.status === 'error' && data.message === 'user with such email already exists' && notify({ msg: 'Already registered', type: 'info', theme: 'light' })
          data.status === 'ok' && notify({ msg: 'Check your email and confirm registration.', theme: 'light' })
          console.log(data)
        } catch (err) {
          console.log(err)
          notify({ msg: 'Registration failed', type: 'error', theme: 'light' })
        } finally {
          // remove spinner from the button
        }
      }
       
      async function loginUser(e: EventType) {
        e.preventDefault()
        const method = 'POST'
        const headers = { 'Content-Type': 'application/json' }
        const { email, password } = credentials
        const body = JSON.stringify({ email, password })
        const options = { method, headers, body }
        const res = await fetch('/api/login', options)
        const data = await res.json()
        console.log(data)
        if (data.status === 'error') {
          alert(data.message)
          return localStorage.removeItem('accessJwtToken')
        }
        localStorage.setItem('accessJwtToken', data.accessJwtToken)
        alert('logged in')
        navigate('/')
      }
       
      async function refreshTokens() {
        // todo: move function into 'functions' folder in a file of folder with credentials business logic
        // todo: separate helper files by a business logic
        try {
          if (!localStorage.getItem('accessJwtToken')) return console.log('user is not logged in')
          const response = await axios.get('/api/refresh', { withCredentials: true })
          if (response.data.status === 'error') {
            console.log(response.data.message)
            localStorage.removeItem('accessJwtToken')
          }
          if (!response.data.accessJwtToken) return console.log(666)
          const accessJwtToken = response.data.accessJwtToken
          const jwtTokenPayload: {email: string | undefined} = jwt_decode(accessJwtToken)
          const { email } = jwtTokenPayload
          if (!email) return console.log('token is not valid')
          localStorage.setItem('accessJwtToken', response.data.accessJwtToken)
          console.log(response)
          console.log(`tokens for user with email: ${email} are refreshed`)
        } catch (error) {
          console.log(error)
        }
      }
       
      async function getUsersFromDb() {
        try {
          const res = await axiosWithAuth('/api/users')
          console.log(res)
        } catch (error) {
          console.log(error)
        }
      }
      

auth

AutoAnimate AutoAnimate  is a package that adds smooth transitions to your web app npm install @formkit/auto-animate  install via npm Animations are only triggered when immediate children of the parent element (the one you passed to autoAnimate) are added, removed, or moved. The parent element will automatically receive  position: relative   autoAnimate 
      import autoAnimate from '@formkit/auto-animate'

      const Dropdown = () => {
        const [show, setShow] = useState(false)
        const ref = useRef(null)

        useEffect(() => {
          ref.current && autoAnimate(ref.current)
        }, [ref])

        return (
          <div ref={ref} css={{ margin: '10px', padding: '10px', border: '1px solid grey' }}>
          <button onClick={() => setShow(!show)}>Click me to open!</button>
          {show && <p>Hello...</p>}
          </div>
        )
      }
        useAutoAnimate hook 
      import { useAutoAnimate } from '@formkit/auto-animate/react'

      const UseAutoAnimate = () => {
        const [items, setItems] = useState([0, 1, 2])
        const [parent] = useAutoAnimate()
        return (
          <>
            <ul ref={parent}>
              {items.map(item => (
                <li key={item}>{item}</li>
              ))}
            </ul>
            <button onClick={ () => setItems([...items, items.length])}>Add number</button>
          </>
        )
      }
       

AutoAnimate

For integers Simple version for integer arguments 
      const average = (...nums) => nums.reduce((accum, curVal) => accum + curVal) / nums.length
       Same, but for arguments as primitives or in array, they can be numbers or strings. For reals and strings 
      const average = (...nums) => {
        let arr = []
        // may pass array or args separately
        if (!Array.isArray(nums)) arr = [...nums] // if primitive args supplied
        if (Array.isArray(nums)) arr = nums.flat(Infinity) // if array supplied
        const floatsArr = arr.map(el => parseFloat(el)) // in case numbers are passed as strings
        const average = floatsArr.reduce((accum, curVal) => accum + curVal) / arr.length
        const roundedNum = average.toFixed(2)
        return roundedNum
      }
        Full code 
      function Component() {
        const [inputValState, setInputValState] = React.useState('1 2 3 4 5')
        const [averageState, setAverageState] = React.useState(average(inputValState.split(' ')))
      
        const onChangeHandler = (e) => {
          const inpVal = e.target.value
          setInputValState(inpVal)
          const numsArr = inpVal
            .match(/[-]{0,1}[\d]*[.]{0,1}[\d]+/g) // match numbers
            .filter(el => el) // remove empty elements
          setAverageState(average(numsArr))
        }
      
        return (
          <>
            <input value={inputValState} onChange={onChangeHandler}/>
            <div>Average: {averageState}</div>
          </>
        )
      }
      

average

Install npm  package  with description install with  npm i axios Usage 
      import axios from 'axios'
      // const axios = require('axios')
      
      axios({
        method: 'post',
        url: '/user/12345',
        data: {
          firstName: 'John',
          lastName: 'Dow'
        }
      })
      .then(function (res) {
        console.log(res.data);
      })
      .catch(function (err) {
        console.log(err);
      });
       Request parameters 
      {
        url: '/user', // server URL that will be used for the request
        method: 'get', // request method to be used when making the request
        baseURL: 'https://some-domain.com/api/', // will be prepended to url unless url is absolute
        transformRequest: [function (data, headers) { // allows changes to the request data before it is sent
          return data;
        }],
        transformResponse: [function (data) { // allows changes to the response data to be made before
          return data;
        }],
        headers: {'X-Requested-With': 'XMLHttpRequest'}, // custom headers to be sent
        params: { // URL parameters to be sent with the request
          ID: 12345
        },
        paramsSerializer: function (params) { // optional function in charge of serializing params
          return Qs.stringify(params, {arrayFormat: 'brackets'})
        },
        data: { // data to be sent as the request body
          firstName: 'Fred'
        },
        data: 'Country=Brasil&City=Belo Horizonte', // syntax alternative to send data into the body
        timeout: 1000, // default is 0 (no timeout) // specifies the number of milliseconds before the request times out and aborted
        withCredentials: false, // indicates whether or not cross-site Access-Control requests credentials
        adapter: function (config) { // allows custom handling of requests which makes testing easier.
          /* ... */
        },
        auth: { // indicates that HTTP Basic auth should be used, and supplies credentials.
          username: 'janedoe',
          password: 's00pers3cret'
        },
        responseType: 'json', // default //  indicates the type of data that the server will respond with
        responseEncoding: 'utf8', // default // indicates encoding to use for decoding responses (Node.js only)
        xsrfCookieName: 'XSRF-TOKEN', // default // name of the cookie to use as a value for xsrf token
        xsrfHeaderName: 'X-XSRF-TOKEN', // default // name of the http header that carries the xsrf token value
        onUploadProgress: function (progressEvent) { // allows handling of progress events for uploads // browser only
          // Do whatever you want with the native progress event
        },
        onDownloadProgress: function (progressEvent) { // allows handling of progress events for downloads // browser only
          // Do whatever you want with the native progress event
        },
        maxContentLength: 2000, // max size of the http response content in bytes allowed in node.js
        maxBodyLength: 2000, // (Node only option) defines the max size of the http request content in bytes allowed
        validateStatus: function (status) { // defines whether to resolve or reject the promise for a given HTTP response status code
          return status >= 200 && status < 300; // default
        },
        maxRedirects: 5, // default // maximum number of redirects to follow in node.js.
        socketPath: null, // default // defines a UNIX Socket to be used in node.js
        httpAgent: new http.Agent({ keepAlive: true }), // define a custom agent to be used when performing http
        httpsAgent: new https.Agent({ keepAlive: true }),  // define a custom agent to be used when performing http
        proxy: { // hostname, port, and protocol of the proxy server
          protocol: 'https',
          host: '127.0.0.1',
          port: 9000,
          auth: {
            username: 'mikeymike',
            password: 'rapunz3l'
          }
        },
        cancelToken: new CancelToken(function (cancel) { // specifies a cancel token that can be used to cancel the request
        }),
        signal: new AbortController().signal, // alternative way to cancel Axios requests using AbortController
        decompress: true // default // indicates whether or not the response body should be decompressed 
        insecureHTTPParser: undefined // default // Indicates where to use an insecure HTTP parser that accepts invalid HTTP headers.
        transitional: { // transitional options for backward compatibility
          silentJSONParsing: true, // default value for the current Axios version
          forcedJSONParsing: true,
          clarifyTimeoutError: false,
        }
      }
       Response parameters 
      {
        data: {}, // response that was provided by the server
        status: 200, // HTTP status code from the server response
        statusText: 'OK', //  HTTP status message from the server response
        headers: {}, // HTTP headers that the server responded with
        config: {}, // config that was provided to axios for the request
        request: {} // request that generated this response
      }
       Axios vs Fetch Axios 
      axios('https://jsonplaceholder.typicode.com/posts/1')
        .then(res => console.log(res.data.title))
       Fetch 
      fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(res => res.json())
        .then(data => console.log(data.title))
      

axios

Babel  is a code compiler, which can convert: new JavaScript into old versions TypeScript in JavaScript JSX into JavaScript minify file Installation Install  Babel via  npm install --save-dev @babel/core @babel/cli Two dependencies are added into  package.json 
      {
      "devDependencies": {
        "@babel/cli": "^7.0.0",
        "@babel/core": "^7.0.0"
      }
       Output Add Babel build script into  package.json 
      "scripts": {
        "babel": "babel src/components/PostsFeed/posts/babel/unbabeled -d src/components/PostsFeed/posts/babel/babeled"
      },
       Babel will take files from  unbabeled  folder & put compiled ones into  babeled  folder. Configuration Create   local configuration   file  .babelrc.json  or   root configuration    babel.config.json Add  plugins  /  presets  into configuration file. 
      // .babelrc.json
      {
        "presets": ["@babel/preset-env", "minify"],
        "plugins": [
          [ 
            "@babel/plugin-transform-template-literals", { "loose": true }
          ]
        ]
      }
       For minification install additional preset with  npm install babel-preset-minify --save-dev Execute  npm run babel  & modern JS is converted into ES5 + minified. Unbabeled vs Babeled file 

babel

backdrop-filter  CSS property applies effects to the area behind an element. That's nice to make a semi-transparent layer and blur anything behind.  All CSS properties 
      /* Keyword value */
      backdrop-filter: none;

      /* URL to SVG filter */
      backdrop-filter: url(commonfilters.svg#filter);

      /* <filter-function> values */
      backdrop-filter: blur(2px);
      backdrop-filter: brightness(60%);
      backdrop-filter: contrast(40%);
      backdrop-filter: drop-shadow(4px 4px 10px blue);
      backdrop-filter: grayscale(30%);
      backdrop-filter: hue-rotate(120deg);
      backdrop-filter: invert(70%);
      backdrop-filter: opacity(20%);
      backdrop-filter: sepia(90%);
      backdrop-filter: saturate(80%);

      /* Multiple filters */
      backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

      /* Global values */
      backdrop-filter: inherit;
      backdrop-filter: initial;
      backdrop-filter: revert;
      backdrop-filter: unset;
      

backdrop-filter

base64 image

 
      // blinkWithCssProp.js
      export default function blinkWithCssProp(args) {
        const { el, cssPropToChange, value, time } = {
          el: null, cssPropToChange: 'borderColor', value: 'red', time: 500, ...args
        }
        if (!el) return
        if (el.hasAttribute('blinking')) return
        el.setAttribute('blinking', '')
        const initValue = el.style[cssPropToChange]
        el.style[cssPropToChange] = value
        setTimeout(() => {
          el.style[cssPropToChange] = initValue
          el.removeAttribute('blinking')
        }, time)
      }
       
      import blinkWithCssProp from '../../../../helpers/functions/blinkWithCssProp'
      const style = { padding: '10px', margin: '10px' }

      function Component() {
        const blinkWithBorders = (e) => blinkWithCssProp({ el: e.target })
        const blinkWithBackground = (e) => blinkWithCssProp({
          el: e.target,
          cssPropToChange: 'background',
          value: 'orange',
          time: 1000
        })

        return (
          <>
            <button style={style} onClick={blinkWithBorders}>Blink borders</button>
            <button style={style} onClick={blinkWithBackground}>Blink background</button>
          </>
        )
      }
      

blink

Bold substring in React 
        export const getJsxWithBoldSubstr = (text, subString) => {
          const regExp = new RegExp(`(${subString})`, 'gi')
          return text.split(regExp).map((str, index) => regExp.test(str) ? <b key={`char-${index}`}>{str}</b> : str)
        }
       Example with items filtering 
        const countriesAll = ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Anguilla', 'Antigua Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia Herzegovina', 'Botswana', 'Brazil', 'British Virgin Islands', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cambodia', 'Cameroon', 'Cape Verde', 'Cayman Islands', 'Chad', 'Chile', 'China', 'Colombia', 'Congo', 'Cook Islands', 'Costa Rica', 'Cote D Ivoire', 'Croatia', 'Cruise Ship', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Estonia', 'Ethiopia', 'Falkland Islands', 'Faroe Islands', 'Fiji', 'Finland', 'France', 'French Polynesia', 'French West Indies', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Greece', 'Greenland', 'Grenada', 'Guam', 'Guatemala', 'Guernsey', 'Guinea', 'Guinea Bissau', 'Guyana', 'Haiti', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Isle of Man', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jersey', 'Jordan', 'Kazakhstan', 'Kenya', 'Kuwait', 'Kyrgyz Republic', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macau', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Mauritania', 'Mauritius', 'Mexico', 'Moldova', 'Monaco', 'Mongolia', 'Montenegro', 'Montserrat', 'Morocco', 'Mozambique', 'Namibia', 'Nepal', 'Netherlands', 'Netherlands Antilles', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Norway', 'Oman', 'Pakistan', 'Palestine', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Reunion', 'Romania', 'Russia', 'Rwanda', 'Saint Pierre Miquelon', 'Samoa', 'San Marino', 'Satellite', 'Saudi Arabia', 'Senegal', 'Serbia', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'South Africa', 'South Korea', 'Spain', 'Sri Lanka', 'St Kitts Nevis', 'St Lucia', 'St Vincent', 'St. Lucia', 'Sudan', 'Suriname', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', "Timor L'Este", 'Togo', 'Tonga', 'Trinidad Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Turks Caicos', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'Uruguay', 'Uzbekistan', 'Venezuela', 'Vietnam', 'Virgin Islands (US)', 'Yemen', 'Zambia', 'Zimbabwe']

        function Component() {
          const [inputValue, setInputValue] = useState('')
          const [countries, setCountries] = useState(countriesAll)

          useEffect(() => {
            const foundCountries = countriesAll.filter(country => country.toLowerCase().includes(inputValue.toLocaleLowerCase().trim()))
            setCountries(foundCountries)
          }, [inputValue])

          return (
            <>
              <div><input type="text" placeholder='country' value={inputValue} onChange={(e) => setInputValue(e.target.value)} /></div>
              <h1>Countries</h1>
              <ul>
                {
                  countries.map(country => (
                    <li key={country}>
                      {
                        inputValue
                          ? <span>{getJsxWithBoldSubstr(country, inputValue)}</span>
                          : country
                      }
                    </li>
                  ))
                }
              </ul>
            </>
          )
        }
       

bold substring

 We often need to have a boolean  state  and switch between  true  &  false  to show/hide something on a screen  We can put such simple logic into a custom hook and make components a bit cleaner 
      // functions\useBoolean.js
      import { useState } from 'react'

      export default function useBoolean(initVal = true) {
        const [state, setState] = useState(initVal)
        const toggleState = () => setState(prevVal => !prevVal)
        return [state, toggleState]
      }
       Usage 
        import useBoolean from '/functions/useBoolean'

        function Component() {
          const [state, toggleState] = useBoolean(true)
          return (
            <>
              <div>{state.toString()}</div>
              <button onClick={toggleState}>Toggle state</button>
            </>
          )
        }
        Similar function can be found in the   react-use   package under the   useToggle   hook.

boolean state

Alert 
        alert("Hello")
       Prompt 
        const age = prompt('How old are you?', 100)
       Confirm 
        const isBoss = confirm("Are you the boss?");
      

browser interaction

Usually we get data in bytes which is not convenient. Here is the function to convert it. 
      // /functions/bytesToSize
      function bytesToSize(bytes) {
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
        if (bytes === 0) return 'n/a'
        const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10)
        if (i === 0) return `${bytes} ${sizes[i]})`
        return `${(bytes / (1024 ** i)).toFixed(1)} ${sizes[i]}`
      }
       
      function Component() {
        let variable = ''
        let i = 0
        for (i; i < 1000000; i++) {
          variable += 'string '
        }
        const sizeBytes = new Blob([JSON.stringify(variable)]).size

        return (
          <>
            Size of variable <b>{variable.slice(0, 30) + '...'}</b> (x{i} times) is <b>{sizeBytes} bytes</b>, which is <b>{bytesToSize(sizeBytes)}</b>
          </>
        )
      }
       

bytes converter


      // functions/caretTo.js
      export default function caretTo(args) {
        const { el, toPos, toStart, toEnd } = { toPos: 0, toStart: false, toEnd: false, ...args }
        el.focus()
        if (toStart) {
          el.setSelectionRange(toPos, toPos)
          return
        }
        if (toEnd) {
          el.setSelectionRange(el.value.length, el.value.length)
          return
        }
        if (toPos < 0) {
          el.setSelectionRange(el.value.length - Math.abs(toPos), el.value.length - Math.abs(toPos))
          return
        }
        el.setSelectionRange(toPos, toPos)
      }

        Add later caret in textarea and contenteditable elements.

caret

Installation Mocha  is a test framework for NodeJS. Chai  is assertion library for any test framework. npm i mocha chai --save-dev Add script into  package.json 
      "scripts": {
        "dev": "node exportAllPostsCreate && next dev",
        "build": "node exportAllPostsCreate && next build",
        "start": "next start",
        "lint": "next lint",
        "test": "jest --watch || true",
        "mocha": "mocha"
      }
       By default mocha looks for a  test  folder, where we can create test files. 
      // test/mytest.js

      const assert = require('chai').assert

      describe('basic tests', () => {
        it('should return 5', () => {
          assert.equal(2 + 3, 5)
        })
      })
       Run tests with command  npm run mocha  and see the output. 
      basic tests
        ✔ should return 5
      1 passing (2ms)
       Assert vs Expect 
      const assert = require('chai').assert
      const expect = require('chai').expect

      describe('assert', () => {
        it('should return 5', () => {
          assert.equal(2 + 3, 5)
          expect(2 + 3).to.equal(5)
        })

        it('should be a string', () => {
          assert.typeOf('hi', 'string')
          expect('hi').to.be.a('string')
        })

        it('should be > 5', () => {
          assert.isAbove(100, 99)
          expect(100).to.be.above(99)
        })
      })
       Cosmetic properties They do not mean anything:  .to ,  .be ,  .been ,  .is ,  .that ,  .which ,  .and ,  .has ,  .have ,  .with ,  .at ,  .of ,  .same ,  .but ,  .does ,  .still ,  .also 
      describe('cosmetic props', () => {
        it('should return 5', () => {
          expect(2 + 3).equal(5)
          expect(2 + 3).to.equal(5)
          expect(2 + 3).to.be.equal(5)
        })
      })
       Assertions Expect & should Expect & should assertion  methods . not ,    deep ,    nested ,    own ,    ordered ,    any ,    all ,    a(type) ,    include(val) ,    ok ,    true ,    false ,    null ,    undefined ,    NaN ,    exist ,    empty ,    arguments ,    equal(val) ,    eql(obj) ,    above(n) ,    least(n) ,    below(n) ,    most(n) ,    within(start, finish) ,    instanceof(constructor) ,    property(name) ,    ownPropertyDescriptor(name) ,    lengthOf(n) ,    match(re) ,    string(str) ,    keys(key1, key2) ,    throw() ,    respondTo(method) ,    itself ,    satisfy(matcher) ,    closeTo(expected, delta) ,    members(set) ,    oneOf(list) ,    change(subject) ,    increase(subject) ,    decrease(subject) ,    by(delta) ,    extensible ,    sealed ,    frozen ,    finite ,    fail() Assert Assert  methods . fail ,    isOk ,    isNotOk ,    equal ,    notEqual ,    strictEqual ,    notStrictEqual ,    deepEqual ,    notDeepEqual ,    isAbove ,    isAtLeast ,    isBelow ,    isAtMost ,    isTrue ,    isNotTrue ,    isFalse ,    isNotFalse ,    isNull ,    isNotNull ,    isNaN ,    isNotNaN ,    exists ,    notExists ,    isUndefined ,    isDefined ,    isFunction ,    isNotFunction ,    isObject ,    isNotObject ,    isArray ,    isNotArray ,    isString ,    isNotString ,    isNumber ,    isNotNumber ,    isFinite ,    isBoolean ,    isNotBoolean ,    typeOf ,    notTypeOf ,    instanceOf ,    notInstanceOf ,    include ,    notInclude ,    deepInclude ,    notDeepInclude ,    nestedInclude ,    notNestedInclude ,    deepNestedInclude ,    notDeepNestedInclude ,    ownInclude ,    notOwnInclude ,    deepOwnInclude ,    notDeepOwnInclude ,    match ,    notMatch ,    property ,    notProperty ,    propertyVal ,    notPropertyVal ,    deepPropertyVal ,    notDeepPropertyVal ,    nestedProperty ,    notNestedProperty ,    nestedPropertyVal ,    notNestedPropertyVal ,    deepNestedPropertyVal ,    notDeepNestedPropertyVal ,    lengthOf ,    hasAnyKeys ,    hasAllKeys ,    containsAllKeys ,    doesNotHaveAnyKeys ,    doesNotHaveAllKeys ,    hasAnyDeepKeys ,    hasAllDeepKeys ,    containsAllDeepKeys ,    doesNotHaveAnyDeepKeys ,    doesNotHaveAllDeepKeys ,    throws ,    doesNotThrow ,    operator ,    closeTo ,    approximately ,    sameMembers ,    notSameMembers ,    sameDeepMembers ,    notSameDeepMembers ,    sameOrderedMembers ,    notSameOrderedMembers ,    sameDeepOrderedMembers ,    notSameDeepOrderedMembers ,    includeMembers ,    notIncludeMembers ,    includeDeepMembers ,    notIncludeDeepMembers ,    includeOrderedMembers ,    notIncludeOrderedMembers ,    includeDeepOrderedMembers ,    notIncludeDeepOrderedMembers ,    oneOf ,    changes ,    changesBy ,    doesNotChange ,    changesButNotBy ,    increases ,    increasesBy ,    doesNotIncrease ,    increasesButNotBy ,    decreases ,    decreasesBy ,    doesNotDecrease ,    doesNotDecreaseBy ,    decreasesButNotBy ,    ifError ,    isExtensible ,    isNotExtensible ,    isSealed ,    isNotSealed ,    isFrozen ,    isNotFrozen ,    isEmpty ,    isNotEmpty equal 
      it('should return 5', () => {
        assert.equal(2 + 3, 5)
      })
       typeOf 
      it('should be a string', () => {
        assert.typeOf('hi', 'string')
      })
       isAbove 
      it('should be > 5', () => {
        assert.isAbove(100, 5)
      })
       not 
      it('.not', () => {
        expect(function () { }).to.not.throw()
        expect({ a: 1 }).to.not.have.property('b')
        expect([1, 2]).to.be.an('array').that.does.not.include(3)
      })
       deep 
      it('.deep', () => {
        // Target object deeply (but not strictly) equals `{a: 1}`
        expect({ a: 1 }).to.deep.equal({ a: 1 })
        expect({ a: 1 }).to.not.equal({ a: 1 })
      })
       ordered 
      it('.ordered', () => {
        expect([1, 2]).to.have.ordered.members([1, 2])
          .but.not.have.ordered.members([2, 1])
      })
       any 
      it('.any', () => {
        expect({ a: 1, b: 2 }).to.not.have.any.keys('c', 'd')
      })
       all 
      it('.all', () => {
        expect({ a: 1, b: 2 }).to.have.all.keys('a', 'b')
      })
       a(type) 
      it('.a(type)', () => {
        expect('foo').to.be.a('string')
        expect({ a: 1 }).to.be.an('object')
        expect(null).to.be.a('null')
        expect(undefined).to.be.an('undefined')
        expect(new Error()).to.be.an('error')
        expect(Promise.resolve()).to.be.a('promise')
        expect(new Float32Array()).to.be.a('float32array')
        expect(Symbol()).to.be.a('symbol')
        expect([1, 2, 3]).to.be.an('array').that.includes(2)
        expect([]).to.be.an('array').that.is.empty
        expect('foo').to.be.a('string')
      })
       include 
      it('.include(val)', () => {
        expect('foobar').to.include('foo')
        expect([1, 2, 3]).to.include(2)
        expect({ a: 1, b: 2, c: 3 }).to.include({ a: 1, b: 2 })
        expect(new Set([1, 2])).to.include(2)
        expect(new Map([['a', 1], ['b', 2]])).to.include(2)
        expect([1, 2, 3]).to.be.an('array').that.includes(2)
      })
       true 
      it('.true', () => {
        expect(true).to.be.true
        expect(false).to.not.be.true
      })
       false 
      it('.false', () => {
        expect(false).to.be.false
        expect(true).to.not.be.false
      })
       null 
      it('.null', () => {
        expect(null).to.be.null
      })
       undefined 
      it('.undefined', () => {
        expect(undefined).to.be.undefined
      })
       NaN 
      it('.NaN', () => {
        expect(NaN).to.be.NaN
        expect('foo').to.not.be.NaN
      })
       exist 
      it('.exist', () => {
        expect(1).to.exist
      })
       empty 
      it('.empty', () => {
        expect([]).to.be.empty
        expect('').to.be.empty
        expect(new Set()).to.be.empty
        expect(new Map()).to.be.empty
        expect({}).to.be.empty
        expect([]).to.be.an('array').that.is.empty
        expect([1, 2, 3]).to.not.be.empty
      })
       equal 
      it('.equal(val)', () => {
        expect(1).to.equal(1)
        expect('foo').to.equal('foo')
        expect({ a: 1 }).to.deep.equal({ a: 1 })
        expect({ a: 1 }).to.not.equal({ a: 1 })
        expect([1, 2]).to.deep.equal([1, 2])
        expect([1, 2]).to.not.equal([1, 2])
      })
       above 
      it('.above(n)', () => {
        expect(2).to.be.above(1)
      })
       least 
      it('.least(n)', () => {
        expect(2).to.be.at.least(1)
        expect(2).to.be.at.least(2)
        expect('foo').to.have.lengthOf.at.least(2)
        expect(1).to.not.be.at.least(2)
      })
       below 
      it('.below(n', () => {
        expect(1).to.be.below(2)
        expect('foo').to.have.lengthOf.below(4)
        expect([1, 2, 3]).to.have.lengthOf.below(4)
      })
       most 
      it('.most(n)', () => {
        expect(1).to.be.at.most(2)
        expect(1).to.be.at.most(1)
        expect('foo').to.have.lengthOf.at.most(4)
        expect([1, 2, 3]).to.have.lengthOf.at.most(4)
      })
       within 
      it('.within(start, finish)', () => {
        expect(2).to.be.within(1, 3)
        expect([1, 2, 3]).to.have.lengthOf.within(2, 4)
      })
       instanceof 
      it('.instanceof(constructor)', () => {
        function Cat() { }

        expect(new Cat()).to.be.an.instanceof(Cat)
        expect([1, 2]).to.be.an.instanceof(Array)
        expect({ a: 1 }).to.not.be.an.instanceof(Array)
      })
       property 
      it('.property(name[, val])', () => {
        expect({ a: 1 }).to.have.property('a')
        expect({ a: 1 }).to.have.property('a', 1)
        expect({ x: { a: 1 } }).to.have.deep.property('x', { a: 1 })
        expect({ x: { a: 1 } }).to.not.have.property('x', { a: 1 })
        expect({ x: { a: 1 } }).to.have.deep.own.property('x', { a: 1 })
        expect({ a: { b: ['x', 'y'] } }).to.have.nested.property('a.b[1]')
        expect({ a: { b: ['x', 'y'] } }).to.have.nested.property('a.b[1]', 'y')
      })
       lengthOf 
      it('.lengthOf(n)', () => {
        expect([1, 2, 3]).to.have.lengthOf(3)
        expect('foo').to.have.lengthOf(3)
        expect(new Set([1, 2, 3])).to.have.lengthOf(3)
        expect(new Map([['a', 1], ['b', 2], ['c', 3]])).to.have.lengthOf(3)
        expect([1, 2, 3]).to.have.lengthOf.above(2)
        expect([1, 2, 3]).to.have.lengthOf.below(4)
        expect([1, 2, 3]).to.have.lengthOf.at.least(3)
        expect([1, 2, 3]).to.have.lengthOf.at.most(3)
        expect([1, 2, 3]).to.have.lengthOf.within(2, 4)
      })
       match 
      it('.match(re)', () => {
        expect('foobar').to.match(/^foo/)
        expect('foobar').to.not.match(/taco/)
      })
       string 
      it('.string(str)', () => {
        expect('foobar').to.have.string('bar')
        expect('foobar').to.not.have.string('taco')
      })
       keys 
      it('.keys(key1[, key2[, …]])', () => {
        expect({ a: 1, b: 2 }).to.have.all.keys('a', 'b')
        expect(['x', 'y']).to.have.all.keys(0, 1)
        expect({ a: 1, b: 2 }).to.have.all.keys(['a', 'b'])
        expect(['x', 'y']).to.have.all.keys([0, 1])

        expect({ a: 1, b: 2 }).to.have.all.keys({ a: 4, b: 5 }) // ignore 4 and 5
        expect(['x', 'y']).to.have.all.keys({ 0: 4, 1: 5 }) // ignore 4 and 5
        expect(new Map([['a', 1], ['b', 2]])).to.have.all.keys('a', 'b')
        expect(new Set(['a', 'b'])).to.have.all.keys('a', 'b')
        expect({ a: 1, b: 2 }).to.be.an('object').that.has.all.keys('a', 'b')
        expect(new Set([{ a: 1 }])).to.have.all.deep.keys([{ a: 1 }])
        expect(new Set([{ a: 1 }])).to.not.have.all.keys([{ a: 1 }])
        expect({ a: 1, b: 2 }).to.not.have.any.keys('c', 'd')
        expect({ a: 1, b: 2 }).to.have.all.keys('a', 'b')
      })
       respondTo 
      it('.respondTo(method)', () => {
        function Cat() { }
        Cat.prototype.meow = function () { }
        expect(new Cat()).to.respondTo('meow')
        expect(Cat).to.respondTo('meow')

        Cat.hiss = function () { }
        expect(Cat).itself.to.respondTo('hiss').but.not.respondTo('meow')
        expect(new Cat()).to.be.an('object').that.respondsTo('meow')
      })
       itself 
      it('.itself', () => {
        function Cat() { }
        Cat.prototype.meow = function () { }
        Cat.hiss = function () { }

        expect(Cat).itself.to.respondTo('hiss').but.not.respondTo('meow')
      })
       satisfy 
      it('.satisfy(matcher)', () => {
        expect(1).to.satisfy(function (num) {
          return num > 0
        })
        expect(1).to.not.satisfy(function (num) {
          return num > 2
        })
      })
       closeTo 
      it('.closeTo(expected, delta)', () => {
        expect(1.5).to.be.closeTo(1, 0.5)
        expect(1.5).to.be.closeTo(2, 0.5)
        expect(1.5).to.be.closeTo(1, 1)
      })
       members 
      it('.members(set)', () => {
        expect([1, 2, 3]).to.have.members([2, 1, 3])
        expect([1, 2, 2]).to.have.members([2, 1, 2])
        expect([{ a: 1 }]).to.have.deep.members([{ a: 1 }])
        expect([{ a: 1 }]).to.not.have.members([{ a: 1 }])
        expect([1, 2, 3]).to.include.members([1, 2])
        expect([1, 2, 3]).to.not.have.members([1, 2])
        expect([1, 2, 3]).to.include.members([1, 2, 2, 2])
      })
       oneOf 
      it('.oneOf(list)', () => {
        expect(1).to.be.oneOf([1, 2, 3])
        expect(1).to.not.be.oneOf([2, 3, 4])
        expect('Today is sunny').to.contain.oneOf(['sunny', 'cloudy'])
        expect('Today is rainy').to.not.contain.oneOf(['sunny', 'cloudy'])
        expect([1, 2, 3]).to.contain.oneOf([3, 4, 5])
        expect([1, 2, 3]).to.not.contain.oneOf([4, 5, 6])
      })
       change 
      it('.change(subject[, prop])', () => {
        let dots = ''
        const addDot = () => { dots += '.' }
        const getDots = () => dots
        expect(addDot).to.change(getDots)
      })
       decrease 
      it('.decrease(subject[, prop])', () => {
        let val = 1
        const subtractTwo = () => { val -= 2 }
        const getVal = () => val
        expect(subtractTwo).to.decrease(getVal) // Not recommended
      })
       by 
      it('.by(delta)', () => {
        const myObj = { val: 1 }
        const addTwo = () => { myObj.val += 2 }
        expect(addTwo).to.increase(myObj, 'val').by(2)
      })
       extensible 
      it('.extensible', () => {
        expect({ a: 1 }).to.be.extensible
        const nonExtensibleObject = Object.preventExtensions({})
        const sealedObject = Object.seal({})
        const frozenObject = Object.freeze({})
        expect(nonExtensibleObject).to.not.be.extensible
        expect(sealedObject).to.not.be.extensible
        expect(frozenObject).to.not.be.extensible
        expect(1).to.not.be.extensible
      })
       sealed 
      it('.sealed', () => {
        const sealedObject = Object.seal({})
        const frozenObject = Object.freeze({})
        expect(sealedObject).to.be.sealed
        expect(frozenObject).to.be.sealed
        expect(1).to.be.sealed
      })
       frozen 
      it('.frozen', () => {
        const frozenObject = Object.freeze({})
        expect(frozenObject).to.be.frozen
        expect(1).to.be.frozen
      })
       finite 
      it('.finite', () => {
        expect(1).to.be.finite
      })
       fail 
      it('.fail', () => {
        expect.fail()
        expect.fail('custom error message')
      })
      

chai

Idea Cheerio  brings  jQuery  for the NodeJS without browser Cheerio parses markup and provides an API for traversing/manipulating the resulting data structure Installation npm i cheerio Example  
      import * as cheerio from 'cheerio'

      function Component(props) {
        const ref = useRef()

        const addHeading = () => {
          const $ = cheerio.load('<h2 class="title">Hello world</h2>')
          $('h2.title').text('Heading')
          $.html()
          ref.current.innerHTML = $.html()
        }

        return (
          <>
            <button onClick={addHeading}>add heading</button>
            <div ref={ref}>text in div</div>
          </>
        )
      }
      

cheerio

Old chrome versions https://chromium.cypress.io/

chrome

Chunks we may build react app locally with  npm run build  and check sizes of bundled chunks  in general application is broken into numerous tiny files which are being loaded in parallel and big blocking files are not good  vite-bundle-visualizer we may check the content of bundled chunks with  vite-bundle-visualizer  package no need even to install it into a project, just run  npx vite-bundle-visualizer we may see that all purple area is one blocking gzipped 1.3mb file  manualChunks we may break the file into multiple chunks manually and they will load by browser in parallel can be done in  vite's  configuration by adding the property  manualChunks  to rollup bundler settings 
        /// <reference types="vitest" />
        /// <reference types="vite/client" />
        import { defineConfig, loadEnv } from 'vite'
        import react from '@vitejs/plugin-react'
        import tsconfigPaths from 'vite-tsconfig-paths'
        import basicSsl from '@vitejs/plugin-basic-ssl'
        
        // https://vitejs.dev/config/
        export default defineConfig({
          base: './',
          server: {
            host: 'local.q.com',
            port: 8443,
            // https: true
          },
          plugins: [
            react({
              // to show readable class names in styled components with vite
              // https://github.com/styled-components/babel-plugin-styled-components/issues/350#issuecomment-979873241
              jsxImportSource: '@emotion/react',
              babel: {
                plugins: [
                  [
                    // 'babel-plugin-styled-components',
                    '@emotion/babel-plugin',
                    {
                      displayName: true,
                      fileName: true,
                    },
                  ],
                  // https://github.com/preactjs/signals/tree/main/packages/react#react-integration
                  ["module:@preact/signals-react-transform"],
                ],
              },
            }),
            // https://github.com/aleclarson/vite-tsconfig-paths
            tsconfigPaths(),
            basicSsl()
          ],
          build: {
            target: 'esnext',
            outDir: 'build',
            rollupOptions: {
              output: {
                // https://rollupjs.org/configuration-options/#output-manualchunks
                manualChunks: (id) => {
                  if (id.includes('node_modules/@ag-grid-community')) return '@ag-grid-community'
                  if (id.includes('node_modules/@ag-grid-enterprise')) return '@ag-grid-enterprise'
                  if (id.includes('node_modules/@heeros')) return 'heeros'
                  if (id.includes('node_modules/@mui')) return 'mui'
                  if (id.includes('node_modules/@tanstack')) return 'tanstack'
                  if (id.includes('node_modules/@aws')) return '@aws'
                  if (id.includes('node_modules/mixpanel')) return 'mixpanel'
                  if (id.includes('node_modules/pdfjs')) return 'pdfjs'
                  if (id.includes('node_modules/framer-motion')) return 'framer-motion'
                  if (id.includes('node_modules/i18n')) return 'i18n'
              }
              }
            }
          },
          // 'pdfjs-dist' throws an error // https://github.com/storybookjs/storybook/issues/22223
          // ERROR: Top-level await is not available in the configured target environment
          optimizeDeps: {
            esbuildOptions: {
              target: "esnext",
            },
          },
          test: {
            environment: "jsdom"
          },
        })
       id  parameter is the folder path in your project and we can group modules in separate files by returning chunk name and eventually get smaller chunks   More advanced logic we may also apply some custom automatic logic for manual splitting 
        import fs from 'fs';

        export default {
          input: 'src/index.js',
          output: {
            dir: 'dist',
            format: 'es',
            manualChunks: (id) => {
              // Estimate the size of the module based on the size of the file
              const fileSize = fs.statSync(id).size; // Get the size of the file in bytes
              const estimatedSizeInKB = fileSize / 1024; // Convert bytes to KB
        
              if (estimatedSizeInKB <= 500) {
                return null; // Keep in the main bundle
              } else {
                // Split into a separate chunk
                return `chunk-${id}`;
              }
            },
          },
        };
      

chunks

Class is useful for objects creation of the same kind. There is not 'real' classes in JS Classes in JS are based internally on constructor functions & prototypes Syntax 
            class MyClass {
              prop = value
              constructor() {} // NO commas
              method1() {} 
              method2() {}
              get something() {}
              set something(param) {}
              [Symbol.iterator]() {}
            }

            const obj = new MyClass() // create a new object with all the listed methods
       constructor()  method is called when object is created with  new  keyword, so we can initialize the object there constructor()  allows us to pass arguments into the class and assign it to an object MyClass  is technically a constructor function methods, getters and setters are written to  MyClass.prototype  of a constructor function Create 
            class User {
              constructor(name) { this.name = name }
              sayHi() { alert(this.name) }
              car = "bmw"
              dog = prompt("your dog breed?", "husky");
            }
          
            let user = new User("John") // object is created
            user.sayHi() // "John"
            user.car // "bmw"
            user.dog // "husky"
            typeof User // function
            User.prototype // {constructor: ƒ, sayHi: ƒ}
            alert(User) // class User { ... } // string representation starts with the “class…”
            // for...in // does not work by default, coz enumerable flag is false for all methods in the "prototype"
            // Classes always "use strict"
        Class expression 
            let User = class { sayHi() { alert("Hello") } }
            let User = class MyClass { sayHi() { alert("Hello") } } // Like a function, class expressions may have a name, it’s visible inside the class only
            let xxx = new User()
            xxx.sayHi() // Hello

            // return class in function on-demand
            function makeClass(phrase) {
              return class { sayHi() { alert(phrase) } }
            }
            let User = makeClass("Hello") // Create a new class
            new User().sayHi() // Hello
       Dynamic method name 
            class User {
              ['say' + 'Hi']() { alert("Hello") }
            }
            new User().sayHi() // Hello
       this  in class 
            class Button {
              constructor(value) { this.value = value }
              click() { alert(this.value) }
            }
            let button = new Button("hello")
            setTimeout(button.click, 1000) // undefined
        
            // but works with arrow function, which takes "this" from above
            class Button {
              constructor(value) { this.value = value }
              click = () => alert(this.value)
            }
            let button = new Button("hello")
            setTimeout(button.click, 1000) // hello
       Methods chaining To enable methods chaining just return object's instance by returning  this 
            class Greetings {
              hi() { console.log('hi'); return this; }
              bye() { console.log('bye'); return this; }
            }

            const greeting = new Greetings()
            greeting.hi().bye() // hi // bye
       Extends 
            class Animal {
              constructor(name) {
                this.speed = 0
                this.name = name
              }
              setSpeed(speed) { this.speed = speed }
            }
            
            let dog = new Animal("Spok")
            dog.name // 'Spok'
            dog.setSpeed(30)
            dog.speed // 30
            dog.doFly() // !!! dog.doFly is not a function
            
            class Bird extends Animal { 
              doFly() { return true }
            }

            let owl = new Bird('Lintu')
            owl.name // 'Lintu'
            owl.setSpeed(100)
            owl.speed // 100
            owl.doFly() // true
       Override method 
            class Animal {
              constructor(name) {
                this.speed = 0
                this.name = name
              }
              setSpeed(speed) { this.speed = speed }
            }
            
              let dog = new Animal("Spok")
              dog.name // 'Spok'
              dog.setSpeed(30)
              dog.speed // 30
            
            class Bird extends Animal { 
              setSpeed(speed) { this.speed = 2 * speed }
            }
            
              let owl = new Bird('Lintu')
              owl.name // 'Lintu'
              owl.setSpeed(100)
              owl.speed // 200

       Override constructor constructors in inheriting classes must call  super  before using  this super  calls parent method arrow functions do not have  super 
            class Animal {
              constructor(name) {
                this.speed = 0
                this.name = name
              }
            }
            let rabbit = new Animal ("White Rabbit", 10) 
            // {speed: 0, name: "White Rabbit"}
        
            class Rabbit extends Animal {
              constructor(name, earLength) {
                super(name)
                this.earLength = earLength
              }
            }
            rabbit = new Rabbit("White Rabbit", 10) 
            // {speed: 0, name: "White Rabbit", earLength: 10}
       Static methods & properties can be accessed directly from the class without object instantiation (no idea why it is useful) they belong to the class they are not part of an instantiated object static properties and methods are inherited Static methods 
            class Man {
              name = "John"
              static hi() {
                return 'John says hi'
              }
            }

            // same as

            class Man { name = "John" }
            Man.hi = function() { return 'John says hi' }

            const john = new Man
            john.name // 'John'
            john.hi() // ! Uncaught TypeError: john.hi is not a function
            Man.hi() // 'John says hi'
       Static property 
            class Article {
              static publisher = "John"
            }
            // or
            Article.publisher = "John"

            const news1 = new Article
            news1.publisher // undefined
            Article.publisher // 'John'
       Read - only property property can be set & never modified to do that need to make getter, but not the setter 
            class CoffeeMachine {   
              constructor(power) { this._power = power }
              get power() { return this._power }
            }
            
            let coffeeMachine = new CoffeeMachine(100)
            alert(`Power is: ${coffeeMachine.power} W`) // Power is: 100 W
            coffeeMachine.power = 25; // Error (no setter)
       Private properties & methods only accessible from inside the class not supported widely yet should start with  # inherits have no direct access 
            class CoffeeMachine {
              #waterAmount = 666
        
              waterAmount() {
                return this.#waterAmount
              }
            }
            
            let machine = new CoffeeMachine()
            machine.waterAmount() // 666
            machine.#waterAmount // Error Private field '#waterAmount' must be declared in an enclosing class
        
            // can not be inherited
            class MegaCoffeeMachine extends CoffeeMachine {
              method() {
                alert( this.#waterAmount ); // Error Private field '#waterAmount' must be declared in an enclosing class
              }
            }
       Getters & setters Getters & setters can modify property values when we write or read them from the object. 
            class Human {
              get name() {
                return this._name
              }
              set name(str) {
                const letters = [...str]
                const [firstLetter, ...otherLetters] = letters
                this._name = [firstLetter.toUpperCase(), ...otherLetters].join('')
              }
            }
            
            const john = new Human
            john.name = 'john'
            john.name // 'John'
       
            class CoffeeMachine {
              #waterAmount = 0
        
              get waterAmount() {
                return this.#waterAmount
              }

              set waterAmount(value) {
                if (value < 0) value = 0
                this.#waterAmount = value
              }
            }

            let machine = new CoffeeMachine()
            machine.waterAmount = -666
            machine.waterAmount // 0
            machine.waterAmount = 100
            machine.waterAmount // 100
       Getters & setters via functions can accept multiple arguments more flexible 
            class CoffeeMachine {
              #waterAmount = 0
            
              setWaterAmount(value) {
                if (value < 0) value = 0
                this.#waterAmount = value
              }
            
              getWaterAmount() {
                return this.#waterAmount
              }
            }

            const machine = new CoffeeMachine()
            machine.setWaterAmount(100)
            machine.getWaterAmount() // 100
       Extend built -in classes Built-in classes like Array, Map, Object and  others  are extendable Can add additional methods to it Static methods are not inherited 
            class MyArray extends Array {
              isEmpty() { return this.length === 0 }
            }

            let arr = new MyArray(1, 2, 5, 10, 50)
            arr // MyArray(5) [1, 2, 5, 10, 50]
            arr.constructor === MyArray // true

            let filteredArr = arr.filter(item => item >= 10)
            filteredArr // MyArray(2) [10, 50]
            filteredArr.constructor === MyArray // true
            filteredArr.isEmpty() // false
            filteredArr.length = 0
            filteredArr // MyArray []
            filteredArr.isEmpty() // true
       [Symbol.species] If we’d like built-in methods like map or filter to return regular arrays return Array in [Symbol.species] 
            class MyArray extends Array {
              isEmpty() { return this.length === 0 }
            
              static get [Symbol.species]() {
                return Array
              }
            }

            let arr = new MyArray(1, 2, 5, 10, 50)
            arr // MyArray(5) [1, 2, 5, 10, 50]
            arr.isEmpty() // false

            let filteredArr = arr.filter(item => item >= 10);
            filteredArr // [10, 50]
            filteredArr.isEmpty() // TypeError: filteredArr.isEmpty is not a function
       instanceof Checks if an object belongs to a certain class Returns true if object belongs to the Class or inherits from it Examines the prototype chain for the check Same as  objA.isPrototypeOf(objB) 
            class Rabbit {}
            let rabbit = new Rabbit()
            rabbit instanceof Rabbit // true

            function Dog() {}
            new Dog() instanceof Dog // true

            let arr = [1, 2, 3];
            arr instanceof Array // true
            arr instanceof Object // true
       Mixins object can inherit from a single object class may extend only one other class Sometimes it may be limiting Mixin  is a class with methods that can be used by other classes without a need to inherit from it Mixin is a class that contains methods for other classes 
            let sayHiMixin = {
              sayHi() { alert(`Hello ${this.name}`) },
              sayBye() { alert(`Bye ${this.name}`) }
            };
        
            class User {
              constructor(name) {
                this.name = name;
              }
            }
        
            // copy the methods
            Object.assign(User.prototype, sayHiMixin);
            // now User can say hi
            new User("Dude").sayHi(); // Hello Dude!
       Good but difficult   example  on real mixin usage. Class vs constructor function Example is taken from the  OOP lesson , which shows how classes are internally done in JavaScript by prototyping. Class version 
            let usersArr = []

            class User {
              constructor(email, name) {
                this.email = email
                this.name = name
                this.online = false
                usersArr.push(this)
              }

              login() {
                this.online = true
                console.log(this.email, 'has logged in')
              }

              logout() {
                this.online = false
                console.log(this.email, 'has logged out')
              }
            }

            class Admin extends User {
              constructor(email, name) {
                super(email, name)
                this.role = ''
              }
              deleteUser(u) {
                usersArr = usersArr.filter(user => user.email !== u.email)
                console.log(usersArr)
              }
            }

            const userOne = new User('john@mail.com', 'John')
            const userTwo = new User('bob@mail.com', 'Bob')
            const admin = new Admin('mike@mail.com', 'Mike')
            usersArr // [User, User, Admin]
            admin.deleteUser(userOne)
            usersArr // [User, Admin]
       Constructor function version 
            let usersArr = []

            function User(email, name) {
              this.email = email
              this.name = name
              this.online = false
              usersArr.push(this)
            }

            User.prototype.login = function() {
              this.online = true
              console.log(this.email, 'has logged in')
            }
            User.prototype.logout = function() {
              this.online = false
              console.log(this.email, 'has logged out')
            }

            function Admin(...args) {
              User.apply(this, args)
              this.role = ''
            }

            Admin.prototype = Object.create(User.prototype)
            Admin.prototype.deleteUser = function(u) {
              usersArr = usersArr.filter(user => user.email !== u.email)
            }

            const userOne = new User('john@mail.com', 'John')
            const userTwo = new User('bob@mail.com', 'Bob')
            const admin = new Admin('mike@mail.com', 'Mike')
            usersArr // [User, User, Admin]
            admin.deleteUser(userOne)
            usersArr // [User, Admin]
      

class

Class component 
      import React, { useState } from 'react';

      class ClassComponent extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            likes: 0,
          };
          this.increment = this.increment.bind(this);
          this.decrement = this.decrement.bind(this);
        }

        increment() {
          this.setState({ likes: this.state.likes + 1 });
        }

        decrement() {
          this.setState({ likes: this.state.likes - 1 });
        }

        render() {
          return (
            <div>
              <>Likes <b>{this.state.likes}</b></>
              <button onClick={this.increment} style={btnCss}> +1 </button>
              <button onClick={this.decrement} style={btnCss}> -1 </button>
            </div>
          )
        }
      }

      <ClassComponent />
        Function component Function component is a modern way to write a component in react. 
      import React, { useState } from 'react';

      function FunctionComponent() {
        const [likes, setLikes] = useState(0);
        const increment = () => setLikes(likes + 1);
        const decrement = () => setLikes(likes - 1);

        return (
          <div>
            <div>Likes <b>{likes}</b></div>
            <button onClick={increment} style={btnCss}> +1 </button>
            <button onClick={decrement} style={btnCss}> -1 </button>
          </div>
        )
      }

      <FunctionComponent />
       

class vs function component

Check if click was made inside or outside an element.  
      // functions/isClickedElInsideThisEl.js
      export function isClickedElInsideThisEl(clickedEl, thisEl) {
        // clickedEl = e.target // within event handler
        if (!thisEl) return
        return thisEl.contains(clickedEl)
      }
       
      import { useRef } from 'react'
      import { isClickedElInsideThisEl } from '/functions/isClickedElInsideThisEl'
      const style = { border: '2px solid grey', padding: '10px', margin: '10px', maxWidth: '500px' }

      function Component() {
        const ref = useRef()

        const listenerHandler = e => {
          const clickedEl = e.target
          const cBox = ref.current
          const clickedInside = isClickedElInsideThisEl(clickedEl, cBox)
          clickedEl.style.background = clickedInside ? 'lightgreen' : 'lightpink'
          setTimeout(() => { clickedEl.style.background = '' }, 1000)
        }
        const startListening = () => document.addEventListener('click', listenerHandler)
        const stopListening = () => document.removeEventListener('click', listenerHandler)

        return (
          <>
            <button onClick={startListening}>Listen if click inside 'C' element</button>
            <button onClick={stopListening}>Stop listening</button>

            <div style={style}>
              A
              <div style={style}>
                B
                <div style={style} ref={ref}>
                  C
                  <div style={style}>
                    D
                  </div>
                </div>
              </div>
            </div>
          </>
        )
      }
      

clicked inside

CloudFormation

Component libs https://www.reactbits.dev/  - beautifully animated components for react

component libs

If 
          const year = 2000

          // one statement
          if (year == 2015) alert( 'You are right!' );

          // multiple statements // better doing this even for one statement for readability 
          if (year == 2015) {
            alert("That's correct!");
            alert("You're so smart!");
          }

          // pre-evaluated boolean value to if
          let cond = (year == 2015); // equality evaluates to true or false
          if (cond) alert( 'You are right!' );
       If-else 
          const year = 2000
          if (year < 2015) {
            alert( 'Too early...' );
          } else {
            alert( 'Exactly!' );
          }
       Else-if 
          const year = 2000
          if (year < 2015) {
            alert( 'Too early...' );
          } else if (year > 2015) {
            alert( 'Too late' );
          } else {
            alert( 'Exactly!' );
          }
       Ternary operator 
          let accessAllowed = (age > 18) ? true : false;
          let accessAllowed = age > 18 ? true : false; // parentheses can be omitted // but it is not readable
        
          // multiple ‘?’
          let age = prompt('age?', 18);
          let message = (age < 3) ? 'Hi, baby!' :
            (age < 18) ? 'Hello!' :
            (age < 100) ? 'Greetings!' :
            'What an unusual age!';
          alert( message );
       Switch 
          let a = 3;
          switch (a) {
            case 1:
              alert('1'); break;
            case 2: // grouped two cases
            case 3: // grouped two cases
              alert('2 or 2'); break;
            default:
              alert('not 1,2 or 3');
          }
        
          // in some cases to use obj is more elegant
      

conditions

Confirmation modal dialog with Material UI Confirmation modal dialog with  Material UI .  
      import { Lnk, useState, jsxToStr } from '/components/post/reExport';
      import { forwardRef } from 'react'
      import Button from '@mui/material/Button'
      import Dialog from '@mui/material/Dialog'
      import DialogActions from '@mui/material/DialogActions'
      import DialogContent from '@mui/material/DialogContent'
      import DialogContentText from '@mui/material/DialogContentText'
      import DialogTitle from '@mui/material/DialogTitle'
      import Slide from '@mui/material/Slide'

      const Transition = forwardRef(function Transition (props, ref) {
        return <Slide direction='up' ref={ref} {...props} />
      })

      const ConfirmationDialog = ({
        renderState,
        renderStateSetter,
        title,
        content,
        hideLeftButton,
        leftButtonContent,
        leftButtonHandler,
        rightButtonContent,
        rightButtonHandler
      }) => (
        <Dialog
          open={renderState}
          TransitionComponent={Transition}
          keepMounted
          onClose={() => renderStateSetter(false)}
          sx={{ zIndex: 1200 }}
          data-testid='confirmation-dialog'
        >
          <DialogTitle>{title}</DialogTitle>
          <DialogContent>
            <DialogContentText>
              {content}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            {!hideLeftButton && <Button onClick={leftButtonHandler}>{leftButtonContent}</Button>}
            <Button
              onClick={rightButtonHandler}
              sx={{ marginLeft: 'auto !important' }}
            >
              {rightButtonContent}
            </Button>
          </DialogActions>
        </Dialog>
      )

      const Component = () => {
        const [isOpen, setIsOpen] = useState(false)
        return (
          <>
            <button onClick={() => setIsOpen(true)}>Open dialog</button>
            <ConfirmationDialog
              renderState={isOpen}
              renderStateSetter={setIsOpen}
              title='Confirmation dialog'
              content='Are you sure?'
              leftButtonContent='No'
              leftButtonHandler={
                () => {
                  alert('No button clicked')
                  setIsOpen(false)
                }
              }
              rightButtonContent='Yes'
              rightButtonHandler={() => alert('Yes button clicked')}
            />
          </>
        )
      }
      

confirmation modal

Console 
        console.log(val) // prints value
        console.dir(obj) // displays an interactive list of the properties 
        console.assert(false, 'msg') // writes an error message to the console if the assertion is false
        console.clear() // clears the console if the environment allows
        console.count('msg') // logs the number of this count() calls has been called
        console.countReset('msg') // resets counter used with console.count()
        console.error('msg') // outputs an error message
        console.info('msg') // outputs an informational message 
        console.warn('msg') // outputs a warning message 
        console.table(objOrArr) // displays tabular data as a table
        console.trace(objOrMsg) // outputs a stack trace
        console.time(timerName) // starts a timer
        console.timeLog(timerName) // logs the current value of a timer
        console.timeEnd(timerEnd) // stops a timer
      

console

In browser Set 
      function setCookie(cName, cVal, expDays) {
        const d = new Date();
        d.setTime(d.getTime() + (expDays * 24 * 60 * 60 * 1000));
        let expires = "expires="+d.toUTCString();
        document.cookie = cName + "=" + cVal + ";" + expires + ";path=/";
      }
       Get cookie 
      function cookieVal(cName) {
        let name = cName + '=';
        let decodedCookie = decodeURIComponent(document.cookie);
        let ca = decodedCookie.split(';');
        for (let i = 0; i < ca.length; i++) {
          let c = ca[i];
          while (c.charAt(0) == ' ') {
            c = c.substring(1);
          }
          if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
          }
        }
        return '';
      }
       Does cookie exist 
      function isCookie(cName) {
        const cVal = cookieVal(cName)
        if (cVal != '') return true
        return false
      }
       Delete cookie 
      function removeCookie(cName) {
        setCookie(cName, 'cookie is removed', -1);
      }
       

cookies

e.clientX  &  e.clientY Coordinates relative to window Calculated from the window top/left edge e.pageX  &  e.pageY Coordinates relative to the document Calculated from the document top/left edge Scroll is considered e.clientY = e.pageY  until page is scrolled e.screenX  &  e.screenY Coordinates relative to physical screen 
      document.documentElement.addEventListener("mousemove", function (e) {
        console.log(`clientX ${e.clientX} / clientY ${e.clientY} `) 
        console.log(`pageX ${e.pageX} / pageY ${e.pageY}`)
        console.log(`screenX ${e.screenX} / screenY ${e.screenY}`)
      })

      /*
        clientX 395 / clientY 231 
        pageX 395 / pageY 1263 // page is scrolled
        screenX 484 / screenY 378 // browser is away from the top left corner
      */
       getBoundingClientRect() Window relative coordinates for a minimal rectangle that encloses an element has properties bottom  height ,  left ,  right ,  top ,  width ,  x ,  y .bottom  from top window side to bottom el's edge .bottom  from left window side to right el edge same coordinates as in clientX/Y don’t have to round coordinates when setting to  style.left  &  style.top 
        const rect = document.querySelector('button').getBoundingClientRect()
        rect.bottom // 411.296875 // from top window side to bottom el edge // not as "bottom" CSS with position "fixed"
        rect.height // 40
        rect.left // 265.5
        rect.right // 370.5 // from left window side to right el edge // not as "right" CSS with position "fixed"
        rect.top // 371.296875
        rect.width // 105
        rect.x // 265.5 // no support by IE
        rect.y // 371.296875 // no support by IE
       
      function getCoords(el) {
        let box = el.getBoundingClientRect();
        return {
          top: box.top + window.pageYOffset,
          right: box.right + window.pageXOffset,
          bottom: box.bottom + window.pageYOffset,
          left: box.left + window.pageXOffset
        }
      }
       Show message under element 
      function createMessageUnder(elem, html) {
        let message = document.createElement('div')
        message.style.cssText = "position:absolute; color: red"
        let coords = getCoords(elem)
        message.style.left = coords.left + "px"
        message.style.top = coords.bottom + "px"
      
        message.innerHTML = html
        return message
      }
       
      let elem = document.getElementById("innerDiv2")
      let message = createMessageUnder(elem, 'Hello, world!')
      document.body.append(message)
      setTimeout(() => message.remove(), 5000)
       document.elementFromPoint(x, y) returns the most nested element at window coordinates (x, y) Return the tag of the element that is in the middle of the window 
      let centerX = document.documentElement.clientWidth / 2
      let centerY = document.documentElement.clientHeight / 2
      let elem = document.elementFromPoint(centerX, centerY)
      elem.style.background = "red"
      console.log(elem.tagName)
      
      // element may be different depending on the current scroll position
      // For out-of-window coordinates the elementFromPoint returns null
       Coordinates relative to element Ones I needed to get distance (coordinates) of cursor from top & bottom of container At first we need to know the coordinates of our container relative to the screen with  getBoundingClientRect()   And then we need to know the cursor coordinates relative to the screen with  e.clientY And just calculate the distance 
      function movePasteTextAfterCursor(e: MouseEvent) {
        const item = (e.target as Element).closest('.item')
        if (!item) return
        const { height, top } = item.getBoundingClientRect()
        const yWithinElement = e.clientY - top
        const distToTop = yWithinElement
        const distToBottom = height - yWithinElement
        let pastePlace

        if (distToTop / height < 0.1) {
          pastePlace = { pastePos: 'top', itemId: item.id }
        } else if (distToBottom / height < 0.1) {
          pastePlace = { pastePos: 'bottom', itemId: item.id }
        } else {
          pastePlace = { pastePos: 'middle', itemId: item.id }
        }

        if (hash(prevPastePlace) === hash(pastePlace)) return

        store.dispatch(addPasteText(pastePlace))
        store.dispatch(savePastePlace(pastePlace))
        prevPastePlace = structuredClone(pastePlace)
      }
      

coordinates

Cross-Origin requests fetch request to another web-site probably fails origin  – a domain/port/protocol Cross-origin requests  are sent to another domain (even a subdomain) or protocol or port Cross-origin requests are allowed, but with explicit allowance by the server, expressed in special headers that policy is called  CORS :  C ross- O rigin  R esource  S haring CORS exists to protect the internet from  hackers There are two types of cross-origin requests: safe requests & all others Safe requests A request is safe if it satisfies two conditions... has one of methods: GET or POST or HEAD allowed custom headers:  Accept ,  Accept-Language ,  Content-Language ,  Content-Type  with the value  application/x-www-form-urlencoded ,  multipart/form-data  or  text/plain 'safe' requests are sent right away, with the Origin header For requests w/o credentials (not sent by default), the server sets:  Access-Control-Allow-Origin  to  *  or same value as  Origin For requests with credentials, the server should set:  Access-Control-Allow-Origin  to same value as  Origin  and  Access-Control-Allow-Credentials  to  true JS automatically get access to response headers   Cache-Control ,  Content-Language ,  Content-Type ,  Expires ,  Last-Modified  or  Pragma Additional headers should be listed by server in  Access-Control-Expose-Headers  header Safe request can be made with a  <form>  or a  <script> , w/o any special methods CORS for safe requests If a request is cross-origin, the browser always adds the  Origin  header Origin: https://javascript.info  for HTTP-request Access-Control-Allow-Origin: *  for HTTP-response Response headers For cross-origin request, by default JS may access “safe” response headers Cache-Control ,  Content-Language ,  Content-Type ,  Expires ,  Last-Modified ,  Pragma There’s no  Content-Length  header in the list Additional permission is required to access that header to track the percentage of progress To grant JavaScript access to any other response header, the server must send the  Access-Control-Expose-Headers  header It contains a comma-separated list of unsafe header names that should be made accessible Bellow script is allowed to read the  Content-Length  and  API-Key  headers of the response 
      200 OK
      Content-Type:text/html; charset=UTF-8
      Content-Length: 12345
      API-Key: 2c9de507f2c54aa1
      Access-Control-Allow-Origin: https://javascript.info
      Access-Control-Expose-Headers: Content-Length,API-Key
       Unsafe requests for “unsafe” requests browser firstly sends “preflight” request, to ask for permission Preflight request occurs “behind the scenes”, it’s invisible to JavaScript JS only gets the response to the main request or an error if there’s no server permission A preflight request uses the method 'OPTIONS', no body and two headers: Access-Control-Request-Method  method of the unsafe request Access-Control-Request-Headers  provides a comma-separated list of its unsafe HTTP-headers If the server agrees to serve the requests, it should respond with empty body, status 200 and headers... Access-Control-Allow-Origin  must be either  *  or the requesting origin to allow it Access-Control-Allow-Methods  must have the allowed method Access-Control-Allow-Headers  must have a list of allowed headers Access-Control-Max-Age  header may specify a number of seconds to cache the permissions. So the browser won’t have to send a preflight for subsequent requests that satisfy given permissions. Take a look at step-by-step example  https://javascript.info/fetch-crossorigin Credentials A cross-origin request from JavaScript by default does not bring credentials (cookies or HTTP authentication) but HTTP requests have them to include credentials in fetch and send cookies need to use  credentials: "include"  property option If the server agrees to accept the request with credentials, it should add... header  Access-Control-Allow-Credentials: true  to the response, in addition to  Access-Control-Allow-Origin Access-Control-Allow-Origin  is prohibited from using a star  *  for requests with credentials, must provide the exact origin there 
      fetch('http://another.com', { credentials: "include" })
       Fetch page content  
      function FetchComponent() {
        return (
          <div>
            <button onClick={fetchPage}>Fetch this page content and put into console</button>
          </div>
        )
      }

      async function fetchPage() {
        const response = await fetch('/posts/fetch') // resolves with response headers
        const result = await response.text()
        console.log(result)
      }
      

CORS

Based on  tutorial . ToDo app We will do the api points with AWS services for simple to-do app.  
      import axios from 'axios'
      import shortid from 'shortid'
      import { FaInfoCircle as Info } from 'react-icons/fa'
      import { FaTrashAlt as Bin } from 'react-icons/fa'
      import { Spinner } from '/functions/Spinner'

      function ToDoApp() {
        const [toDosState, setToDosState] = useState([])
        const [loadingState, setLoadingState] = useState(true)
        const [updatingState, setUpdatingState] = useState(false)

        async function getAllToDos() {
          const res = await axios.get('https://zitdmv25la.execute-api.us-east-1.amazonaws.com/prod/items')
          const toDos = res.data.items
          setToDosState(toDos)
          setLoadingState(false)
        }
        
        useEffect(() => {
          getAllToDos()
        }, [])

        return (
          <div className='toDoContainer'>
            {loadingState && <div className='center'><Spinner width='30px'/></div> }
            {toDosState.length === 0 && !loadingState && <div className='center'>Empty</div> }
            {toDosState.map((toDo, index) => (
              <div className='toDoLine' key={toDo.id}>
                <div className='left'>
                  <Counter num={index + 1}/>
                  <ToDoTxt toDoTxt={toDo.toDoName} toDoId={toDo.id} updatingState={updatingState} setUpdatingState={setUpdatingState}/>
                </div>
                <div className='right'>
                  <InfoBtn toDoId={toDo.id} />
                  <DelBtn toDoId={toDo.id} toDosState={toDosState} setToDosState={setToDosState}/>
                </div>
              </div>
            ))}
            {!loadingState && <ToDoInput toDosState={toDosState} setToDosState={setToDosState} getAllToDos={getAllToDos}/>}
            {updatingState && <span className='center'><Spinner height='30px' /></span> }
            
            <style jsx>{`
              .toDoContainer {
                position: relative;
                border: 1px dotted lightblue;
                border-radius: 8px;
                margin: 10px;
                padding: 20px;
                min-height: 100px;
              }
              .center {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
              .toDoLine {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: nowrap;
                border-bottom: 1px dotted lightgray;
              }
              .left {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                flex-shrink: 1;

              }
              .right {
                display: flex;
                flex-wrap: nowrap;
                row-gap: 5px; 
                column-gap: 5px; 
                justify-content: flex-end;
              }
            `}</style>
          </div>
        )
      }

      function Counter({num}) {
        return (
          <span className='counter'>
            {num}

            <style jsx>{`
              .counter {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
                background: grey;
                border-radius: 50%;
                width: 15px;
                height: 15px;
                margin-right: 10px;
                color: whitesmoke;
                font-size: 10px;
              }
            `}</style>
          </span>
        )
      }

      function ToDoTxt({toDoTxt, toDoId, setUpdatingState}) {
        const [showDetailsState, setShowDetailsState] = useState(false)
        const [detailsState, setDetailsState] = useState(null)
        const text = useRef(null)

        function saveInitText(e) {
          text.current = e.target.innerText
        }

        function didTextChange(e) {
          const textBefore = text.current
          const textNow = e.target.innerText
          if(textBefore !== textNow) updateItem(e)
        }

        async function updateItem(e) {
          setUpdatingState(true)
          const requestBody = {
            id: toDoId,
            updateKey: 'toDoName',
            updateValue: e.target.innerText,
          }

          const res = await axios({
            method: 'patch',
            url: 'https://zitdmv25la.execute-api.us-east-1.amazonaws.com/prod/item',
            data: requestBody
          })
          const isSuccess = res.data.Message === "SUCCESS"
          if (!isSuccess) alert('smth wrong')

          setUpdatingState(false)
        }

        return (
          <span 
            className='toDoTxt' 
            contentEditable
            onFocus={saveInitText}
            onBlur={didTextChange}
          >
            {toDoTxt}
            {showDetailsState && detailsState && <span className='details'>{detailsState}</span>}

            <style jsx>{`
              .toDoTxt {
                color: grey;
                outline: 0px solid transparent;
              }
            `}</style>
          </span>
        )
      }

      function InfoBtn({ toDoId }) {
        const [loadingState, setLoadingState] = useState(false)

        async function showInfo() {
          setLoadingState(true)
          const queryParams = {
            id: toDoId,
          }

          const res = await axios({
            method: 'get',
            url: 'https://zitdmv25la.execute-api.us-east-1.amazonaws.com/prod/item',
            params: queryParams
          })
          const isSuccess = res.status === 200
          if (!isSuccess) alert('smth wrong')
          if (isSuccess) alert(JSON.stringify(res.data))
          setLoadingState(false)
        }

        return (
          <button onClick={showInfo}>
            {loadingState ? <Spinner height='16px' /> : <Info />}

            <style jsx>{`
              button {
                all: unset;
                cursor: pointer;
                color: grey;
                display: flex;
                align-items: center;
              }
              button:hover {
                color: black;
              }
            `}</style>
          </button>
        )
      }

      function DelBtn({ toDoId, toDosState, setToDosState }) {
        const [deletingState, setDeletingState] = useState(false)

        async function remove() {
          setDeletingState(true)

          const requestBody = {
            id: toDoId
          }

          const res = await axios({
            method: 'delete',
            url: 'https://zitdmv25la.execute-api.us-east-1.amazonaws.com/prod/item',
            data: requestBody
          })

          const isSuccess = res.data.Message === "SUCCESS"
          
          if (isSuccess) {
            const updatedToDos = toDosState.filter(item => item.id !== toDoId)
            setToDosState(updatedToDos)
          } 
          if (!isSuccess) alert('smth wrong')
          setDeletingState(false)
        }

        return (
          <button onClick={remove}>
            {deletingState ? <Spinner height='16px' /> : <Bin />}

            <style jsx>{`
              button {
                all: unset;
                cursor: pointer;
                color: grey;
                display: flex;
                align-items: center;
              }
              button:hover {
                color: black;
              }
            `}</style>
          </button>
        )
      }

      function ToDoInput({ getAllToDos }) {
        const [addingState, setAddingState] = useState(false)
        const inputRef = useRef()

        async function addToList(e) {
          e.preventDefault()
          setAddingState(true)
          const requestBody = {
            id: shortid(),
            toDoName: inputRef.current.value,
            toDoStatus: 'new'
          }

          const res = await axios({
            method: 'post',
            url: 'https://zitdmv25la.execute-api.us-east-1.amazonaws.com/prod/item',
            data: requestBody
          })

          const isSuccess = res.data.Message === "SUCCESS"
          if (isSuccess) getAllToDos()
          if (!isSuccess) alert('smth wrong')
          setAddingState(false)
          inputRef.current.value = ''
          inputRef.current.focus()
        }
        
        return (
          <form onSubmit={addToList}>
            <input type="text" ref={inputRef} placeholder='to do...'/> 
            <button>{addingState ? 'Adding...' : 'Add'}</button>

            <style jsx>{`
              form {
                margin: 10px;
                text-align: center;
              }
              form > * {
                margin: 5px;
              }
              input {
                padding: 0px 3px;
                max-width: 100%;
              }
              button {
                cursor: pointer;
                padding: 0px 5px;
                min-width: 70px;
                max-width: 100%;
              }
            `}</style>
          </form>
        )
      }
      // #endregion
       About CRUD CRUD  -  C reate,  R ead,  U pdate,  D elete API functionality. Overview  Lambda function AWS  Lambda  is a containerized self-managed server which runs a function. Invoiced for compute time only, not for idle time Scaled & shrunk automatically Dynamo DB It is a no-sql  database  from AWS API Gateway It is a  service  from AWS that allows to create APIs points for RESTful and WebSocket APIs IAM IAM  -  I dentity and  A ccess  M anagement  service Allows to specify who can access which services on AWS and under which conditions DynamoDB Search for  DynamoDB  service Note down your region from at the top right corner -  eu-north-1 Push  Create table  button Table name -  toDoTable , partition key -  id Lambda function Search for  Lambda  service Hit  Create function  button Function name -  toDoApi , runtime -  Node.js , execution role -  New role from AWS policy templates , role name -  toDoRoles IAM In our lambda function under  Configuration  -  Permissions  -  Execution role  click on  toDoRoles  name We re-directed into  IAM  to our role Click  Add permissions  -  Attach policies Add  CloudWatchFullAccess ,  AmazonDynamoDBFullAccess API Gateway Search for  API Gateway  service Create  New   REST API  with name  toDoApiGateway In  Actions  create a  Resource  with name  health ,  items ,  item  with CORS enabled Select resource and  Create method  via  Actions  with adding our lambda function name and region  Add different resources with  GET ,  POST ,  DELETE ,  PATCH  methods connected to our  toDoApi  lambda function  Then  Deploy API  from  Actions  dropdown with stage name  prod In return we get API end point url to use our API  https://zitdmv25la.execute-api.us-east-1.amazonaws.com/prod Lambda event and response formats https://docs.aws.amazon.com/lambda/latest/dg/services-apigateway.html Event Amazon API Gateway invokes your function with an event that contains a JSON representation of the HTTP request. 
      {
        "resource": "/",
        "path": "/",
        "httpMethod": "GET",
        "requestContext": {
            "resourcePath": "/",
            "httpMethod": "GET",
            "path": "/Prod/",
            ...
        },
        "headers": {
            "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
            "accept-encoding": "gzip, deflate, br",
            "Host": "70ixmpl4fl.execute-api.us-east-2.amazonaws.com",
            "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36",
            "X-Amzn-Trace-Id": "Root=1-5e66d96f-7491f09xmpl79d18acf3d050",
            ...
        },
        "multiValueHeaders": {
            "accept": [
                "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9"
            ],
            "accept-encoding": [
                "gzip, deflate, br"
            ],
            ...
        },
        "queryStringParameters": null,
        "multiValueQueryStringParameters": null,
        "pathParameters": null,
        "stageVariables": null,
        "body": null,
        "isBase64Encoded": false
      }
       Response 
      {
        "statusCode": 200,
        "headers": {
          "Content-Type": "application/json"
        },
        "isBase64Encoded": false,
        "multiValueHeaders": { 
          "X-Custom-Header": ["My value", "My other value"],
        },
        "body": "{\n  \"TotalCodeSize\": 104330022,\n  \"FunctionCount\": 26\n}"
      }
       Lambda function code 
      const AWS = require('aws-sdk')
      const region = 'eu-north-1'
      AWS.config.update({ region })
      const dynamodb = new AWS.DynamoDB.DocumentClient()
      const TableName = 'toDoTable'

      function buildResponse(statusCode, body) {
        return {
          statusCode,
          headers: { 
            'Content-Type': 'application/json',
            "Access-Control-Allow-Origin": "*",
          },
          body: JSON.stringify(body) // api gateway expects the json string
        }
      }

      async function getItems() {     
        const params = { TableName }
        const items = await scanDynamoRecords(params, []);
        const body = { items }
        return buildResponse(200, body);
      }

      async function scanDynamoRecords(scanParams, itemArray) {
        try {
          const dynamoData = await dynamodb.scan(scanParams).promise();
          itemArray = itemArray.concat(dynamoData.Items);
          if (dynamoData.LastEvaluatedKey) {
            scanParams.ExclusiveStartkey = dynamoData.LastEvaluatedKey;
            return await scanDynamoRecords(scanParams, itemArray);
          }
          return itemArray;
        } catch(err) {
          return buildResponse(404, {function: 'scanDynamoRecords', err})
        }
      }

      async function getItem(id) {
        const params = { TableName, Key: {id} }

        try {
          const response =  await dynamodb.get(params).promise()
          return buildResponse(200, response.Item)
        }
        catch(err) {
          return buildResponse(404, {function: 'getItem', err})
        }
      }

      async function saveItem(requestBody) {
        const params = {
          TableName,
          Item: requestBody
        }

        return await dynamodb.put(params).promise().then(() => {
          const body = {
            Operation: 'SAVE',
            Message: 'SUCCESS',
            Item: requestBody
          }
          return buildResponse(200, body);
        }, (err) => {
          return buildResponse(404, {function: 'saveItem', err})
        })
      }

      async function modifyItem(id, updateKey, updateValue) {
        const params = {
          TableName,
          Key: {
            'id': id
          },
          UpdateExpression: `set ${updateKey} = :value`,
          ExpressionAttributeValues: {
            ':value': updateValue
          },
          ReturnValues: 'UPDATED_NEW'
        }

        return await dynamodb.update(params).promise().then((response) => {
          const body = {
            Operation: 'UPDATE',
            Message: 'SUCCESS',
            UpdatedAttributes: response
          }
          return buildResponse(200, body);
        }, (err) => {
          return buildResponse(404, {function: 'modifyItem', err})
        })
      }

      async function deleteItem(id) {
        const params = {
          TableName,
          Key: {
            'id': id
          },
          ReturnValues: 'ALL_OLD'
        }
        return await dynamodb.delete(params).promise().then((response) => {
          const body = {
            Operation: 'DELETE',
            Message: 'SUCCESS',
            Item: response
          }
          return buildResponse(200, body);
        }, (err) => {
          return buildResponse(404, {function: 'deleteItem', err})
        })
      }

      exports.handler = async function (event) {
        console.log('Request event: ', event)

        if (event.httpMethod === 'GET' && event.path === '/health') {
          const response = buildResponse(200, 'healthy')
          return response
        }

        if (event.httpMethod === 'GET' && event.path === '/items') { 
          const response = await getItems()
          return response
        }

        if (event.httpMethod === 'GET' && event.path === '/item') { 
          const response = await getItem(event.queryStringParameters.id)
          return response
        }

        if (event.httpMethod === 'POST' && event.path === '/item') { 
          const response = await saveItem(JSON.parse(event.body))
          return response
        }

        if (event.httpMethod === 'PATCH' && event.path === '/item') {
          const requestBody = JSON.parse(event.body)
          const response = await modifyItem(requestBody.id, requestBody.updateKey, requestBody.updateValue)
          return response
        }

        if (event.httpMethod === 'DELETE' && event.path === '/item') {
          const response = await deleteItem(JSON.parse(event.body).id)
          return response
        }

        // rest of all
        const response = buildResponse(404, '404 Not Found')
        return response
      }

       Check with Postman health GET  request to  https://zitdmv25la.execute-api.us-east-1.amazonaws.com/prod/health  item post POST  request to  https://zitdmv25la.execute-api.us-east-1.amazonaws.com/prod/item  item get GET  request to  https://zitdmv25la.execute-api.us-east-1.amazonaws.com/prod/item?id=10003  item patch PATCH  request to  https://zitdmv25la.execute-api.us-east-1.amazonaws.com/prod/item  item delete DELETE  request to  https://zitdmv25la.execute-api.us-east-1.amazonaws.com/prod/item  items get GET  request to  https://zitdmv25la.execute-api.us-east-1.amazonaws.com/prod/items 

crud on aws

Good  post  about units. px pixels absolute value em relative from parent 1, 1.2, 2, 5... rem relative from root(html) font-size 1rem, 0.8rem default html font size is 16px do not depend on other elements good for zooming % relative from parent's same property for  margin  % is taken from parent's width for  line-height  % is taken from current font-size for  width  &  height  % is taken from parent's w/h for  width  &  height  with  position:fixed  % is taken from window's w/h for  width  &  height  with  position:absolute  %  % is taken from window's w/h if there is no parent for  top   right   bottom   left  % is taken from parents height & width (as understood) vw & vh 1% from window width & height 50% means the half of the viewport width & height vmin & vmax min & max from  vw  &  vh vmin  is 1% of viewport's smaller side vmax  is 1% of viewport's larger side scalable for screen sizes good for phones ex & ch Smth like  em , not used widely, just forget it. mm, cm, pt, pc Outdated, also forget it.

css units

Custom hook is a function which should be called from the React code & not from the regular JS functions Custom hook function name should start from  "use" Custom hook can call other hooks, but normal functions can not Without custom hook Let's make a simple counter component as we normally do. 
      import { useState } from 'react'

      function WithoutCustomHook() {
        const [count, setCount] = useState(0)
        const increment = () => setCount(count + 1)
        const decrement = () => setCount(count - 1)
        const reset = () => setCount(0)

        return (
          <div>
            <div>Count: <b>{count}</b></div>
            <button onClick={increment}>Increment</button>&emsp;
            <button onClick={decrement}>Decrement</button>&emsp;
            <button onClick={reset}>Reset</button>
          </div>
        )
      }
        With custom hook Let's extract logic into a custom hook and use it inside a component. 
      // custom hook
      function useCounter(initVal = 0, step = 1) {
        const [count, setCount] = useState(initVal)
        const increment = () => setCount(count + step)
        const decrement = () => setCount(count - step)
        const reset = () => setCount(initVal)
        return [count, increment, decrement, reset]
      }
       Now the logic is not encapsulated inside the component, but can live in a separate file and can be utilized by multiple components. 
      function WithCustomHook() {
        const step = 5
        const startFrom = 10
        const [count, increment, decrement, reset] = useCounter(startFrom, step)
      
        return (
          <div>
            <div>Count: <b>{count}</b></div>
            <button onClick={increment}>Increment by {step}</button>&emsp;
            <button onClick={decrement}>Decrement by {step}</button>&emsp;
            <button onClick={reset}>Reset</button>
          </div>
        )
      }
        Note, we enhanced the hook by bringing  initVal  &  step  arguments.

custom hook

Primitives number  numbers of any kind: integer or floating-point, integers are limited by ±(253-1) bigint  integer numbers of arbitrary length string  strings. A string may have zero or more characters, there’s no separate single-character type boolean  true/false. null  unknown values – a standalone type that has a single value null undefined  unassigned values – a standalone type that has a single value undefined symbol  unique identifiers Objects object  for more complex data structures function Typeof 
      typeof 0 // "number"
      typeof "foo" // "string"
      typeof ("foo") // "string"
       Type conversion 
      String(true) // 'true'

      Number("   123   ") // 123
      Number("123z") // NaN (error reading a number at "z")
      Number(true) // 1
      Number(false) // 0
      Number(null) // 0
      Number(undefined) // NaN  

      +true // 1
      +""   // 0
      +"123" // 123

      Boolean(1) // true
      Boolean(0) // false
      Boolean("0") // true
      Boolean(" ") // true
      Boolean("hello") // true
      Boolean("") // false
      

data types

Download Functions to work with dates in JavaScript https://date-fns.org/docs/Getting-Started npm install date-fns --save import { formatDistance } from 'date-fns' differenceInDays 
      // How many full days are between
      // 2 July 2011 23:00:00 and 2 July 2012 00:00:00?
      const result = differenceInDays(
        new Date(2012, 6, 2, 0, 0),
        new Date(2011, 6, 2, 23, 0)
      )
      //=> 365
      

data_fns

Create new Date([timestamp])  - create a Date object with timestamp (milliseconds passed after the Jan 1st of 1970 UTC+0) 
            let now = new Date() // Mon May 17 2021 02:47:33 GMT+0300 (Eastern European Summer Time)
            new Date(0) // 0 means 01.01.1970 UTC+0
            new Date(24 * 60 * 60 * 1000) // add 24 hours, get 02.01.1970 UTC+0
            new Date(-24 * 3600 * 1000) // 31 Dec 1969
       new Date(dateString)  - if single argument & string, then it is parsed automatically(same as Date.parse) 
            new Date("2017-01-26") // Thu Jan 26 2017 02:00:00 GMT+0200 (Eastern European Standard Time)
       new Date(year, month, [date, hours, minutes, seconds, ms])  - create the date with the given components in the local time zone year = 4 digits month = 0 (Jan) ... 11 (Dec) date = day of month, if absent then 1 is assumed If hours/minutes/seconds/ms is absent, they are assumed to be equal 0. 
            new Date(2011, 0, 1, 0, 0, 0, 0) // 1 Jan 2011, 00:00:00
            new Date(2011, 0, 1) // the same, hours etc are 0 by default
            new Date(2011, 0, 1, 2, 3, 4, 567) // 1.01.2011, 02:03:04.567
       All getters JSON  with all getter methods. 
      {
        "d = new Date()": "2022-06-15T11:58:38.337Z",
        "d.getFullYear()": 2022,
        "d.getMonth()": 5,
        "d.getDate()": 15,
        "d.getHours()": 14,
        "d.getMinutes()": 58,
        "d.getSeconds()": 38,
        "d.getMilliseconds()": 337,
        "d.getDay()": 3,
        "d.getTimezoneOffset()": -180,
        "d.getTime()": 1655294318337,
        "d.getUTCFullYear()": 2022,
        "d.getUTCMonth()": 5,
        "d.getUTCDate()": 15,
        "d.getUTCHours()": 11,
        "d.getUTCMinutes()": 58,
        "d.getUTCSeconds()": 38,
        "d.getUTCMilliseconds()": 337,
        "d.getUTCDay()": 3,
        "d.toDateString()": "Wed Jun 15 2022",
        "d.toISOString()": "2022-06-15T11:58:38.337Z",
        "d.toJSON()": "2022-06-15T11:58:38.337Z",
        "d.toGMTString()": "Wed, 15 Jun 2022 11:58:38 GMT",
        "d.toLocaleString()": "15/06/2022, 14.58.38",
        "d.toLocaleString("tr-Tr")": "15.06.2022 14:58:38",
        "d.toLocaleDateString()": "15/06/2022",
        "d.toLocaleTimeString()": "14.58.38",
        "d.toString()": "Wed Jun 15 2022 14:58:38 GMT+0300 (Eastern European Summer Time)",
        "d.toTimeString()": "14:58:38 GMT+0300 (Eastern European Summer Time)",
        "d.toUTCString()": "Wed, 15 Jun 2022 11:58:38 GMT",
        "d.valueOf()": 1655294318337,
        "formatted": "15.06.2022 14:58:38",
        "formattedUTC": "15.06.2022 11:58:38"
        }
       Get Local time zone 
            let now = new Date() // Sat Dec 25 2021 17:05:39 GMT+0200 (Eastern European Standard Time)
            now.getFullYear() // 2021
            now.getMonth() // 11 // month, 0 ... 11.
            now.getDate() // 25
            now.getHours() // 17
            now.getMinutes() // 5
            now.getSeconds() // 39
            now.getMilliseconds() // 553
            now.getDay() // 6 // Mon // Sunday - Saturday : 0 ... 6
            now.getTimezoneOffset() // -120  // time-zone offset, in minutes, from the date based on current host //  GMT+02

            now.getTime() // 1640444739553 // timestamp // milliseconds since Jan 1, 1970, 00:00:00.000 GMT
            +now // 1640444739553 // timestamp // same as now.getTime()
            
            Date.now() // 1640444940013 // current timestamp // same as new Date().getTime() // it’s faster
       UTC - counterparts methods for the time zone UTC + 0 
            now.getUTCFullYear() 
            now.getUTCMonth() 
            now.getUTCDate() 
            now.getUTCHours() 
            now.getUTCMinutes() 
            now.getUTCSeconds() 
            now.getUTCMilliseconds() 
            now.getUTCDay()
       Set Local time zone 
            let now = new Date()
            now.setFullYear(1997) // setFullYear(year, [month], [date])
            now.setMonth(6) // setMonth(month, [date])
            now.setDate(24)
            now.setHours(20) // setHours(hour, [min], [sec], [ms])
            now.setMinutes(45) // setMinutes(min, [sec], [ms])
            now.setSeconds(42) // setSeconds(sec, [ms])
            now.setMilliseconds(456)

            now.setTime(1621212694110) // sets the whole date by milliseconds since 01.01.1970 UTC
            const event1 = new Date('July 1, 1999')
            const event2 = new Date()
            event2.setTime(event1.getTime())
            event1 // Thu Jul 01 1999 00:00:00 GMT+0300 (Eastern European Summer Time
            event2 // Thu Jul 01 1999 00:00:00 GMT+0300 (Eastern European Summer Time)
       Time zone UTC + 0 
            setUTCFullYear()
            setUTCMonth()
            setUTCDate()
            setUTCHours()
            setUTCMinutes()
            setUTCSeconds()
            setUTCMilliseconds()
       Local date representation Turkish one is the best imho.  Get time in different timezone 
      const utcDate = '2022-05-09T06:03:59.000Z'
      const d = new Date(utcDate)
      const jpDate = d.toLocaleString('fi', { 
        timeZone: 'asia/tokyo',
        year: 'numeric', 
        month: '2-digit', 
        day: '2-digit', 
        hour: '2-digit', 
        minute: '2-digit', 
        hourCycle: 'h24', 
      })

      jpDate // '09.05.2022 klo 15.03'
       Date correction 
            let date = new Date(2016, 1, 28)
            date.setDate(date.getDate() + 2) // 1 Mar 2016

            let date = new Date(2016, 0, 2) // 2 Jan 2016
            date.setDate(0) // 31 Dec 2015

            let date = new Date(2013, 0, 32); // 32 Jan 2013 ?!? // ...is 1st Feb 2013!
       Time difference in ms 
            let start = Date.now()
            for (let i = 0; i < 100000000; i++) {
              let doSomething = i * i * i
            }
            let end = Date.now()
            alert( `The loop took ${end - start} ms` ) // The loop took 127 ms
       Parse Parses the string and returns the timestamp (number of milliseconds from 1 Jan 1970 UTC+0) If the format is invalid, returns NaN YYYY-MM-DD – year-month-day. The character "T" is used as the delimiter. HH:mm:ss.sss – time: hours, minutes, seconds and milliseconds. 'Z' is the time zone in the format +-hh:mm. A single letter Z would mean UTC+0. 
            Date.parse('2012-01-26T13:51:50.417-07:00') // 1327611110417
            new Date(Date.parse('2012-01-26T13:51:50.417-07:00')) // Thu Jan 26 2012 22:51:50 GMT+0200 (Eastern European Standard Time)
            Date.parse("2019-01-01") // 1546300800000
            Date.parse("2019-01-01T00:00:00.000Z") // 1546300800000
            Date.parse("2019-01-01T00:00:00.000+00:00") // 1546300800000
            Date.parse('Aug 9, 1995') // 807915600000
            Date.parse('Wed, 09 Aug 1995 00:00:00 GMT') // 807926400000
            Date.parse('Wed, 09 Aug 1995 00:00:00') // 807915600000
            Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400')  //14400000
       performance.now() Gives the number of milliseconds from the start of page loading with microsecond precision 
            alert(`Loading started ${performance.now()}ms ago`)
      

date

Basic date object Date object converted into the string doesn't look good. new Date().toString()   Sat Feb 22 2025 13:46:13 GMT+0000 (Coordinated Universal Time) Function 
      // functions/ddmmyyyyHHMMSS.js
      export const ddmmyyyyHHMMSS = (date = new Date(), utc = false) => {
        if (isNaN(Date.parse(date))) return 'can not parse date'
        const addZeroToNum = (num) => num.toString().length === 1 ? '0' + num : num
        const d = new Date(date)
        const yyyy = utc ? d.getUTCFullYear() : d.getFullYear()
        const mm = addZeroToNum(utc ? d.getUTCMonth() + 1 : d.getMonth() + 1)
        const dd = addZeroToNum(utc ? d.getUTCDate() : d.getDate())
        const HH = addZeroToNum(utc ? d.getUTCHours() : d.getHours())
        const MM = addZeroToNum(utc ? d.getUTCMinutes() : d.getMinutes())
        const SS = addZeroToNum(utc ? d.getUTCSeconds() : d.getSeconds())
        return `${dd}.${mm}.${yyyy} ${HH}:${MM}:${SS}`
      }
       Output new Date().toString()   Sat Feb 22 2025 13:46:13 GMT+0000 (Coordinated Universal Time) new Date().toISOString()   2025-02-22T13:46:13.654Z ddmmyyyyHHMMSS(new Date())   22.02.2025 13:46:13 ddmmyyyyHHMMSS(new Date(), true)   22.02.2025 13:46:13 ddmmyyyyHHMMSS("1999-12-31T15:16:17.340Z")   31.12.1999 15:16:17 ddmmyyyyHHMMSS("1999-12-31T15:16:17.340Z", true)   31.12.1999 15:16:17

date formatter

Brilliant way to check errors and edge cases in function without really checking at all. We just wrap the function into  try...catch  block and return default value from  catch If function already exists just put it into wrapper Example 
      function sum(params) {
        try {
          return params.numbers.a + params.numbers.b
        } catch (error) {
          console.log(error)
          return 'no value for you'
        }
      }

      sum({ numbers: { a: 1, b: 2 } }) // 3
      sum({ a: 1, b: 2 }) // no value for you
       getValueOrDefault  wrapper 
      const getValueOrDefault = (getter, defaultValue) => {
        try {
          return getter()
        } catch (error) {
          console.log(error)
          return defaultValue
        }
      }

      function substract(params) {
        return params.numbers.a - params.numbers.b
      }

      getValueOrDefault(() => substract({ numbers: { a: 1, b: 2 } }), 'no value for you') // -1
      getValueOrDefault(() => substract({ a: 1, b: 2 }), 'no value for you') // no value for you
      

default value

Synchronous delay 
      // syncWait.js
      export default function syncWait(ms = 1000) {
        const end = Date.now() + ms
        while (Date.now() < end) continue
      }
       
      import syncWait from '/functions/syncWait'

      function SynchDelay() {
        const sayHiWithDelay = () => {
          syncWait(2000)
          alert('hi')
        }
        return <>
          <button onClick={sayHiWithDelay}>Say 'hi' with delay</button>
        </>
      }
        Promise with delay 
      // sleeper.js
      function sleeper(ms = 1000) {
        return new Promise(resolve => setTimeout(() => resolve('done'), ms))
      }
       
      // the usage
      axios('https://jsonplaceholder.typicode.com/posts/1')
        .then(() => sleeper(3000))
        .then(res => alert('Title: ' + res.data.title))
       Full code 
      import axios from 'axios'
      import sleeper from '../../../../helpers/functions/sleeper'

      function Component() {
        return (
          <>
            <button
              onClick={() => {
                alert('start request')
                axios('https://jsonplaceholder.typicode.com/posts/1')
                  .then(res => alert(`Title: ${res.data.title}`))
                  .catch(err => alert(JSON.stringify(err)))
              }}
            >
              Get respond from server
            </button>
            <br/>
            <button
              onClick={() => {
                alert('start request with 3s delay')
                axios('https://jsonplaceholder.typicode.com/posts/1')
                  .then(sleeper(3000))
                  .then(res => alert(`Title: ${res.data.title}`))
                  .catch(err => alert(JSON.stringify(err)))
              }}
            >
              Get respond from server with delay
            </button>
          </>
        )
      }
        Delay an api response by 5 sec 
        app.get('/api', async (_req: Req, res: Res) => {
          await new Promise(resolve => {
            setTimeout(() => resolve('done'), 5000)
          })
          return res.json({ url: '/api', data: 'some data' })
        })
      

delay

Destructuring assignment is a syntax that allows us to “unpack” arrays or objects into variables Array destructuring 
            let arr = ["John", "Smith"]
            let [firstName, surname] = arr // firstName = "John", surname = "Smith"
            let [firstName, surname] = "John Smith".split(' ') // firstName = "John", surname = "Smith"
            let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"] // title = "Consul"
            let [one, two, three] = [1, 2, 3]  // one = 1, two = 2, three = 3
            let user = {} 
            [user.name, user.surname] = ["John", "Smith"] // user.name = "John", user.surname = "Smith"
            let [one, two, three] = new Set([1, 2, 3]) // works with any iterable
            let [a, b, c] = "abc" // a = "a", b = "b", c = "c" // works with any iterable
       Looping with  entries() 
            let user = {
              name: "John",
              age: 30
            };

            for (let [key, value] of Object.entries(user)) {
              alert(`${key}:${value}`); // name:John, then age:30
            }
        Swap variables trick 
            let guest = "Jane"; let admin = "Pete";
            [guest, admin] = [admin, guest]; // guest = "Pete", admin = "Jane"
        Rest  ... 
            let [num1, num2] = [1, 2, 3, 4] // num1 = 1, num2 = 2
            let [num1, num2, ...rest] = [1, 2, 3, 4] // rest[0] = 3, rest[1] = 4, rest.length = 2
            let [num1, num2, ...arr] = [1, 2, 3, 4] // arr[0] = 3, arr[1] = 4, arr.length = 2
            let [num1, num2] = [1] // num1 = 1, num2 = undefined
            let [num1 = 1, num2 = 2] = [666] // num1 = 666, num2 = 2
            let [name = prompt('name?'), surname = prompt('surname?')] = ['John'] // John (from array), whatever from prompt // prompt will run only for the missing value (surname)
       Object destructuring 
            let options = {title: "Menu",  width: 100,  height: 200}

            let {title, width, height} = options // title = "Menu", width = 100, height = 200
            let {height, width, title} = options // same // order does not matter
            let {width: w, height: h, title} = options // title = "Menu", w = 100, h = 200
            let {title} = options // title = "Menu"
            let {title, ...rest} = options // now title="Menu", rest={height: 200, width: 100}, rest.height = 200, rest.width = 100
        Default values 
            let options = {title: "Menu"}
            let {width = 100, height = 200, title} = options // title = "Menu", width = 100, height = 200
            let {width: w = 100, height: h = 200, title} = options;
            let {width = prompt("width?"), title = prompt("title?")} = options // values can be any expressions or even function calls
        Rest  ... 
            let options = {title: "Menu", height: 200, width: 100}
            let {title, ...rest} = options; // title="Menu", rest={height: 200, width: 100}
         let  in destructuring 
            let {title, width, height} = {title: "Menu", width: 200, height: 100}; // WORKS
            let title, width, height;

            {title, width, height} = {title: "Menu", width: 200, height: 100}; // ERROR in this line
            
            // "{}" are treated as a code block in the main code flow (not inside another expression)
            ({title, width, height} = {title: "Menu", width: 200, height: 100}) // WORKS
        Nested destructuring 
            let options = {
              size: { width: 100, height: 200 },
              items: ["Cake", "Donut"],
              extra: true
            }

            // The pattern has the same structure to extract values
            let {
              size: { width, height },
              items: [item1, item2], // assign items here
              title = "Menu" // not present in the object (default value is used)
            } = options;

            title, width, height, item1, item2 // Menu 100 200 Cake Donut
       Destructure and rename 
      const bio = {
        firstName: 'Bruce',
        lastName: 'Lee',
      }

      const {firstName: first, lastName: last} = bio
      console.log(first, last) // Bruce Lee
       Destructure with default values 
      const settings = { speed: 100}
      const { speed = 750, width = 500 } = settings
      console.log(speed, width) // 100, 500
        Smart function parameters 
            function showMenu({
              title = "Untitled", 
              width = 200, 
              height = 100, 
              items = []
            } = {}) {
              alert(`${title} ${width} ${height} ${items}`);
            }

            let options = {
              title: "My menu",
              height: 100,
              items: ["Item1", "Item2"]
            };

            showMenu(options); // My menu 200 100 Item1,Item2
            showMenu(); // Untitled 200 100 
        console.log() 
            console.log('hello') // 'hello'
            let { log } = console
            log('hello') // 'hello'
      

destructuring

Several background images separated by comma can be applied. There is a CSS trick how we can dim an image putting a bit transparent gradient without gradient in front. div.jsx-d59481a0683473c0{
  background-image: url('/imgs/headphones.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  color: black;
  margin: 10px;
  border: 2px solid grey;
  height: 200px;
} background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('/imgs/headphones.jpg') div.jsx-62a49b2c70903669{
  background-image: url('/imgs/headphones.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  color: black;
  margin: 10px;
  border: 2px solid grey;
  height: 200px;
            background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('/imgs/headphones.jpg')} 
      const Div1 = styled.div`
        background-image: url('/imgs/headphones.jpg');
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        color: black;
        margin: 10px;
        border: 2px solid grey;
        height: 200px;
      `

      const Div2 = styled(Div1)`
        background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('/imgs/headphones.jpg');
      `
      

dim background

display: inline inline elements are elements with  display: inline , such as   <a> ,  <input> ,  <span> ,   <img>  and others text is inline element inline elements go on the same line one by one  jumps to the next line if there is no space anymore width / height fits the content & can not be set top & bottom margins can not be set left & right margins can be set padding can be set line break in html between inline elements is considered as a space display: block Block tends to expand to the whole width Block elements go one under another (if there is no "float" property)  block with  width: max-content  does not take whole width    height / width can be set block elements stick to each other w/o gaps (if there is no margin) most of elements are block els by default block element is a rectangle display: inline-block it is a block element with few exceptions elements go on the same line one by one width & height fits the content width & height can be set Usually used to show block elements in one line line break in html (between tags for ex) considered as a space display: table Can make a table from any element with following properties display: table display: table-row display: table-header-group display: table-row-group display: table-footer-group display: table-column display: table-column-group display: table-cell display: table-caption display: flex Flex container expands or shrinks items to fill available free. Flex layout is direction-agnostic Check my  playground  for flex properties display: list-item Makes like a  <li>  bullet point list element. display: run-in Element becomes the first inline element of next block element float: left float: left | right | none | inherit With  float  property element is extracted from the normal css flow It is moved to left/right until touches the parent's edge or another  floating   element Float makes element automatically  display: block If there is no space to fit the element on a line, then it goes to the next line Other non-positioned block elements w/o  float  acts like floating element does not exist Inline elements know about floating element and go around it There is no vertical margin collapsing between floating and neighboring elements Float block can be a container and include other elements Widely used in text with images Parent does not reserve space for floating element, to fix it may add element after with   clear: left | right | both display: contents Allows you to treat children of flex or grid item just like they are flex/grid items themselves. In other words you can "flatten out" nested DOM tree to use it within one flex or grid system. 

display

Download files scp -r sherb@35.217.12.143:/var/www/html/dmitryvinokurov.com ./  download remote folder to local Download remote files to local current folder 
            scp -r sherb@35.217.12.143:/var/www/html/dmitryvinokurov.com/about.html ./ &&
            scp -r sherb@35.217.12.143:/var/www/html/dmitryvinokurov.com/audio.html ./ &&
            scp -r sherb@35.217.12.143:/var/www/html/dmitryvinokurov.com/contact.html ./ &&
            scp -r sherb@35.217.12.143:/var/www/html/dmitryvinokurov.com/cv.html ./ &&
            scp -r sherb@35.217.12.143:/var/www/html/dmitryvinokurov.com/index.html ./ &&
            scp -r sherb@35.217.12.143:/var/www/html/dmitryvinokurov.com/photographs.html ./ &&
            scp -r sherb@35.217.12.143:/var/www/html/dmitryvinokurov.com/videos.html ./ &&
            scp -r sherb@35.217.12.143:/var/www/html/dmitryvinokurov.com/style.css ./
           Upload files Upload files to remote DV's folder 
            scp -r about.html audio.html contact.html cv.html index.html photographs.html videos.html style.css sherb@35.217.12.143:/var/www/html/dmitryvinokurov.com/
          

dmitry vinokurov

DOM DOM  -  D ocument  O bject  M odel browser loads and “parses” the HTML and generates DOM nodes each DOM node is an object DOM consists of a hierarchy of DOM node Nodes are html tags + text nodes + comment nodes + ... others (12 node types) Element is a node of a specific element type -  Node.ELEMENT_NODE comments & text nodes aren't elements Node is constructor of a node, HTMLElement is a constructor of an element in JavaScript DOM element is a subtype of a node every HTML tag is an object acc. to DOM text inside a tag is an object as well document.body  - object representing the  <body>  tag most standard HTML attributes of element nodes automatically become properties of DOM objects DOM is a tree structure of tags, where every tree node is an object Tags are element nodes (or just elements) and form the tree structure Text inside forms text nodes and contains only a string Spaces and newlines form text nodes become a part of the DOM Browser tools do not show spaces at the start/end of the text and line-breaks between tags Developer tools shows DOM, but w/o "blanks" and text nodes are shown as a text Auto correction Spaces and newlines before  <head>  are ignored for historical reasons something after  </body>  automatically moved inside the body malformed HTML is automatically corrected when DOM is being made if  <html>   <body>  don't exist, it will exist in the DOM browser closes tags automatically tables always have  <tbody> Node types Everything in HTML, even comments, become a part of the DOM, but in practice we usually work with 4 node types document  the “entry point” into DOM element nodes  HTML-tags, the tree building blocks text nodes  contain text comments  sometimes we can put information there, it won't be shown, but JS can read it from the DOM There are 12  node types Node classes Each DOM node belongs to the corresponding built-in class The classes form a hierarchy The root of the hierarchy is  EventTarget  -  Node  - ... other DOM nodes  The full set of properties and methods come as the result of inheritance EventTarget EventTarget  is the root “abstract” class Objects of this class are never created, they are served as a base Node  class inherits from it Node Node  is also an “abstract” class, serving as a base for DOM nodes It provides the core tree functionality: parentNode, nextSibling, childNodes and so on (they are getters) Objects of Node class are never created. "Text", "Element", "Comment" inherit from it Element Element  is a base class for DOM elements It provides element-level navigation like nextElementSibling, children and searching methods like getElementsByTagName, querySelector "HTMLElement" inherit from it HTMLElement HTMLElement  is finally the basic class for all HTML elements It is inherited by HTML elements HTMLInputElement  the class for  <input>  elements HTMLBodyElement  the class for  <body>  elements HTMLAnchorElement  the class for  <a>  elements …and so on, each tag has its own class that may provide specific properties and methods 
      input.constructor.name // "HTMLInputElement"
      input instanceof HTMLElement  // true
      input instanceof EventTarget  // true
       console.dir(inputElem) let's console some input element with  console.dir(inputElem) in DOM object tree in  __proto__  we can see hierarchy HTMLInputElement  this class provides input-specific properties HTMLElement  it provides common HTML element methods (and getters/setters) Element  provides generic element methods Node  provides common DOM node properties EventTarget  gives the support for events Object  plain object methods available, like hasOwnProperty etc... elem.nodeType 
      elem.nodeType == 1 // for element nodes
      elem.nodeType == 3 // for text nodes
      elem.nodeType == 9 // for the document object
       In modern scripts, we can use  instanceof  and other class-based tests. elem.nodeName we can read node tag name from nodeName or tagName properties nodeName is defined for any Node 
      document.body.nodeName // BODY
      input.nodeName // INPUT
       elem.tagName The  tagName  property exists only for  Element  nodes. 
      document.body.tagName // BODY
       Browser host environment - browser, web-server, or another host (even coffee machine), where JavaScript runs each host environment provides platform-specific functionality host environment provides own objects and functions additional to the language core in browser the DOM is kept in  window  object - root object for a web-browser browser (or other host environment) provides additional objects for working with everything except the document 
      // window object
      function sayHi() { alert("Hello") }
      sayHi()
      window.sayHi() // same, function is located in window object
      window.innerHeight // inner window height
       
        // BOM
        location.href // shows current URL
        location.href = "https://wikipedia.org"; // redirect the browser to another URL
        alert/confirm/prompt/navigator/screen/location/frames/history/XMLHttpRequest
      

Mouse events order mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick e.button e.button  get the exact clicked mouse button e.button = 0  Left button (primary) e.button = 1  Middle button (auxiliary) e.button = 2  Right button (secondary) e.button = 3  X1 button (back) e.button = 4  X2 button (forward) e.which  same, but old non-standard way 
      document.addEventListener('click', (e) => console.log(e.button)) // 0
      document.addEventListener('contextmenu', (e) => console.log(e.button)) // 2
       e.modifiers e.shiftKey  Shift e.altKey  Alt (or Opt for Mac) e.ctrlKey  Ctrl e.metaKey  Cmd for Mac true  if the key was pressed during the event Detect if press  alt+shift  during a click... 
      document.addEventListener('click', function (e) {
        if (e.altKey && e.shiftKey) alert('Hooray!')
      })
       mouseover, mouseout mouseover  triggers when pointer comes over an element e.target  - element where the mouse came over e.relatedTarget  - element from which the mouse came mouseout  triggers when pointer leaves an element e.target  - element that the mouse left e.relatedTarget  - new under-the-pointer element, that mouse left for  relatedTarget  can be  null  if mouse came from out of the window or left the window If  mouseover  triggered, there must be  mouseout mousemove doesn't trigger on every pixel, that’s good for performance but some DOM-elements may be skipped it’s possible that the pointer jumps right inside the middle of the page from out of the window In that case  relatedTarget  is null, because it came from “nowhere” mouseover  event bubbles up if parent has  mouseover  handler, it may seem that the mouse pointer left #parent element, and then immediately came back over it to avoid such mess we need to examine  event.target  and  relatedTarget  and if the mouse is still inside the element, then ignore such event or better to use  mouseenter  &  mouseleave  events 
      outterDiv.onmouseover = outterDiv.onmouseout = handler
      function handler(e) {
        console.log(`${e.type}: target=${e.target.id}, relatedTarget=${e.relatedTarget.id}`)
      }
       mouseenter, mouseleave events are similar to  mouseover  &  mouseout triggers when the mouse pointer enters/leaves an element no bubbling transitions inside the element, to/from descendants, are not counted event delegation not possible 
      div.onmouseenter = div.onmouseleave = handler
      function handler(e) {
        console.log(`${e.type}: target=${e.target.id}, relatedTarget=${e.relatedTarget.id}`)
      }
       Event delegation Highlight cells on click... 
      table.onclick = function(e) {
        let td = e.target.closest('td') // we may click on some tag inside td, so we find the nearest td
        if (!td) return // check if was inside any <td>
        if (!table.contains(td)) return // check if it is out table
        highlight(td) // do action
      }
       Highlight all els in table under mouse... 
      tbl.onmouseover = e => e.target.style.background = 'pink'
      tbl.onmouseout = e => e.target.style.background = ''
       Highlight only TDs... 
      let curEl = null

      tbl.onmouseover = function(e) {
        if (curEl) return // if currentElem is set, we didn't leave the previous <td>
        let target = e.target.closest('td')
        if (!target) return // we moved not into a <td>
        if (!tbl.contains(target)) return // moved into <td>, but outside of our table (possible in case of nested tables)
        curEl = target // hooray! we entered a new <td> 
        curEl.style.background = 'pink'
      }

      tbl.onmouseout = function(e) {
        if (!curEl) return // if we're outside of any <td> now
        let relatedTarget = e.relatedTarget // we're leaving the element – where to? Maybe to a descendant?
        while (relatedTarget) { // go up the parent chain and check – if we're still inside currentElem
          if (relatedTarget == curEl) return // internal transition
          relatedTarget = relatedTarget.parentNode
        }
        curEl.style.background = '' // we left the <td>. really
        curEl = null
      }
       Pointer events Pointer events allow handling mouse, touch, pen events simultaneously, with a single piece of code We can replace "mouse" with "pointer" in event names and expect our code to continue working for mouse Pointer events types touchstart ,  touchend ,  touchmove pointerdown  similar to  mousedown pointerup  similar to  mouseup pointermove  similar to  mousemove pointerover  similar to  mouseover pointerout  similar to  mouseout pointerenter  similar to  mouseenter pointerleave  similar to  mouseleave pointercancel gotpointercapture  fires when an element uses el.setPointerCapture(pointerId) to enable capturing lostpointercapture  fires when the capture is released Pointer events properties Pointer events have the same properties as mouse events, plus... pointerId  the unique identifier of the pointer causing the event pointerType  pointing device type, “mouse”, “pen” or “touch”, we can use this property to react differently on various pointer types isPrimary = true  for the primary pointer (the first finger in multi-touch) width  width of the area where the pointer (e.g. a finger) touches the device. Where unsupported, e.g. for a mouse, it’s always 1 height  the height of the area where the pointer touches the device. Where unsupported, it’s always 1 pressure  the pressure of the pointer tip, in range from 0 to 1. For devices that don’t support pressure must be either 0.5 (pressed) or 0 tangentialPressure  the normalized tangential pressure tiltX ,  tiltY ,  twist  pen-specific properties that describe how the pen is positioned relative the surface. Multi-touch handling multi-touch can be done with the help of the  pointerId  and  isPrimary  properties if we use 5 fingers simultaneously, we have 5 pointerdown events with their respective coordinates and a different  pointerId when the user moves and then removes a finger, we get  pointermove  and  pointerup  events with the same  pointerId  as we had in  pointerdown isPrimary = true  events associated with the first finger and  isPrimary = false  for others pointerId  assigned for each touching finger 
      document.onpointerdown = document.onpointerup = log
      function log(e) {
        console.log( `${e.type} isPrimary=${e.isPrimary} pointerId=${e.pointerId}`)
      }
       pointercancel event fires when ongoing pointer interaction is aborted ...or pointer device hardware was physically disabled ...or device orientation changed ...or browser decided to handle the interaction on its own Prevent the default browser action to avoid  pointercancel after this browser won’t hijack the process and doesn’t emit pointercancel Set CSS to  { touch-action: none } 
      ball.ondragstart = () => false
       setPointerCapture el.setPointerCapture(pointerId)  binds events with the given pointerId to el all pointer events with the same pointerId will have elem as the target no matter where in document they really happened in other words, re-targets all subsequent events with the given pointerId to el The binding is removed when  pointerup  or  pointercancel  events occur or elem is removed from the document or  el.releasePointerCapture(pointerId)  called Pointer capturing can be used to simplify drag’n’drop kind of interactions we use  pointerdown  and  pointermove  on thumb, but there is a problem …As the pointer moves, it may leave the slider thumb: go above or below it then we need to assign  pointermove  on the whole document if we do it on document level, there might be some side effects, trigger other event handlers and here the magic comes... We can call  thumb.setPointerCapture(event.pointerId)  in  pointerdown  handler Then future pointer events will be re-targeted to thumb When  pointerup  happens (dragging complete), the binding is removed automatically, we don’t need to care about it if a user moves the pointer around the whole document, events handlers will be called on thumb 
      <div id="slider">
        <div id="thumb"></div>
      </div>
       
      let shiftX

      thumb.onpointerdown = function(e) {
        e.preventDefault() // prevent selection start (browser action)
        shiftX = e.clientX - thumb.getBoundingClientRect().left
        thumb.setPointerCapture(e.pointerId)
      }

      thumb.onpointermove = function(e) {
        if(!e.target.hasPointerCapture(e.pointerId)) return
        let newLeft = e.clientX - shiftX - slider.getBoundingClientRect().left

        // if the pointer is out of slider => adjust left to be within the bounaries
        if (newLeft < 0) newLeft = 0
        let rightEdge = slider.offsetWidth - thumb.offsetWidth
        if (newLeft > rightEdge) newLeft = rightEdge

        thumb.style.left = newLeft + 'px'
      }

      thumb.ondragstart = () => false
       keydown, keyup keyboard events should be used to handle keyboard actions (virtual keyboard also) use  input  event to track input into an  <input>  field  keyboard events are not enough coz there are also speech recognition, copy/paste with mouse etc... Event types e.key  get the character, language layout specific e.code  get the “physical key code”, for hotkey e.keypress ,  e.keyCode ,  e.charCode ,  e.which  - legacy, many browser incompatibilities e.repeat  -  true  if an event is triggered by auto-repeat 
      document.addEventListener('keydown', (e) => {
        console.log('e.key', e.key)
        console.log('e.code', e.code)
        console.log('e.repeat', e.repeat)
      })
      // hold shift+D
      // e.key D
      // e.code KeyD
      // e.repeat true
       Default actions <input>  expects a tel number, does not accept keys except  digits ,  + ,  - ,  ( ,  ) 
      <input id="inp" onkeydown="return checkPhoneKey(event.key)" placeholder="Phone, please" type="tel">
       
      function checkPhoneKey(key) {
        return (key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-'
          key == 'ArrowLeft' || key == 'ArrowRight' || key == 'Delete' || key == 'Backspace';
      }
       Or... 
      inp.addEventListener('keydown',  e => {
        if ( 
          !( (e.key >= '0' && e.key <= '9') || e.key == '+' || e.key == '(' || e.key == ')' 
          || e.key == '-' || e.key == 'ArrowLeft' || e.key == 'ArrowRight' 
          || e.key == 'Delete' || e.key == 'Backspace' ) 
        ) e.preventDefault()
      })
       Right-click + paste still work, we can track the  input  event to prevent it. Mobile for virtual keyboards  e.keyCode = 229  and  e.key = "Unidentified" some of these keyboards might still use the right values keyboard logic might not always work on mobile devices logic for tracking mobile keyboards may be following... 
      function runOnKeys(func, ...codes) {
        let pressed = new Set()
        document.addEventListener('keydown', function(e) {
          pressed.add(e.code)
          for (let code of codes) {
            if (!pressed.has(code)) return
          }
          pressed.clear()
          func()
        })

        document.addEventListener('keyup', e => pressed.delete(e.code))
      }

      runOnKeys(
        () => alert("Hello!"),
        "KeyQ",
        "KeyW"
      )
       scroll scroll  event works both on the window and on scrollable elements Show the current scroll 
      window.addEventListener('scroll', () => console.log(window.pageYOffset + 'px'))
       Prevent scrolling Scroll triggers after the scroll has already happened That's why  e.preventDefault()  in onscroll listener does not work Use CSS,  overflow  property focus, blur focus  event is called on focusing blur  – when an element loses the focus element receives the focus when clicked or "Tabbed" from keyboard autofocus  - HTML attribute that puts the focus by default when a page load doesn’t bubble up & triggers on input only but they propagate on capturing phase, trange historical thing 
      form.addEventListener("focus", () => alert('focused')) // do not work
      form.addEventListener("blur", () => alert('blured')) // do not work

      form.addEventListener("focus", () => alert('focused'), true) // works
      form.addEventListener("blur", () => alert('blured'), true) // works

      form.addEventListener("focusin", () => alert('focused')) // works
      form.addEventListener("focusout", () => alert('blured')) // works
       Mail validation blur  handler checks if the field has an email entered, and if not – shows an error focus  handler hides the error message (on  blur  it will be checked again) can’t “prevent losing focu by  e.preventDefault()  in on  blur because on  blur  works after the element lost the focus 
      Your email please: <input type="email" id="input">
      <div id="error"></div>
       
        input.onblur = function() {
          if (!input.value.includes('@')) {
            input.classList.add('invalid')
            error.innerHTML = 'Please enter a correct email.'
          }
        }
        
        input.onfocus = function() {
          if (this.classList.contains('invalid')) {
            this.classList.remove('invalid')
            error.innerHTML = ""
          }
        }
       focus(), blur() elem.focus()  set the focus on the element elem.blur()  unset the focus on the element alert()  causes focus loose when alert is dismissed, the focus comes back (focus event) If an element is removed from DOM, then it also causes the focus loss If it is reinserted later, then the focus doesn’t return Do not leave input if mail in invalid... 
        input.onblur = function() {
          if (!this.value.includes('@')) { 
            alert("mail is incorrect")
            input.focus() // ...and put the focus back
            return
          }
            
          this.classList.remove("error")
        }
       tabindex focus is supported by <button>, <input>, <select>, <a> By default, many elements do not support focusing This can be changed using HTML-attribute  tabindex The switch order is: elements with tabindex from 1 and above go first  then elements w/o  tabindex  (e.g. a regular  <input> ) Elements w/o  tabindex  are switched in the document source order tabindex="0"  - special value´, puts an element among those w/o  tabindex Usually it’s used to make an element focusable, but keep the default switching order tabindex="-1"  allows only programmatic focusing on an element Tab  ignores such elements, but method  elem.focus()  works elem.tabIndex  works too We can add  tabindex  from JavaScript by using the  elem.tabIndex  property focusin, focusout Exactly the same as focus/blur, but they bubble 
      form.addEventListener("focusin", () => alert('focused')) // works
      form.addEventListener("focusout", () => alert('blured')) // works
       change change  event triggers when the element has finished changing for text inputs that means that the event occurs when it loses focus for  <select> ,  <input type="checkbox"> ,  <input type="radio">  it triggers right after the selection changes 
      input.addEventListener('change', function () {
        console.log(this.value) // comes only on focus loose
      })
       
      <select onchange="alert(this.value)">
        <option value="">Select something</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
       input input  event triggers every time after a value is modified by user triggers on any value change, pasting with a mouse or using speech recognition input  event doesn’t trigger on not value change, e.g. arrow keys ⇦ ⇨  e.preventDefault()  not working, coz event occurs after the value is modified cut, copy, paste events occur on cutting/copying/pasting a value belong to the  ClipboardEvent  class and provide access to the data that is copied/pasted it’s possible to copy/paste not just text, but everything (file) The clipboard is a “global” OS-level thing for safety reason clipboard usually accessed only on user action (e.g.  onclick ) https://developer.mozilla.org/en-US/docs/Web/API/Clipboard 
      e.preventDefault() // works to abort copied/paste

      input.oncut = input.oncopy = input.onpaste = function(e) {
        alert(e.type + ' - ' + e.clipboardData.getData('text/plain'))
        return false
      }
       Prevent copy, selection 
      el.addEventListener('copy', e => e.preventDefault())
      el.addEventListener('mousedown', e => e.preventDefault())
       submit submit  event triggers when the form is submitted e.preventDefault()  prevents automatic submission and redirection 
      <form onsubmit="alert('submit!'); return false">
        Submit can be done by:
        First: Enter in the input field <input type="text" value="text"><br>
        Second: Click "submit": <input type="submit" value="Submit">
      </form>
       When a form is sent using  Enter  on an input field a  click  event triggers on the  <input type="submit"> 
      <form onsubmit="return false">
        <input type="text" size="30" value="Focus here and press enter">
        <input type="submit" value="Submit" onclick="alert('click')">
      </form>
       
      form.submit() {
        const form = document.createElement('form')
        form.action = 'https://google.com/search'
        form.method = 'GET'
        form.innerHTML = '<input name="q" value="test">'
        document.body.append(form) // the form must be in the document to submit it
        form.submit()

        // the submit event is not generated
      }
      

dom events

Create createElement 
      document.createElement('tag')
       createTextNode 
      document.createTextNode('text')
       Add Append Append at the end of node 
      el.append(nodes, 'strings')
       Prepend Insert at the beginning of node 
      el.prepend(nodes, 'strings')
       Before Insert before node 
      el.before(nodes, 'strings')
       After Insert after node 
      el.after(nodes, 'strings') 
       Comment Arguments are DOM nodes to insert, or text strings Text strings become text nodes automatically May add multiple args 
      let div = document.createElement("div")
      let p = document.createElement("p")
      div.append(p)
       
      let div = document.createElement("div")
      div.append("Some text")
       
      let div = document.createElement("div")
      let p = document.createElement("p")
      div.append("Some text", p)
       replaceWith Replaces node 
      node.replaceWith(nodes, 'strings')
       insertAdjacentHTML Method inserts HTML. insertion methods remove the node from the old place. 
      el.insertAdjacentHTML(where, "HTML string")
       beforebegin Insert html immediately before elem 
      el.insertAdjacentHTML("beforebegin", "HTML string")
       afterbegin Insert html into elem, at the beginning 
      el.insertAdjacentHTML("afterbegin", "HTML string")
       beforeend insert html into elem, at the end 
      el.insertAdjacentHTML("beforeend", "HTML string") 
       afterend Insert html immediately after elem 
      el.insertAdjacentHTML("afterend", "HTML string") 
       Example 
      document.body.insertAdjacentHTML("afterbegin", `<div class="alert">
        <strong>Hi there!</strong> You've read an important message.
      </div>`)
       insertAdjacentText String of text is inserted “as text”. Rarely used methods, usually append/prepend/before/after are used 
      el.insertAdjacentText("beforebegin", "text")
      el.insertAdjacentText("afterbegin", "text")
      el.insertAdjacentText("beforeend", "text")
      el.insertAdjacentText("afterend", "text")
       insertAdjacentElement Element is inserted. Rarely used methods, usually append/prepend/before/after are used 
      el.insertAdjacentElement("beforebegin", element)
      el.insertAdjacentElement("afterbegin", element)
      el.insertAdjacentElement("beforeend", element)
      el.insertAdjacentElement("afterend", element)
       Remove 
      node.remove()
       Example 
      let div = document.createElement('div')
      document.body.append(div)
      setTimeout(() => div.remove(), 1000)
       cloneNode 
      el.cloneNode()
       Creates a “deep” clone of the element – with all attributes and sub elements 
      el.cloneNode(true)
       Clone is made w/o child elements 
      el.cloneNode(false)
       Example 
      <div class="alert" id="div">
        <strong>Hi there!</strong> You've read an important message.
      </div>
       
      let div2 = div.cloneNode(true) // clone the message
      div2.querySelector('strong').innerHTML = 'Bye there!' // change the clone
      div.after(div2) // show the clone after the existing div
       Old-school methods appendChild() ,  insertBefore() ,  replaceChild() ,  removeChild() All these methods return the inserted/removed node usually the returned value is not used, we just run the method 
      parentElem.appendChild(node) // Appends node as the last child of parentElem
      parentElem.insertBefore(node, nextSibling) // Inserts node before nextSibling into parentElem.
      parentElem.replaceChild(node, oldChild) // Replaces oldChild with node among children of parentElem.
      parentElem.removeChild(node) // Removes node from parentElem (assuming node is its child).
       document.write() ancient method of adding something to a web-page string can be dynamically generated only works while the page is loading if we call it afterwards, the existing document content is erased it works fast, because there’s no DOM modification involved if we need to add a lot of text into HTML dynamically, and we’re at page loading phase, and the speed matters, it may help 
      document.write('<b>Hello from JS</b>')
       DocumentFragment do not use, use array instead special DOM node that serves as a wrapper to pass around lists of nodes we can append nodes to it when we insert it somewhere, then its content is inserted 
      <ul id="ul"></ul>
       
      function getListContent() {
        let fragment = new DocumentFragment()
      
        for(let i=1; i<=3; i++) {
          let li = document.createElement('li')
          li.append(i)
          fragment.append(li)
        }
        return fragment
      }
      
      ul.append(getListContent())
       Output 
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
       Proper array version 
      function getListContent() {
        let result = []
        for(let i=1; i<=3; i++) {
          let li = document.createElement('li')
          li.append(i)
          result.push(li)
        }
        return result
      }
      ul.append(...getListContent())
      

dom modification

Glossary DOM  - document object model which represents a web page.  DOM tree consists of different Nodes:  document ,  documentFragment ,  documentType ,  element ,  text ,  comment . Element  -  Node  object, which represents html tag. Ancestors  - all elements up the DOM tree Descendants  - all elements down the DOM tree Children  - all elements 1 level down the DOM tree Siblings  - elements on the same DOM level (children of the same parent) Selection DOM elements can be selected by CSS selectors via following methods el.querySelectorAll('selector')   static  Collection of els or or an empty NodeList if no matches. el.querySelector('selector')   static  element,  null  if no matches, same as  el.querySelectorAll('selector')[0] document.getElementById('id')  element with  id  or  null  if no matches. el.getElementsByClassName('className')   live  Collection of elements with the given class name. el.getElementsByTagName('tagName')   live  Collection of elements with the given tag name or  null  if no matches. Tag can be  *  for any tags. document.getElementsByName('nameVal')   live  Collection of elements with a given name attribute. Main DOM objects & shortcuts window  global parent object, which contains DOM document , same as  window.document , top node, entry point into DOM document.documentElement , same as  document.querySelector('HTML') ,  <html>  element document.head , same as  document.querySelector('head') ,  <head>  element document.body , same as  document.querySelector('body') ,  <body>  element CSS selectors  Testing el.matches('selectorStr')   true  if the  el  matches  selectorStr node.contains(otherNode)   true  if the  node  contains  otherNode  or if they are same nodes node.hasChildNodes()   true  if node has child nodes node.isEqualNode(otherNode)   true  if the two nodes are alike node.isSameNode(otherNode)   true  if the two nodes are same object Navigation HTML elements el.parentElement  parent element one level up the DOM el.children  elements one level down the DOM el.childElementCount  number of children el.firstElementChild  first child el.lastElementChild  last child el.nextElementSibling  next element on the same DOM level el.previousElementSibling  previous element on the same DOM level el.closest('selector')  first matching element starting from itself and upwards,  null  if no matches el.shadowRoot  shadow root el that is hosted by the element, or null Nodes node.parentNode node.parentElement node.childNodes   live  NodeList with all children (one level down) node.firstChild = Node.childNodes[0] node.lastChild = Node.childNodes[Node.childNodes.length - 1] node.nextSibling node.previousSibling node.getRootNode()  - return HTMLDocument or ShadowRoot Table let tbl = document.querySelector('table') tbl.caption   <caption> tbl.tHead   <thead> tbl.tBodies  tBodies collection tbl.tBodies[0]   <tbody> tbl.tFoot   <tfoot> tbl.rows  collection of table rows (tr) tbl.tHead.rows  tr collection  tbl.tBodies[0].rows  tr collection tbl.tFoot.rows  tr collection tbl.rows[1].sectionRowIndex  0, index of the given  <tr>  inside  <thead> ,  <tbody> ,  <tfoot> tbl.rows[1].rowIndex  1, index of the given  <tr>  inside table tbl.tBodies[0].rows[1].cells  collection of cells  <td>  in 2nd row  tbl.tHead.rows[0].cells[3].cellIndex  3, cell index inside  <tr> Form Forms are members of the special collection  document.forms document.forms  collection of forms document.forms[0]  first form in the document document.forms.login  form with attribute  name="login" document.forms["login"]  same document.forms["login"].elements  collection of elements in the form document.forms["login"].elements.password  collection of elements with attribute  name="password" document.forms["login"].elements["password"]  same document.forms["login"].password  same, short notation Forms are members of the special collection  document.forms input.value = "new value"  xxx jQuery Select jQuery('selector') , same as  $('selector') , searches in DOM and returns a new jQuery obj with found elements   $('span', this) , same as  $(this).find('span') $(el)  can feed html element into jQuery to make it a jQ object $("div").get()  - returns array instead of jQ object $("div").get(0) , same as  $("div")[0]  - returns first DOM element All CSS selectors works for jQ Additional selectors $("[attr!='val']")  elements without attr value  // $("textarea[placeholder!='Word']") $(":hidden")  hidden elements  $(":visible")  not hidden elements, elements with  visibility: hidden;  &  opacity: 0  are also  visible $(":eq(index)")  element at index within the matched set.  Deprecated ,  .eq()  is better. $(":first")  first matched DOM element.  Deprecated ,  .first()  is better. $(":last")  last one.  Deprecated ,  .last()  is better. $(":even")  1st, 3rd element, and so on.  Deprecated ,  .even()  is better. $(":odd")  2nd, 4th element, and so.  Deprecated ,  .odd()  is better. $(":gt(index)")  elements at an index greater than.  Deprecated ,  .slice(4)  is better. $(":lt(index)")  elements at an index less than.  Deprecated ,  .slice(0, 3)  is better. $(":header")   elements that are headers, like h1, h2, H and so on. Better to use  .filter(":header") $(":animated")  elements that are in the progress of an animation. Better to use  .filter(":animated") $(":contains(text)")  elements that contain the specified text $(":has(selector)")  elements which contain at least one element. Better to use  .has() $(":parent")  elements that have at least one child node $(":checkbox")  inputs of type 'checkbox' $(":radio")  inputs of type 'radio' $(":selected")  options that are selected $(":button")  button elements and elements of type 'button' $(":file")  elements of type 'file' $(":input")  input, textarea, select and button elements $(":image")   elements of type 'image' $(":submit")  elements of type 'submit' $(":password")  elements of type 'password' $(":reset")  elements of type 'reset' $(":text")  inputs of type 'text' + inputs without type Traverse up $().parent()  first parent element $().offsetParent()  first positioned element up in the DOM tree $().parents()  all parents in the DOM tree up to  <html> $().parentsUntil(selector)  all parents until  selector $().closest(selector)  first element up in the DOM tree Traverse down $().children()  elements one level down the DOM $().children('span')  same, but filters $().find('span');  searches all the way down Traverse sideways $().siblings()  elements around on the same DOM level $().next()  next element $().prev()  previous element $().nextAll()  next elements $().prevAll()  previous elements $().nextUntil(selector)  next elements until  selector $().prevUntil(selector)  previous elements until  selector Reduce $().first()  first element from jQ object $().last()  last element from jQ object $().filter(selector)  reduce the list to match the selector $().eq(1)  elements with specified index $().eq(-1)  negative index is possible $().even()  even ones, numbered from zero $().odd()  odd ones, numbered from zero $().slice(6, 8)  els from start to optional end $().has(selector)  els having matching descendants $().not(selector)  els not matching selector Expand $().add(selector)  union of elements $('#th2').next().addBack()  add previous set of elements on the stack  // th#th2, th#tH $('textarea').first().end()  restores previous filtering Test $().has(selector).length  check if an element is inside another $().is(selector)  test against selector or el Index $().eq(1).index()  1, returns index $('span').eq(0).index('*')  56, returns index of 1st span from collection of all elements

dom traversal

dotenv let's assume we have different .env files and need to access it in the root 
      import dotenv from 'dotenv'
      import { dirname, join } from 'path'
      import { fileURLToPath } from 'url'

      const thisFilePath = fileURLToPath(import.meta.url)
      const thisDirName = dirname(thisFilePath)
      const filePathToFrontendEnv = join(thisDirName, 'frontend', '.env')
      const filePathToBackendEnv = join(thisDirName, 'backend', '.env')
      dotenv.config({ path: [filePathToFrontendEnv, filePathToBackendEnv] })

      console.log('🚀 ~ process.env.BACKEND_BASE_URL:', process.env.BACKEND_BASE_URL)
      console.log('🚀 ~ process.env.FRONTEND_BASE_URL:', process.env.FRONTEND_BASE_URL)
    

dotenv

Materials https://docs.aws.amazon.com/dynamodb/ Components Attribute  - data element Items  - collection of attributes Table  - collection of items  Each item can have its own distinct attributes Usually attributes have only one value Nested attribute (address) are allowed, up to 32 levels deep Primary key Primary key is mandatory identifier for an item in the table Primary key  can be a simple one attribute -  partition key Composed primary key  can be a  partition key  +  sort key . Partition keys can be the same in such case. Primary key attribute can be only string, number or binary Secondary indexes Secondary indexes can be created to query table in addition to queries against the primary key Not necessary if values of primary keys are enough for querying There are  global  &  local  secondary indexes, but put Local ones apart, did not get why to use them 20 global secondary indexes are allowed We do not necessarily need indexes, because we can use Scan + FilterExpression, but it is heavy, long and pricy. Better to add an index We can apply global secondary index after table creation Internally every secondary index creates a cloned table keeping it in sync to the original, which leads to double cost on every read & write Local DynamoDB setup Install Java  runtime Download  local  DynamoDb Put into some folder and open it with terminal Run  java -Djava.library.path=./DynamoDBLocal_lib -jar DynamoDBLocal.jar -sharedDb -port 8000 Output 
        Initializing DynamoDB Local with the following configuration:
        Port: 8000
        InMemory: false
        DbPath: null
        SharedDb: true
        shouldDelayTransientStatuses: false
        CorsParams: *
       End-point for database is  http://localhost:8000 Instal  AWS CLI Configure CLI with  aws configure  after installation Keys to be taken from  AWS web site  from  Account name  -  Security credentials  -  Access keys 
          AWS Access Key ID [None]: AKIAIOSFODNN7(example)
          AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY(example)
          Default region name [None]: eu-north-1
          Default output format [None]: json
         Check available tables with  aws dynamodb list-tables --endpoint-url http://localhost:8000 Output 
      {
        "TableNames": []
      }
       JavaScript SDK Install  DynamoDB Client - AWS SDK for JavaScript v3  and  @aws-sdk/lib-dynamodb  from  AWS SDK for JavaScript v3 . Package.json 
      {
        "scripts": {
          "start": "nodemon app.js"
        },
        "dependencies": {
          "@aws-sdk/client-dynamodb": "^3.72.0",
          "@aws-sdk/lib-dynamodb": "^3.74.0",
          "aws-sdk": "^2.1117.0",
          "express": "^4.17.3"
        },
        "type": "module"
      }
       DynamoDBClient 
      // ddbClient.js
      import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
      const region = 'eu-north-1'
      const endpoint = 'http://localhost:8000'
      export const ddbClient = new DynamoDBClient({ region, endpoint })
       DynamoDBDocumentClient 
      // ddbDocumentClient.js
      import { DynamoDBDocumentClient } from "@aws-sdk/lib-dynamodb"
      import { ddbClient } from "./ddbClient.js"

      const marshallOptions = {
        convertEmptyValues: false, //  Whether to automatically convert empty strings, blobs, and sets to `null`, false, by default.
        removeUndefinedValues: false, // Whether to remove undefined values while marshalling, false, by default.
        convertClassInstanceToMap: false, // Whether to convert typeof object to map attribute, false, by default.
      }

      const unMarshallOptions = {
        wrapNumbers: false, // Whether to return numbers as a string instead of converting them to native JavaScript numbers, false, by default.
      }

      const translateConfig = { marshallOptions, unMarshallOptions }

      // Create the DynamoDB document client
      export const ddbDocClient = DynamoDBDocumentClient.from(ddbClient, translateConfig)
       List tables 
      // listTables.js
      import { ListTablesCommand  } from '@aws-sdk/client-dynamodb'
      import { ddbClient } from './ddbClient.js'

      export const listTables = async () => {
        try {
          const data = await ddbClient.send(new ListTablesCommand ({}))
          console.log('Tables are listed: 
', data)
          return data
        } catch (err) {
          console.log('Error in table deletion', err)
        }
      }

      listTables()
       Create table 
      // createTables.js
      import { CreateTableCommand } from '@aws-sdk/client-dynamodb'
      import { ddbClient } from './ddbClient.js'

      var tableParams1 = {
        TableName: 'Users',
        KeySchema: [{ AttributeName: 'email', KeyType: 'HASH' }],
        AttributeDefinitions: [{ AttributeName: 'email', AttributeType: 'S' }],
        ProvisionedThroughput: {
          ReadCapacityUnits: 5,
          WriteCapacityUnits: 5,
        },
      }

      var tableParams2 = {
        TableName: 'Logins',
        KeySchema: [
          { AttributeName: 'email', KeyType: 'HASH' },
          { AttributeName: 'timestamp', KeyType: 'RANGE' },
        ],
        AttributeDefinitions: [
          { AttributeName: 'email', AttributeType: 'S' },
          { AttributeName: 'timestamp', AttributeType: 'N' },
        ],
        ProvisionedThroughput: {
          ReadCapacityUnits: 5,
          WriteCapacityUnits: 5,
        },
      }

      var tableParams3 = {
        TableName: 'Supervisors',
        KeySchema: [{ AttributeName: 'name', KeyType: 'HASH' }],
        AttributeDefinitions: [
          { AttributeName: 'name', AttributeType: 'S' },
          { AttributeName: 'company', AttributeType: 'S' },
          { AttributeName: 'factory', AttributeType: 'S' },
        ],
        ProvisionedThroughput: {
          ReadCapacityUnits: 5,
          WriteCapacityUnits: 5,
        },
        GlobalSecondaryIndexes: [
          {
            IndexName: 'FactoryIndex',
            KeySchema: [
              {
                AttributeName: 'company',
                KeyType: 'HASH',
              },
              {
                AttributeName: 'factory',
                KeyType: 'RANGE',
              },
            ],
            Projection: {
              ProjectionType: 'ALL',
            },
            ProvisionedThroughput: {
              ReadCapacityUnits: 1,
              WriteCapacityUnits: 1,
            },
          },
        ],
      }

      var tableParams4 = {
        TableName: 'Companies',
        KeySchema: [
          { AttributeName: 'name', KeyType: 'HASH' },
          { AttributeName: 'subsidiary', KeyType: 'RANGE' },
        ],
        AttributeDefinitions: [
          { AttributeName: 'name', AttributeType: 'S' },
          { AttributeName: 'subsidiary', AttributeType: 'S' },
          { AttributeName: 'ceo', AttributeType: 'S' },
        ],
        ProvisionedThroughput: {
          ReadCapacityUnits: 5,
          WriteCapacityUnits: 5,
        },
        LocalSecondaryIndexes: [
          {
            IndexName: 'CeoIndex',
            KeySchema: [
              {
                AttributeName: 'name',
                KeyType: 'HASH',
              },
              {
                AttributeName: 'ceo',
                KeyType: 'RANGE',
              },
            ],
            Projection: {
              ProjectionType: 'ALL',
            },
          },
        ],
      }

      export const createTable = async params => {
        try {
          const data = await ddbClient.send(new CreateTableCommand(params))
          console.log('Table created', data)
          return data
        } catch (err) {
          console.log('Error in table creation', err)
        }
      }

      createTable(tableParams1)
      createTable(tableParams2)
      createTable(tableParams3)
      createTable(tableParams4)
       Create table with V2 SDK 
      var AWS = require('aws-sdk')

      AWS.config.update({
        region: 'eu-north-1',
        endpoint: 'http://localhost:8000',
      })

      var dynamodb = new AWS.DynamoDB()

      var params = {
        TableName: 'Cars',
        KeySchema: [
          { AttributeName: 'id', KeyType: 'HASH' }, //Partition key
        ],
        AttributeDefinitions: [{ AttributeName: 'id', AttributeType: 'N' }],
        ProvisionedThroughput: {
          ReadCapacityUnits: 5,
          WriteCapacityUnits: 5,
        },
      }

      dynamodb.createTable(params, function (err, data) {
        if (err) {
          console.error('Unable to create table. Error JSON:', JSON.stringify(err, null, 2))
        } else {
          console.log('Created table. Table description JSON:', JSON.stringify(data, null, 2))
        }
      })
       Delete table 
      // deleteTable.js
      import { DeleteTableCommand } from '@aws-sdk/client-dynamodb'
      import { ddbClient } from './ddbClient.js'

      export const deleteTable = async tblName => {
        try {
          const data = await ddbClient.send(new DeleteTableCommand({ TableName: tblName }))
          console.log('Table deleted', data)
          return data
        } catch (err) {
          console.log('Error in table deletion', err)
        }
      }

      deleteTable("Cars")
       Query table 
      import { QueryCommand } from "@aws-sdk/lib-dynamodb"
      import { ddbDocClient } from "./ddbDocClient.js"

      export const queryTable = async () => {
        const params = {
          TableName: "Users",
          ProjectionExpression: "email, age, car, pets",
          ExpressionAttributeValues: {
            ":e": "olga.star@gmail.com",
          },
          KeyConditionExpression: "email = :e",    
        }

        try {
          const data = await ddbDocClient.send(new QueryCommand(params))
          console.log("Success querying: ", data)
          console.log(JSON.stringify(data.Items))
        } catch (err) {
          console.log("Error", err.stack)
        }
      }

      queryTable()
       Scan table 
      import { ScanCommand  } from "@aws-sdk/lib-dynamodb"
      import { ddbDocClient } from "./ddbDocClient.js"

      export const scanTable = async () => {
        const params = {
          TableName: "Users",    
        }

        try {
          const data = await ddbDocClient.send(new ScanCommand(params))
          console.log("Success scanning: ", data)
        } catch (err) {
          console.log("Error", err.stack)
        }
      }

      scanTable()
       Describe table 
      import { DescribeTableCommand } from "@aws-sdk/client-dynamodb"
      import { ddbDocClient } from "./ddbDocClient.js"

      export const describeTable = async () => {
        const params = {
          TableName: "Users",
        }

        try {
          const data = await ddbDocClient.send(new DescribeTableCommand(params))
          console.log("Success description: ", data)
        } catch (err) {
          console.log("Error", err.stack)
        }
      }

      describeTable()
       With ProjectionExpression Returns only specified attributes. 
      const params = {
        TableName: "Users",
        ProjectionExpression: "email, age, car", // show only age & email attributes
        ExpressionAttributeNames: { 
          "#c": "car" 
        },
        ExpressionAttributeValues: {
          ":a": 35,
          ":c": "volvo",
        },
        FilterExpression:"#c = :c and age = :a",
      }
       With filter 
          TableName: "Users",
          ProjectionExpression: "email, age, car", // show only age & email attributes
          ExpressionAttributeValues: { ":a1": 40, ":a2": 45, },
          FilterExpression:"age > :a1 and age < :a2",
        }
       Filter checking property availability 
      const params = {
        TableName: "Users",
        ExpressionAttributeValues: { ":t": true, ":a": 30 },
        FilterExpression:"social.instagram = :t and age > :a" ,
      }
       Filter with CONTAIN 
      const params = {
        TableName: "Users",
        ExpressionAttributeValues: { ":g": "jane" },
        FilterExpression:"contains(email, :g)" ,
      }
       Put items 
      import { PutCommand } from "@aws-sdk/lib-dynamodb"
      import { ddbDocClient } from "./ddbDocClient.js"

      const params1 = {
        TableName: "Users",
        Item: {
          email: "anton.arbus@gmail.com",
          car: "volvo",
          age: 35,
          address: "2nd Avenue, New York",
          pets: ["cat", "dog", "rat"]
        },
      }
      const params2 = {
        TableName: "Users",
        Item: {
          email: "jane.blake@gmail.com",
          car: "audi",
          age: 21,
          address: "Boston, unknown street",
          pets: ["bat"]
        },
      }
      const params3 = {
        TableName: "Users",
        Item: {
          email: "timo.kuuski@gmail.com",
          car: "bmw",
          age: 44,
          address: "Vaasa, Kaupungintie 45",
          pets: null,
          social: {
            facebook: true,
            telegram: true,
            instagram: true
          }
        },
      }
      const params4 = {
        TableName: "Users",
        Item: {
          email: "olga.star@gmail.com",
          car: "mazda",
          age: 18,
          address: "Vaasa, Kaupungintie 45",
          pets: null,
          social: {
            facebook: true,
            telegram: true,
            instagram: false
          }
        },
      }

      export const putItem = async (params) => {
        try {
          const data = await ddbDocClient.send(new PutCommand(params))
          console.log("Success - item added or updated", data)
        } catch (err) {
          console.log("Error", err.stack)
        }
      }

      putItem(params1)
      putItem(params2)
      putItem(params3)
      putItem(params4)
       Get item 
      import { GetCommand } from "@aws-sdk/lib-dynamodb"
      import { ddbDocClient } from "./ddbDocClient.js"

      export const readItem = async () => {
        const params = {
          TableName: "Users",
          Key: {
            email: "anton.arbus@gmail.com",
          },
        }

        try {
          const data = await ddbDocClient.send(new GetCommand(params))
          console.log("Success reading: ", data)
        } catch (err) {
          console.log("Error", err.stack)
        }
      }

      readItem()
       Update item 
      import { UpdateCommand  } from "@aws-sdk/lib-dynamodb"
      import { ddbDocClient } from "./ddbDocClient.js"

      const params = {
        TableName: "Users",
        Key: {
          email: "anton.arbus@gmail.com",
        },
        ExpressionAttributeValues: {
          ":c": "mazda",
          ":a": 60,
        },
        UpdateExpression: "set car = :c, age = :a",
      }

      export const updateItem = async () => {
        try {
          const data = await ddbDocClient.send(new UpdateCommand(params))
          console.log("Success - item updated", data)
        } catch (err) {
          console.log("Error", err.stack)
        }
      }

      updateItem()
       Delete item 
      import { DeleteCommand } from "@aws-sdk/lib-dynamodb"
      import { ddbDocClient } from "./ddbDocClient.js"

      export const deleteItem = async () => {
        const params = {
          TableName: "Users",
          Key: {
            email: "john.dow@gmail.com",
          },
        }

        try {
          const data = await ddbDocClient.send(new DeleteCommand(params))
          console.log("Success deleting", data)
        } catch (err) {
          console.log("Error", err.stack)
        }
      }

      deleteItem()
       Get batch items 
      import { BatchGetCommand } from "@aws-sdk/lib-dynamodb"
      import { ddbDocClient } from "./ddbDocClient.js"

      export const getBatchItems = async () => {
        const params = {
          RequestItems: { // map of TableName to list of Key to get from each table
            Users: {
              Keys: [ // a list of primary key value maps
                {
                  email: 'anton.arbus@gmail.com',
                },
                {
                  email: 'olga.star@gmail.com',
                },
              ],
            },
          },
        };

        try {
          const data = await ddbDocClient.send(new BatchGetCommand(params))
          console.log("Success reading: ", data)
          console.log(JSON.stringify(data.Responses))
        } catch (err) {
          console.log("Error", err.stack)
        }
      }

      getBatchItems()
       Batch write 
      import { BatchWriteCommand } from "@aws-sdk/lib-dynamodb"
      import { ddbDocClient } from "./ddbDocClient.js"

      export const writeData = async () => {
        const TABLE_NAME = "Users"
        try {
          for (let i = 0; i < 10; i++) {
            const params = {
              RequestItems: {
                [TABLE_NAME]: [
                  {
                    PutRequest: {
                      Item: {
                        email: `mail${i}@gmail.com`,
                        age: i,
                      },
                    },
                  }
                ]
              }
            }
            const data = ddbDocClient.send(new BatchWriteCommand(params))
            console.log("Success, table updated.")
          }
        } catch (error) {
          console.log("Error", error)
        }
      }
      writeData()
      

dynamoDB

CSS prop in Emotion library The css Prop  can take styles as template literals or object. 
      import { css } from '@emotion/react'

      function Component() {
        return (
          <div
            css={css`
              * {
                border: 2px solid grey;
                margin: 20px;
                padding: 20px;
                background-color: white;
              }
            `}
          >
            <div>div1</div>
            <div 
              css={{ 
                background: 'red' 
                }}>
              div2
            </div>
          </div>
        )
      }
        Configuration in Next.js package.json 
      {
        "dependencies": {
          "@emotion/react": "^11.10.4",
          "@emotion/styled": "^11.10.4",
        },
        "devDependencies": {
          "@emotion/babel-plugin": "^11.10.2",
          "@emotion/eslint-plugin": "^11.10.0",
        }
      }
       next.config.js 
      const nextConfig = {
        compiler: {
          emotion: true
        }
      }
      module.exports = nextConfig
       .babelrc 
      {
        "presets": [
          [
            "next/babel",
            {
              "preset-react": {
                "runtime": "automatic",
                "importSource": "@emotion/react"
              }
            }
          ]
        ],
        "plugins": ["@emotion/babel-plugin"]
      }
       .eslintrc.js 
      // .eslintrc.js
      module.exports = {
        env: {
          browser: true,
          es2021: true,
          jest: true
        },
        extends: [
          'plugin:react/recommended',
          'standard'
        ],
        parser: '@typescript-eslint/parser',
        parserOptions: {
          ecmaFeatures: {
            jsx: true
          },
          ecmaVersion: 'latest',
          sourceType: 'module'
        },
        plugins: [
          'react',
          '@typescript-eslint',
          '@emotion'
        ],
        rules: {
          'react/react-in-jsx-scope': 'off',
          'space-before-function-paren': 'off',
          'react/prop-types': 'off',
          'import/no-absolute-path': 'off',
          'react/no-unescaped-entities': 'off',
          'react/no-unknown-property': ['error', { ignore: ['css', 'jsx'] }]
        }
      }
       webpack css  prop from emotion does not work in react with webpack automatically, like it works with vite for ex. To let it work on top of the file need to put... 
      /** @jsxImportSource @emotion/react */
       Array of object styles 
          <div 
            css={[
              {
                backgroundColor: 'hotpink',
                '&:hover': {
                  color
                }
              },
              isDanger && {
                color: 'red'
              }
            ]}
          >
            div2
          </div>
      

emotion css prop

environment variable env var is a name-value pair stores configuration information for your operating system and applications programs can access it when needed some are automatically set by your operating system during startup some applications might create environment variables during installation users can create them also may also set or modify environment variables directly on the fly using command   export env vars are not stored in a single central location as i understood they are loaded from different places into memory Win Search for  Advanced system settings  in Windows Click the  Advanced  tab Click the  Environment Variables  button in the bottom At work I had to use  User variable  window Mac printenv  show environment variables echo $ var_name   show specific variable value export  var_name = value   set var temporarily in terminal session code ~/.zshrc , then add   export  var_name = value , then  source ~/.zshrc  to add variable permanently into terminal profile Save var in session and use it in script 
        # to get project ID
        gcloud projects list

        # set your project id in here
        export PROJECT_ID="your-project-id" 

        # later use variable in script
        gcloud iam service-accounts create "cloud-run-sa" --project="${PROJECT_ID}" --description="Cloud Run Service Account" --display-name="Cloud Run Service Account
       PATH how does terminal know what executable to launch when we type  docker terminal searches for "docker" file inside folders listed at  PATH  env variable we can check where executable is with  where docker  

environment variable

.then().catch() 
        async function getCheese(shouldError = false) {
          // after 1 second, return an array of cheese or Reject with an error
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              if (shouldError) {
                return reject('Cheese Sucks')
              }
            }, 1)
          })

          resolve(['cheddar', 'brie', 'gouda']);
        }
       
        getCheese()
          .then(cheeses => {
            console.log (cheeses) // ['cheddar', 'brie', 'gouda']
          })
          .catch(herr => console.log(err))
       try…catch 
        try {
          const cheese = await getCheese()
          console.log(cheese) // ['cheddar', 'brie', 'gouda']
        } catch(err) {
          console.log(err)
        }
       await  +  catch 
        const myCheese = await getCheese().catch(err => console.log(err))
        console.log(myCheese) // ['cheddar', 'brie', 'gouda']
       error handling with  Promise.allSettled() https://youtu.be/wsoQ-fgaoyQ?si=MX5SvTAkJq4PqO-7&t=778 
            function wrapIt(promise) {
              // Promise.allSettled() will return an array of objects, we grab the first one
              // That object will only ever have one of these properties:
              // "value" - the resolved data
              // OR
              // "reason" - the rejected error

              return Promise.allSettled([promise]).then(function([{ value, reason }]) {
                return [value, reason]
            }

            const [data, err] = await wrapIt(getCheese()) // [[ 'cheddar', 'brie', 'gouda' ], undefined ]
            const [cheese, cheeseError] = await wrapIt(getCheese(true)) // [ undefined, 'Cheese Sucks' ]
           may also return not an array, but an object 
            function wrapIt(promise) {
              return Promise.allSettled([promise]).then(function([{ value, reason }]) {
                return { data: value, error: reason }
            }

            const result = await wrapIt(getCheese()) 

            if (result.error) {
              console.log(error)
              return
            }

            console.log(result.data)
         try…catch…finally code to be put into  try  block if no errors, then  catch  block is ignored if an error the script is not killed try...catch  works synchronously, no delayed functions will be executed if an error occurs, then execution in  try  block is stopped try...catch  can only handle errors that occur in valid code catch  block has default  error  variable which contains an error object finally  block always executes catch  or  finally  can be omitted 
      try {
        alert('Start of try runs')
        lalala // error, variable is not defined!
        alert('End of try (never reached)')
      } catch(err) {
        alert(`Error has occurred!`)
        console.dir(err)
      } finally {
        alert('bugs happens, do not get upset')
      }
       error  variable is optional 
      try {
        alert('Start of try runs')
        lalala // error, variable is not defined!
        alert('End of try (never reached)')
      } catch {
        alert(`Error has occurred!`)
      } finally {
        alert('bugs happens, do not get upset')
      }
       finally  with  return return  value in  finally  block overwrites a value in   try  block 
      function example() {
        try {
          return true;
        }
        finally {
          console.log('finally')
          return false
        }
      }
      // finally
      // false
       Scheduled function 
      setTimeout(function() {
        try {
          noSuchVariable // try...catch handles the error!
        } catch (err) {
          alert( "error is caught here!" )
        }
      }, 1000)
       Error  object 
      try {
        lalala; // error, variable is not defined!
      } catch (err) {
        alert(err.name); // ReferenceError
        alert(err.message); // lalala is not defined
        alert(err.stack); // ReferenceError: lalala is not defined at (...call stack)
      
        // Can also show an error as a whole
        // The error is converted to string as "name: message"
        alert(err); // ReferenceError: lalala is not defined 
      } 
       Create error object 
      let error = new Error(message)
      let error = new SyntaxError(message)
      let error = new ReferenceError(message)
      let error = new TypeError(message)
       Or even extend built-in class 
      class ValidationError extends Error {
        constructor(message) {
          super(message)
          this.name = "ValidationError"
        }
      }
      
      // Usage
      function readUser(json) {
        let user = JSON.parse(json)
        if (!user.age) throw new ValidationError("No field: age")
        if (!user.name) throw new ValidationError("No field: name")
        return user
      }
      
      // Working example with try..catch
      
      try {
        let user = readUser('{ "age": 25 }')
      } catch (err) {
        if (err instanceof ValidationError) {
          alert("Invalid data: " + err.message) // Invalid data: No field: name
        } else if (err instanceof SyntaxError) { // (*)
          alert("JSON Syntax Error: " + err.message)
        } else {
          throw err // unknown error, rethrow it (**)
        }
      }
       Re-throw error 
      function readData() {
        let json = '{ "age": 30 }'

        try {
          blabla(); // error!
        } catch (err) {
          if (!(err instanceof SyntaxError)) {
            throw err; // rethrow (don't know how to deal with it)
          }
        }
      }
      
      try {
        readData();
      } catch (err) {
        alert( "External catch got: " + err ); // caught it!
      }
       finally  always executes even if we use  return  in  try  block can use it if don’t want to handle errors, but want to finalize process 
      function func() {
        try {
          console.log('try')
          return 
        } catch (err) {
          console.log('error')
        } finally {
          console.log('finally' )
        }
      }

      func() // try // finally
       Global  error  event listener In case of fatal error outside  try...catch ErrorEvent contains all the information about the event and the error. 
      window.addEventListener('error', function(event) { 
        alert(event.message) // human-readable error message describing the problem.
        console.log(event.filename) // name of the script file in which the error occurred.
        console.log(event.lineno ) //  line number of the script file on which the error occurred.
        console.log(event.colno) // column number of the script file on which the error occurred.
        console.log(event.error) // Is a JavaScript Object that is concerned by the event.
      })
       var  inside  catch try...catch  creates block scopes and we should declare  const  or   let  variables outside 
          const getRandomNumber = () => Math.floor(Math.random() * 100 + 1)
            
          function getNumber() {
            let number

            try {
              number = getRandomNumber()
              throw new Error('error')
            } catch {
              number = 0
            }

            return number // 0
          }
         may use  var  declaration as it is hoisted and goes to function scope 
          const getRandomNumber = () => Math.floor(Math.random() * 100 + 1)

          function getNumber() {
            try {
              var number = getRandomNumber()
              throw new Error('error')
            } catch {
              var number = 0
            }

            return number // 0
          }
        

error

ESLint  is a package to find problematic code. React ESLint comes with React  create-react-app app-name  by default. Rules We can extent  ESLint rules  by adding them into  package.json  file under  rules . 
        "eslintConfig": {
          "extends": [
            "react-app",
            "react-app/jest"
          ],
          "rules": {
            "no-unused-vars": "warn",
            "no-var": "error",
            "no-empty": "warn",
            "prefer-template": "warn",
            "prefer-const": "warn"
          }
        }
       Rule may have 3 flags:  "off" ,  "warn"  &  "error" "error"  rule does not permit to compile a React project until it is resolved. Manual check in terminal Run ESLint check in terminal by typing  eslint './posts/eslint.js' Run batch error checking with  eslint './posts/**js'  ESLint extension If we install  ESLint VS Code extension  we can see errors and warning highlight right in the editor. Automatic fix ESLint may try to fix problems with  eslint './posts/eslint.js' --fix Manual installation We may install ESLint manually by  sudo npm i -D eslint  and then initialize configuration by  eslint --init  command. Different style guides may be installed   standard  or   Airbnb  or   Google . Installation example.  Many dev dependencies are inserted into the  package.json  file and configuration file  .eslintrc.js  is generated. 
        // package.json
        "devDependencies": {
          "eslint": "^7.32.0",
          "eslint-config-airbnb": "^19.0.2",
          "eslint-config-standard": "^16.0.3",
          "eslint-plugin-import": "^2.25.3",
          "eslint-plugin-jsx-a11y": "^6.5.1",
          "eslint-plugin-node": "^11.1.0",
          "eslint-plugin-promise": "^5.2.0",
          "eslint-plugin-react": "^7.27.1",
          "eslint-plugin-react-hooks": "^4.3.0"
        }
       
      // .eslintrc.js
      module.exports = {
        env: {
          browser: true,
          es2021: true
        },
        extends: [
          'plugin:react/jsx-runtime',
          'standard'
        ],
        parser: '@typescript-eslint/parser',
        parserOptions: {
          ecmaFeatures: {
            jsx: true
          },
          ecmaVersion: 12,
          sourceType: 'module'
        },
        plugins: [
          'react',
          '@typescript-eslint'
        ],
        globals: {
          React: true,
          google: true,
          mount: true,
          mountWithRouter: true,
          shallow: true,
          shallowWithRouter: true,
          context: true,
          expect: true,
          jsdom: true,
          JSX: true,
        },
        rules: {
          'comma-dangle': ['error', 'only-multiline'],
          'react/no-unescaped-entities': 'off',
          'space-before-function-paren': ['error', 'never'],
          'react/prop-types': 'off',
          'react/react-in-jsx-scope': 'off',
          'no-template-curly-in-string': 'off',
          'no-use-before-define': 'off',
          'no-console': 'off',
        },
        settings: {
          react: {
            version: 'detect'
          }
        }
      }
       eslintConfig  can be removed from  package.json  if we use a separate  .eslintrc.js If ESLint does not allow to start or build a project we may create  .env  file with following statement. 
      // .env
      ESLINT_NO_DEV_ERRORS=true
      DISABLE_ESLINT_PLUGIN=true
       Disable ESLint warnings To disable ESLint warnings we may type   /* eslint-disable */  at the top of the file   // eslint-disable-line  on the same line   /* eslint-disable-next-line */  or  // eslint-disable-next-line  before the line More information can be found on the  https://eslint.org  page. ESLint in Next.js For some reason could not let linter work in Next.js This  guidline  helped me Plugins eslint-plugin-only-warn  - will warn on every rule, instead of throwing an error Lint in npm script 
        // package.json
        "scripts": {
          "client": "react-scripts start",
          "build": "react-scripts build",
          "test": "react-scripts test",
          "lint": "eslint '**/*.js'",
          "eject": "react-scripts eject",
          "server": "nodemon server.js",
          "dev": "concurrently "npm run server" "npm run client""
        },
      

eslint

eval()  function allows to execute a string of code Minifiers badly work with  eval() , do not use it 
        let code = 'alert("Hello")'
        eval(code) // Hello

        let value = eval('1+1')
        value // 2
       Eval’ed code is executed in the current lexical environment In strict mode,  eval()  has its own lexical environment 
        let a = 1
        function f() {
          let a = 2
          eval('alert(a)') 
        }
        f() // 2
       
        'use strict'
        eval("let x = 5; function f() {}")
        alert(typeof x) // undefined 
       If eval’ed code doesn’t use outer variables, call   eval()  as   window.eval() 
        let x = 1
        {
          let x = 5
          window.eval('alert(x)') // 1 (global variable)
        }
       If eval’ed code needs local variables, change eval()  to   new Function()  and pass them as arguments 
        let f = new Function('a', 'alert(a)')
        f(5) // 5
      

eval

Event loop best explanation ever -   https://youtu.be/eiC58R16hb8?si=uv2bOdlrUJJEgP1J&t=652 JS execution flow is based on an endless  event loop JS executes tasks one by one starting from the oldest When there are no tasks anymore JS waits for new ones Task may come while the engine is busy, then it's queued Queue of tasks is called  macrotask queue Rendering happens only after the task is completed, before another macrotask If a task takes long, the browser is blocked & raises the "page unresponsive” alert Macrotasks Scripts we call Event handlers Scripts are added to the end of the  macrotask queue  by  setTimeout(func)  with no delay Microtasks After every macrotask, tasks from microtask queue are executed It's done before running other macrotasks or rendering or event handling It guarantees that the environment is the same between microtasks (no mouse coordinate changes, no new network data, etc)  Microtask is a script called by promise handlers  .then/catch/finally()  or  queueMicrotask(func)  or observers Microtasks are used behind of  await  as well queueMicrotask() So if we'd like to execute a function asynchronously (after the current code), but before changes are rendered or new events handled, we can schedule it with  queueMicrotask(() => { func() }) Event loop sequence M a crotask (script, event handler)   M i crotask (promise handlers &  queueMicrotask(func) )   Render   M a crotask set by  setTimeout(func)    ... again & again Web workers For calculations that shouldn't block the event loop, we can use Web Workers. That's a way to run code in another parallel thread Web Workers can exchange messages with the main process They have their own variables, and their own event loop. Web Workers do not have access to DOM They are useful, mainly, for calculations They can use multiple CPU cores simultaneously in NodeJS process.nextTick(func)  executes function on the current iteration of the event loop, after the current operation ends, before  setTimeout()  and  setImmediate() setImmediate(func)  is the same as  setTimeout(func, 0)  and executes in the next iteration of the event loop, as soon as possible Examples Sequence    
      function Cmpt0() {
        function func() {
          alert(1) // synchronous call
          setTimeout(() => alert(2)) // macrotask sent to the end of the queue
          Promise.resolve().then(res => alert(3)) // microtask
          alert(4) // regular synchronous call
          // 1 --> 4 --> 3 --> 2
        }
        return <button onClick={func}>Click</button>
      }
      const toRender0 = <Cmpt0 />
       Count to billion without   setTimeout() Run whole code at one time Changes to DOM are painted after running task is completed We'll see only the last value instead of progress Code freezes the browser    
      function Cmpt2() {
        const ref = React.useRef()
      
        function countToBln() {
          let count = 0, start = Date.now()
          for (let j = 0; j < 1e9; j++) count++
          ref.current.innerHTML = count
          alert(`Done in ${Date.now() - start} ms`)
        }
      
        return (
          <div>
            <div ref={ref}>0</div>
            <button onClick={countToBln}>Click</button>
          </div>
        )
      }
      const toRender2 = <Cmpt2 />
       Count to billion with setTimeout() Split code into parts and queue them: 1 mln + 1 mln + ... up to 1 bln Splitting with  setTimeout()  we make multiple macrotasks and changes are painted in-between If an onclick event appears while the engine is busy it is queued mixed together with main counting tasks Page is responsive There's in-browser minimal delay of 4ms for many nested setTimeout calls and the earlier we schedule task via setTimeout, the faster it runs    
      function Cmpt3() {
        const ref = React.useRef()
      
        function func() {
          let i = 0, j = 0, start = Date.now()
      
          function countToMln() {
            for (let k = 0; k < 1e6; k++) i++
            ref.current.innerHTML = i
          }
      
          function countToBln() {
            if (i < 1e9) {
              setTimeout(countToBln) // schedule the new call // 1000 calls
              j++
            }
            if (i === 1e9) {
              alert(`Done in ${Date.now() - start} ms with ${j} timeout() calls`)
              return
            }
            countToMln()
          }
      
          countToBln()
        }
      
        return (
          <div>
            <div ref={ref}>0</div>
            <button onClick={func}>Click</button>
          </div>
        )
      }
      const toRender3 = <Cmpt3 />
       All microtasks runs before render  This code acts as a synchronous, window is frozen 
      function Cmpt1() {
        const ref = React.useRef()
        let i = 0
        function count() {
          do {
            i++
            ref.current.innerHTML = i
          } while (i % 1e3 !== 0)
          if (i < 1e6) queueMicrotask(count)
        }
      
        return (
          <div>
            <div ref={ref}>0</div>
            <button onClick={count}>Click</button>
          </div>
        )
      }
      const toRender1 = <Cmpt1 />
       Let event bubble Schedule an action until the event bubbled up and was handled on all levels. 
      menu.onclick = function() {
        let customEvent = new CustomEvent("menu-open", { bubbles: true }) // create a custom event with the clicked menu item data
        setTimeout(() => menu.dispatchEvent(customEvent)) // dispatch the custom event asynchronously
      }
      

event loop

DOM events Most useful DOM events click  click or tap on an element dblclick  two clicks on the same element within a short time, rarely used contextmenu  mouse right-clicks on an element or special contextmenu keyboard key pressed mouseover ,  mouseout  mouse cursor comes over / leaves an element mousedown ,  mouseup  mouse button is pressed / released over an element mousemove  mouse is moved keydown ,  keyup  keyboard key is pressed and released submit  visitor submits a form focus  visitor focuses on an element, e.g. input, textarea DOMContentLoaded  the HTML is loaded and processed, DOM is fully built transitionend  CSS-animation finishes Take a closer look at  DOM events . Event handler in HTML-attribute Event handler  - a function that reacts on events 
      <input value="Click me" onclick="alert('Click!')" type="button"></input>
      <input type="button" oNcLiCk="countRabbits()" value="Count rabbits!"></input>
       inside onclick we use single quotes, because the attribute itself is in double quotes HTML attribute names are not case-sensitive, so ONCLICK works as well as onClick and onCLICK… But usually attributes are lowercased 
      // !!! NOT working, coz value should be a string
      document.body.setAttribute('onclick', function() { alert(1) })
       element.on 
      <input id="elem" type="button" value="Click me">
       
      elem.onclick = function() { alert('Thank you') }
       or... 
      const sayThanks = () => alert('Thanks!')
      elem.onclick = sayThanks // no parentheses
       Some handlers work only with  addEventListener , for ex  DOMContentLoaded   event elem.onclick = null  remove a handler As there’s only one onclick property, we can’t assign more than one event handler Adding a new handler with JavaScript overwrites the existing handler DOM-property case matters addEventListener 
      element.addEventListener(event, handler, [options])
       event  event name, e.g. "click" handler  handler function options  additional optional object with properties 
      element.addEventListener('click', func,  {
          capture: false,
          once: false
          passive: false
        })
       capture: true  catch an event on the capturing phase once: true  fires an event only ones passive: true  tells the browser that the handler is not going to cancel scrolling, not going to call  preventDefault() Then browser scrolls immediately providing a maximally fluent experience For some browsers (Firefox, Chrome), passive is true by default for touchstart and touchmove events removeEventListener To remove a handler we should pass exactly the same function as was assigned  if we don’t store the function in a variable, then we can’t remove it To remove the handler, removeEventListener needs to have identical parameters 
      function handler() { alert( 'Thanks!' ) }
      input.addEventListener("click", handler)
      input.removeEventListener("click", handler)
       
      el.addEventListener("event", fn, true)
      el.removeEventListener("event", fn, true)
       Will not work, because technically they are different function objects 
      el.addEventListener( "click" , () => alert('Thanks!'))
      el.removeEventListener( "click", () => alert('Thanks!'))
       Multiple handlers Multiple event handlers can be achieved by multiple addEventListeners. 
      function handler1() { alert('Thanks!') }
      function handler2() { alert('Thanks again!') }
      elem.onclick = () => alert("Hello")
      elem.addEventListener("click", handler1) // Thanks!
      elem.addEventListener("click", handler2) // Thanks again!
       AbortController https://kettanaito.com/blog/dont-sleep-on-abort-controller May provide an abort signal to an event listener and call  controller.abort()   to remove it No need to keep a reference to a handler function for   element.removeEventListener("click", handlerFunc) 
          const controller = new AbortController()
          window.addEventListener('resize', () => {}, { signal: controller.signal })
          controller.abort()
         Also cancels multiple listeners 
          useEffect(() => {
            const controller = new AbortController()

            window.addEventListener('resize', handleResize, {
              signal: controller.signal,
            })

            window.addEventListener('hashchange', handleHashChange, {
              signal: controller.signal,
            })

            window.addEventListener('storage', handleStorageChange, {
              signal: controller.signal,
            })

            return () => {
              controller.abort()
            }
          }, [])
         this The value of  this  inside a handler is the element, which has the handler on it. 
      <button onclick="alert(this.innerHTML)">Click me</button> // Click me
       Event object when an event happens, event object is created and passes it as an argument to the handler event.type  event type, for ex.  click event.currentTarget  el where the handler is, same as  this  unless arrow func event.target  el that initiated the event event.clientX  window-relative coordinates of the cursor, for pointer events event.eventPhase  current phase (capturing=1, target=2, bubbling=3) There are more event properties, depending on the event type 
      elem.onclick = function(event) {
        event.type // Event type, here it’s "click".
        event.currentTarget // el where the handler is // same as 'this' unless arrow func
        event.target, // el that initiated the event
        event.clientX // window-relative coordinates of the cursor, for pointer events
        event.clientY
        event.eventPhase // current phase (capturing=1, target=2, bubbling=3)
      }
       The event object is also available in HTML handlers 
      <input type="button" onclick="alert(event.type)" value="Event type">
       object with handleEvent can assign not just a function, but an object as an event handler  when an event occurs, its  handleEvent  method is called 
      const obj = {
        handleEvent(event) {
          alert(event.type + " at " + event.currentTarget)
        }
      }
      document.addEventListener('click', obj)

      // we can use class

      class Menu {
        handleEvent(event) {
          switch(event.type) {
            case 'mousedown':
              elem.innerHTML = "Mouse button pressed"
              break
            case 'mouseup':
              elem.innerHTML += "...and released."
              break
          }
        }
      }

      let menu = new Menu()
      elem.addEventListener('mousedown', menu)
      elem.addEventListener('mouseup', menu)

      // or even like that

      class Menu {
        handleEvent(event) {
          // mousedown -> onMousedown
          let method = 'on' + event.type[0].toUpperCase() + event.type.slice(1);
          this[method](event);
        }
        onMousedown() { elem.innerHTML = "Mouse button pressed" }
        onMouseup() { elem.innerHTML += "...and released." }
      }

      let menu = new Menu()
      elem.addEventListener('mousedown', menu)
      elem.addEventListener('mouseup', menu)
       Bubbling When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors span --> div --> body --> html --> document --> window some events reach 'window', not all Almost all events bubble focus  event does not bubble 
      <form onclick="alert('form')">FORM
        <div onclick="alert('div')">DIV
          <p onclick="alert('p')">P</p>
        </div>
      </form>
       Click on  <p>  triggers 3 alerts due to bubbling bubbling happens upwards till the document object if we have a single handler form.onclick, then it can “catch” all clicks inside the form e.target element that initiated the event The most deeply nested element that caused the event is called a target element handler on a parent el can get info where it actually happened e.currentTarget element from where cursor exited or where it is entered depends on the event for  mouseenter ,  mouseover ,  dragenter  - element exited from for  mouseleave ,  mouseout ,  dragleave  - element entered into e.relatedTarget el where the handler is same as  this e.stopPropagation() stop bubbling Don’t stop it w/o a real need we forever deny access to information about events for any outer code document.addEventListener('click', fn)  will not work on document level for stopped bubble events, it might be useful 
      <body onclick="alert(`the bubbling doesn't reach here`)">
        <button onclick="event.stopPropagation()">Click me</button>
      </body>
       e.stopImmediatePropagation() stop the bubbling and prevent handlers on the current element After it no other handlers execute If an el has multiple event handlers on a single event, then even if one of them stops the bubbling, the other ones still execute but on the current element all other handlers will run Capturing Event propagation has 3 phases Capturing  - event goes down to the element Target  – event reached the target element Bubbling  – event bubbles up from the element Capturing phase is invisible to us normally rarely used in real code Capturing path example   Window -> Document -> <html> -> <body> -> <table> -> <tbody> -> <tr> -> <td> Capturing path example   Window -> Document -> <html> -> <body> -> <table> -> <tbody> -> <tr> -> <td> 
      el.addEventListener('click', fn, { capture: true })
       Or.. 
      el.addEventListener('click', fn, true)
       if  false  (default), then the handler is set on the bubbling phase 2nd phase (“target phase”: the event reached the element) is not handled separately handlers on both capturing and bubbling phases trigger at target phase Event delegation event delegation - a single handler on their common ancestor in the handler we get  event.target  to see where the event actually happened and handle it event must bubble 
      document.querySelector('#main').addEventListener('click', (e) => {
        if (!e.target.closest('#main selector')) return
        func()
      })
       Highlight cells on click... 
      table.onclick = function(e) {
        let td = e.target.closest('td') // we may click on some tag inside td, so we find the nearest td
        if (!td) return // check if was inside any <td>
        if (!table.contains(td)) return // check if it is out table
        highlight(td) // do action
      }
       Delegation via custom attributes... 
      <div id="menu">
        <button data-action="save">Save</button>
        <button data-action="load">Load</button>
        <button data-action="search">Search</button>
      </div>
       
      class Menu {
        constructor(elem) {
          this._elem = elem
          elem.onclick = this.onClick.bind(this)
        }

        save() { alert('saving') }
        load() { alert('loading') }
        search() { alert('searching') }

        onClick(event) {
          let action = event.target.dataset.action
          if (action) this[action]()
        }
      }

      new Menu(menu)
       Another example... increase value on click 
      Counter: <input type="button" value="1" data-counter>
      One more counter: <input type="button" value="2" data-counter>
       
      document.addEventListener('click', function(e) {
        if (e.target.dataset.counter != undefined) e.target.value++
      })
       e.preventDefault() stops default browser actions some events flow one into another, if we prevent the first event, there will be no second mousedown on an <input> field leads to focusing in it, and the focus event If we prevent the mousedown event, there’s no focus. The focusing is still possible with Tab key, But not with the mouse click any more e.defaultPrevented true  if the default action was prevented sometimes better to use than stopping bubbling by event.stopPropagation() we can use  event.defaultPrevented  instead, to signal other event handlers that the event was handled solution would be to check in the document handler if the default action was prevented 
      innerDiv.oncontextmenu = function(e) {
        e.preventDefault()
        alert("innerDiv context menu")
      }

      div.oncontextmenu = function(e) {
        if (e.defaultPrevented) return
        e.preventDefault()
        alert("div context menu")
      }

      outterDiv.oncontextmenu = function(e) {
        if (e.defaultPrevented) return
        e.preventDefault()
        alert("outterDiv context menu")
      }
       return false stops default browser actions prevents the event from propagating (or “bubbling up”) the DOM. Stops callback execution and returns immediately when called 
      <ul id="menu" class="menu">
        <li><a href="/html">HTML</a></li>
        <li><a href="/javascript">JavaScript</a></li>
        <li><a href="/css">CSS</a></li>
      </ul>
       
      menu.onclick = function(event) {
        if (event.target.nodeName != 'A') return
        let href = event.target.getAttribute('href')
        alert( href ) // ...can be loading from the server, UI generation etc
        return false // prevent browser action (don't go to the URL)
      }
       Custom events 
      const event = new Event(type, [options]);
       create Event objects bubbles: true  event bubbles,  false  by default cancelable: true  “default action” may be prevented,  false  by default elem.dispatchEvent(event)  trigger event on an element handlers will react on it as if it were a regular browser event return  false  if event is cancelable and any handlers which received event called preventDefault() 
      const event = new Event("my-event")
      const event = new Event("click", { bubbles: true, cancelable: true })
      elem.dispatchEvent(event)
       programmatic event trigger 
      let event = new Event("click")
      document.querySelector('button').dispatchEvent(event)
       dispatchEvent  is processed immediately, synchronous 
      document.addEventListener('hi', () => alert('hi'))
      let textarea = document.querySelector('textarea')
      textarea.addEventListener('click', function () {
        alert(1)
        textarea.dispatchEvent(new CustomEvent("hi", { bubbles: true }))
        alert(2)
      })
      // 1 --> hi --> 2
       isTrusted 
      event.isTrusted
       true  for events that come from real user false  for script-generated events Built-in event classes 
      new MouseEvent("click")

      const event = new MouseEvent("click", {
        bubbles: true,
        cancelable: true,
        clientX: 100,
        clientY: 100
      })

      event.clientX // 100
       use it instead of  new Event   The right constructor allows to specify standard properties for that type of event generic Event constructor does not allow that we can work around that by assigning directly  event.clientX=100 List of some classes for UI Events... new UIEvent() new FocusEvent() new MouseEvent() new WheelEvent() new KeyboardEvent() others… Custom event 
      const helloEvent = new Event("hello", { bubbles: true })
       Better way... 
      const helloEvent = new CustomEvent("hello", {
        bubbles: true,
        detail: { name: "John" }
      })
      document.querySelector('button').dispatchEvent(helloEvent) // Hello from BUTTON

      document.addEventListener("hello", function(e) {
        alert("Hello from " + e.detail.name + ' ' + e.target.tagName)
      })
       We should use  addEventListener  for our custom events new CustomEvent  allows to add  detail  property preventDefault for custom events new custom events have no default browser action but a code that dispatches such event may have own plans what to do after triggering the event return  false  if event is cancelable and any handlers which received event called preventDefault() 
      const textarea = document.querySelector('textarea')
      textarea.addEventListener('hide', isPrevented)
      textarea.addEventListener('click', hide)

      function isPrevented(e) {
        if (confirm("Call preventDefault?")) e.preventDefault()
      }

      function hide() {
        const event = new CustomEvent("hide", { cancelable: true })
        if (!textarea.dispatchEvent(event)) {
          alert('The action was prevented by a handler')
          return
        }
        textarea.hidden = true
      }
      

events

 Execution order in React parent is rendered first children go next children's useEffect goes then then parent's useEffect can check in console 
      const Parent = ({ children }) => {
        console.log(1)
        useEffect(() => console.log(2), [])
        return children
      }

      const Child = () => {
        console.log(3)
        useEffect(() => console.log(4), [])
        return 'I am child'
      }

      <Parent>
        <Child />
      </Parent>

      // 1 --> 3 --> 4 --> 2 
      

execution order in React

Install Installation  guide In terminal  npm i express HTTP server Basic server 
      // index.js
      const express = require('express') 
      const app = express()
      const path = require('path') 
      const PORT = process.env.PORT || 5000
      app.listen(PORT, () => console.log(`Server started on port ${PORT}`))
       Static files 
      const path = require('path')

      app.use(express.static(path.join(__dirname, 'public'), { 
        index: false, 
        extensions:['html'] // no need to put html extension
      }))
      app.use(express.static('some other directory')) // looks up files in the order static directories are set
      // manually serve files
      app.get('/', (req, res) => res.sendFile(path.join(__dirname, 'public', 'index.html'))) 
       To start a server run  node index.js Hot restart Every update we do to our project files requires manual server restart with  Ctrl + C  &  node index.js To avoid it we may install  nodemon  tool and launch our server via it In terminal  npm i -D nodemon  to install the package as a development dependency Add into  package.json  following scripts 
        "scripts": {
          "start": "node index",
          "dev": "nodemon index"
        },
         Launch server via  npm run dev Now the server will be restarted automatically on every file update API documentation https://expressjs.com/en/4x/api.html Middleware Express is a routing and middleware web framework Express app is a series of middleware function calls Middleware functions can execute any code Can change the request or response objects End the request-response cycle Call the next middleware function in the stack app.use() Mounts the specified middleware function(s) at the specified path Middleware function is executed when the base of the requested path matches path. Middleware function parameters MW function has access to request & response objects and has the  next  function, which calls the next middleware function 
      app.use('/user/:id', (req, res, next) => {
        console.log('Request Type:', req.method)
        next()
      })
       Application level middleware 
      const timeLogs = (req, res, next) => {
        console.log(`URL hit: ${req.protocol}://${req.get('host')}${req.originalUrl} on ${new Date().toString()}`)
        next()
      }
      app.use(timeLogs)
       Every time the app receives a request, it prints the log message to the terminal Middleware in a separate file Add custom property to the request object 
      // /middleware/hitTime
      const hitTime = (req, res, next) => {
        req.hitTime = new Date()
        console.log(`added time to request object`)
        next()
      }
      module.exports = hitTime
       
        // index.js
        const addHitTimeToReqObj = require('./middleware/hitTime')
        app.use('/checkAddedHitTimeToRequest', addHitTimeToReqObj)
       Middleware function will be triggered when a user hit the url  http://localhost:5000/checkAddedHitTimeToRequest We can show this newly added object on the screen adding HTTP GET request route. 
        app.get(
          '/checkAddedHitTimeToRequest', 
          (req, res) => res.send(req.hitTime.toDateString() + req.hitTime.toLocaleTimeString())
        )
        Middleware with parameters We can not pass parameters into a middleware function directly, because in  app.use()  we have to pass only a reference to a middleware function That's why we need to create a helper function, which can accept arguments, and return a middleware function with passed parameters 
      const mwWithOpt = (flag = true) => {
        return function (req, res, next) {
          if (flag) console.log('triggered') 
          next()
        }
      }
      app.use(mwWithOpt(false))
       Will not see 'hi' in console, because we passed  false  param to a middleware function None of further middleware functions are triggered if  false  is passed, because  next()  is never called next() vs next('route') next() 
      app.get('/next', 
        (req, res, next) => {
          console.log('app.get("/next") - 01')
          next()
        }, 
        (req, res, next) => {
          console.log('app.get("/next") - 02')
          next()
        }
      ) 
      app.use(function(req, res, next) {
        console.log('app.use() - 03')
        next()
      })
      app.get('something_else', function(req, res, next) {
        console.log('app.get("/something_else") - 04')
        next()
      })
      app.get('/next', function(req, res, next) {
        console.log('app.get("/next") - 05')
        next()
      })
       Hit  http://localhost:5000/next  and get in console 
      app.get("/next") - 01
      app.get("/next") - 02
      app.use() - 03
      app.get("/next") - 05
       next('route') next('route') passes control to the next matching route (GET, POST, PUT, DELETE methods). 
      app.get('/next', 
        (req, res, next) => {
          console.log('app.get("/next") - 01')
          next('route')
        }, 
        (req, res, next) => {
          console.log('app.get("/next") - 02')
          next()
        }
      ) 
      app.use(function(req, res, next) {
        console.log('app.use() - 03')
        next()
      })
      app.get('something_else', function(req, res, next) {
        console.log('app.get("/something_else") - 04')
        next()
      })
      app.get('/next', function(req, res, next) {
        console.log('app.get("/next") - 05')
        next()
      })
       Hit  http://localhost:5000/next  and get in console. 
      app.get("/next") - 01
      app.use() - 03
      app.get("/next") - 05
       Routing Routes HTTP GET requests to the specified path with the specified callback functions. app.get() 
        app.get('/get', (req, res) => res.send('<h1>get request for /get url</h1>'))
       Hit  http://localhost:5000/get  and get rendered text on a screen. app.post() 
      app.post('/post', (req, res) => res.send(hi'))
       We can make a post request from node file. 
      // /axios.js
      const axios = require('axios');

      axios.post('http://localhost:3000/post')
      .then(function (response) {
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
       When we execute  node axios.js  we get  hi  in console Also can send the request from the browser's console and get the same result 
      fetch('/post', { method: 'POST' })
        .then(response => response.text())
        .then(msg => console.log(msg))
       There might be a security restriction and we should provide some  content-security-policy parameters  into request headers by middleware function in our http server file. 
      app.use(function(req, res, next) {
        res.header("Content-Security-Policy", "default-src 'self'")
        next()
      })
       app.all() 
      app.all('/all', (req, res, next) => {
        res.send('<h1>all</h1>')
        console.log('middleware1 for all http requests')
        next() // pass control to the next handler
      })
      app.all('/all', (req, res, next) => console.log('middleware2 for all http requests'))
      app.all('/all', (req, res, next) => console.log('middleware3 for all http requests')) 
       Note, we can have multiple middleware functions for the same path.  Last middleware will not be triggered, because  next()  function was not called at the 2nd function Multiple functions in one method Comma separated 
      app.get(
        '/hi', 
        function (req, res, next) {
          console.log('Hello')
          next()
        }, 
        function (req, res) {
          console.log('Hello again')
          res.send('Hello!')
        }
      )
       In array 
      const a = (req, res, next) => { console.log('a'); next(); }
      const b = (req, res, next) => { console.log('b'); next(); }
      const c = (req, res)       => { console.log('c'); res.send('Hello from c!'); }

      app.get('/path1', [a, b, c])
      app.get('/path2', a, [b, c])
       Path accepts RegExp 
      // http://localhost:5000/asdfhljljalasd73
      app.get(
        /.*73$/, 
        (req, res) => res.send('<h1>any url ending with "73" matching regexp /.*73$/</h1>')
      )

      // http://localhost:5000/about?fav_language=HTML&vehicle1=Bike&vehicle2=Car
      app.get(
        //about.*/, 
        (req, res, next) => {
          console.log(req.query) // { fav_language: 'HTML', vehicle1: 'Bike', vehicle2: 'Car' }
          next()
        }
      )
       Dynamic route &  req.params 
      // http://localhost:5000/users/34/books/8989
      app.get(
        '/users/:userId/books/:bookId', 
        (req, res) => res.send(req.params) // { "userId": "34", "bookId": "8989" }
      ) 

      // hyphen (-) and the dot (.) are interpreted literally
      // http://localhost:5000/flights/LAX-SFO
      app.get(
        '/flights/:from-:to', 
        (req, res) => res.send(req.params) // { "from": "LAX", "to": "SFO" }
      ) 

      // regexp can be used in parentheses ()
      // http://localhost:5000/user/42
      app.get(
        '/user/:userId(\d+)', 
        (req, res) => res.send(req.params) // {"userId": "42"}
      ) 
       Chainable routing 
      app.route('/book')
        .get((req, res, next) => res.send('Get a random book'))
        .post((req, res) => res.send('Add a book'))
        .put((req, res) => res.send('Update the book'))
       Router We can extract routes and middlewares to a separate files with router objects. 
      // /animals/routerFile.js
      // creates a router as a module, loads a middleware function in it,
      // defines routes, and mounts the router module on a path in the main app

      var express = require('express')
      var animalRouter = express.Router()

      // middleware that is specific to this router
      animalRouter.use(function timeLog (req, res, next) {
        console.log('Time: ', Date.now())
        next()
      })

      // define the cats page route
      animalRouter.get('/', (req, res) => res.send('main page for animals'))

      // define the dogs page route
      animalRouter.get('/dogs', (req, res) => res.send('page for dogs'))

      module.exports = animalRouter
       
        // index.js
        // load the router module in the app
        const routerAnimals = require('./animals/routerFile.js')
        // http://localhost:5000/animals
        // http://localhost:5000/animals/dogs
        app.use('/animals', routerAnimals)
       Res methods res.json() 
      app.get('/json', (req, res) => res.json({id: 1, name: 'John'}))
       res.send() Same as  res.json() 
      app.get('/send', (req, res) => res.send({id: 1, name: 'John'}))
       File download starts. 
      app.get('/send-buffer', (req, res) => res.send(Buffer.from('whoop'))) 
       
      app.get('/send', (req, res) => res.send('<p style="color:red">some html</p>'))
       Note, it just returns partially rendered page, without styling. To enable styles need to adjust  content-security-policy . 
      app.use(function(req, res, next) {
        res.header("Content-Security-Policy", "default-src 'self'; style-src 'self' 'unsafe-inline';")
        next()
      })
        res.status() 
      app.get('/send-error-status-ver1', (req, res) => res.status(404).send('404: Sorry, we cannot find that!'))
      app.get('/send-error-status-ver2', (req, res) => res.sendStatus(404))
       res.redirect() 
      app.get('/redirect', (req, res) => res.redirect(301, 'https://google.com'))
       res.sendFile() Put file  /911.pdf  in the root folder File will be opened in the browser Same way can serve html files into the browser 
      const path = require('path')
      app.get('/sendFile/:file', (req, res) => {
        console.log(req.params)
        res.sendFile(path.join(__dirname, req.params.file))
      })
       res.download() File will be downloaded. 
        app.get('/download', (req, res) => res.download('911.pdf')) 
       res.render() Renders a view from the template engine app Use  Pug  rendering app for example Install  npm install pug Create  /views/index.pug  file as in  example 
      // viewsindex.pug
      html
        head
          title= title
        body
          h1(style={'color': 'red'})= message
       
      app.set('view engine', 'pug')
      app.get('/pug', (req, res) => {
        res.render('index', { title: 'Hey', message: 'Hello there!' })
      })
       res.end() 
      app.get('/end', (req, res) => res.status(404).end("<h1 style='color:red;'> Error! </h1>"))
       res.set() Creates or replaces header 

      app.use((req, res, next) => {
        res.set('xxx', '1')
        res.set('xxx', '2')
        res.set('xxx', '3')
        res.set('xxx', '4').send('check the response header')
        // only xxx: 4 will be in header

        res.set('Content-Type', 'text/plain')

        // multiple headers
        res.set({
          'Content-Type': 'text/plain',
          'Content-Length': '123',
          ETag: '12345'
        })

        next()
      }) 

       res.append() Appends value to the HTTP response header field. 
      app.get('/append', (req, res) => {
        res.append('xxx', '1')
        res.append('xxx', '2')
        res.append('xxx', '3')
        res.append('xxx', '4').send('check the response header')
        // all 4 properties will be listed in response header
        next()
      }) 
       POST request from html form and fetch https://antonarbus.com/posts/post_requests Serve React static folder from Express 
        const express = require('express')
        const path = require('path')
        const app = express()
        const PORT = 3010
        
        // React static files from 'build' folder
        app.use(express.static(path.join(__dirname, '..', 'build')))
        
        // not needed, just an exampe, how to serve spcific file for the url
        app.get('/', function (req, res) {
          res.sendFile(path.join(__dirname, '..', 'build', 'index.html'))
        })
        
        // all other routes go via React routes to index.html
        app.get('/*', (req, res) => {
          res.sendFile(path.join(__dirname, '..', 'build', 'index.html'))
        })
        
        app.listen(PORT, () => console.log(`Server started on port ${PORT}`))
       Route from React to Express APIs 
      // server.js
      const express = require('express')
      const app = express()

      app.get('/hi', (req, res) => {
        res.json({ message: 'hi!' })
      })

      app.listen(3001, () => {
        console.log('server started on port 3001')
      })
       
      // app.js
      import React from 'react'

      function App () {
        const [data, setData] = React.useState(null)
        React.useEffect(() => {
          fetch('/hi')
            .then((res) => res.json())
            .then((data) => setData(data.message))
        }, [])

        return (
          <>
            <p>{!data ? 'Loading...' : data}</p>
          </>
        )
      }
      export default App
       Add proxy into  package.json 
        {
          "name": "quotation.app",
          "version": "0.1.0",
          "private": true,
          "dependencies": {
            "@testing-library/jest-dom": "^5.16.4",
            "@testing-library/react": "^13.3.0",
            "@testing-library/user-event": "^13.5.0",
            "concurrently": "^7.2.1",
            "express": "^4.18.1",
            "nodemon": "^2.0.16",
            "react": "^18.1.0",
            "react-dom": "^18.1.0",
            "react-scripts": "5.0.1",
            "web-vitals": "^2.1.4"
          },
          "scripts": {
            "client": "react-scripts start",
            "build": "react-scripts build",
            "test": "react-scripts test",
            "lint": "eslint '**/*.js'",
            "eject": "react-scripts eject",
            "server": "nodemon server.js",
            "dev": "concurrently "npm run server" "npm run client""
          },
          "eslintConfig": {
            "extends": [
              "react-app",
              "react-app/jest"
            ]
          },
          "browserslist": {
            "production": [
              ">0.2%",
              "not dead",
              "not op_mini all"
            ],
            "development": [
              "last 1 chrome version",
              "last 1 firefox version",
              "last 1 safari version"
            ]
          },
          "devDependencies": {
            "eslint": "^8.17.0",
            "eslint-config-standard": "^17.0.0",
            "eslint-plugin-import": "^2.26.0",
            "eslint-plugin-n": "^15.2.1",
            "eslint-plugin-promise": "^6.0.0",
            "eslint-plugin-react": "^7.30.0"
          },
          "proxy": "http://localhost:3001"
        }
      

express

fetch() 
      const response = await fetch(url, options) // resolves with response headers
      const result = await response.json()
       does network requests from JavaScript w/o options, it is a GET request, downloading the contents of the url fetch resolves with an object of the built-in  Response  class as soon as the server responds with headers At this stage we can check HTTP status, to see whether it is successful or not, check headers, but don’t have the body yet Abnormal HTTP-statuses, such as 404 or 500 do not cause an error to get the response body, we need to use an additional method call  
      async function fetchPage() {
        const response = await fetch('/posts/fetch')
        const result = await response.text()
        console.log(result)
      }

      const FetchPage = () => <button onClick={fetchPage}>fetch this page content and put into console</button>
      
      <FetchPage />
       Without  await 
      fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
        .then(response => response.json())
        .then(commits => alert(commits[0].author.login))
       Response response.status  HTTP status code, e.g. 200 response.ok  boolean, true if the HTTP status code is 200-299 response.body   ReadableStream  object, it allows you to read the body chunk-by-chunk response.text()  read the response and return as text response.json()  parse the response as JSON can choose only one body-reading method response.formData()  return the response as  FormData  object response.blob()  return the response as  Blob  (binary data with type) response.arrayBuffer()  return the response as  ArrayBuffer  (low-level representation of binary data) 
      const url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits'
      const response = await fetch(url)
      if (!response.ok) throw new Error("HTTP-Error: " + response.status) // if HTTP-status is 200-299
      const json = await response.json() // read response body and parse as JSON
      console.log(json[0].author.login)
       Show image in Binary 
      const url = 'https://i.insider.com/5ec6a5772618b94ebe726e95'
      const response = await fetch(url)
      console.log(response)
      let blob = await response.blob() // download as Blob object
      let img = document.createElement('img')
      img.style = 'position:fixed; top:50px; left:50px; width:300px'
      document.body.append(img)
      img.src = URL.createObjectURL(blob) // show it
       One body-reading method 
      let text = await response.text(); // response body consumed
      let parsed = await response.json(); // fails (already consumed)
       response.headers response headers are available in a Map-like headers object in  response.headers it’s not exactly a Map, but it has similar methods 
      let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
      // get one header
      console.log(response.headers.get('Content-Type')) // application/json; charset=utf-8
      // iterate over all headers
      for (let [key, value] of response.headers) {
        console.log(`${key} = ${value}`)
      }
       request.headers To set a request header in fetch, we can use the headers option It has an object with outgoing headers, like this 
      let response = fetch(protectedUrl, {
        headers: {
          Authentication: 'secret'
        }
      })
       List of forbidden HTTP headers which we can not set:  Accept-Charset ,  Accept-Encoding ,  Access-Control-Request-Headers ,  Access-Control-Request-Method ,  Connection ,  Content-Length ,  Cookie ,  Cookie2 ,  Date ,  DNT ,  Expect ,  Host ,  Keep-Alive ,  Origin ,  Referer ,  TE ,  Trailer ,  Transfer-Encoding ,  Upgrade ,  Via ,  Proxy-* ,  Sec-*   POST request To make a POST request, or a request with another method, we need to use fetch options Content-Type  is usually... 'Content-Type': 'text/plain;charset=UTF-8'  for string request body, default 'Content-Type': 'application/json;charset=utf-8'  for json request body 'Content-Type': 'multipart/form-data'  for form data 
      let user = { name: 'John', surname: 'Smith' }
      
      let response = await fetch('/article/fetch/post/user', {
        method: 'POST',
        body: JSON.stringify(user),
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        },
      })
      let result = await response.json()
      console.log(result.message)
       Request body can be... a string (e.g. JSON-encoded), used most of the times FormData  object, to submit the data as form/multipart Blob/BufferSource  to send binary data URLSearchParams , to submit the data in x-www-form-urlencoded encoding, rarely used Send an image as blob can submit binary data with fetch using Blob or BufferSource objects there’s a <canvas> where we can draw by moving a mouse over it note, we don’t set  Content-Type  header manually, because a  Blob  object has a built-in type image/png , as generated by  toBlob For  Blob  objects that type becomes the value of  Content-Type 
      <body style="margin:0">
      <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>
      <input type="button" value="Submit" onclick="submit()">
       
      canvasElem.onmousemove = function(e) {
        let ctx = canvasElem.getContext('2d')
        ctx.lineTo(e.clientX, e.clientY)
        ctx.stroke()
      }
  
      async function submit() {
        let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'))
        let response = await fetch('/article/fetch/post/image', {
          method: 'POST',
          body: blob
        })
  
        // the server responds with confirmation and the image size
        let result = await response.json()
        console.log(result.message)
      }
       FormData it is an object to represent HTML form data, which can be sent with fetch as a body from the server point of view, that looks like a usual form submission if HTML form element is provided, it automatically captures its fields 
      <form id="formElem">
        <input type="text" name="name" value="John">
        <input type="text" name="surname" value="Smith">
        <input type="submit">
      </form>
       
      const formData = new FormData([form])
      formElem.onsubmit = async (e) => {
        e.preventDefault()
        const response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        })
        const result = await response.json()
        console.log(result.message) // User saved
      }
       FormData methods formData.append(name, value)  add a form field with the given name and value formData.append(name, blob, fileName)  add a field as if it were  <input type="file"> , the third argument fileName sets file name (not form field name), as it were a name of the file in user’s filesystem formData.delete(name)  remove the field with the given name formData.get(name)  get the value of the field with the given name formData.has(name)  if there exists a field with the given name, returns  true , otherwise  false formData.set(name, value)  difference is that .set removes all fields with the given name, and then appends a new field, it makes sure there’s only one field with such name formData.set(name, blob, fileName)  same 
      for(let [name, value] of formData) {
        console.log(`${name} = ${value}`) 
        // key1 = value1
        // key2 = value2
      }
  
      formData.forEach((x, y, z) => console.log(x,y,z)) 
      // value1 key1 FormData{}
      // value2 key2 FormData{}
       File in a form The form is always sent as  'Content-Type': 'multipart/form-data' this encoding allows to send files 
      <form id="formElem">
        <input type="text" name="firstName" value="John">
        Picture: <input type="file" name="picture" accept="image/*">
        <input type="submit">
      </form>
       
      formElem.onsubmit = async (e) => {
        e.preventDefault()
        const response = await fetch('/article/formdata/post/user-avatar', {
          method: 'POST',
          body: new FormData(formElem)
        })
        const result = await response.json()
        alert(result.message) // User with picture, firstName: John, picture size:185123
      }
       Blob in a form convenient to send an image as a part of the form, with additional fields, such as “name” and other metadata example submits an image from  <canvas> , along with some other fields, as a form, using FormData 
      <body style="margin:0">
        <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>
        <input type="button" value="Submit" onclick="submit()">
      </body>
       
      canvasElem.onmousemove = function(e) {
        let ctx = canvasElem.getContext('2d')
        ctx.lineTo(e.clientX, e.clientY)
        ctx.stroke()
      }
  
      async function submit() {
        let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'))
        let formData = new FormData()
        formData.append("firstName", "John")
        formData.append("image", imageBlob, "image.png")
        let response = await fetch('/article/formdata/post/image-form', {
          method: 'POST',
          body: formData
        })
        let result = await response.json()
        alert(result.message)
      }
       Download progress response.body  is an object of  ReadableStream  class and gives full control over the reading process it provides body chunk-by-chunk, as it comes no way to track upload progress instead of response.json() or other methods we obtain a reader  we can’t use both these methods to read the same response then we get total length, it may be absent for cross-origin requests, but usually it’s at place then we read the data and add body chunks into the array done  is  true  for the last chunk value  is  Uint8Array  of the chunk bytes after the response is consumed, we won’t be able to “re-read” it using  response.json()  or another way then concatenate chunks into single  Uint8Array then we need to create a string from  chunksAll  byte array finally parse it into JSON 
      // Step 1: start the fetch
      const response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits?per_page=100')
      const reader = response.body.getReader()

      // Step 2: get total length
      const contentLength = +response.headers.get('Content-Length')

      // Step 3: read the data
      let receivedLength = 0 // received that many bytes at the moment
      let chunks = [] // array of received binary chunks (comprises the body)
      while(true) {
        const {done, value} = await reader.read()
        if (done) break
        chunks.push(value)
        receivedLength += value.length
        console.log(`Received ${receivedLength} of ${contentLength}`)
      }

      // Step 4: concatenate chunks into single Uint8Array
      let chunksAll = new Uint8Array(receivedLength)
      let position = 0
      for(let chunk of chunks) {
        chunksAll.set(chunk, position)
        position += chunk.length
      }

      // Step 5: decode into a string
      let result = new TextDecoder("utf-8").decode(chunksAll)

      // We're done!
      let commits = JSON.parse(result)
      console.log(commits[0].author.login)
       Binary content instead of a string... just replace steps 4 and 5 with a single line that creates a  Blob  from chunks. 
      let blob = new Blob(chunks)
       Abort object fetch returns a promise, no concept to abort it there is a special object  new AbortController()  that allows to abort asynchronous tasks const controller = new AbortController() controller.abort()  abort! controller.signal  emits the "abort" event controller.signal.aborted  property becomes  true The party that performs a cancelable operation gets the "signal" object and sets the listener to trigger when  controller.abort()  is called. 
      const signal = controller.signal
      signal.addEventListener('abort', () => alert("abort!"))
       Abort fetch request to cancel fetch, pass the  signal  property of an  AbortController  as a fetch option fetch will listen to abort events on signal when a fetch is aborted, its promise rejects with an error  AbortError so we should handle it, e.g. in  try..catch AbortController  allows to cancel multiple fetches at once 
      let controller = new AbortController()
      // abort in 1 second
      setTimeout(() => controller.abort(), 1000)

      try {
        let response = await fetch('/article/fetch-abort/demo/hang', {
          signal: controller.signal
        })
      } catch(err) {
        if (err.name == 'AbortError') { // handle abort()
          alert("Aborted!")
        } else {
          throw err
        }
      }
       Abort multiple fetches... 
      const urls = ['url1', 'url2', 'url3']
      const controller = new AbortController()

      const fetchJobs = urls.map(url => fetch(url, {
        signal: controller.signal
      }))

      const results = await Promise.all(fetchJobs)
      controller.abort() // if called from anywhere, it aborts all fetches
       Abort asynchronous task together with fetches... 
      const urls = ['url1', 'url2', 'urlN'] 
      const controller = new AbortController()
      const ourJob = new Promise((resolve, reject) => {
        //...
        controller.signal.addEventListener('abort', reject)
      })

      const fetchJobs = urls.map(url => fetch(url, {
        signal: controller.signal
      }))

      const results = await Promise.all([...fetchJobs, ourJob])
       Fetch API https://javascript.info/fetch Most of these options are used rarely 
      const promise = fetch(url, {
        method: "GET", // POST, PUT, DELETE, etc
        headers: {
          // the content type header value is usually auto-set depending on the request body
          "Content-Type": "text/plain;charset=UTF-8"
        },
        body: undefined, // string, FormData, Blob, BufferSource, or URLSearchParams
        referrer: "about:client", // or "" to send no Referer header, or an url from the current origin
        referrerPolicy: "no-referrer-when-downgrade", // no-referrer, origin, same-origin...
        // This option may be useful when the URL for fetch comes from a 3rd-party
        mode: "cors", // same-origin, no-cors
        // whether fetch should send cookies and HTTP-Authorization headers with the request
        credentials: "same-origin", // omit, include
        // The cache options allows to ignore HTTP-cache or fine-tune its usage
        cache: "default", // no-store, reload, no-cache, force-cache, or only-if-cached
        // Normally, fetch transparently follows HTTP-redirects, like 301, 302 etc.
        // The redirect option allows to change that: "follow" – the default, follow HTTP-redirects, "error" – error in case of HTTP-redirect, "manual" – allows to process HTTP-redirects manually.
        redirect: "follow", // manual, error
        // The integrity option allows to check if the response matches the known-ahead checksum.
        // Then fetch will calculate SHA-256 on its own and compare it with our string
        // In case of a mismatch, an error is triggered.
        integrity: "", // a hash, like "sha256-abcdef1234567890"
        // We can use the window.onunload event normally associated network requests are aborted
        // keepalive option tells the browser to perform the request in the background, even after it leaves the page
        keepalive: false, // true
        signal: undefined, // AbortController to abort request 
        window: window // null
      })
       Long polling simplest way of having persistent connection with server no need to periodically request info, which is good performance wise no delay in messaging a request is sent from browser to the server connection hangs, the server doesn’t close the connection until it has a message to send when a message appears the server responds to the request with it connection is closed the browser makes a new request immediately and so on... long polling works great in situations when messages are rare subscribe()  function makes a fetch, then waits for the response, handles it and calls itself again server should be ok with many pending connections 
      async function subscribe() {
        let response = await fetch("/subscribe")
      
        if (response.status == 502) {
          // Status 502 is a connection timeout error,
          // may happen when the connection was pending for too long,
          // and the remote server or a proxy closed it
          // let's reconnect
          await subscribe()
        } else if (response.status != 200) {
          // An error - let's show it
          showMessage(response.statusText)
          // Reconnect in one second
          await new Promise(resolve => setTimeout(resolve, 1000));
          await subscribe()
        } else {
          // Get and show the message
          let message = await response.text()
          showMessage(message)
          // Call subscribe() again to get the next message
          await subscribe()
        }
      }
      
      subscribe()
       Fetch not catching some errors For ex. it does not throw an 403 error and you need to manually check the response.  Axios just throws an error. 

fetch

Let's fetch data from    jsonplaceholder  and set a state with  useState()  hook upon success or error, which will lead to a render. We put artificial 1s delay function between request and response to be able to see a state change on a screen, otherwise it happens too fast. 
        function sleeper(ms) {
          return function(x) {
            return new Promise(resolve => setTimeout(() => resolve(x), ms));
          };
        }
       Jsonplaceholder  returns 100 items, so every time we ask data under number 101 and more we get an error for our http request. 
      import axios from 'axios'
      import randomNumFromTo from '/functions/randomNumFromTo';
      import sleeper from '/functions/sleeper';

      function ComponentWithUseState() {
        const [state, setState] = useState({ loading: false, errorMsg: '', title: '', postNum: -1 })
      
        function getTitle() {
          const postNum = randomNumFromTo(1, 150)
          const url = `https://jsonplaceholder.typicode.com/posts/${postNum}`
          setState({ ...state, loading: true, postNum: postNum, errorMsg: '' })
          axios(url)
            .then(sleeper(1000))
            .then(res => setState({ loading: false, errorMsg: '', title: res.data.title, postNum: postNum }))
            .catch(() => setState({ loading: false, errorMsg: 'ERROR', title: '', postNum: postNum }))
        }
      
        return (
          <>
            <button onClick={getTitle}>Get post titles</button>&emsp;
            Post #{state.postNum} &emsp; Title: {state.loading ? 'Loading...' : state.title} &emsp;
            <span style={{ color: 'red' }}>{state.errorMsg}</span>
          </>
        )
      }
       

fetch with loading

field-sizing: content; Allows the element to adjust its size to fit its contents  

field-sizing

Fig is an app for autocomplete in terminal in mac. Homebrew Install package manager for mac  Homebrew  if you did't before  /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" . iTerm Install  iTerm . Oh My Zsh Install  Oh My Zsh framework  for ZSH terminal  sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" .  Make ZSH the default terminal  chsh -s /bin/zsh   powerlevel10k Install a  powerlevel10k theme for the zsh terminal  git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k   Do not forget about  MesloLGS NF fonts   Configure theme by command  p10k configure                Now terminal looks like  Make sure that zsh configuration file uses  powerlevel10k  theme by opening file  code -a ~/.zshrc  and checking existence of the line  ZSH_THEME="powerlevel10k/powerlevel10k" VSCode To use iTerm app as VSCode terminal add following int VSCode json configuration file 
      "terminal.external.osxExec": "iTerm.app",
      "terminal.integrated.defaultProfile.osx": "zsh",
      "terminal.integrated.tabs.enabled": true,
      "terminal.integrated.fontFamily": "MesloLGS NF",
      "terminal.integrated.cursorStyle": "line",
      "terminal.integrated.lineHeight": 1,
       Autocomplete via FIG Download  Fig  for autocomplete and IntelliSense in iTerm. We got IntelliSense in the terminal inside VSCode. Path autocomplete  Git autocomplete  Custom IntelliSense Instruction how to add your custom IntelliSense can be found  here .  Firstly clone Fig  repo  from GitHub to your computer by  git clone git@github.com:withfig/autocomplete.git figAutocomplete   To create our own autocomplete we need to create it with internal tool and re-build the project.  That is why drop into Fig project  cd figAutocomplete  & install all internal packages  npm i   Create an own snippet file with  npm run create-spec myOwnSnippet  & run dev mode  npm run dev    Open the snippet boiler plate and modify it  code src/myOwnSnippet.ts   
      const completionSpec: Fig.Spec = {
        name: "myOwnSnippet",
        description: "Some description",
        subcommands: [{
          name: "my_subcommand",
          description: "Example subcommand",
          subcommands: [{
            name: "my_nested_subcommand",
            description: "Nested subcommand, example usage: 'myOwnSnippet my_subcommand my_nested_subcommand'"
          }],
        }],
        options: [{
          name: ["--help", "-h"],
          description: "Show help for myOwnSnippet",
        }],
        // Only uncomment if myOwnSnippet takes an argument
        // args: {}
      };
      export default completionSpec;
       Ones we done  npm run build && npm run copy:all Your .js file transpiled from the .ts one can be found and read from Fig folder  code ~/.fig/autocomplete/build/myOwnSnippet.js  My completion for Git Open the file with completions for git  code ~/Git/figAutocomplete/src/git.ts  and add following to the end of the file. 
      additionalSuggestions: [
        {
          name: "commit -m 'msg'",
          description: "Git commit shortcut",
          insertValue: "commit -m '{cursor}'",
          icon: "fig://template?color=2ecc71&badge=🔥",
          // type: "shortcut",
        },
        {
          name: "git add . && git commit -m 'msg' && git push",
          description: "My git shortcut",
          insertValue: "add . && git commit -m '{cursor}' && git push",
          icon: "fig://template?color=2ecc71&badge=💩",
          // type: "shortcut",
        },
      ],
       Run  npm run build && npm run copy:all  Settings code ~/.fig/settings.json  open settings file. Ruby & python version in right corner After React Native installation I got annoying ruby logo with version at the end of every line in terminal. To remove it... code ~/.p10k.zsh Just play with configurations using as minimal options as possible Highlighting https://fig.io/plugins/other/zsh-syntax-highlighting Some commands fig doctor  check status of fig fig restart  restart

file to hash 
        fileHash = crypto.createHash('sha256').update(file.buffer).digest('hex')
      

file to hash

flex

activeElement document.activeElement  returns the Element within the DOM that currently has focus if you need to understand which element is focused and can not see visually, do following 
        document.addEventListener('focusin', function(event) {
          console.log('Focused element:', document.activeElement)
        })
      

focused element

input, textarea input.value = "New value" textarea.value = "New text" input.checked = true textarea.innerHTML  - do not use, stores only initial HTML, not the current value select, option select.options  the collection of  <option>  els select.value  the value of the currently selected  <option> select.selectedIndex   the index of the currently selected  <option> select.options[2].selected = true  set a value for a  <select> select.selectedIndex = 2  same select.value = 'banana'  same multiple options selection <select>  allows to select multiple options if it has  multiple  attribute This attribute is rarely used, though 
      <select id="select" multiple>
        <option value="blues" selected>Blues</option>
        <option value="rock" selected>Rock</option>
        <option value="classic">Classic</option>
      </select>
       Get all selected values from multi-select... 
      const selected = Array.from(select.options)
        .filter(option => option.selected)
        .map(option => option.value);

      alert(selected) // blues,rock
       new Option 
      option = new Option(text, value, defaultSelected, selected)
       text  the text inside the option value  the option value defaultSelected  if  true , then selected HTML-attribute is created selected  if  true , then the option is selected 
      let option = new Option("Text", "value", true, true) // selected // set both of them
      let option = new Option("Text", "value") // unselected

      option.selected //  the option selected
      option.index // number of the option among the others in its <select>
      option.text // Text content of the option (seen by the visitor).
       Submit on  Enter To submit a form either click on button or push  Enter  
      <form
        onSubmit={e => {
          e.preventDefault()
          alert('submitted')
        }}
      >
        <input type="text" placeholder='Press Enter' />
        <button>Go</button>
      </form>
       Inputs in React Here are uncontrolled React input elements of different types in a form 
        <form action="/api/action_for_inputs_post" method="POST" autoComplete="off" name="myForm" >
          <fieldset>
            <legend>Radios</legend>
            <input type="radio" id="html" name="fav_language" defaultValue="HTML" defaultChecked />
            <label htmlFor="html">HTML</label><br />
            <input type="radio" id="css" name="fav_language" defaultValue="CSS" />
            <label htmlFor="css">CSS</label><br />
            <input type="radio" id="javascript" name="fav_language" defaultValue="JavaScript" />
            <label htmlFor="javascript">JavaScript</label>
          </fieldset>

          <fieldset>
            <legend>Checkboxes</legend>
            <input type="checkbox" id="vehicle1" name="vehicles" defaultValue="Bike" defaultChecked />
            <label htmlFor="vehicle1"> I have a bike</label><br />
            <input type="checkbox" id="vehicle2" name="vehicles" defaultValue="Car" defaultChecked />
            <label htmlFor="vehicle2"> I have a car</label><br />
            <input type="checkbox" id="vehicle3" name="vehicles" defaultValue="Boat" />
            <label htmlFor="vehicle3"> I have a boat</label>
          </fieldset>

          <fieldset>
            <legend>Text inputs</legend>
            <label htmlFor="fname">First name - readonly:</label><br />
            <input type="text" id="fname" name="user" defaultValue="John" readOnly /><br />
            <label htmlFor="lname">Last name - disabled:</label><br />
            <input type="text" id="lname" name="user" defaultValue="Doe" disabled /><br />
            <label htmlFor="age">age:</label><br />
            <input type="number" id="age" name="user" defaultValue="35"  />
          </fieldset>

          <fieldset>
            <legend>List input with datalist</legend>
            <input list="browsers" name="browser" defaultValue="Chrome" />
            <datalist id="browsers">
              <option defaultValue="Internet Explorer">Internet Explorer</option>
              <option defaultValue="Firefox">Firefox</option>
              <option defaultValue="Chrome">Chrome</option>
              <option defaultValue="Opera">Opera</option>
              <option defaultValue="Safari">Safari</option>
            </datalist>
          </fieldset>

          <fieldset>
            <legend>Select</legend>
            <label htmlFor="cars">Choose a car:</label><br />
            <select id="cars" name="cars" size="3" multiple  defaultValue={["Volvo", "Fiat"]}>
              <option>Volvo</option>
              <option>Saab</option>
              <option>Fiat</option>
              <option>Audi</option>
            </select>
          </fieldset>

          <fieldset>
            <legend>Textarea</legend>
            <textarea name="message" rows="10" cols="30" defaultValue='The cat was playing in the garden.' />
          </fieldset>

          <fieldset>
            <legend>Password</legend>
            <label htmlFor="username">Username:</label><br />
            <input type="text" id="username" name="login" defaultValue="login" /><br />
            <label htmlFor="pwd">Password:</label><br />
            <input type="password" id="pwd" name="pwd" defaultValue="password" />
          </fieldset>

          <fieldset>
            <legend>Color</legend>
            <label htmlFor="favcolor">Select your favorite color:</label>
            <input type="color" id="favcolor" name="favcolor" defaultValue="#ff0000" />
          </fieldset>

          <fieldset>
            <legend>Date</legend>
            <label htmlFor="birthday">Birthday:</label>
            <input type="date" id="birthday" name="birthday" min="2010-01-02" max="2025-12-31" defaultValue="2022-06-06" />
          </fieldset>

          <fieldset>
            <legend>Datetime-local</legend>
            <label htmlFor="birthdaytime">Birthday (date and time):</label>
            <input type="datetime-local" id="birthdaytime" name="birthday time" defaultValue="2022-04-08T14:18" />
          </fieldset>

          <fieldset>
            <legend>Email</legend>
            <label htmlFor="email">Enter your email:</label>
            <input type="email" id="email" name="email" defaultValue="mail@gmail.com" />
          </fieldset>

          <fieldset>
            <legend>File</legend>
            <label htmlFor="my-file">Select a file:</label>
            <input type="file" id="myfile1" name="my-file" multiple  />
            <input type="file" id="myfile2" name="my-file" multiple  />
            <input type="file" id="myfile3" name="my-file" multiple  />
          </fieldset>

          <fieldset>
            <legend>Hidden input</legend>
            <label htmlFor="notHidden">Not hidden input:</label>
            <input type="text" id="not-hidden-input" name="notHidden" defaultValue="not hidden value" /> <br />
            <label htmlFor="hidden" style={{display: 'none'}}>Hidden input:</label>
            <input type="hidden" id="hidden-input" name="hidden" defaultValue="hidden value" />
          </fieldset>

          <fieldset>
            <legend>Month</legend>
            <label htmlFor="bdaymonth">Birthday (month and year):</label>
            <input type="month" id="bdaymonth" name="bdaymonth" defaultValue="2022-05" />
          </fieldset>

          <fieldset>
            <legend>Number</legend>
            <label htmlFor="quantity">Quantity (between 1 and 5):</label>
            <input type="number" id="quantity" name="quantity" min="1" max="5" defaultValue="3" />
          </fieldset>

          <fieldset>
            <legend>Range</legend>
            <label htmlFor="vol">Volume (between 0 and 50):</label>
            <input type="range" id="vol" name="vol" min="0" max="50" defaultValue="10" />
          </fieldset>

          <fieldset>
            <legend>Search</legend>
            <label htmlFor="gsearch">Search Google:</label>
            <input type="search" id="gsearch" name="gsearch" defaultValue="how to cook pasta" />
          </fieldset>

          <fieldset>
            <legend>Tel</legend>
            <label htmlFor="phone">Enter your phone number:</label>
            <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" defaultValue="123-45-678" />
          </fieldset>

          <fieldset>
            <legend>Time</legend>
            <label htmlFor="time">Select a time:</label>
            <input type="time" id="time" name="time" defaultValue="20:46" />
          </fieldset>

          <fieldset>
            <legend>Url</legend>
            <label htmlFor="homepage">Add your homepage:</label>
            <input type="url" id="homepage" name="homepage" defaultValue="https://myvocab.org" />
          </fieldset>

          <fieldset>
            <legend>Week</legend>
            <label htmlFor="week">Select a week:</label>
            <input type="week" id="week" name="week" defaultValue="2022-W15" />
          </fieldset>

          <button>Submit button</button>
          <input type="submit" defaultValue="Submit input" />
          <input type="reset" defaultValue="Reset to default values" />

          <style jsx global>{`
            * { box-sizing: border-box; }
            fieldset { margin-bottom: 20px; padding: 10px; }
            legend { font-weight: 600; }
            label { margin: 5px; }
          `}</style>
        </form>
       Inputs in HTML 
      <form action="/action" method="POST" autocomplete="off" name="myForm" >

      <fieldset>
        <legend>Radios</legend>
        <input type="radio" id="html" name="fav_language" value="HTML" checked />
        <label for="html">HTML</label><br />
        <input type="radio" id="css" name="fav_language" value="CSS" />
        <label for="css">CSS</label><br />
        <input type="radio" id="javascript" name="fav_language" value="JavaScript" />
        <label for="javascript">JavaScript</label>
      </fieldset>

      <fieldset>
        <legend>Checkboxes</legend>
        <input type="checkbox" id="vehicle1" name="vehicles" value="Bike" checked />
        <label for="vehicle1"> I have a bike</label><br />
        <input type="checkbox" id="vehicle2" name="vehicles" value="Car" checked />
        <label for="vehicle2"> I have a car</label><br />
        <input type="checkbox" id="vehicle3" name="vehicles" value="Boat" />
        <label for="vehicle3"> I have a boat</label>
      </fieldset>

      <fieldset>
        <legend>Text inputs</legend>
        <label for="fname">First name - readonly:</label><br />
        <input type="text" id="fname" name="user" value="John" readonly /><br />
        <label for="lname">Last name - disabled:</label><br />
        <input type="text" id="lname" name="user" value="Doe" disabled /><br />
        <label for="age">age:</label><br />
        <input type="number" id="age" name="user" value="35"  />
      </fieldset>

      <fieldset>
        <legend>List input with datalist</legend>
        <input list="browsers" name="browser" value="Chrome" />
        <datalist id="browsers">
          <option value="Internet Explorer">Internet Explorer</option>
          <option value="Firefox">Firefox</option>
          <option value="Chrome">Chrome</option>
          <option value="Opera">Opera</option>
          <option value="Safari">Safari</option>
        </datalist>
      </fieldset>

      <fieldset>
        <legend>Select</legend>
        <label for="cars">Choose a car:</label><br />
        <select id="cars" name="cars" size="3" multiple>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="fiat">Fiat</option>
          <option value="audi" selected>Audi</option>
        </select>
      </fieldset>

      <fieldset>
        <legend>Textarea</legend>
        <textarea name="message" rows="10" cols="30">
          The cat was playing in the garden.
        </textarea>
      </fieldset>

      <fieldset>
        <legend>Password</legend>
        <label for="username">Username:</label><br />
        <input type="text" id="username" name="login" value="login" /><br />
        <label for="pwd">Password:</label><br />
        <input type="password" id="pwd" name="pwd" value="password" />
      </fieldset>

      <fieldset>
        <legend>Color</legend>
        <label for="favcolor">Select your favorite color:</label>
        <input type="color" id="favcolor" name="favcolor" value="#ff0000" />
      </fieldset>

      <fieldset>
        <legend>Date</legend>
        <label for="birthday">Birthday:</label>
        <input type="date" id="birthday" name="birthday" min="2010-01-02" max="2025-12-31" value="2022-06-06" />
      </fieldset>

      <fieldset>
        <legend>Datetime-local</legend>
        <label for="birthdaytime">Birthday (date and time):</label>
        <input type="datetime-local" id="birthdaytime" name="birthday time" value="2022-04-08T14:18" />
      </fieldset>

      <fieldset>
        <legend>Email</legend>
        <label for="email">Enter your email:</label>
        <input type="email" id="email" name="email" value="mail@gmail.com" />
      </fieldset>

      <fieldset>
        <legend>File</legend>
        <label for="my-file">Select a file:</label>
        <input type="file" id="myfile1" name="my-file" multiple  />
        <input type="file" id="myfile2" name="my-file" multiple  />
        <input type="file" id="myfile3" name="my-file" multiple  />
      </fieldset>

      <fieldset>
        <legend>Hidden input</legend>
        <label for="notHidden">Not hidden input:</label>
        <input type="text" id="not-hidden-input" name="notHidden" value="not hidden value" /> <br />
        <label for="hidden" style="display: none;">Hidden input:</label>
        <input type="hidden" id="hidden-input" name="hidden" value="hidden value" />
      </fieldset>

      <fieldset>
        <legend>Month</legend>
        <label for="bdaymonth">Birthday (month and year):</label>
        <input type="month" id="bdaymonth" name="bdaymonth" value="2022-05" />
      </fieldset>

      <fieldset>
        <legend>Number</legend>
        <label for="quantity">Quantity (between 1 and 5):</label>
        <input type="number" id="quantity" name="quantity" min="1" max="5" value="3" />
      </fieldset>

      <fieldset>
        <legend>Range</legend>
        <label for="vol">Volume (between 0 and 50):</label>
        <input type="range" id="vol" name="vol" min="0" max="50" value="10" />
      </fieldset>

      <fieldset>
        <legend>Search</legend>
        <label for="gsearch">Search Google:</label>
        <input type="search" id="gsearch" name="gsearch" value="how to cook pasta" />
      </fieldset>

      <fieldset>
        <legend>Tel</legend>
        <label for="phone">Enter your phone number:</label>
        <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" value="123-45-678" />
      </fieldset>

      <fieldset>
        <legend>Time</legend>
        <label for="time">Select a time:</label>
        <input type="time" id="time" name="time" value="20:46" />
      </fieldset>

      <fieldset>
        <legend>Url</legend>
        <label for="homepage">Add your homepage:</label>
        <input type="url" id="homepage" name="homepage" value="https://myvocab.org" />
      </fieldset>

      <fieldset>
        <legend>Week</legend>
        <label for="week">Select a week:</label>
        <input type="week" id="week" name="week" value="2022-W15" />
      </fieldset>


      <button>Submit button</button>
      <input type="submit" value="Submit input" />
      <input type="reset" value="Reset to default values" />
      </form> 
        API route in NextJS 
      // pages\api\action_for_inputs_post.js
      export default function handler(req, res) {
        res.status(200).json(req.body)
      }
       Output 

forms & controls

Installation https://www.framer.com/motion/introduction/#quick-start npm i framer-motion  - install import { motion } from "framer-motion"  - import Some info https://egghead.io/lessons/react-create-micro-interactions-with-framer-motion-gesture-props https://www.youtube.com/playlist?list=PLNG2YBDrzK-yhlQtfsrzzQvaLDVj-pMXI https://www.youtube.com/playlist?list=PL4cUxeGkcC9iHDnQfTHEVVceOEBsOf07i Simple animation 
      import { motion } from 'framer-motion'

      const Example1 = () => (
        <motion.div
          initial={{ opacity: 0, fontSize: '0px', color: '#fff', x: '-100vw' }}
          animate={{ opacity: 1, fontSize: '30px', color: '#ff2994', x: 0 }}
          transition={{ delay: 0.5, duration: 1.5, type: 'spring' }}
        >
          Animated text
        </motion.div>
      )
        Hover  
      <motion.button
        whileHover={{ scale: 1.2 }}
      >
        Animated hover
      </motion.button>
       With MUI 
      <Button
        variant="contained"
        component={motion.div}
        whileHover={{
          scale: 1.2,
          transition: { duration: 0.3 }
        }}
      >
        Animated hover
      </Button>
        Variants Variants allows to extract  initial ,  animate  &  transition  props into an external object and reference it in multiple components. It makes code cleaner 
      const containerVariants = {
        hidden: { opacity: 0, x: '-100vw' },
        visible: { opacity: 1, x: 0, transition: { type: 'spring', delay: 1} }
      }

      const Example4 = () => (
        <motion.div
          variants={containerVariants}
          initial='hidden'
          animate='visible'
          css={{ fontSize: '30px' }}
        >
          Animated text
        </motion.div>
      )
        Variants props propagation If we have a parent motions element with enabled variants And it has children with another motions elements with same variant prop Then children will inherit  initial  and  animate  props from the parent, unless not specified other values 
      const containerVariants = {
        hidden: { opacity: 0, x: '-100vw' },
        visible: { opacity: 1, x: 0, transition: { type: 'spring', delay: 1 } }
      }

      const Example5 = ({ children }) => (
        <motion.div
          variants={containerVariants}
          initial='hidden'
          animate='visible'
          css={{ fontSize: '30px' }}
        >
          Parent motion
          { children }
        </motion.div>
      )

      const Example6 = ({ children }) => (
        <motion.div
          variants={containerVariants}
          css={{ color: 'grey' }}
        >
          Child motion
        </motion.div>
      )

      <Example5>
        <Example6 />
      </Example5>
        beforeChildren We have animated parent and children By default animations starts at the same time everywhere Usually we want parent to animate and only after start children animation We may play with delays, but that is not elegant With  variants  we can use  when  prop of  transition  with  beforeChildren  value to achieve it 
      const parentVariants = {
        hidden: { x: '-100vw' },
        visible: { x: 0, transition: { type: 'spring', delay: 1, when: 'beforeChildren' } }
      }

      const childVariants = {
        hidden: { y: '100%' },
        visible: { y: 0 }
      }

      const Example7 = ({ children }) => (
        <motion.div
          variants={parentVariants}
          initial='hidden'
          animate='visible'
          css={{ fontSize: '30px', overflow: 'hidden' }}
        >
          Parent motion
          <motion.div
            variants={childVariants}
            css={{ color: 'grey', fontSize: '16px' }}
          >
            Child motion
          </motion.div>
        </motion.div>
      )
        Stagger children 
      const parentVariants2 = {
        hidden: { x: '-100vw' },
        visible: {
          x: 0,
          transition: {
            type: 'spring',
            delay: 1,
            when: 'beforeChildren',
            staggerChildren: 0.5
          }
        }
      }

      const childVariants2 = {
        hidden: { y: 100 },
        visible: { y: 0 }
      }

      const Example8 = ({ children }) => (
        <motion.div
          variants={parentVariants2}
          initial='hidden'
          animate='visible'
          css={{ fontSize: '30px', overflow: 'hidden' }}
        >
          Parent motion
          <motion.div
            variants={childVariants2}
            css={{ color: 'grey', fontSize: '16px' }}
          >
            Child motion 1
          </motion.div>
          <motion.div
            variants={childVariants2}
            css={{ color: 'grey', fontSize: '16px' }}
          >
            Child motion 2
          </motion.div>
          <motion.div
            variants={childVariants2}
            css={{ color: 'grey', fontSize: '16px' }}
          >
            Child motion 3
          </motion.div>
        </motion.div>
      )
        Keyframe 
      const Example9 = () => (
        <motion.button
          whileHover={{ scale: [1.2, 1, 1.2, 1, 1.2, 1, 1.2, 1, 1.2, 1, 1.2] }}
        >
          Animated hover with keyframes
        </motion.button>
      )
        Repeating animation 
      const Example10 = () => (
        <motion.button
          whileHover={{ scale: 1.2 }}
          transition={{ repeat: Infinity }}
        >
          Animated hover with yo-yo
        </motion.button>
      )
        Animate unmount Before we just animated a component's appetence  With  AnimatePresence  can animate also removal of a component 
      import { motion, AnimatePresence } from 'framer-motion'

      const Example11 = () => {
        const [isShow, setIsShow] = useState(false)

        return (
          <>
            <AnimatePresence>
              {isShow && (
                <motion.h2
                  initial={{ x: '-100vw' }}
                  animate={{ x: 0 }}
                  exit={{ x: '100vw' }}
                >
                  Animated text
                </motion.h2>
              )}
            </AnimatePresence>
            <button onClick={() => setIsShow(!isShow)}>Toggle text</button>
          </>
        )
      }
        onAnimationComplete That is how I made a slide effect between invoices at my work. 
      import { motion, AnimatePresence } from 'framer-motion'

      export const Invoice = () => {
        const dispatch = useDispatch()
        const { data: user } = useUserQuery()
        const closeDialog = () => dispatch(handleCloseInvoice(user))
        const { id } = useParams()

        // disable scroll on body due to custom backdrop
        //! extract into a custom hook
        useEffectOnce(() => {
          document.body.style.overflow = 'hidden'
          return () => {
            document.body.style.overflow = 'auto'
          }
        })

        useUnmount(() => {
          queryClient.invalidateQueries({ queryKey: ['invoices'] })
          setTimeout(() => { queryClient.invalidateQueries({ queryKey: ['invoices'] }) }, 5000)
        })

        return (
          <Backdrop
            open={!!id}
            sx={{
              background: '#00000080',
              zIndex: 666
            }}
          >
            <AnimatePresence
              initial={false}
              mode='wait'
            >
              <motion.div
                key={id}
                initial={{ x: '100vw' }}
                animate={{ x: 0 }}
                exit={{ x: '-100vw' }}
                transition={{ ease: 'linear' }}
                onAnimationComplete={(definition) => {
                  // triggered twice on exit and enter animation completion
                  if (definition.x === 0) dispatch(handleInvoiceOpened(id, user))
                }}
              >
                <Box
                  data-testid='invoice-container'
                  sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    width: '95vw',
                    height: '95vh',
                    maxWidth: '95vw',
                    maxHeight: '95vh',
                    zIndex: 1000
                  }}
                >
                  <InvoiceTitle closeDialog={closeDialog} />
                  <InvoiceContent />
                  <InvoiceFooter closeDialog={closeDialog} />
                </Box>
              </motion.div>
            </AnimatePresence>
          </Backdrop>
        )
      }
       Animate svg 
      const Example12 = () => {
        return (
          <svg
            viewBox="0 0 100 20"
            xmlns="http://www.w3.org/2000/svg"
            css={{
              fill: 'none',
              stroke: 'black',
              strokeWidth: 2,
              strokeDasharray: 10
            }}
          >
            <motion.path
              d="M 0,10 h100"
              initial={{ pathLength: 0 }}
              animate={{ pathLength: 1 }}
              transition={{ duration: 2, ease: 'easeInOut', delay: 2 }}
            />
          </svg>
        )
      }
        Loader 
      const Example13 = () => {
        return (
          <motion.div
            css={{
              width: '10px',
              height: '10px',
              margin: '40px auto',
              borderRadius: '50%',
              background: 'grey'
            }}
            animate={{
              x: [-20, 20],
              y: [0, -30]
            }}
            transition={{
              x: {
                duration: 0.6,
                repeat: Infinity,
                repeatType: 'mirror'
              },
              y: {
                duration: 0.3,
                repeat: Infinity,
                repeatType: 'mirror',
                ease: 'easeInOut'
              }
            }}
          >
          </motion.div>
        )
      }
        Change between animation properties 
      const Example14 = () => {
        const [x, cycleX] = useCycle(0, 50, 100)

        return (
          <>
            <motion.div
              css={{
                width: '10px',
                height: '10px',
                background: 'red',
                borderRadius: '50%'
              }}
              animate={{ x }}
            />
            <button onClick={() => cycleX()}>Change position</button>
          </>
        )
      }
        Change between animation variants 
      const variants = {
        animationOne: {
          x: [-20, 20],
          y: 0,
          transition: {
            x: {
              duration: 0.6,
              repeat: Infinity,
              repeatType: 'mirror'
            }
          }
        },
        animationTwo: {
          x: 0,
          y: [-20, 20],
          transition: {
            y: {
              duration: 0.6,
              repeat: Infinity,
              repeatType: 'mirror'
            }
          }
        }
      }

      const Example15 = () => {
        const [animation, cycleAnimation] = useCycle('animationOne', 'animationTwo')

        return (
          <>
            <motion.div
              css={{
                width: '10px',
                height: '10px',
                margin: '40px auto',
                borderRadius: '50%',
                background: 'green'
              }}
              variants={variants}
              animate={animation}
            >
            </motion.div>
            <button onClick={() => cycleAnimation()}>Change animation variant</button>
          </>
        )
      }
        Layout & Custom prop with  custom  prop we may send data to variants for dynamic animation with  layoutId  prop we may animate movements of siblings when this element is added or removed 
      const itemsStackVariants = {
        hidden: {
          y: -100,
          opacity: 0,
          transition: {
            duration: 0.3
          }
        },
        visible: (num) => ({
          y: 0,
          opacity: 1,
          transition: {
            duration: 0.3,
            delay: 0.05 * num
          }
        })
      }

      function Example16() {
        const [items, setItems] = useState([5, 4, 3, 2, 1])

        return (
          <>
            <button
              onClick={() => {
                setItems([items[0] + 1, ...items])
              }}
            >
              add
            </button>
            <button
              onClick={() => {
                if (items.length < 2) return
                setItems(items.slice(1))
              }}
            >
              remove
            </button>
            <div>{JSON.stringify(items)}</div>

            <div style={{ marginTop: 50 }}>
              <AnimatePresence initial={true}>
                {items.map((num) => (
                  <motion.div
                    key={num}
                    variants={itemsStackVariants}
                    initial="hidden"
                    animate="visible"
                    exit="hidden"
                    layoutId={num}
                    custom={num}
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                    style={{
                      padding: '10px 20px',
                      marginBottom: 2,
                      border: '1px solid firebrick',
                      whiteSpace: 'nowrap',
                      cursor: 'pointer'
                    }}
                  >
                    item {num}
                  </motion.div>
                ))}
              </AnimatePresence>
            </div>
          </>
        )
      }
       

framer motion

here is the summary of 2 videos   this  &   this this is not only about folder structures, but also how modules interact with each other in that folders 4 different architecture design approaches are reviewed here Classical can be seen in simple apps and youtube tutorials it is not an architecture, but simply tech oriented folder structure applicable for small projects, prototypes, no team involved  with this approach components like pages are isolated but rest of all are not components are interconnected ui components are mixed with business logic at the end we end up in decoupled chaos without clear data flow  Modular Layers it is already an architecture with data flow rules it has mandatory layers  modules  inside have business oriented segments, which do not interact with each other module  is responsible for one task & ideally has all needed to do the task data flows vertically, code from lower layers can not import data from upper layers other folders will naturally appear and permitted  UI UI  layer has most generic UI blocks without any logic  Components components  layer contains a bit more complex components that may use blocks from  ui may include minimal business logic  Modules modules  layer has isolated independent parts with its own responsibilities main business logic is here here may appear apis, states, error handlers, validations, loading logic, etc... module can be big and difficult  module  contains all needed data and functionality inside to be independent from other modules modules  do not interact with each other all logic is encapsulated inside a module and data to the outside should go via public apis  index  file  Pages pages  layer is like  modules  on upper level  page  may have own components, apis, helpers, etc...  page  should be as thin as possible ideally it should be just a list of modules and components as much business logic, helpers, states etc... should be extracted down into modules if possible if 2 modules to be grouped, we do it on a page level  in real project it is not enough just to have  pages ,  modules ,   components  &  ui more global folders will be introduced, like  helpers ,  state ,   config ,  consts  etc...  Pros & cons + code isolation on module layer with public apis + one way data flow + reusability due to layers + modules are easy to modify & delete because pages are thin - not business oriented - not clear what goes to a component, what to a module - what do we do if one module should be used in other module, group logic on a page level, but what if we need it on different pages, then we have to duplicate it - where to keep business related entities like data, types & components for a product, an article, a user - unclear connections are formed in global folders like store, helpers, consts Modular architecture is a way better than classical, but does not fit well for a project with complex business logic and big variety of features Atomic design similar to modular architecture more design oriented was popular 4 years ago   Atomic vs modular design  Atoms  Molecules  Organisms  Templates  Pages  Feature sliced design https://feature-sliced.design/docs/get-started/overview in FSD, a project consists of  layers ,  slices  and   segments  layers are vertically arranged layers are common across all projects ❗️ code on one layer can only interact with code from the layers below In short Layers /shared  dummy ui and utils without any business logic /entities  THINGS which have shape, crud apis, components, internal business logic /features  ACTIONS we apply to THINGS to gain some business value /widgets  combination of shared + entities + features to an independent ready-made blocks, minimum business logic /pages  component which has its own route (layout + widgets), no business logic here /app  app-wide settings, providers, router, store 3 main rules imports can be done only in one way  app   <-- pages   <--   widgets   <--   features   <--   entities   <--   shared entity can not imports from other entity, same for features and widgets index.ts  should be on top level and show what is exposed outside This allows to do complex front end apps and it will not become a mess where all is cross-imported. It may be an overkill for small front end apps or for apps where all business logic is in the backend. Example  Shared layer reusable common functionality e.g. UIKit, libs, API ❗️No business logic here  Entities layer (opt) elements which have a business value e.g. BlogPost, User, Order, Product can include a ui components with slots for content/interactive elements should contain the logic to describe how entity looks and behaves e.g. static UI elements, data stores, CRUD operations, reducers, selectors, mappers  Features layer (opt) entity can act differently depending on features we apply to it feature is an action on entity to achieve a valuable outcome e.g. create-blog-post, login-by-auth, edit-account, publish-video, show-ad, grant-access, show-contact-information may contain interactive UI elements, internal state and API calls that enable value-producing actions  Widgets layer compositional layer to combine lower-level units from entities + features into meaningful assembled blocks with content and interactive buttons wired to the api calls e.g. PostCard, IssuesList, UserProfile in this layer we fill slots left in the UI of Entities with other Entities and interactive elements from Features usually non-business logic come here (e.g. gestures, keyboard interaction, etc) for reach widgets business logic is permitted ❗️ it might be hard to decide what goes into Entities and Features. Do not worry. Just put all logic into Widgets layer. You will feel later if it should be split into Entities and Features Pages layer compositional layer to construct full pages / views / routes ❗️ no business and minimum other logic here  App layer app-wide settings e.g. styles, providers, router, store  Slices a layer can be divided into business oriented slices to keep related code together it is the same as a module in modular design described above e.g. post, add-user-to-friends, news-feed... shared  and  app  layers never have slices as they do not have business logic inside ❗️ slices cannot use other slices on the same layer Closely related slices can be grouped in a folder, but they still should follow rule above ❗️ slices (and segments without slices) must contain the  index  file entry points (public API) with module re-exports code outside can not reference internal slice file structure, but public API only Segments a slice consists of segments to separate code by its technical nature, common segments, ❗️ but not necessarily are ui  ui-logic, components model  business logic, store, actions, selectors lib  utils, helpers, hooks api  communication with external APIs, backend API methods

frontend architecture

Function declaration Function declaration is "hoisted", like "var" in variable declarations. Can be called earlier than it is defined. 
        function showMessage() {
          alert( 'Hello everyone!' );
        } // note! NO semicolon at the end
        showMessage(); // 'Hello everyone!'
       Function is blocked scoped and not visible outside. 
      console.log(fn1()); // "hi"
      console.log(fn2()); // fn2 is not a function !!!
    
      function fn1 () { return "hi"; }
    
      {
        function fn2 () { return "hi" }
      }
       Parameters Full  article  about default parameters can be found here. 
        function showMessage(text) {
          alert(text);
        }
        showMessage('empty message'); // empty message
    
        // default parameters
        function showMessage(text = 'empty message') {
          alert(text);
        }
        showMessage(); // empty message
    
        // default parameters - old fashioned way
        function showMessage(text) {
          if (text === undefined) {
            text = 'empty message';
          }
          alert(text);
        }
        showMessage(); // empty message
    
        // default parameters - improved
        function showMessage(text) {
          text = text || 'empty message';
          alert(text);
        }
        showMessage(); // empty message
       Return Function stops at  return 
        function checkAge(age) {
          if (age >= 18) {
            return 'adult'; // function stops after "return"
          } else {
            return 'underaged';
          }
        }
        checkAge(20) // 'adult'
       Call without parenthesis Shows string representation of the source code 
        function xxx() {
          let a = 1+1;
        }
        console.log(xxx); // xxx() {let a = 1+1;}
       Copy function 
        function sayHi() { alert( "Hello" ); }
        let func = sayHi;
        sayHi === func // true
        func(); // Hello
        sayHi(); // Hello
       Callback It is a function passed to another function as an argument and will be called back later. Simple callback function example. 
      function func(cb) {
        alert('in 1 sec callback func will be triggered')
        setTimeout(() => cb(), 1000)
      }
      
      const msg = () => alert('callback func is triggered')
      
      func(msg)
       Another example.  
        function ask(question, yes, no) {
          if (confirm(question)) yes()
          else no();
        }

        ask(
          "Do you agree?",
          function showOk() { alert("You agreed."); },
          function showCancel() { alert("You canceled the execution."); }
        );

        // if we extract functions from arguments we may just use function names
        ask("Do you agree?", showOk, showCancel); 
       Recursion Recursion is when a function calls itself. JavaScript engine allows 10000 calls maximum. 
      function sumToRec(num) {
        if (num == 1) return num
        if (num > 1) return num + sumToRec(num - 1)
      }
      sumToRec(4) // 1 + 2 + 3 + 4 = 10
       Arguments Functions have special array-like object named 'arguments' that contains all arguments by their index. 
      function args() {
        return( [arguments.length, arguments[0],arguments[1]] );
      }
      args("Julius", "Caesar") // [2, 'Julius', 'Caesar']
      args("Ilya") // [1, 'Ilya', undefined]
       Immediately - invoked function expressions IIFE requires semicolon before They don’t pollute the global object 
      (function() {
        alert("Parentheses around the function");
      })();
  
      (function() {
        alert("Parentheses around the whole thing");
      }());
  
      !function() {
        alert("Bitwise NOT operator starts the expression");
      }();
  
      +function() {
        alert("Unary plus starts the expression");
      }();
       Function is object .name property 
      function sayHi() {}
      sayHi.name; // "sayHi"
       .length property 
      function func(a, b, c, d) {}
      function many(a, b, ...more) {}
      func.length // 4
      many.length // 2 // rest parameters are not counted
       Custom properties in function 
        function sayHi() {
          return("Hi");
        }
        sayHi.wife = ' Kate' // initial value
        sayHi() + sayHi.wife // 'Hi Kate'
       Function expression  
      let myFunc = function(name) { alert( `Hello, ${name}` ); };
       Named Function Expression Allows the function to reference itself internally  
      let sayHi = function func(who) {
        if (who) {
          alert(`Hello, ${who}`);
        } else {
          func("Guest"); // use func to re-call itself
        }
      };
      sayHi(); // Hello, Guest
       Function declaration vs expression Hoisting, function expression is created when the execution reaches it and is usable only from that moment (not "hoisted") 
      sayHi1("John"); // Hello, John
      function sayHi1(name) { alert( `Hello, ${name}` ); }
  
      sayHi2("John"); // error!
      let sayHi2 = function(name) { alert( `Hello, ${name}` ); };
       Function expressions can have a conditional declaration 
      let age = prompt("What is your age?", 18);
      let welcome = (age < 18) ?  function() { alert("Hello!"); } :  function() { alert("Greetings!"); };
      welcome(); // "Greetings!"
       Arrow function expression Convenient for simple one-line actions. 
      // the curly braces are needed for a multiline function
      // if we use curly braces, then we need an explicit "return"
      let sum = (a, b) => {  
        let result = a + b;
        return result; 
      };
  
      // same, but shorter
      let sum = (a, b) => a + b;

      // same, but even shorter
      let sum = function(a, b) {return a + b;};
  
      // with a single argument
      let double = n => n * 2; // no parentheses
  
      // w/o arguments
      let sayHi = () => alert("Hello"); // parentheses are needed
  
      // arrow functions works same way as function expressions, 
      // for ex. we can dynamically create functions
      let age = prompt("What is your age?", 18);
      let welcome = (age < 18) ?
        () => alert('Hello') :
        () => alert("Greetings!");
      welcome();
       Don’t have own "this" & “arguments”. They are taken from outer LE. 
      let group = {
        title: "Our Group",
        students: ["John", "Pete", "Alice"],
        showList() {
          this.students.forEach(
            student => alert(this.title + ': ' + student)
          )
        }
      }
      group.showList(); 
      // Our Group: John // Our Group: Pete // Our Group: Alice
       
        function xxx() {
          (() => console.log(arguments))()
        }
        xxx(1, 2, 3) 
        // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

       new Function Function is created from a string & have access only to global, but not LE 
        let sum = new Function('a', 'b', 'c', 'return a + b');
        sum(1, 2, 3); // 6
       Decorators(call / apply / bind) Function that takes another function and alters its behavior, the main job is still carried out by the function .call() Method calls a function with a given "this" and arguments provided individually 
      // func.call([thisArg], [arg1, arg2, argN])
      // The call() allows for a function/method belonging to one object to be assigned and called for a different object.
      // With call(), you can write a method once and then inherit it in another object, w/o having to rewrite the method for the new object.
      // thisArg - maybe null or undefined
      
      function say(phrase) { alert(this.name + ' ' + phrase) }
      let user = { name: "John" }
      say.call( user, "hello" ) // John: Hello

      // user becomes "this", and "Hello" becomes the "argument"
       .apply() Method calls a function with a given "this" value, and arguments provided as an array 
        //apply(thisArg, [argsArray])

        // difference from call() is a list of arguments taken as an array-like object
        // Instead of func.call(this, ...arguments) we could use func.apply(this, arguments).
        // func.call and func.apply are almost the same
        // thisArg - maybe null or undefined
        
        // func.call(context, ...args);
        // same as
        // func.apply(context, args);

        const numbers = [5, 6, 2, 3, 7]
        console.log(Math.max.apply(null, numbers)) //7
       .bind() Method creates a new function with "this" keyword set to the provided value & with a given sequence of arguments 
        let user = {
          firstName: "John",
          sayHi() { alert('Hello ' + this.firstName) }
        };
        user.sayHi() // 'Hello, John'
        setTimeout(user.sayHi, 1000); // Hello, undefined
        // setTimeout in-browser is a little special: it sets this=window for the function call

        let sayHi = user.sayHi.bind(user);
        sayHi(); // 'Hello, John'
        setTimeout(sayHi, 1000); // 'Hello, John'

        // bind only arguments
        function mul(a, b) {return a * b}
        let double = mul.bind(null, 2);
        // 2 as the first argument. Further arguments are passed “as is”
        double(3) // = mul(2, 3) = 6
        double(4) // = mul(2, 4) = 8
        double(5) // = mul(2, 5) = 10

        // bound function can not be re-bound
       Lexical Environment Execution Context  (EC, stack, call stack) is the internal JS engine to track execution of a function or the global code EC  tracks where statement of the corresponding function is being executed New  EC  is created and pushed to the stack when execution of a function begins and deleted when stops For every  EC  a corresponding LE is created Lexical Environment  (LE) is the internal JS engine that holds names of variables/functions & a reference to a parent  LE Running function, block  {} , and the script as a whole have an internal hidden object  [[Environment]]  with reference to its  LE Every function tracks the  LE  related to the  EC it was created in & its parent  LE [[Environment]]  stores all local variables & 'this' & other...& a reference to outer  LE With  [[Environment]]  a function remembers where it was born Variable is a property of  [[Environment]]  object, associated with the executing block/function/script Variable change means a change of  [[Environment]]  property object On function start  LE  is pre-populated with variables, but their state is  uninitialized Engine knows about variables, but cannot be referenced until it has been declared with with  let ,  const When  let  definition appears, variable's value is  undefined Variable goes to  LE , but get initialized in code execution flow Function declaration  is instantly fully initialized unlike  function expressions LE  is a specification object & exists “theoretically”, we can’t get this object in our code When the code accesses a variable the JS searches it in  LE  chain up to the global one LE  is removed from memory with all the variables after the function call finishes But not in case of nested functions.  LE  object dies when it becomes unreachable (just like other objects) Closure Closure  is a function that remembers its outer variables and can access them Functions in JavaScript are  closures In some languages, that’s not possible Closures  remember where they were created using a hidden  [[Environment]]  property Their code can access outer variables The  new Function  syntax is not a  closure Function can be returned and then used somewhere else and no matter where, it still has access to the same outer variables Lexical environment  is created on function initialization & it is separate for every function 
      function makeCounter() {
        let count = 0
      
        return function() {
          return count++
        }
      }
      
      let counter = makeCounter()
      let counter2 = makeCounter()
      
      counter() // 0
      counter() // 1
      
      counter2() // 0
      counter2() // 1
       Currying Currying is a transformation of  func(a, b, c)  into  func(a)(b)(c) Simple example 
      function curry(f) { 
        return function(a) {
          return function(b) {
            return f(a, b)
          }
        }
      }
      
      function sum(a, b) {
        return a + b
      }
      
      let curriedSum = curry(sum)
      curriedSum(1)(2) // 3
       Advanced example 
      function curry(func) {
        return function curried(...args) {
          if (args.length >= func.length) return func.apply(this, args)
          // Function.length - number of parameters expected by the function
  
          return function(...args2) {
            return curried.apply(this, args.concat(args2))
          }
        }
      }
      
      function sum(a, b, c) {
        return a + b + c
      }
      
      let curriedSum = curry(sum)
      
      alert( curriedSum(1, 2, 3) ) // 6, still callable normally
      alert( curriedSum(1)(2, 3) ) // 6, currying of 1st arg
      alert( curriedSum(1)(2)(3) ) // 6, full currying
       Maybe better to use _.curry  function from Lodash.

function

FZF FZF - fuzzy finder for terminal https://github.com/junegunn/fzf FZF FZF - fuzzy finder for terminal brew install fzf  install fzf brew install fd  install fd code ~/.zshrc  open terminal config add at the end  source <(fzf --zsh) add   export FZF_DEFAULT_COMMAND='fd --type f --hidden --exclude .git --exclude node_modules' source ~/.zshrc  apply changes Shortcuts CTRL+T  paste the selected files and directories onto the command-line ALT+C  cd into the selected directory CTRL-R  paste the selected command from history onto the command-line COMMAND [DIRECTORY/][FUZZY_PATTERN]**<TAB>  fuzzy completion open ../fzf**<TAB>

Regular function returns single value or nothing Generator can return multiple values, one after another by calling  yield Generator function needs to have a  *  symbol:  function* Generator function creates a generator object  [object Generator] Code execution does not start on generator creation, but on  .next()  call Result of  .next()  is an object with two properties:  {value: 1, done: false} Syntax 
      function* generateSequence1() {
        yield 1
        yield 2
        yield 3
      }
  
      let generator1 = generateSequence1() // generateSequence {<suspended>}
      let one = generator1.next() // {value: 1, done: false}
      let two = generator1.next() // {value: 2, done: false}
      let three = generator1.next() // {value: 3, done: false}
      let four = generator1.next() // {value: undefined, done: true}

      // with return
      function* generateSequence2() {
        yield 1
        yield 2
        return 3
      }
  
      let generator2 = generateSequence2() 
      let one = generator2.next() // {value: 1, done: false}
      let two = generator2.next() // {value: 2, done: false}
      let three = generator2.next() // {value: 3, done: true}
      let four = generator2.next() // {value: undefined, done: true}
       Generator is iterable 
      // without return
      for(let value of generator1) {
        console.log(value) // 1, 2, 3
      }

      // with return
      for(let value of generator2) {
        console.log(value) // 1, 2
      }
       Spread syntax 
      [...generator1] // [1, 2, 3]
       Iterable object based on generator 
      let range = {
        from: 1,
        to: 5,
      
        *[Symbol.iterator]() {
          for(let value = this.from; value <= this.to; value++) {
            yield value;
          }
        }
      };
      
      alert( [...range] ); // 1,2,3,4,5
       Generator inside generator -  yield* yield*  directive delegates the execution to another generator 
      function* generateSequence(start, end) {
        for (let i = start; i <= end; i++) yield i;
      }

      function* generatePasswordCodes() {
        yield* generateSequence(48, 57) // 0..9 // for (let i = 48; i <= 57; i++) yield i;
        yield* generateSequence(65, 90) // A..Z
        yield* generateSequence(97, 122) // a..z
      }

      let str = ''
      for(let code of generatePasswordCodes()) {
        str += String.fromCharCode(code)
      }
      alert(str) // 0..9A..Za..z
       Pass values from next  to   yield yield  not only returns the result to the outside, but can pass the value inside the generator 
      function* gen() {
        let ask1 = yield "2 + 2 = ?"
        alert(ask1) // 4
        let ask2 = yield "3 * 3 = ?"
        alert(ask2) // 9
      }
      
      let generator = gen()
      alert( generator.next().value ) // "2 + 2 = ?" // first next() should be always w/o arg 
      alert( generator.next(4).value ) // "3 * 3 = ?"
      alert( generator.next(9).done ) // true
       Throw error into generator Outer code may pass error into a generator 
      function* gen() {
        try {
          yield "start"
          alert("not reach here")
          yield "end"
        } catch(e) {
          alert(e) // shows the error
        }
      }
      
      let generator = gen()
      alert(generator.next().value)
      generator.throw(new Error("error"))
      alert(generator.next().value)
      // start // error // undefined
      

generator

Git flow  Configuration Configuration has 3 levels git config --system  for all users on machine git config --global  for current user git config --local  or  git config  for current repo User & mail git config --global user.email "you@example.com" git config --global user.name "name" VS Code as editor For mac git config --global core.editor "code -w" git commit --amend  to check, VSCode should open Remote repo Create a folder on a server for remote repository & initialize remote git repository inside by  git --bare init mkdir  newProject.git cd  newProject.git git --bare init post-receive We can automatically deploy the site or run commands upon git events on remote server via remote git repository For example after  git push  actions can be done on remote server Create file  post-receive  in  /gitFolder/hooks/ nano post-receive make 'post-receive' file executable by  chmod +x post-receive folder where post-receive will copy files needs to have Write permission   chmod -R 777 /var/www/siteFolder/  (not sure 100%) to check the path to your npm run  echo $PATH File content 
      export PATH=$PATH:/home/sherb/.nvm/versions/node/v16.8.0/bin
      echo "--> Copying files..."
      git --work-tree=/var/www/html/antonarbus.com --git-dir=/var/www/antonarbus.com(gitFolder) checkout -f
      echo "--> Installing libraries..."
      cd /var/www/html/antonarbus.com/ && npm i
      echo "--> Creating build folder..."
      npm run build
       For myvocab.org it looks like 
      git --work-tree=/var/www/html/myvocab.org --git-dir=/var/www/myVocabGitRemoteRepo checkout -f
       Create repo git init  make local repo inside a folder Clone repo Files can be already in remote repo and we just git clone  repo_path   clone existing whole remote repo to current folder git clone  repo_path   path_where_to_clone   clone to path (will be created if does not exist) git clone  repo_path  .   clone to current folder git clone -b  branch_name  --single-branch  repo_path   folder_name_where_to_clone   clone specific branch only git clone  repo_path  --depth= 5   folder_name_where_to_clone   clone only 5 latest commits Example git clone  sherb@35.209.92.93:/var/www/antonarbus.com  .   clone existing remote repo files to current folder Clone repo with all branches git clone --bare  repo_url   project_folder /.git cd  project_folder git config --bool core.bare false git reset --hard Status git status  status of changed files Add git add  read.me   style.css   add files to the staging area, can chain files git add  pages/posts/vim.js   add file with path git add .  add all files that are not staged Logs git log  list of commits git log -p  with details git log --oneline  short version git show  hash   show commit details Commit Files are committed at the  add  snapshot. If modification are done after   git add  and we want them to be in commit, we need to   git add  files again before the commit. git commit -m  "message"   commit staged files git commit -m  "title line"  -m  "longer description"   message will be on 2 lines git commit -am  "message"   stage (add) all modified files and commit. The  -a  flag will not add any new files. Commit message Good commit message may look like " this commit will   fix the margin issue on windows " without " this commit will " statement. Amend git commit --amend  add changes to the last commit + modify commit details (commit hash will be changed) git commit --amend -m  "message"   update message in terminal git commit --amend --author= "new_author"   update author git commit --amend --no-edit  add changes to the last commit with same commit details Diff git diff  changes in files from the last commit (before next commit) git diff  read.me   changes in file from the last commit git diff --staged  changes in staged files (added) (regardless commits) Patch diff situation - you need to make a new branch from the differences between 2 branches for some reason you can not simply merge/rebase, due to for ex. problems in commit history, it happened to me https://stackoverflow.com/questions/16675766/get-the-difference-between-two-branches-in-git from the branch  git diff origin/master > patchfile  save differences to file git checkout -b new_branch  go to new branch git apply patchfile  paste data from the file do not include  patchfile  into commit probably this will not add patch file in git   git diff master Branch1 > ../patchfile Rename git mv  file1.txt   file2.txt   rename file & stage (add) Move git mv  file1.txt   /path/file2.txt   move, rename & stage Remove git rm  file.txt   remove file from machine and git repo git rm --cached  file.txt   remove file from git repo only (unstage file) git rm -r  folder_path   remove folder from git & stage Untrack file and put into .gitignore add the file to .gitignore file git rm --cached  file.txt   remove file from git repo only (unstage file) git commit -m "Stop tracking file.txt" Ignore Files which are not staged, can be put into  .gitignore  file. Such filed will not be shown as  untracked . 
      # dependencies
      /node_modules # folder
      file.js # file
      folder/file.txt # file within folder
      *.py # files with extension
      *.py[abc] # files with extension .pya .pyb .pyc
       Branch Show branch git branch  local branches git branch -r  remote branches, which are available locally git fetch  update data about remote branches git branch -a  local & remote branches git branch -a -vv  branches and tracking remotes Create branch git branch  name   create local branch git checkout -b  name   create & checkout local branch Rename branch git branch -m  name   rename Delete local branch git branch -d  branch_name_1   branch_name_2   delete local branches git branch -D  branch_name_1   branch_name_2   delete local branches, even if it is unmerged Delete remote branch git push  remote_repo_name  --delete  branch_name   delete remote branch git remote prune  repo_name  --dry-run   lists branches that do not exist on remote and can be deleted on your local git remote prune  repo_name   deletes branch references to remote branches that do not exist (do not delete local branches) git fetch --prune  same (recommended) git config --global fetch.prune true  automatically prune on every   git fetch Set remote branch tracking git push -u  repo_name   branch_name   set or change remote branch tracking git push --set-upstream  repo_name   branch_name   push & track remote branch Show remote branch tracking git branch -vv  show track info Checkout Go to branch or commit. git checkout  branch_name   jump to branch git checkout  hash   jump to commit (HEAD is moved & new commits are not in the branch) git checkout  branch_name   hash   jump to branch & commit git checkout  master   jump to master branch git checkout -b  name   create & jump to branch git checkout  file1.me   file2.me   jump to last committed files (discard changes) Switch git switch  branch_name   switch to another branch, kind of limited version of  git checkout Merge types 'Fast-forward' merge happens when the 'HEAD ' mark is just moved across the commits chain. No real merging happens. 'Merge commit' happens when new commit is created combining commits from 2 branches. Merge git merge  branch_name   branch is merged with current branched & added into the current branch as a new commit git merge  branch_name_where_to_merge   branch_name_what_to_merge   merge without checkout New commit will be created, history is not destroyed, save, may create a mess. Rebase git rebase  branch_name   branch is added before the current branch When I updated my local branch with updates from the master i did   git merge master  and got a mix of commits in their chronological order, but better to do  git rebase master  and it bring all changes from the master, but put all my commits in front. git rebase origin/master  from the branch (team mates use it)   and then  git push origin -f BRANCH_NAME git rebase -i HEAD~    change 4 commits history in text editor git rebase -i  hash   change all commits after commit with hash History is modified, but commits are linear and beautiful,  push -f  is needed. Modify commit history In   git rebase -i HEAD~ 4   following flags are widely used in front of commit hashes: r  flag to modify the commit message f  flag to glue commit to the previous one p  flag to leave commit as it is d  flag to remove commit completely  Restore git restore  read.me   discard local changes in a file, i.e. restore to its last committed state git restore .  discard local changes in all files git restore --staged  read.me   undo the git stage (add) operation Revert git revert  hash   undos changes in commit and puts the output as a new commit Used if error is found in some commit. Reset Mixed git reset  hash   undo changes (just move HEAD to some commit), all further modification are available, but not staged, commits are not deleted. We undo add + commit commands. git reset --mixed  hash   same we can reset back to the same commit knowing its hash, because commit is not deleted, even it is not visible in logs. git reset --hard origin/main  if master is out of order and asks to push commits Soft git reset --soft  hash   undo changes, but stage all following modifications. We undo just commit command. git reset --soft HEAD~1  undo changes the last commit Hard git reset --hard  undo changes to the last commit & remove commits. We undo file modifications + add + commit commands. Untracked files are not involved. git reset --hard  hash   undo changes to the commit & remove commits, get rid of everything after specific commit git reset --hard HEAD^  remove the last commit &  git clean  may clean unknown files git reset --hard HEAD~2  remove last 2 commits Restore vs Reset git restore .  undo unstaged changes (no  git add .  done) git reset .  unstage staged but not committed changes, then you need to   git restore . git reset HEAD~1  unstage last commit and then   git restore .  to undo local changes git reset --hard HEAD~1  unstage and last commit and undo changes (same as above) Clean git clean -n  show untracked files to be removed git clean -n -d  show untracked files & folders to be removed git clean -f  remove untracked files git clean -f -d  remove untracked files & folders Remote Add remote git remote add  name   link   link the local & remote repos and name it Example   git remote add  origin   sherb@35.209.92.93:/var/www/myVocabGitRemoteRepo Example   git remote add  interviewTask   git@github.com:sherbsherb/interview-task.git Show remote git remote  display names of remote repos git remote show  name   show info on remote repo git remote -v  display remote with url Update remote git remote rename  old_name   new_name   change name of remote repo git remote set-url  name   new_url   set new address or update the existing one Remove remote git remote remove  name   remove the link to remote repo Push git push  repo_name   branch_name   send data to remote repository git push  same, if branch is 'tracked' git push -f  push with warnings suppression Example   git push  origin   master   send data to  origin  repo into  master  branch Fetch git fetch  repo_name   get the latest changes from remote repo without merging, can be reviewed and merged manually later git diff main origin/main  can compare differences Pull git pull  repo_name   branch_name   get latest updates from remote repo's branch git pull  same, if branch is 'tracked' Same as  git fetch  &&  git merge Same as  git pull -p  pull in case got   error: cannot lock ref 'refs/remotes/origin/master': is at dce82 but expected 2b16b Copy & paste commit git cherry-pick  hash   copy commit and paste into current branch at the end git cherry-pick  hash  -edit   add own commit message git cherry-pick  hash  --no-commit   take data from commit and put into the staging area without commit Stash git stash  cut uncommitted files & put in stash (kind of a smart clipboard) for letter usage git stash -u  cut uncommitted + untracked files & put in stash git stash -a  cut uncommitted + untracked + ignored files & put in stash git stash list  show stash content git stash save  "name"   same, but with name for the stash to let you identify it in the list git stash apply  copy latest stash & paste on your working directory git stash apply  stash_id_number   copy stash with id (0,1,2...) & paste into your working directory git stash pop  cut latest stash and paste on your working directory git checkout stash@ { stash_id_number }  -- file.txt   take specific file from stash and put into working directory Track file, but remove from commit git update-index --assume-unchanged  file_name.txt   file will be kind of untracked git update-index --no-assume-unchanged  file_name.txt   undo previous operation May face a problem when pull requests because of changed such file, but impossible to notice it. Keyboard keys q  exit Recommendations Never work in master, always make a branch Make short commit messages, try to connect it to a Jira ticket number When work alone, prefer to rebase instead of merge Shortcuts git add . && git commit -m "comment" && git push origin master git add . && git commit -m "comment" && git push Minimize merge conflicts We have many commits in a branch It is possible that a conflict should resolved for every commit instead of just resolving it ones for the final code Pull the latest version of main/master and checkout a new branch based on it git checkout master git pull git checkout -b temp_work Pull & squash changes from your messy branch Changes are staged without creating a commit git merge --squash messy_branch At this point, you might be getting a smaller number of unavoidable merge conflicts Make a commit after resolving conflicts git commit If you'd like to re-use your old branch, you can now reset it to your temporary branch created above Force-push the changes up to GitHub before deleting my temporary work branch git checkout messy_branch git reset --hard temp_work git push -f git branch -D temp_work

Create repo on GitHub from terminal Install  github CLI  with  brew install gh  or  scoop install gh  for mac and win respectively  If  scoop  is not installed run  Set-ExecutionPolicy RemoteSigned -scope CurrentUser  &  iwr -useb get.scoop.sh | iex   Initialize the local directory as a Git repository  git init -b main Stage and commit all the files in your project  git add . && git commit -m "initial commit" push it into new repository on GitHub with  gh repo create on Win for me it works only in  powershell  terminal, not in  bash

github

Shortcuts Tab  accept ghost text suggestion Cmd  +  Right Arrow  accept next word Ctrl  +  P  inline chat prompt (my custom keybinding)

github copilot

Just watched a nice  video  how to make a glassy element with CSS. Let's replicate. 
      function Cmpt() {
          return (
            <Div>
              <div className="bkg"> 
                <div className="glass">
                  <H>Glass style</H>
                  <input type="text" placeholder="search" />
                  <div className="container">
                    <div className="card">Card 1</div>
                    <div className="card">Card 2</div>
                  </div>
                </div>
              </div>
            </Div>
          )
        }
        
        const Div = styled.div `
          .bkg {
            height: 500px;
            background-color: transparent;
            background-image: linear-gradient(to right top, #65dfc9, #6cdbeb);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          H {
            color: #426696;
            font-weight: 600;
            font-size: 20px;
            opacity: .8;
            margin: 10px;
          }
          input {
            background-color: transparent;
            background-image: linear-gradient(to right bottom, rgba(255,255,255,0.7), rgba(255,255,255,0.7) );
            border: none;
            width: 50%;
            padding: 6px;
            border-radius: 4px;
            margin: 10px;
          }
          .glass {
            height: 80%;
            width: 80%;
            border-radius: 10px;
            background-image: linear-gradient(to right bottom, rgba(255,255,255,0.7), rgba(255,255,255,0.3) );
            display: flex;
            align-items: center;
            flex-direction: column;
          }
          .container {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            align-items: center;
        
          }
          .card {
            background-image: linear-gradient(to right bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.5) );
            border-radius: 10px;
            height: 30%;
            width: 80%;
            margin: 20px;
            box-shadow: 6px 6px 20px rgba(122,122,122,0.2);
            padding: 10px;
            color: #426696;
          }
          `
        Manipulate the parent background color to have different glassy styles. 

glass style

Linear gradient We will speak only about linear gradient here, but there are more: Linear gradient (goes down/up/left/right/diagonally) Radial gradient (defined by their center) Conic gradient (rotated around a center point) Gradient is an image, not a color. We can assign it to  background-image: linear-gradient(red, green) . CSS is smart enough to understand if you declare gradient to a shorthand  background: linear-gradient(red, green) . From top to bottom By default the gradient line goes from the top to the bottom. Prev. example looks like. 
      background: linear-gradient(red, green)
        From top to right We can specify the direction of the gradient line. 
      background: linear-gradient(to top right, red, green)
        Angle direction Or use an angle.  Line goes through the center of the box. The colors of the gradient are determined by several points. Start & end points are defined by the intersection the line with a perpendiculars from the box corners. Start & end points are symmetrical from center. 
      background: linear-gradient(0deg, red, green)
       Or use an angle. Note that as far as the div shape is not square, the line doesn't go diagonally.  Or use an angle. Note that as far as the div shape is not square, the line doesn't go diagonally. 
      background: linear-gradient(45deg, red, green)
        Multiple colors We can have multiple comma separated colors. 
      background: linear-gradient(red, white, green)
        Color start point You can set a start point for a color. 
      background: linear-gradient(to right, red 0%, white 10%, green 50%);
        Fixed background Background image can span across the whole container or can be fixed. Check the difference.    Text gradient 
      const MacBook = () => (
        <div css={style}>
          <h1
            css={{
              fontSize: '70px',
              padding: '20px',
              background: 'linear-gradient(to right, rgb(67, 124, 205), rgb(69, 214, 202))',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent'
            }}
          >
            MacBook
          </h1>
        </div>
      )
       

gradients

display: grid Add content... Responsive columns layout 

grid

gsap

:has selector Selector selects all elements with class  .outer  which contains an element with the class  .inner  and applies red background. 
      function Component() {
        return (
          <div
            css={css`
              * {
                border: 2px solid grey;
                padding: 20px;
              }
              .inner {
                background-color: white;
              }
              .outer:has(.inner) {
                background-color: red;
              }
            `}
          >
            <div
              className='outer'
              // css={{ border: '1px solid grey', padding: '20px' }}
            >
              Outer element
              <div
                className='inner'
                // css={{ border: '1px solid grey', padding: '20px' }}
              >
                Inner element
              </div>
            </div>
          </div>
        )
      }
        Pass multiple selectors 
      .heading:has(> .subtitle strong#accent) { }
       Selects any  .heading  element that has a direct child with the class  .subtitle  which contains a  strong  element in it with the id  accent . Another example 
      .heading:has(.subtitle) p { }
       Selects any  p  tag that is inside a  .heading  element as long as that  .heading  element contains a  .subtitle  element Multiple has selectors 
      .heading:has(.subtitle, p) { }
       Select a  .heading  that has either an element with the class of  .subtitle  inside it or a  p  element inside it  
      .heading:has(.subtitle):has(p) { }
       Only select a  .heading  that has both a  .subtitle  and  p  element inside it

has selector

hasProperty function 
      const hasProperty = (object, property) => Object.hasOwn(object, property)
      

hasProperty()

height: auto animation with css It may not work yet in browsers. https://www.tiktok.com/@wesbos/video/7391970597799988485 

height animation

i18next i18next  is a package to translate a website Resources translations are kept in  resources  property usually translation files are kept in deferent files (objects) which makes its maintenance a bit difficult 
      i18next.init({
        resources: {
          en: {
            translation: {
              "key": "hello"
            }
          },
          fi: {
            translation: {
              "key": "moi"
            }
          }
        }
      })
       we may keep translations in one object  and transform it to the required shape 
      const resources = {
        fi: { translation: {} },
        en: { translation: {} },
      }
      
      type Lang = keyof typeof resources
      
      type NestedObject<T = string> = {
        [key: string]: T | NestedObject<T>
      }
      
      type Translations = NestedObject<Record<Lang, string>>

      const translations: Translations = {
        nav: {
          key1: {
            en: "value 1 en",
            fi: "value 1 fi"
          },
          key2: {
            en: "value 2 en",
            fi: "value 2 fi"
          },
          someMenu: {
            key3: {
              en: "value 3 en",
              fi: "value 3 fi"
            },
            key4: {
              en: "value 4 en",
              fi: "value 4 fi"
            }
          }
        },
        form: {
          key5: {
            en: "value 5 en",
            fi: "value 5 fi"
          },
          key6: {
            en: "value 6 en",
            fi: "value 6 fi"
          }
        }
      }

      const processNestedObject = (nestedObject: Translations | NestedObject, lang: Lang): NestedObject => {
        const transformedObject: NestedObject = {}
      
        for (const key in nestedObject) {
          const value = nestedObject[key]
      
          if (typeof value === 'object' && Object.hasOwn(value, lang)) {
            Object.assign(transformedObject, { [key]: value[lang] })
          }
      
          if (typeof value === 'object' && !Object.hasOwn(value, lang)) {
            transformedObject[key] = processNestedObject(value, lang)
          }
        }
      
        return transformedObject
      }
      
      (Object.keys(resources) as Lang[]).forEach(lang => {
        resources[lang].translation = processNestedObject(translations, lang)
      })
      
      export { resources }
       
        // output
        en: {
          translation: {
            nav: {
              key1: 'value 1 en',
              key2: 'value 2 en',
              someMenu: {
                key3: 'value 3 en',
                key4: 'value 4 en'
              }
            },
            form: {
              key5: 'value 5 en',
              key6: 'value 6 en'
            },
          },
        },
        fi: {
          translation: {
            nav: {
              key1: 'value 1 fi',
              key2: 'value 2 fi',
              someMenu: {
                key3: 'value 3 fi',
                key4: 'value 4 fi'
              }
            },
            form: {
              key5: 'value 5 fi',
              key6: 'value 6 fi'
            }
          }
        },
      

i18next

Install package  React-icons   package can be installed with  npm i react-icons  from terminal  Whole set of icons can be checked  here Usage  We can use icons as JSX components  <Icon />  or assign them to variables  const iconVar = React.createElement(Icon)  Styles can be applied on svg  <Icon style={styles}/> 
      import { FaRedhat } from 'react-icons/fa'
      import { FaRedhat as HatIcon } from 'react-icons/fa'

      const icon = React.createElement(HatIcon)
      const styles = { verticalAlign: 'middle', fill: 'red', fontSize: '100px', width: '100px', height: 'auto', margin: '3px', color: 'blue', opacity: '.5', strokeWidth: '10px' }

      function Component() {
        return (
          <>
            <FaRedhat /> 
            <HatIcon /> 
            {icon} 
            <HatIcon style={styles}/>
            <span className='rotate'>
              <FaRedhat /> 
              
              <style jsx>{`
                .rotate :global(svg) {
                  color: blue;
                  animation-name: spin;
                  animation-duration: 4s;
                  animation-iteration-count: infinite;
                }
                @keyframes spin { 
                  100% { transform:rotate(360deg); } 
                }
              `}</style>
            </span>
          </>
        )
      }
        Search for icons All available icons are presented  here To import an icon you need to know exact package name  import { FaRedhat } from 'react-icons/fa'  -  /fa  in this example When you search for an icons via search input, it is not obvious what the package icon comes from Better to go manually through packages on the left side and manually look for an icon 

icons in react

Image via import in React In React an image can be imported as a module Webpack will place an image under  build  root folder into  /build/static/media/  and add some hash to a file name Imported variable will be resolved to a path in html  src  attribute in react  
      import football from '/pics/football.jpg'
      const ImportImage = () => <img src={football.src} />
       Image via import in Next Imported image variable  variable.src  will be resolved to path in  src  attribute in Next Image from public folder We can manually place an image under  public  folder, for ex.  /public/imgs/va/bulldogs.jpg And then reference it via image  src  property value, like  <img src="/imgs/va/bulldogs.jpg" /> When a production version is built the content of  public  folder goes into  build  folder and references will not break  
      const ReferenceImageDirectly = () => <img src='/imgs/va/bulldogs.jpg' />
       Lazy image Ones page is hit all images are loaded, which is not efficient. We load images dynamically on scroll. Lazy images in html Add  loading="lazy"  attribute to  img  tag <img src="/path" loading="lazy" alt="…"  height="200"/> In dev tools we can see that images are loaded on scroll when we approach them one by one We can not control this browser behavior 
      function LazyImagesInHtml() {
        return (
          <div className='container'>
            <h1>Images without lazy load</h1>
            {Array(170)
              .fill('')
              .map((el, i) => (
                <img
                  src={`/imgs/va/img${i + 1}.jpg`}
                  key={`lazyImg${i + 1}`}
                  loading="lazy"
                  alt="…"  
                  height="200"
                />
              ))}
        
            <style jsx>{`
              .container {
                height: 300px;
                overflow: scroll;
                border: 1px dotted grey;
              }
              img {
                display: block;
              }
            `}</style>
          </div>
        )
      }
        Lazy images in Next  
      import Image from 'next/image'
      function LazyImagesInNext() {
        return (
          <div className='container'>
            {Array(50)
              .fill('')
              .map((el, i) => (
                <Image
                  src={`/imgs/va/img${i + 101}.jpg`}
                  key={`lazyImg${i + 101}`}
                  alt="some desc"
                  width="100%" 
                  height="100%" 
                  layout="responsive" 
                  objectFit="contain"
                />
              ))}
              <style jsx>{`
                .container {
                  height: 300px;
                  overflow: scroll;
                  border: 1px dotted grey;
                  position: 'relative';
                }
              `}</style>
          </div>
        )
      }
        Lazy images in React  We can use  react-lazyload  package With this package we have a control on offset scroll distance to an image when it starts being downloaded Note. Did not manage to make it work in a scrollable container. 
      // components/post/LazyImg.js
      import LazyLoad from 'react-lazyload'

      export function LazyImg(props) {
        return (
          <LazyLoad
            placeholder={<div>Loading...</div>}
            offset={100}
            once
            scrollContainer={props.scrollContainer}
          >
            <img
              src={props.src || props.path || props.link}
              height={props.height || 'auto'}
              width={props.width || 'auto'}
            />

            <style jsx>{`
              img {
                box-shadow: ${props.noShadow ? '' : '#898989a3 0px 0px 7px 0px'};
                margin: 0 auto;
                border-radius: 4px;
                margin-top: 10px;
                margin-bottom: 10px;
                display: block;
                max-width: ${props.maxWidth || "100%"};
              }
              @media screen and (max-width: 480px) {
                img {
                  max-width: 100%;
                }
              }
            `}</style>
          </LazyLoad>
        )
      }
       
      // components/post/LazyImg.js
      import LazyLoad from 'react-lazyload'
      function LazyImagesInReact() {
        return (
          <>
            {Array(170)
              .fill('')
              .map((el, i) => (
                <LazyImg
                  src={`/imgs/va/img${i + 1}.jpg`}
                  key={`lazyImg${i + 1}`}
                />
              ))}
          </>
        )
      }
       

image

Idea With  Immer  we can deeply clone an object and modify the property. Handy for a state update in React. Installation npm i immer Without immer 
      const abcde = { a: 'a', b: { c: 'c', d: { e: 'e' } } }
      
      const abcdef = { ...abcde, b: { ...abcde.b, d: { ...abcde.b.d, f: 'f' } } }
      // { a: 'a', b: { c: 'c', d: { e: 'e' , f: 'f' } } }
       With immer 
      import { produce } from 'immer'
      const abcde = { a: 'a', b: { c: 'c', d: { e: 'e' } } }
      const abcdef = produce(abcde, (obj) => {
        obj.b.d.f = 'f'
      })
      // { a: 'a', b: { c: 'c', d: { e: 'e' , f: 'f' } } }
      

immer

Custom hook to check if it is a first render or not. 
      // /functions/useIsInitRender'
      import { useRef, useEffect } from 'react'

      export default function useIsInitRender() {
        const isInitRender = useRef(true)
        useEffect(() => { isInitRender.current = false }, [])
        return isInitRender.current
      }
       
      import useIsInitRender from '/functions/useIsInitRender'
      
      function Component() {
        const [state, setState] = useState(0)
        const isInitRender = useIsInitRender()

        return (
          <>
            <div>First render? <b>{isFirstRender.toString()}</b></div>
            <div>Counter: <b>{state}</b></div>
            <button onClick={() => setState(state + 1)}>Plus +1</button>
          </>
        )
      }
       

initial render

Uncontrolled component  Uncontrolled component data is handled by the DOM.   We need to use  useRef()   hook  to get form values from the DOM.  inpRef.current  refers to the DOM element. 
      import React, { useRef, useState } from 'react';

      function UncontrolledInput() {
        const [inpVal, setInpVal] = useState('initial text');
        const inpRef = useRef('initial text')

        return (
          <>
            <h1>{inpVal}</h1>
            <input
              ref={inpRef}
              type="text"
              value={inpVal}
              onChange={() => setInpVal(inpRef.current.value)}
            />
          </>
        );
      }

      <UncontrolledInput />
        Controlled component Controlled component data is handled by a React component via  useState()   hook .  Event handler takes care of a state update. 
      import React, { useRef, useState } from 'react';

      function ControlledInput() {
        const [inpVal, setInpVal] = useState('initial text');

        return (
          <>
            <h1>{inpVal}</h1>
            <input
              type="text"
              value={inpVal}
              onChange={e => setInpVal(e.target.value)}
            />
          </>
        );
      }

      <ControlledInput />
        Custom hook for input Form with input With controlled component input values are always driven by the React state and we always need to create such logic for every input. We control input value via react state with  onChange  event On form submit we prevent the default action and do our logic After submission we reset input fields with initial empty string 
      function FormWithInputWithoutCustomHook() {
        const [nameState, setNameState] = useState('')

        const submitHandler = e => {
          e.preventDefault()
          alert(`hello ${nameState}`)
          setNameState('')
        }

        return (
          <form onSubmit={submitHandler}>
            <input placeholder="Name" value={nameState} onChange={e => setNameState(e.target.value)} />
            <button>Submit</button>
          </form>
        )
      }
      <FormWithInputWithoutCustomHook />
        Custom hook for input Let's make a custom hook for an input control We extract the logic into a separate file  useInput.js  and export back the input  value  &  onChange  attributes in the object + reset function 
      // functions\ useInput.js
      import { useState } from 'react'

      export default function useInput(initVal = '') {
        const [val, setVal] = useState(initVal)
        const reset = () => setVal(initVal)
        const bind = {
          value: val,
          onChange: e => setVal(e.target.value)
        }
        return [val, bind, reset]
      }
       Input with custom hook In the main file we bring and destruct values from the custom hook Note how we bring  value  and  onChange  attributes by spreading the object into the input field 
      import useInput from '/functions/useInput'

      function FormWithInputWithCustomHook() {
        const [nameState, bindName, resetName] = useInput()

        const submitHandler = e => {
          e.preventDefault()
          alert(`hello ${nameState}`)
          resetName()
        }

        return (
          <form onSubmit={submitHandler}>
            <input placeholder="Name" {...bindName} />
            <button>Submit</button>
          </form>
        )
      }
      <FormWithInputWithCustomHook />
       

input in react

Intersection observer   allows to call a function when an element intersects specified parent element. 
        import React from 'react';
        import { Lnk } from '../components/Post/Lnk';

        function Component() {
          const ref = React.useRef(null);
          const [state, setState] = React.useState(0)

          React.useEffect(() => {
            const target = ref.current;
            const options = {
              // element that is used as the viewport for checking visibility of the target 
              // default is the browser viewport
              root: document.documentElement, 
              // margin around the root, grow or shrink bounding box before computing intersections 
              // default 0
              rootMargin: '0px', 
              // observer triggers at 70% of targets visibility 
              // default 0 - means as soon as target gets visible
              threshold: .7, 
            }

            function callback(entries, observer) {
              // entries - target elements
              // cb is triggered when el goes in & out of the view
              // ignore going out & trigger cb only when div comes into the view
              if (!entries[0].isIntersecting) return 
              console.log('intersected')
              setState(prev => prev + 1)
            }

            const observer = new IntersectionObserver(callback, options);
            observer.observe(target);

            return () => {
              // Stop watching for intersection events
              observer.unobserve(target)
              // Stop observing
              observer.disconnect()
            }
          }, []);

          return (
            <>
              <div style={{ height: '200px', width: '300px', overflow: 'auto' }}>
                <div style={{ height: '250px', background: 'grey' }}>Scroll me</div>
                <div style={{ background: 'OldLace' }}>Observer intersected x{state} times</div>
                <div style={{ height: '100px', background: 'LightPink ' }} ref={ref}>Target element</div>
              </div>
            </>
          );
        }
       

intersection observer


      // functions/isIos.js
      export default function isiOS() {
        return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'
        ].includes(navigator.platform) ||
        (navigator.userAgent.includes('Mac') && 'ontouchend' in document) ||
        /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
      }
       

is iOS

isArray function 
      const isArray = (variable) => Array.isArray(variable)
      

isArray()

isDateString function 
      const isDateString = (variable) => isNaN(variable) && !isNaN(Date.parse(variable))
      

isDateString

isLetter function Cool trick how to check if the string is a letter and not a space or punctuation Lower and upper cases for letters are different strings But for rest of characters there is no effect, it is the same string 
      function isLetter(char) {
        if (char.toLowerCase() !== char.toUpperCase()) return true
        return false
      }
      

isLetter()

isObject function 
      const isObject = (variable) => variable !== null && variable?.constructor?.name === 'Object'
      

isObject()

isPrimitiveType function 
      const isBoolean = (variable) => typeof variable === 'boolean'
       
      const isString = (variable) => typeof variable === 'string'
       
      const isNumber = (variable) => typeof variable === 'number'
       
      const isUndefined = (variable) => typeof variable === 'undefined'
       
      // typeof null === 'object' due to historical reason
      const isNull = (variable) => variable === null
       
      const isSymbol = (variable) => typeof variable === 'symbol'
       
      const isBigint = (variable) => typeof variable === 'bigint'
       Example 
      isBoolean(true) // true
      isString('str') // true
      isNumber(666) // true
      isUndefined(undefined) // true
      isSymbol(Symbol('foo')) // true
      isBigint(9007199254740991n) // true
      isNull(null) // true
      

isPrimitive()

Jest is a library for unit testing, tests of app units without external dependencies. Installation Jest for  Next  packages  npm install --save-dev jest @testing-library/react @testing-library/jest-dom Configuration 
      // jest.config.js
      const nextJest = require('next/jest')

      const createJestConfig = nextJest({
        // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
        dir: './',
      })

      // Add any custom config to be passed to Jest
      const customJestConfig = {
        // Add more setup options before each test is run
        // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
        // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
        moduleDirectories: ['node_modules', '/'],
        testEnvironment: 'jest-environment-jsdom',
      }

      // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
      module.exports = createJestConfig(customJestConfig)
       
      // package.json
      "scripts": {
        "dev": "node exportAllPostsCreate && next dev",
        "build": "node exportAllPostsCreate && next build",
        "start": "next start",
        "lint": "next lint",
        "test": "jest --watch"
      },
       
      // .eslintrc.js
      module.exports = {
        env: {
          browser: true,
          es2021: true,
          jest: true
        },
        extends: [
          'plugin:react/recommended',
          'standard'
        ],
        parser: '@typescript-eslint/parser',
        parserOptions: {
          ecmaFeatures: {
            jsx: true
          },
          ecmaVersion: 'latest',
          sourceType: 'module'
        },
        plugins: [
          'react',
          '@typescript-eslint'
        ],
        rules: {
          'react/react-in-jsx-scope': 'off',
          'space-before-function-paren': 'off',
          'react/prop-types': 'off',
          'import/no-absolute-path': 'off'
        }
      }
       Run npm run test All assertions toHaveBeenCalledTimes ,  toHaveBeenCalledWith ,  toHaveBeenLastCalledWith ,  toHaveBeenNthCalledWith ,  toHaveClass ,  toHaveDisplayValue ,  toHaveErrorMessage ,  toHaveFocus ,  toHaveFormValues ,  toHaveLastReturnedWith ,  toHaveLength ,  toHaveNthReturnedWith ,  toHaveProperty ,  toHaveReturned ,  toHaveReturnedTimes ,  toHaveReturnedWith ,  toHaveStyle ,  toHaveTextContent ,  toHaveValue ,  toMatch ,  toMatchInlineSnapshot ,  toMatchObject ,  toMatchSnapshot ,  toReturn ,  toReturnTimes ,  toReturnWith ,  toStrictEqual ,  toThrow ,  toThrowError ,  toThrowErrorMatchingInlineSnapshot ,  toThrowErrorMatchingSnapshot ,  lastCalledWith ,  lastReturnedWith ,  not ,  nthCalledWith ,  nthReturnedWith ,  rejects ,  resolves ,  toBe ,  toBeCalled ,  toBeCalledTimes ,  toBeCalledWith ,  toBeChecked ,  toBeCloseTo ,  toBeDefined ,  toBeDisabled ,  toBeEmptyDOMElement ,  toBeEnabled ,  toBeFalsy ,  toBeGreaterThan ,  toBeGreaterThanOrEqual ,  toBeInTheDocument ,  toBeInstanceof ,  toBeInvalid ,  toBeLessThan ,  toBeLessThanOrEqual ,  toBeNaN ,  toBeNull ,  toBePartiallyChecked ,  toBeRequired ,  toBeTruthy ,  toBeUndefined ,  toBeValid ,  toBeVisible ,  toContain ,  toContainElement ,  toContainEqual ,  toContainHTML ,  toEqual ,  toHaveAccessibleDescription ,  toHaveAccessibleName ,  toHaveAttribute ,  toHaveBeenCalled ,  toHaveBeenCalledTimes ,  toHaveBeenCalledWith ,  toHaveBeenLastCalledWith Main assertions toBe Compares references in memory. 
      test('exact equality', () => {
        expect(2 + 2).toBe(4) // true
      })
       not.toBe 
      test('exact equality for objects', () => {
        expect({ a: 1 }).not.toBe({ a: 1 }) // false
      })
       toEqual Compares all values 
      test('values equality', () => {
        expect({ a: 1 }).toEqual({ a: 1 }) // true
      })
       toMatchObject 
      test('partial equality', () => {
        expect({ a: 1, b: 2 }).toMatchObject({ a: 1 })
      })
       toHaveProperty 
      test('toHaveProperty', () => {
        expect({ a: 1, b: 2 }).toHaveProperty('a', 1)
      })
       toBeNull 
      test('null', () => {
        const n = null
        expect(n).toBeNull()
      })
       toBeDefined 
      test('null', () => {
        const n = null
        expect(n).toBeDefined()
      })
       toBeUndefined 
      test('null', () => {
        const n = null
        expect(n).not.toBeUndefined()
      })
       toBeTruthy 
      test('null', () => {
        const n = null
        expect(n).not.toBeTruthy()
      })
       toBeFalsy 
      test('null', () => {
        const n = null
        expect(n)toBeFalsy()
      })
       toBeGreaterThan 
      test('two plus two', () => {
        const value = 2 + 2
        expect(value).toBeGreaterThan(3)
      })
       toBeGreaterThanOrEqual 
      test('two plus two', () => {
        const value = 2 + 2
        expect(value).toBeGreaterThanOrEqual(3.5)
      })
       toBeLessThan 
      test('two plus two', () => {
        const value = 2 + 2
        expect(value).toBeLessThan(5)
      })
       toBeLessThanOrEqual 
      test('two plus two', () => {
        const value = 2 + 2
        expect(value).toBeLessThanOrEqual(4.5)
      })
       toBeCloseTo 
      test('adding floating point numbers', () => {
        const value = 0.1 + 0.2
        expect(value).toBeCloseTo(0.3)
      })
       toMatch 
      test('hi', () => {
        expect('team').not.toMatch('hi')
      })
       
      test('there is no I in team', () => {
        expect('team').not.toMatch(/I/)
      })

      test('but there is a "stop" in Christoph', () => {
        expect('Christoph').toMatch(/stop/)
      })
       toContain 
      test('arr contains', () => {
        expect(['1', '2', '3', '4', '5']).toContain('2')
      })
       arrayContaining 
      test('arr contains', () => {
        expect(['1', '2', '3', '4', '5']).toEqual(expect.arrayContaining(['1', '2']))
      })
       toThrow 
      function functionWithError() {
        throw new Error('very bad error')
      }

      test('compiling android goes as expected', () => {
        expect(() => functionWithError()).toThrow()
        expect(() => functionWithError()).toThrow(Error)
        expect(() => functionWithError()).toThrow('very bad error')
        expect(() => functionWithError()).toThrow(/bad/)
      })
       Promises 
      test('get userId from json api', () => {
        return axios('https://jsonplaceholder.typicode.com/posts/1')
          .then(res => {
            expect(res.data.userId).toBe(1)
          })
      })
       
      test('get userId from json api with async await', async () => {
        const res = await axios('https://jsonplaceholder.typicode.com/posts/1')
        expect(res.data.userId).toBe(1)
      })
       resolves 
      test('promise resolves', async () => {
        function promiseWithResolve() {
          return new Promise((resolve, reject) => {
            setTimeout(() => resolve('done'), 500)
          })
        }
        await expect(promiseWithResolve()).resolves.toEqual('done')
      })
       rejects 
      test('promise rejects', async () => {
        function promiseWithResolve() {
          return new Promise((resolve, reject) => {
            setTimeout(() => reject('error'), 500)
          })
        }
        await expect(promiseWithResolve()).rejects.toEqual('error')
      })
       beforeEach & afterEach Calls function for every test in a file or for a  describe  block. 
      beforeEach(() => {
        console.log('test starts')
      })

      afterEach(() => {
        console.log('test ended')
      })
       beforeAll & afterAll Calls function before and after all tests in a file or for a  describe  block. 
      beforeAll(() => {
        console.log('tests start')
      })

      afterAll(() => {
        console.log('tests ended')
      })
       describe Group tests in  describe  block beforeEach ,  afterEach ,  beforeAll ,  afterAll  inside  describe  block affect tests inside this block. 
      describe('test function name', () => {
        beforeEach(() => {
          console.log('starts before each function in describe block')
        })

        test('to be one', () => {
          expect(1).toBe(1)
        })

        test('to be two', () => {
          expect(2).toBe(2)
        })
      })
       Mock function basics Read  here . 
      test('mock function basics', () => {
        const mockFn = jest.fn()
        mockFn()
        mockFn('arg1', 'arg2')

        expect(mockFn).toBeCalled()
        expect(mockFn).toBeCalledTimes(2)
        expect(mockFn.mock.calls.length).toBe(2)
        expect(mockFn).toBeCalledWith('arg1', 'arg2') // last call

        console.log('mockFn.mock.calls', mockFn.mock.calls) // [ [], [ 'arg1', 'arg2' ] ]
        expect(mockFn.mock.calls[1][0]).toBe('arg1')
        expect(mockFn.mock.calls[1][1]).toBe('arg2')
      })

      afterAll(() => {
        jest.clearAllMocks()
      })
       Mock function with return value 
      test('mock function with return value', () => {
        const mockFn = jest.fn()
        mockFn()
        mockFn.mockReturnValue('hi')
        expect(mockFn()).toBe('hi')
      })
       Mock function with resolve value 
      test('mock function with resolve value', async () => {
        const mockFn = jest.fn()
        mockFn()
        mockFn.mockResolvedValue('hi')
        expect(await mockFn()).toBe('hi')
        console.log('mockFn.mock.results', mockFn.mock.results) // [ { type: 'return', value: undefined }, { type: 'return', value: 'hi' } ]
      })
       Mock with custom implementation 
      test('mock function with implementation', () => {
        const mockFn = jest.fn()
        mockFn.mockImplementation(arg => {
          if (typeof arg === 'string') return arg
          if (typeof arg === 'number') return 10 * arg
        })
        expect(mockFn('hi')).toBe('hi')
        expect(mockFn(3)).toBe(30)

        // shorthand
        const mockFn2 = jest.fn(arg => 'hi')
        expect(mockFn2('hi')).toBe('hi')
      })
       Mock function from other file 
        // foo-bar-baz.js
        export const foo = 'foo'
        export const bar = () => 'bar'
        export default () => 'baz'
       
      //test.js
      import defaultExport, {bar, foo} from '../foo-bar-baz'

      jest.mock('../foo-bar-baz', () => {
        const originalModule = jest.requireActual('../foo-bar-baz')

        //Mock the default export and named export 'foo'
        return {
          __esModule: true,
          ...originalModule,
          default: jest.fn(() => 'mocked baz'),
          foo: 'mocked foo',
        }
      })

      test('should do a partial mock', () => {
        const defaultExportResult = defaultExport()
        expect(defaultExportResult).toBe('mocked baz')
        expect(defaultExport).toHaveBeenCalled()

        expect(foo).toBe('mocked foo')
        expect(bar()).toBe('bar')
      })
       Mock Redux 
      jest.mock('react-redux', () => {
        const originalModule = jest.requireActual('react-redux')

        return {
          __esModule: true,
          ...originalModule,
          useSelector: jest.fn().mockReturnValue({
            title: 'some title',
            message: 'some message',
            isOpen: true
          }),
          useDispatch: () => jest.fn()
        }
      })
       spyOn Same as previous, but a bit different way. 
      test('spyon', async () => {
        const obj = {
          fetchPost: function () {
            return axios('https://jsonplaceholder.typicode.com/posts/1')
              .then(res => res.data)
          }
        }
        console.log(await obj.fetchPost()) // { userId: 1, id: 1, title: 'sunt' }

        // instead of calling real API we can spy on the function and replace its behavior
        jest.spyOn(obj, 'fetchPost')
          .mockImplementation(() => Promise.resolve('data is fetched, but it is not your business'))
        console.log(await obj.fetchPost()) // data is fetched, but it is not your business
      })

      afterEach(() => { 
        jest.restoreAllMocks()
      })
       Mock function return different values on different calls 
      test('mock function return different values', () => {
        const mockFn = jest
          .fn()
          .mockReturnValue('default')
          .mockReturnValueOnce('hi')
          .mockReturnValueOnce('bye')

        expect(mockFn()).toBe('hi')
        expect(mockFn()).toBe('bye')
        expect(mockFn()).toBe('default')
      })
       Mock Mock the external library. 
      test('should mock the lib', () => {
        jest.mock('shortid', () => {
          return jest.fn(() => '23kDr6')
        })

        const id = require('shortid')
        console.log(id()) // '23kDr6'
      })
       Run one test only temporarily change that  test  command to a  test.only . 
      test.only('this will be the only test that runs', () => {
        expect(true).toBe(false)
      })

      test('this test will not run', () => {
        expect('A').toBe('A')
      })
       it Same as  test , shorter and makes description sound like normal language. 
      it('should be 2', () => {
        expect(1 + 1).toBe(2)
      })
       Suppress jest warning 
      describe('<Invoices />', () => {
        it('should render the component', () => {
          jest.spyOn(console, 'error').mockImplementation(() => {})
          renderWithProvider(<Invoices />)
          const invoices = screen.getByTestId('invoices')
          expect(invoices).toBeInTheDocument()
        })
      })
       Mock imported function I am testing a component which uses react-query functions to fetch a data on mount In test we do not want to fetch the data and need to mock it Component acts always the same no matter  useUserQuery()  returns So we need to mock it ones for all tests Component renders differently depending on  useInvoicesQuery()  return value Here we need to control the return value 
        export const InvoicesTable = () => {
        const dispatch = useDispatch()
        const { data: user } = useUserQuery()
        const { data, isLoading } = useInvoicesQuery()
        const isServiceCenter = selectIsServiceCenter(user)

        return (
          ....
        )
      }
       
      import { screen } from '@testing-library/react'
      import { renderWithProvider } from 'testUtils/renderWithProvider'
      import { getDefaultStore } from 'testUtils/defaultStore'
      import { InvoicesTable } from './InvoicesTable'
      import { useInvoicesQuery } from 'api/useInvoicesQuery'

      const store = getDefaultStore()
      store.query.searchInputValue = 'some search input value'

      // returned value will be static in all test
      jest.mock('api/useUserQuery', () => ({
        useUserQuery: () => ({ data: { username: 'Jack Russell' } })
      }))

      // returned value can be controlled in different tests
      jest.mock('api/useInvoicesQuery', () => ({
        useInvoicesQuery: jest.fn()
      }))

      describe('<InvoicesTable />', () => {
        it('should render tables content', () => {
          useInvoicesQuery.mockReturnValue({ isLoading: false, data: {} })

          renderWithProvider(<InvoicesTable />, {}, { preloadedState: store })

          expect(screen.queryByTestId('spinner')).not.toBeInTheDocument()
          expect(screen.getByText('14:27:21', { exact: false })).toBeInTheDocument()
        })
      })

      describe('<InvoicesTable />', () => {
        it('should show spinner', () => {
          useInvoicesQuery.mockReturnValue({ isLoading: true, data: {} })

          renderWithProvider(<InvoicesTable />, {}, { preloadedState: store })

          expect(screen.queryByTestId('spinner')).toBeInTheDocument()
        })
      })
      

jest

In React we generate html by javascript. We can use  React.createElement()  function from the React library to add an HTML element or we can use JSX syntax. Native JS  
      import React from 'react';

      React.createElement('div', {},
        React.createElement(
          'button', 
          {
            disabled: false,
            onClick: () => { alert('clicked') } 
          }, 
          'Click me'
        )
      )
       Click me JSX  
      import React from 'react';

      <div>
        <button 
          disabled={false} 
          onClick={() => alert('clicked')}
        >
          Click me
        </button>
      </div>
       Click me