# Just one word for knowledge recall

1. foreach vs map:

forEach() — executes a provided function once for each array element. map() — creates a new array with the results of calling a provided function on every element in the calling array.

Example:

arr.forEach((num, index) => {
    return arr[index] = num * 2;
});
// arr = [2, 4, 6, 8, 10]

let doubled = arr.map(num => {
    return num * 2;
});
// doubled = [2, 4, 6, 8, 10]

2.viewport: The viewport is the user's visible area of a web page.

3.autoprefixer: is a tool to automatically write the vendor properties, it has been used fo support more properties for different browsers, such as IE, (polyfill consideration)

Example:

a {
    transition: transform 1s;
}
/* After use autoprefixer, above code will be represented as this: */
a {
    -webkit-transition: -webkit-transform 1s;
    transition: -ms-transform 1s;
    transition: transform 1s;
}

4.composition function:

const x = a => a + 1;
const y = a => a * 2;

console.log(x(y(5)))

5.ORM [Object Relational Mapper]

• concept: its a technique which helps developer talk to database more easier

• ORM complementary note:

• translate between data in a relational database and the javascript objects in your application

Typical example: Objection.js

• No matter of using either ORM or query builder, under the hood, it always uses SQL to talk to database

Reference here

6.Service Worker: A service worker is a script that stands between your website and the network, giving you, among other things, the ability to intercept network requests and respond to them in different ways.

7. Copy file by terminal commands

cp -a /source_folder/. /destination_folder/

8.pure function vs impure function

• Pure function is predictable, because the output is based on the input and return a new value, which won't overwrite the previous value, it generates a new value, eg:

// input: x and output: x * x
function square(x) {
    return x * x;
}
// items: previous value and new value: items.map(square)
function squareIt(items) {
    return items.map(square);
}

• (note: reducer is pure function, because we need to make state predictable)

• Impure function has change effect, which means it may call database, do some logic to overwrite values and so on, eg:

let outputs = [];

function square(x) {
  const newX = updateDatabase(x); // call database change value
  return newX * newX;
};

function squareIt(items) {
  for(let i = 0; i < items.length; i++) {
    items[i] = square(items[i]);
    // console.log(items[i]);
    outputs.push(items[i]);
  }
  return outputs;
};
// outputs overwrite items, output as a new array

9.docker-compose: A tool for running multiple docker containers at same time !!

• allow developers to input multiple commands based on different services (such as database services, api services and web app services and etc)
• Inside docker-compose file, dash (-) refers to array !!!

10. Instead of using array[0], we can use array.find(e => e == !!e) (handy one) !!

11.httpOnly: true : don't want any javascript in browser to read or view the credentials like cookie

12. CI/CD:

CI -> Continuous Integration -> means merge code into current codebase CD -> Continuous Deployment -> means deploy the latest changes to certain environment, like production

Tools: (Travis, BuildKite, Github actions and etc)

13. For handlebars: if you don't want Handlebars to escape a value, use the "triple-stash", {{{

Reference here

14.useMemo vs useCallback:

useMemo: returns the value of that callback function

useCallback: returns the callback function

15. Router: Like React router: just switch one component views, change DOM Node elements

• hash: window.addEventListener('hashChange', () => { ... });
• history: history.pushState();

Example: here

16. Vue computed VS watcher:

Computed: for complex computations Watch: for API data fetching handling (eg: debounce)

Details in here And here

17.history.pushState && addEventListener('popState', () => {})

history.pushState: adds an entry to browser history session stack !! addEventListener('popState', () => {}): popState is fired when active history entry get changed

Just remember: history.pushState will never trigger popState event !!!!

18. JavaScript delete keyword:

The delete operator is used to delete all the variables and objects used in the program ,but it does not delete variables declared with var keyword.

19. Using screen.debug() to check HTML DOM: reference [Its handy one !]

20. Using keyword defer for writing script tag inside <header> section, Example:

<html>
  <head>
    <script src="main.js" defer></script>
  </head>
  <body> ... </body>
</html>

Top version is better than bottom version, because JavaScript downloads file at last because of the script tag put at last ...

<html>
  <head>
    ...
  </head>
  <body>
    <p>html doms ...</p>
    <script src="main.js"></script>
  </body>
</html>

21. Add some styles for console log (🎏🎏🎏🎏)

var x = 'Damon',
    y = 120;
console.log(`%c${x} with Tax: %c$${y}`, 'font-weight: bold; color: red;', 'color: green;');
// first %c is for setting up first comma css stylings, second %c for second comma styling setup !!!

22. DevDependency vs Dependency:

-- DevDependency packages are only used for development !!

-- Dependency packages are used for development and runtime both !!

reference

23. Using synk to fix your npm packages vulnerabilities [Security Considerations]

24.