ref – https://github.com/RestlessThinker/Javascript-Interface/blob/master/interface.js

Interfaces in JS are implemented like so:

simply use them whenever you do Constructor dependency injection, or set dependency injection.

Make sure the incoming object implements the functions (duck typing). If it does, then that means the inner objects calls the methods (Inversion of control).

The allows you to easily test the container and the incoming part.

You can add/edit props passed to the component using props proxy pattern.

In this pattern, we create new props as an object, then use dot operator to deep clone it and pass it into the Wrapped component as additional props.

ref – https://stackoverflow.com/questions/35616029/react-createelement-vs-cloneelement

JSX elements will be transpiled to React.createElement() functions to create React elements which are going to be used for the object representation of UI.

Whereas cloneElement is used to clone an element and pass it new props.

Using cloneElement will be usually be faster because you only need to instantiate one initial component.

This jsperf test shows cloneElement to be nearly twice as fast as createElement for Chromium 45 on Linux:

cloneElement ~1.7m ops/second
createElement ~0.85m ops/second

If you have a base component that you can clone without changing, then using cloneElement is a clear choice, both semantically and in terms of performance.

A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

The Uncontrolled Components:
– store its own state
– you query the DOM using a ref to find its current value when you need it.

In the below UserProfile component, the name input is accessed using ref.

ref – https://www.mattzeunert.com/2017/01/31/weak-maps.html

source code

Let’s improve our file structure:

src/
action.js
actionTypes.js
reducer.js

Redux is all statement management. UI and Redux are two completely different concerns. Its like two supermarket sections.

That’s why we need to move all of our redux code to another separate folder:

src/
store/
-action.js
-actionTypes.js
-reducer.js

Let’s go further. Let’s group them into features. Each feature should have the standard action, actionType, and reducer files.

Dux Pattern – Bundle of action types, actions, and reducers for a specific domain. Instead of folders to group these three things together, we simply use one file. It is much more maintainable.

Implement Dux Pattern

In src, create store folder. In your store folder, create file called questions.js.

ducks pattern rules:
1) reducer must have ‘export default
2) export individual action creators
3) action types are implementation detail (no need for export)

so, action types:

action creators:

we export them so that other files can use them if need be.

Finally, our reducer, which needs to have ‘export default’:

Configuring the Store

Finally, in order to use our store, in index.js:

Now, your redux files with all those features won’t be cluttered. If you have ten features, you don’t have to scroll through 30 files. All you have is 10, and they’ve neatly packed their action, action types, and reducer into one file.

JS

ref – https://codepen.io/anon/pen/VXMdwE

HTML

CSS

First, create the button, with its onclick handler toggleCoronaData.

Then implement toggleCoronaData.

If its closed, we animate the shifting of the div height, or whatever attribute you want to move.

If its open, we animate the opposite way.

ref –

• https://coderwall.com/p/p5cf5w/different-ways-of-creating-an-object-in-javascript
• http://chineseruleof8.com/code/index.php/2019/10/04/pure-prototype-inheritance-with-object-create/
• http://chineseruleof8.com/code/index.php/2018/04/13/object-create/

Object() constructor

Object.create()

a references an object, with its __proto__ pointing to undefined.

ref – http://chineseruleof8.com/code/index.php/2018/04/13/object-create/

Shorthand

b references an object, with its __proto__ pointing to default Object Prototype. Which has property constructor referencing to default Object function constructor. And of course, the default Object constructor has prototype reference back to the Object Prototype.

Using new to create instance

Given function

Explain this:

JS goes into 3 steps.
First, it identifies the function:

Second, it creates the instance:

Third, it initializes the instance:

which goes something like this:

All three steps is combined to create an instance object.

As a Singleton

or using IIFE

ref – http://chineseruleof8.com/code/index.php/2017/10/12/immediately-invoked-function-expression/