Tech notes

# 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 to 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/
Reference

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 side 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. Why we need ORM?

basically just communicate db more easier !!!!

25. Tests types:

Unit test: just test that specific part of that functionality

Integration test: In Angular, it means test component with its template together

End to end (e2e) test: means to test entire application as a whole

using describe() to define a suite: which is a group of tests using it() or test() to define a spec, a specific test

26. Object Oriented Programming (OOP) [my opinion]:

Trying to categorize objects into a class, and class will communicate with each and which has few features, eg: inheritance, which reduce the number of times for code repeat (enhance code performance)

27. create-react-app https support

For create-react-app, we can use HTTP=true npm start to start localhost with https protocol

Resources:

create react app https support doc

Create your own ssl certificate

28. Native JS Http call tool: XHR (XMLHttpRequest)

Using XMLHttpRequest to create a http request and send to server, and then server send data back to browser, and finally update page content

29. CI & CD simple explanation:

CI (Continuous Integration): Merge code in
CD (Continuous Development): Release code out

30. JavaScript defer attribute is used to specify the script is downloaded in parallel to parse the page, and executed after the page has finished parsing.

31. What is DOM? DOM is a programming interface, could be HTML document

32. What is arrow function? A shorter syntax for defining a javascript function

33. What does http.createServer do? The http.createServer() method turns your computer into an HTTP server.

34. new Set(Array): Its a es6 feature, which is used for avoiding array element duplication issue. How to convert it back? Array.from(SetVaraible)

35. variable !== null, I don’t like this syntax because of: reference

36. Object.prototype.toString.call to check data types in JS

Object.prototype.toString.call(["123, 123123"]); // '[object Array]'
Object.prototype.toString.call({ x: "123, y: 123123" }); // '[object Object]'

37. useEffect = componentDidMount + componentDidUpdate + componentWillUnmount

38. Hooks might reduce your bundle size. (because the lines of code is less than class based components 🤪)

39. Memoization is a way to impoprve the performance (because it avoids re-rendering)

40. Hooks will not share state between components (component state is local to that component), if you need to share the state, please using useContext()

41. Ref forwarding is a technique for automatically passing a ref through a component to one of its children

42. SNS is a good choice when you have a large amount of subscribers who needs to get the latest updated data !!!

43. Yarn support offline mode which means if the package s you have installed before, after network dropped out, the package can be installed by using yarn offline !!

44. one of the best features for Webpack 5 is module federation, allow developers to build micro front-end apps easily.

45. Using tslib for performance consideration, smaller bundler size, better performance ~~

46. web.dev: a new tool to measure your code, alternative for lighthouse

47. Micro Front-end (MFE): is the client version of microservices (divide web application on client side)

MicroServices (MS): create multiple service functionalities for back-end codebase (divide one monolithic codebase into small modules, each module can be treated as a micro-service)

48. NPM is used to install the packages while NPX is used to execute the packages. (NPX is an NPM package executor)

49.

← PostgreSQL Note →