&gt; Passive event listeners are an emerging web standard, new feature
&gt; shipped in Chrome 51 that provide a major potential boost to scroll
&gt; performance. [Chrome Release Notes.][1]

It enables developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners.

**Problem:** All modern browsers have a threaded scrolling feature to permit scrolling to run smoothly even when expensive JavaScript is running, but this optimization is partially defeated by the need to wait for the results of any `touchstart` and `touchmove` handlers, which may prevent the scroll entirely by calling `preventDefault()` on the event. 

**Solution: `{passive: true}`**

By marking a touch or wheel listener as passive, the developer is promising the handler won&#39;t call `preventDefault` to disable scrolling. This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user.

    document.addEventListener(&quot;touchstart&quot;, function(e) {
        console.log(e.defaultPrevented);  // will be false
        e.preventDefault();   // does nothing since the listener is passive
        console.log(e.defaultPrevented);  // still false
    }, Modernizr.passiveeventlisteners ? {passive: true} : false);

[DOM Spec][2]  ,  [Demo Video][3]  , [Explainer Doc][4]


  [1]: https://blog.chromium.org/2016/05/new-apis-to-help-developers-improve.html
  [2]: https://dom.spec.whatwg.org/#dom-eventlisteneroptions-passive
  [3]: https://www.youtube.com/watch?v=NPM6172J22g
  [4]: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

This error comes up with React / Preact projects all the time.
It doesn&#39;t seem to effect anything at all.
Turn it off by unselecting &quot;verbose&quot; in devTools log levels

I am using Emoji character in my project. That characters are saved (??) into mysql database. I had used database Default collation in `utf8mb4_general_ci`.
It show 

&gt; 1366 Incorrect string value: &#39;\xF0\x9F\x98\x83\xF0\x9F...&#39; for column
&gt; &#39;comment&#39; at row 1

How to store Emoji Character in MySQL Database

Recently I was using GitExtension 2.46, but the Git version that has the same is 1.9.4.msysgit.2. Willing to use only Git commands, I uninstalled GitExtension and install the latest version available of [Git][1] and [KDiff3][2].

When I make a merge and have conflicts, I run the following command:

    git mergetool

Then I receive the message:
&gt;  The merge tool kdiff3 is not available as &#39;kdiff3&#39;.

I guess it must be by the KDiff3 path.

**Environment**

 - OS: Windows 10
 - Git 2.6.1.windows.1
 - KDiff3 0.9.98 (64 bit)

**Questions:**

 - What do I have to configure in the .gitconfig file for the command `git mergetool` to open the KDiff3 GUI with the versions **LOCAL**, **REMOTE**, **BASE** and **MERGED** of conflicted file?

 - How can I configure it to use it as a diff tool?

  [1]: https://git-scm.com/downloads
  [2]: http://kdiff3.sourceforge.net



Git: How can I configure KDiff3 as a merge tool and diff tool?

While working around to boost performance for progressive web apps, I came across a new feature `Passive Event Listeners` and I find it hard to understand the concept.

What are `Passive Event Listeners` and what is the need to have it in our projects?

What are passive event listeners?

<p>While working around to boost performance for progressive web apps, I came across a new feature <code>Passive Event Listeners</code> and I find it hard to understand the concept.</p>
<p>What are <code>Passive Event Listeners</code> and what is the need to have it in our projects?</p>


I&#39;m trying to render a `div` on the same page when the user clicks on a link.

My HTML page:

      
    &lt;div class=&quot;stores&quot;&gt;
      &lt;h1&gt;Stores&lt;/h1&gt;
      &lt;ul class=&quot;stores&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot; onClick={this.onClick} &gt;Store A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;Store B&lt;/li&gt;
        &lt;li&gt;Store C&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;

My `components/store.js.jsx`:

    var Store = React.createClass({
      getInitialState: function() {
        return { showStore: false };
      },
      onClick: function() {
          this.setState({ showStore: true });
      },
      render: function() {
      return(
        &lt;div className=&quot;row account stores&quot; style={{display: { this.state.showStore ? &#39;block&#39; : &#39;none&#39;} }}&gt;
          &lt;div&gt;a lot more divs&lt;/div&gt;
            &lt;/div&gt;
        );
      }
    });

But I get a:

&gt; SyntaxError: unknown: Unexpected token

For this line:

    style={{display: { this.state.showStore ? &#39;block&#39; : &#39;none&#39;} }}

How can I nest conditionally inside a style? 


How to CSS display:none within conditional with React JSX?

We have an action that fetches an object async, let&#39;s call it `getPostDetails`, that takes a parameter of which post to fetch by
an id. The user is presented with a list of posts and can click on one to get some details.

If a user clicks on &quot;Post #1&quot;, we dispatch a `GET_POST` action which might look something like this.

    const getPostDetails = (id) =&gt; ({
      type: c.GET_POST_DETAILS,
      promise: (http) =&gt; http.get(`http://example.com/posts/#${id}`),
      returnKey: &#39;facebookData&#39;
    })


This is picked up by a middleware, which adds a success handler to the promise, which will call an action like
`GET_POST__OK` with the deserialized JSON object. The reducer sees this object and applies it to a store. A typical
`__OK` reducer looks like this.

    [c.GET_ALL__OK]: (state, response) =&gt; assign(state, {
      currentPost: response.postDetails
    })

Later down the line we have a component that looks at `currentPost` and displays the details for the current post.

However, we have a race condition. If a user submits two `GET_POST_DETAILS` actions one right after the other, there is
no guarantee what order we recieve the `__OK` actions in, if the second http request finishes before the first, the
state will become incorrect.

        Action                   =&gt; Result
        ---------------------------------------------------------------------------------
    |T| User Clicks Post #1      =&gt; GET_POST for #1 dispatched =&gt; Http Request #1 pending
    |i| User Clicks Post #2      =&gt; GET_POST for #2 dispatched =&gt; Http Request #2 pending
    |m| Http Request #2 Resolves =&gt; Results for #2 added to state
    |e| Http Request #1 Resolves =&gt; Results for #1 added to state
     V

How can we make sure the last item the user clicked always will take priority?

How to avoid race conditions when fetching data with Redux?

I have a rest endpoint that returns a list on a GET call. I also have a POST endpoint to add new items and a DELETE to remove them. This works in Firefox and Chrome, and the POST and DELETE work in IE11. However, the GET in IE11 only works on initial load of the page. Refreshing returns cached data. I have seen post about this behavior in Angular 1 but nothing for Angular 2(release candidate 1).

Prevent IE11 caching GET call in Angular 2

I understand that React tutorials and documentation warn in [no uncertain terms][1] that state should not be directly mutated and that everything should go through `setState`.

I would like to understand why, exactly, I can&#39;t just directly change state and then (in the same function) call `this.setState({})` just to trigger the `render`.

E.g.: The below code seems to work just fine:
```javascript
const React = require(&#39;react&#39;);

const App = React.createClass({
  getInitialState: function() {
    return {
      some: {
        rather: {
          deeply: {
            embedded: {
              stuff: 1,
            },
          },
        },
      },
    },
  };
  updateCounter: function () {
    this.state.some.rather.deeply.embedded.stuff++;
    this.setState({}); // just to trigger the render ...
  },
  render: function() {
    return (
      &lt;div&gt;
        Counter value: {this.state.some.rather.deeply.embedded.stuff}
        &lt;br&gt;&lt;/br&gt;
        &lt;button onClick={this.updateCounter}&gt;Increment&lt;/button&gt;
      &lt;/div&gt;
    );
  },
});

export default App;
```
I am all for following conventions but I would like to enhance my further understanding of how ReactJS actually works and what can go wrong or is it sub-optimal with the above code.

The notes under the [`this.setState` documentation][2] basically identify two gotchas:

 1. That if you mutate state directly and then subsequently call `this.setState` this may replace (overwrite?) the mutation you made. I don&#39;t see how this can happen in the above code.
 2. That `setState` may mutate `this.state` effectively in an asynchronous / deferred way and so when accessing `this.state` right after calling `this.setState` you are not guaranteed to access the final mutated state. I get that, by this is not an issue if `this.setState` is the last call of the update function.

  [1]: https://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c#.24f7t0qpz
  [2]: https://facebook.github.io/react/docs/component-api.html#setstate

Why can&#39;t I directly modify a component&#39;s state, really?

I&#39;m learning RxJS and Angular 2. Let&#39;s say I have a promise chain with multiple async function calls which depend on the previous one&#39;s result which looks like: 

    var promiseChain = new Promise((resolve, reject) =&gt; {
      setTimeout(() =&gt; {
        resolve(1);
      }, 1000);
    }).then((result) =&gt; {
      console.log(result);

      return new Promise((resolve, reject) =&gt; {
        setTimeout(() =&gt; {
          resolve(result + 2);
        }, 1000);
      });
    }).then((result) =&gt; {
      console.log(result);

      return new Promise((resolve, reject) =&gt; {
          setTimeout(() =&gt; {
          resolve(result + 3);
            }, 1000);
      });
    });

    promiseChain.then((finalResult) =&gt; {
      console.log(finalResult);
    });

My attempts at doing the same solely using RxJS without the use of promises produced the following:

    var observableChain = Observable.create((observer) =&gt; {
      setTimeout(() =&gt; {
        observer.next(1);
        observer.complete();
      }, 1000);
    }).flatMap((result) =&gt; {
      console.log(result);

      return Observable.create((observer) =&gt; {
        setTimeout(() =&gt; {
          observer.next(result + 2);
          observer.complete()
        }, 1000);
      });
    }).flatMap((result) =&gt; {
      console.log(result);

      return Observable.create((observer) =&gt; {
        setTimeout(() =&gt; {
          observer.next(result + 3);
          observer.complete()
        }, 1000);
      });
    });

    observableChain.subscribe((finalResult) =&gt; {
      console.log(finalResult);
    });

It yields the same output as the promise chain. My questions are

1. Am I doing this right? Are there any RxJS related improvements that I can make to the above code

2. How do I get this observable chain to execute repeatedly? i.e. Adding another subscription at the end just produces an additional 6 though I expect it to print 1, 3 and 6.

    observableChain.subscribe((finalResult) =&gt; {
      console.log(finalResult);
    });
    
    observableChain.subscribe((finalResult) =&gt; {
      console.log(finalResult);
    });
    
    1
    3
    6
    6

Chaining Observables in RxJS

MDN suggests that you do the following to create and populate service worker cache:

    this.addEventListener(&#39;install&#39;, function(event) {
      event.waitUntil(
        caches.open(&#39;v1&#39;).then(function(cache) {
          return cache.addAll([
            &#39;/sw-test/&#39;,
            &#39;/sw-test/index.html&#39;,
            ... etc ...
          ]);
        })
      );
    });

I do not understand that code. The `waitUntil` method is documented too, and it seems the code above is the single purpose of it&#39;s existence at the moment:

&gt; The ExtendableEvent.waitUntil() method extends the lifetime of the
&gt; event. When called in an EventHandler associated to the install event,
&gt; it delays treating the installing worker as installed until the passed
&gt; Promise resolves successfully. This is primarily used to ensure that a
&gt; service worker is not considered installed until all of the core
&gt; caches it depends on are populated.

What I do not understand is:

 - How does `waitUntil` generally affect code flow? Does it stop event from propagating until it&#39;s promise resolves?
 - Why is it needed in the context of opening worker cache?

I am asking this question because I have problems with the code above and I would like to understand it.

What does event.waitUntil do in service worker and why is it needed?

In the code below `removeSelectedCountry()` should be called when a `span` element is clicked and `handleKeyDown($event)` should be called when there is a `keydown` event on a `div`.
    
    @Component({
        selector: &quot;wng-country-picker&quot;,
        template: `
        &lt;ul class=&quot;CountryPicker-selected&quot; *ngIf=&quot;selectedCountries.length &gt; 0&quot;&gt;
        &lt;li *ngFor=&quot;let country of selectedCountries&quot;&gt;
            &lt;span class=&quot;Pill Pill--primary&quot; (click)=&quot;removeSelectedCountry(country)&quot;&gt;
            {{ country.name }}
            &lt;/span&gt;
        &lt;/li&gt;
        &lt;/ul&gt; 
        &lt;div (keydown)=&quot;handleKeyDown($event)&quot; class=&quot;CountryPicker-input&quot;&gt;&lt;/div&gt;
    `,
    providers: [CUSTOM_VALUE_ACCESSOR]
    })

But `removeSelectedCountry()` is called every time &lt;kbd&gt;Enter&lt;/kbd&gt; key is pressed.  

To make the code work, I had to change the `click` event to `mousedown` event.
It works fine now.

Can anyone explain why the &lt;kbd&gt;Enter&lt;/kbd&gt; key would trigger the `click` event?

    @Component({
        selector: &quot;wng-country-picker&quot;,
        template: `
        &lt;ul class=&quot;CountryPicker-selected&quot; *ngIf=&quot;selectedCountries.length &gt; 0&quot;&gt;
        &lt;li *ngFor=&quot;let country of selectedCountries&quot;&gt;
            &lt;span class=&quot;Pill Pill--primary&quot; (mousedown)=&quot;removeSelectedCountry(country)&quot;&gt;
            {{ country.name }}
            &lt;/span&gt;
        &lt;/li&gt;
        &lt;/ul&gt; 
        &lt;div (keydown)=&quot;handleKeyDown($event)&quot; class=&quot;CountryPicker-input&quot;&gt;&lt;/div&gt;
    `,
    providers: [CUSTOM_VALUE_ACCESSOR]
    })


Adding class snipppet:

    export class CountryPickerComponent {

    private selectedCountries: CountrySummary[] = new Array();

    private removeSelectedCountry(country: CountrySummary){
        // check if the country exists and remove from selectedCountries
        if (this.selectedCountries.filter(ctry =&gt; ctry.code === country.code).length &gt; 0)
        {
            var index = this.selectedCountries.indexOf(country);
            this.selectedCountries.splice(index, 1);
            this.selectedCountryCodes.splice(index, 1);
        }
    }

    private handleKeyDown(event: any)
    {
        if (event.keyCode == 13)
        {
           // action
        }
        else if (event.keyCode == 40)
        {
            // action
        }  
        else if (event.keyCode == 38)
        {
            // action
        }    
    }


Does Enter key trigger a click event?

I&#39;ve tried searching around for an answer to this, but most of them are outside the context of React, where `onChange` triggers upon blur.

In performing various tests, I can&#39;t seem to tell how these two events are different (when applied to a textarea). Can anyone shed some light on this?

In React, what&#39;s the difference between onChange and onInput?

Currently, the only stable way to process a series of async results in JavaScript is using the event system. However, three alternatives are being developed:

Streams: https://streams.spec.whatwg.org
&lt;br&gt;
Observables: https://tc39.github.io/proposal-observable
&lt;br&gt;
Async Iterators: https://tc39.github.io/proposal-async-iteration

What are the differences and benefits of each over events and the others?

Do any of these intend to replace events?

Events vs Streams vs Observables vs Async Iterators

*Without Parameter*
-------------------

    function clickMe(e){
      //e is the event
    }
    
    &lt;button onClick={this.clickMe}&gt;&lt;/button&gt;

*With Parameter*
----------------

    function clickMe(parameter){
      //how to get the &quot;e&quot; ?
    }
    &lt;button onClick={() =&gt; this.clickMe(someparameter)}&gt;&lt;/button&gt;

I want to get the `event`. How can I get it?

React onClick - pass event with parameter

I have a react component like :


    import React, { PropTypes, Component } from &#39;react&#39;
    
    
    class MyComponent extends Component {
    
        componentDidMount() {
           window.addEventListener(&quot;beforeunload&quot;, function (event) {
    			console.log(&quot;hellooww&quot;)
    			event.returnValue = &quot;Hellooww&quot;
    		})
        }
    
        componentWillUnmount() {
            window.removeEventListener(&quot;beforeunload&quot;, function (event) {
    			console.log(&quot;hellooww&quot;)
    			event.returnValue = &quot;Hellooww&quot;
    		})
        }
    
        render() {
    
            return (
                &lt;div&gt;
                    Some content
                &lt;/div&gt;
            )
        }
    
    }
    
    export default MyComponent

Here event lister is added to the component. When I refresh the page it gives me pop up asking to leave the page. 

But when I go to another page and do refresh it again shows the same pop-up.

I am removing the `eventListener` from the component on `componentWillUnmount`. Then why it is not being removed?

How can I remove the `beforeunload` event on other pages?

reactjs event listener beforeunload added but not removed

As we know, it&#39;s often advised to debounce scroll listeners so that UX is better when the user is scrolling.

However, I&#39;ve often found [libraries][1] and [articles][2] where influential people like Paul Lewis recommend using `requestAnimationFrame`. However as the web platform progress rapidly, it might be possible that some advice get deprecated over time.

The problem I see is there are very different use-cases for handling scroll events, like building a parallax website, or handling infinite scrolling and pagination.

I see 3 major tools that can make a difference in term of UX:

- [requestAnimationFrame][3]
- [requestIdleCallback][4]
- [Passive event listeners][5]

So, I&#39;d like to know, per usecase (I only have 2 but you can come up with other ones), what kind of tool should I use right now to have a very good scroll experience?

To be more precise, my main question would be more related to infinite scrolling views and pagination (which generally do not have to trigger visual animations, but we want a good scrolling experience), is it better to replace `requestAnimationFrame` with a combo of `requestIdleCallback` + passive scroll event handler ? I&#39;m also wondering when it makes sense to use `requestIdleCallback` for calling an API or handling the API response to let the scroll perform better, or is it something that the browser may already handle for us?

  [1]: https://github.com/WPOTools/steady.js
  [2]: https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers
  [3]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  [4]: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
  [5]: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

Content Type	Original Author	Original Content on Stackoverflow
Question	Vivek Pratap Singh	View Question on Stackoverflow
Solution 1 - Javascript	Vivek Pratap Singh	View Answer on Stackoverflow
Solution 2 - Javascript	schmell	View Answer on Stackoverflow

What are passive event listeners?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Git: How can I configure KDiff3 as a merge tool and diff tool?

How to store Emoji Character in MySQL Database

Attributions