The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.

A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

In the beginning, JavaScript and the DOM were tightly intertwined, but eventually, they evolved into separate entities. The page content is stored in the DOM and may be accessed and manipulated via JavaScript.

const paragraphs = document.getElementsByTagName("p");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);

References:

• https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

React Hot Loader is a plugin that allows React components to be live reloaded without the loss of state. Basically DOM is re-rendered on each save without doing a full reload. It works by replacing a module of the application during runtime with an updated one so that it’s available for instance use.

References:

• React Hot Loader
• React Hot Loader - Getting Started
• Set up React Hot Loader in 10 minutes

Hooks let you use more of React’s features without classes. Hooks embrace functions, but without sacrificing the practical spirit of React.

// code from https://reactjs.org/docs/hooks-overview.html

// State Hook example
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// code from https://reactjs.org/docs/hooks-overview.html

// Effect Hook example
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

References:

• Introducing Hooks

Objects that are equal (according to their equals()) must return the same hash code. It’s not required for different objects to return different hash codes.

There are some restrictions placed on the behavior of equals() and hashCode(), which are enumerated in the documentation for Object. In particular, the equals() method must exhibit the following properties:

• Symmetry: For two references, a and b, a.equals(b) if and only if b.equals(a)
• Reflexivity: For all non-null references, a.equals(a)
• Transitivity: If a.equals(b) and b.equals(c), then a.equals(c)
• Consistency with hashCode(): Two equal objects must have the same hashCode() value

References:

• https://www.ibm.com/developerworks/library/j-jtp05273/index.html
• https://www.baeldung.com/java-hashcode
• https://www.interviewcake.com/concept/java/hash-map
• https://www.interviewcake.com/concept/python/hashing?

Two-way data-binding is a mechanism that synchronizes data in a bidirectional way. Two-way binding is a pattern that connects a data model to the UI.

Two-way data binding in Angular really just boils down to property binding and event binding.

// code from https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html
<input [value]="username" (input)="username = $event.target.value">

<p>Hello !</p>

We’re binding the value of the username expression to the input’s value property (data goes into the component). We also bind an expression to the element’s input event. This expression assigns the value of $event.target.value to the username model.

References:

• https://www.bennadel.com/blog/3538-on-the-irrational-demonization-of-two-way-data-binding-in-angular.htm
• https://itnext.io/two-way-binding-in-react-a-concise-what-why-and-how-guide-22e76d4551d5
• https://www.wintellect.com/data-binding-pure-javascript/
• https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html
• https://dev.to/phoinixi/two-way-data-binding-in-vanilla-js-poc-4e06