What are the different types of binding available in Angular ?

Property Binding - binding is set in one direction from component's property to template. Property binding example.

<img [src]="ImageUrl">

Event Binding - It's used to bind any event. Event binding example.

<button (click)="onUpdate($event)">Save</button>

Two way binding - It's used for two-way binding. Two-way data binding example.

<input [(ngModel)]="name">

Attribute binding - It's used to set the value of attribute directly. Attribute binding example.

<button [attr.aria-label]="help">help</button>

Class binding - It's used to add or remove class names from class attribute. Class binding example.

 <span [class.specialClass]="isSpecialClass">Special class</span>

Style binding - It's used to add or remove the style from style attribute. Style binding example.

<button [style.color]="isSpecialClass ? 'blue' : 'black'">Click Me</button>

What is Angular DSL?

A domain-specific language (DSL) is a computer language specialized to a particular application domain. Angular has its own Domain Specific Language (DSL) which allows us to write Angular specific html-like syntax on top of normal html. It has its own compiler that compiles this syntax to html that the browser can understand. This DSL is defined in NgModules such as animations, forms, and routing and navigation.

Basically you will see 3 main syntax in Angular DSL.

(): Used for Output and DOM events.

[]: Used for Input and specific DOM element attributes.

*: Structural directives(*ngFor or *ngIf) will affect/change the DOM structure.

 

 

Apply vs. Call vs. Bind javascript example

Apply vs Call vs Bind Examples

Call

var person1 = {firstName: 'pranay', lastName: 'soni'};

var person2 = {firstName: 'test_f', lastName: 'test_l'};

function say(greeting) {

console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);

}

say.call(person1, 'Hello'); // Hello pranay soni

say.call(person2, 'Hello'); // Hello test_f test_l

Apply

var person1 = {firstName: 'pranay', lastName: 'soni'};

var person2 = {firstName: 'test_f', lastName: 'test_l'};

function say(greeting) {

console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);

}

say.apply(person1, ['Hello']); // Hello pranay soni

say.apply(person2, ['Hello']); // Hello test_f test_l

Bind

var person1 = {firstName: 'pranay', lastName: 'soni'};

var person2 = {firstName: 'test_f', lastName: 'test_l'};

function say() {

console.log('Hello ' + this.firstName + ' ' + this.lastName);

}

var sayHelloPranay = say.bind(person1);

var sayHelloTest = say.bind(person2);

sayHelloPranay(); // Hello pranay soni

sayHelloTest(); // Hello test_f test_l

When To Use Each

Call and apply are pretty interchangeable.

Just decide whether it’s easier to send in an array or a

comma separated list of arguments.

I always remember which one is which by remembering that Call is for

comma (separated list) and Apply is for Array.

Bind is a bit different. It returns a new function.

Call and Apply execute the current function immediately.

for await of vs promise.all in javascript

let i = 1;

function somethingAsync(time) {

console.log("fired");

return delay(time).then(() => Promise.resolve(i++));

}

const items = [1000, 2000, 3000, 4000];

function delay(time) {

return new Promise((resolve) => {

setTimeout(resolve, time);

});

}

(async () => {

console.time("first way");

const promises = await Promise.all(items.map((e) => somethingAsync(e)));

for (const res of promises) {

console.log(res);

}

console.timeEnd("first way");

i = 1; //reset counter

console.time("second way");

for await (const res of items.map((e) => somethingAsync(e))) {

// do some calculations

console.log(res);

}

console.timeEnd("second way");

})();

 

useReducer in React

const [state, dispatch] = useReducer(reducer, initialArg, init);

An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

Here’s the counter example from the useState section, rewritten to use a reducer: 

const initialState = { count: 0 };

function reducer(state, action) {

switch (action.type) {

case "increment":

return { count: state.count + 1 };

case "decrement":

return { count: state.count - 1 };

default:

throw new Error();

}

}

function Counter() {

const [state, dispatch] = useReducer(reducer, initialState);

return (

<>

Count: {state.count}

<button onClick={() => dispatch({ type: "decrement" })}>-</button>

<button onClick={() => dispatch({ type: "increment" })}>+</button>

</>

);

}

Specifying the initial state

There are two different ways to initialize useReducer state. You may choose either one depending on the use case. The simplest way is to pass the initial state as a second argument:

  const [state, dispatch] = useReducer(
    reducer,
    {count: initialCount}  );

Lazy initialization

You can also create the initial state lazily. To do this, you can pass an init function as the third argument. The initial state will be set to init(initialArg).

It lets you extract the logic for calculating the initial state outside the reducer. This is also handy for resetting the state later in response to an action:

function init(initialCount) {  return {count: initialCount};}
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':      return init(action.payload);    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

• Using useMemo( ) -
  It is a React hook that is used for caching CPU-Expensive functions.
  Sometimes in a React app, a CPU-Expensive function gets called repeatedly due to re-renders of a component, which can lead to slow rendering.
  useMemo( ) hook can be used to cache such functions. By using useMemo( ), the CPU-Expensive function gets called only when it is needed.
  
  
• Using React.PureComponent -
  It is a base component class that checks state and props of a component to know whether the component should be updated.
  Instead of using the simple React.Component, we can use React.PureComponent to reduce the re-renders of a component unnecessarily.
  
  
• Maintaining State Colocation -
  This is a process of moving the state as close to where you need it as possible.
  Sometimes in React app, we have a lot of unnecessary states inside the parent component which makes the code less readable and harder to maintain. Not to forget, having many states inside a single component leads to unnecessary re-renders for the component.
  It is better to shift states which are less valuable to the parent component, to a separate component.
  
  
• Lazy Loading -
  It is a technique used to reduce the load time of a React app. Lazy loading helps reduce the risk of web app performances to minimal.

Multi-level groupBy Using underscorejs or lodash

                # nest.js

                A multi-level [groupBy](http://underscorejs.org/#groupBy) 

                for arrays inspired by D3's [nest](https://github.com/mbostock/d3/wiki/Arrays#-nest) operator.

                Nesting allows elements in an array to be grouped into a hierarchical tree

                structure; think of it like the `GROUP BY` operator in SQL, except you can have

                multiple levels of grouping, and the resulting output is a tree rather than a

                flat table. The levels in the tree are specified by key functions.

                See [this fiddle](http://jsfiddle.net/V7an5/3/) for live demo.

                ## Implementation

                Depends on lodash's [groupBy](http://lodash.com/docs#groupBy) and

                 [mapValues](http://lodash.com/docs#mapValues):

                ```js

                _ = require('lodash');

                var nest = function (seq, keys) {

                    if (!keys.length)

                        return seq;

                    var first = keys[0];

                    var rest = keys.slice(1);

                    return _.mapValues(_.groupBy(seq, first), function (value) { 

                        return nest(value, rest)

                    });

                };

                module.exports = nest;

                ```

                ## Usage

                Input data to be nested:

                ```js

                var data = [

                { type: "apple", color: "green", quantity: 1000 }, 

                { type: "apple", color: "red", quantity: 2000 }, 

                { type: "grape", color: "green", quantity: 1000 }, 

                { type: "grape", color: "red", quantity: 4000 }

                ];

                ```

                Key functions used for grouping criteria:

                ```js

                var byType = function(d) {

                return d.type;

                };

                var byColor = function(d) {

                return d.color;

                };

                var byQuantity = function(d) {

                return d.quantity;

                };

                ```

                ## First Example

                Expected output when grouping by `color` and `quantity`:

                ```js

                var expected = {

                green: {

                    "1000": [

                    { type: 'apple', color: 'green', quantity: 1000 }, 

                    { type: 'grape', color: 'green', quantity: 1000 }

                    ]

                },

                red: {

                    "2000": [

                    { type: 'apple', color: 'red', quantity: 2000 }

                    ],

                    "4000": [

                    { type: 'grape', color: 'red', quantity: 4000 }

                    ]

                }

                };

                ```

                Nest by key name:

                ```js

                deepEqual(nest(data, ['color', 'quantity']), expected);

                ```

                Nest by key functions:

                ```js

                deepEqual(nest(data, [byColor, byQuantity]), expected);

                ```

                ## Second Example

                Expected output when grouping by `type` and `color`:

                ```js

                expected = {

                apple: {

                    green: [ { "type": "apple", "color": "green", "quantity": 1000 } ],

                    red: [ { "type": "apple", "color": "red", "quantity": 2000 } ]

                },

                grape: {

                    green: [ { "type": "grape", "color": "green", "quantity": 1000 } ],

                    red: [ { "type": "grape", "color": "red", "quantity": 4000 } ]

                }

                };

                ```

                Nest by key names:

                ```js

                deepEqual(nest(data, ['type', 'color']), expected);

                ```

                Nest by key functions:

                ```js

                deepEqual(nest(data, [byType, byColor]), expected);

                ```

अशांति का मूल कारण क्या है ?

गंधार शांत था कंधार अशांत है

कुंभा शांत था काबुल अशांत है

पर्शिया शांत था ईरान अशांत है

कैकेय शांत था पेशावर अशांत है

बाल्हीक शांत था बल्ख अशांत है

कंबोज शांत था बदख्शां अशांत है

सुवास्तु शांत था स्वात घाटी अशांत है

तक्षशिला शांत था रावलपिंडी अशांत है 

 अकर्मण्यता , कायरता , कुतर्क और निष्क्रियता का बढ़ ना और उस की वजह से जेहादी मजहबो का बढ़ ना यह 

 अशांति का मूल कारण है 

 https://www.thereligionofpeace.com/

   Basic Legal Non-Aggressive Law

   घुसपैठ नियंत्रण कानून , धर्मांतरण नियंत्रण कानून , जनसंख्या नियंत्रण कानून , समान नागरिक संहिता कानून

    यह कानून केवल बुद्धिजीवी को द्वारा कानून  स्वीकृति हे ,की हा यह करना चाहिए , लेकिन इसका १०० % पालन करने पर ही यह समाधान बन सकता हे।  केवल कानून बना देने  से कुछ भी नहीं होने वाला और केवल यही ४ कानून से सारि समस्या का समाधान हो जायेगा ऐसा भी नहीं हे 

US का क्षेत्रफल हमसे 3 गुना है और जनसंख्या मात्र 33 करोड़ इसलिए 2 गज की दूरी संभव है

चीन का क्षेत्रफल हमसे 3 गुना है और जनसंख्या 144 करोड़ इसलिए 2 गज की दूरी संभव है

भारत में 2 गज की दूरी असंभव है। जमीन दुनिया की मात्र 2% है और जनसंख्या 20% [125 करोड़ आधार +25 करोड़ बिना आधार]

चीन का क्षेत्रफल हमसे तीन गुना है फिर भी उसने 1950 में 'हम दो हमारे दो' कानून बनाया और 60 करोड़ बच्चों को पैदा होने से रोक दिया

यदि सरकार ने 1950 में जनसंख्या नियंत्रण कानून बनाया होता तो हम आज 150 करोड़ नहीं बल्कि 100 करोड़ से कम होते

राक्षस को खाते हुए राक्षस 

बड़े राक्षस के ऊपर छोटे राक्षस का कब्जा

   जिस कौम में डॉक्टर कम, आतंकवादी ज़्यादा हैं वो भी हॉस्पिटल पर ज्ञान बांट रहे है

हमारे दुश्मन अकर्मण्यता , कायरता , कुतर्क और निष्क्रियता

 

हमारे लोग हमेशा कोई ना कोई बहाना ढूंढ लेते हैं और हमारे पास जो रिसोर्स हे उस का कहा और कैसे उपयोग करे और उश्मे कैसे बढ़ोतरी करे ये ना सोच कर कोई ना कोई बहाना ढूंढ लेते हैं .

हमारे  ज्यादातर लोग केवल दुखो का रोना रोते रहते हे .कई बार तो इनको प्रॉब्लम का भी सही से ज्ञान नहीं होता हे 

इनको सहिमे प्रोब्ले काया हे वो पतानहीं होता हे।  वे हमेशा प्रॉब्लम क्या हे वो बदलते रहते हे .

असल में ये बात इनको पता हो और न हो ऐसा भी हो सकता हे . और हमेशा यही प्रॉब्लम के बारे में उनको संशय होता है

और प्रॉब्लम क्या है वो पता लग भी गया तो भी मनुष्य का सबसे बड़े दुश्मन  अकर्मण्यता , कायरता , कुतर्क और निष्क्रियता

समस्या का समाधान मिल भी जाये तो भी अकर्मण्यता का शिकारी अपनी अकर्मण्यता छुपाने के लिए कोई ना कोई बहाना 

ढूंढ लेते हैं . अकर्मण्यता का कारण कायरता भी हो सकता है .और कायरता छुपाने के लिए कोई ना कोई कुतर्क का सहारा लिया जाता है .  

ऐसे लोग इतिहास और वर्तमान की सिस्टम का दोष दे कर वर्त्तमान में निष्क्रियता में रह कर 

भविष्य उज्जवल बनानेकी बाते करते हे .

निष्क्रियता  छुपाने के लिए कोई ना कोई कुतर्क का सहारा लिया जाता है .  Example ( अहिंसा )

जो  मनुष्य केवल खुद को यूनिवर्स के सेण्टर में रख कर जी रहा हो और खुद का फायदा ही सबसे महत्व पूर्ण रख ता हो उस  नेरो माइंडसेट (संकीर्ण मानसिकता ) का मनुष्य अकर्मण्यता , कायरता , कुतर्क और निष्क्रियता का सहारा लेता हे 

ऐसा मनुष्य मानवता और खुद का भी दुश्मन होता है . हमारे आज कल के जिहादियों की फ्री में वकालत करने वालो का कुछ असा ही हाल हे

जिज्ञासा और संदेह (संशय) कोई भी रिसर्च के लिए बहुत ही अच्छा है . लेकिन पूरी लाइफ संशय में बिता देना अच्छी बात नहीं 

संशय भी ऐसा होना चाहिए की उसे मानवता और विज्ञान में बढ़ोतरी हो . 

सरकार के अधीन भारत के हिंदू मंदिर नहीं रहने चाहिए ये बात बिलकुल सही हे  क्युकी हमारा राष्ट्र अभी भी हिन्दू , जैन और बौद्ध धर्म दर्शनशास्र  १००% फॉलो नहीं करता इतिहास और वर्त्तमान की अकर्मण्यता , कायरता , कुतर्क और निष्क्रियता की वजहसे जिहादी मजहब भी संविधान की आड़ में सामान और सुरक्षित हे इसलिए . लेकिन अभी भी सरकार के  अधीन नहीं रहने चाहिए ये पता  हे लेकिन किशके अधीन रहना छाए ये बहोत कॉम्प्लिकेटेड समस्या हे . और जब तक हम एक अखंड महाभारत हिंदू राष्ट्र नहीं बनाते, तब तक  100% और स्थायी समाधान नहीं है। लेकिन तबतक हमें वर्त्तमान के हालत के अनुसार कैसे भी करके मंदिरो को ये सेकुलर और सर्व धर्म समभाव  ( मानव और राक्षस दोनों एक ही हे वाले सविधान ) के चगुल में से छुड़वा लेने हे 

केलिन सरकार के अधीन से निकलने के बाद भी ये मंदिर केवल हिन्दू औ के लिए अच्छे कार्य करसकते हे लेकिन राष्ट्र के लिए काम नहीं आ सकते क्युकी राष्ट्र के लिए कुछभी करना उस में जेहादिओं का भी हिस्सा होगा अभी के सविधान के हिसाबसे .

मंदिरो की सम्पति केवल हिन्दू ओ के लिए यूज़ होनी चाहिए।  और उष्का जेहादी और को प्रत्यक्ष और अप्रत्यक्ष 

रूप से कोई भी फायदा नहीं होना चाहिए

हमारे कई लोग आज बोल रहे हे मंदिरो का धन सरकार के पास जरहाहे इसलिए सनातन कमजोर पड़ रहाहे , बात तो सही हे लेकिन कोई ये नहीं बता रहा ही जो मंदिर सरकार के अंतर्गत नहीं हे और उन्हें करोडो का सालाना दान मिलता हे उस मेसे कितना धन आजतक यति नरसिम्हा नन्द सरस्वती जैसे योद्धा ओ को काम में आया ?. 

मेरे शेरो बढ़ो आगे , करो दिशाओं को रोशन अपनी चिता ओ से -- यति नरसिम्हा नन्द सरस्वती

समझ समझ के समझ को समझो समझ समझना भी एक समझ है समझ समझ को जो ना समझे मेरी समझ में वह नासमझ है  -- सूर्यसागरजी गुरुदेव 

#Nationalist #philosophie #दार्शनिक

node-redis with ZADD , ZRANGE , ZREMRANGEBYSCORE , ZREVRANGEBYSCORE

 

Node-Redis with ZADD , ZRANGE , ZREMRANGEBYSCORE , ZREVRANGEBYSCORE with

Limit and offset usecase in Chat Application.

Commands with Optional and Keyword arguments

This applies to anything that uses an optional [WITHSCORES] or

[LIMIT offset count] in the redis.io/commands documentation.

Example:

var args = [ 'myzset', 1, 'one', 2, 'two', 3, 'three', 99, 'ninety-nine' ];

client.zadd(args, function (err, response) {

if (err) throw err;

console.log('added '+response+' items.');

var args1 = [ 'myzset', '+inf', '-inf' ];

client.zrevrangebyscore(args1, function (err, response) {

if (err) throw err;

console.log('example1', response);

// write your code here

});

var max = 3, min = 1, offset = 1, count = 2;

var args2 = [ 'myzset', max, min, 'WITHSCORES', 'LIMIT', offset, count ];

client.zrevrangebyscore(args2, function (err, response) {

if (err) throw err;

console.log('example2', response);

// write your code here

});

});

// set using node-redis client

let from_user = data.from_user;

let to_user = data.to_user;

let chat_uuid = new Date().getTime();

let chat_key = "chat:from:"+from_user+":to:"+to_user;

redisUtil.redisCli.zadd(chat_key,chat_uuid,JSON.stringify(data),

function(chat_save_error,chat_save_data){

console.log(chat_save_error);

});

// get using node-redis client

let chat_key = "chat:from:"+inputs.from_user+":to:"+inputs.to_user;

redisUtil.redisCli.zrange(chat_key,0,-1,'withscores',function(err,result){

});

// Delete Chat From Radis In Beetween Ids

ZREMRANGEBYSCORE chat:from:ADMIN2:to:ADMIN (1616750982327 1616750995307

// Get All Chat From Redis WITHSCORES

ZRANGE chat:from:ADMIN:to:ADMIN2 0 -1 WITHSCORES

// Get Last 5 Chat From Redis

ZREVRANGEBYSCORE chat:from:ADMIN:to:ADMIN2 +inf -inf LIMIT 0 5