&quot;Better&quot; is subjective.

`querySelector` is the newer feature.

`getElementById` is better supported than `querySelector`.

`querySelector` is better supported than `getElementsByClassName` but `querySelector` gives you a static node list while `getElementsByClassName` gives you a live node list.

`querySelector` lets you find elements with rules that can&#39;t be expressed with `getElementById` and `getElementsByClassName`

You need to pick the appropriate tool for any given task. 

(In the above, for `querySelector` read `querySelector` / `querySelectorAll`).

The functions `getElementById` and `getElementsByClassName` are very specific, while `querySelector` and `querySelectorAll` are more elaborate. My guess is that they will actually have a worse performance.

Also, you need to check for the support of each function in the browsers you are targetting. The newer it is, the higher probability of lack of support or the function being &quot;buggy&quot;.


Is there a way to configure CLion to use a local makefile to compile code, rather than CMake? I can&#39;t seem to find the way to do it from the build options. 

Using local makefile for CLion instead of CMake

I want to programmatically create an UIImage filled by a solid color. Anyone have an idea of how to do this in Swift?

Create UIImage with solid color in Swift

I have heard that `querySelector` and `querySelectorAll` are new methods to select DOM elements. How do they compare to the older methods, `getElementById` and `getElementsByClassName` in terms of performance and browser support?

How does the performance compare to using jQuery&#39;s query selector?

Is there a best practice recommendation for which method to use?


querySelector vs. getElementById

I have heard that <code>querySelector</code> and <code>querySelectorAll</code> are new methods to select DOM elements. How do they compare to the older methods, <code>getElementById</code> and <code>getElementsByClassName</code> in terms of performance and browser support?
How does the performance compare to using jQuery's query selector?
Is there a best practice recommendation for which method to use?

I have a list box in the bootstrap modal and a button.
When the button is clicked a new button gets rendered inside a div in the modal.
When I close the modal and reopen it, the last operation performed on the modal like the button rendered earlier is still present in the modal.

How do reset the modal so that when the modal is opened again, the button is not present and user can again select the option from the list box and click on the button to render a new button and so on.

    &lt;!-- Modal --&gt;
    &lt;div
      class=&quot;modal fade&quot;
      id=&quot;myModal&quot;
      tabindex=&quot;-1&quot;
      role=&quot;dialog&quot;
      aria-labelledby=&quot;myModalLabel&quot;
      aria-hidden=&quot;true&quot;
    &gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
          &lt;div class=&quot;modal-header&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;
              &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span
              &gt;&lt;span class=&quot;sr-only&quot;&gt;Close&lt;/span&gt;
            &lt;/button&gt;
            &lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&gt;Select Language&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-body&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn&quot; id=&quot;submit_form&quot;&gt;Submit&lt;/button&gt;
    
            &lt;div class=&quot;modal-body1&quot;&gt;
              &lt;div id=&quot;placeholder-div1&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
    
          &lt;div class=&quot;modal-footer&quot;&gt;
            &lt;script&gt;
              $(&quot;#submit_form&quot;).on(&quot;click&quot;, function () {
                $(&quot;.modal-body1&quot;).html(&quot;&lt;h3&gt;test&lt;/h3&gt;&quot;);
              });
            &lt;/script&gt;
    
            &lt;script&gt;
              $(function () {
                $(&quot;.modal-footer&quot;).click(function () {
                  $(&quot;.modal&quot;).modal(&quot;hide&quot;);
                });
              });
            &lt;/script&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;


-- Update ---

Why doesn&#39;t this work?

    &lt;script type=&quot;text/javascript&quot;&gt;
      $(function () {
        $(&quot;#myModal&quot;).on(&quot;hidden.bs.modal&quot;, function (e) {
          console.log(&quot;Modal hidden&quot;);
          $(&quot;#placeholder-div1&quot;).html(&quot;&quot;);
        });
      });
    &lt;/script&gt;



How to reset the bootstrap modal when it gets closed and open it fresh again?

I&#39;m looking into making charts with D3, and stumbled upon the [`d3.bisector`][1]. However, I don&#39;t understand what it is or does from the documentation.

Almost all examples that I find in the web use a Date array, similar to the example in the official documentation:

&lt;!-- language: lang-js --&gt;

    var data = [
      {date: new Date(2011,  1, 1), value: 0.5},
      {date: new Date(2011,  2, 1), value: 0.6},
      {date: new Date(2011,  3, 1), value: 0.7},
      {date: new Date(2011,  4, 1), value: 0.8}
    ];

    var bisect = d3.bisector(function(d) { return d.date; }).right;

So what does the bisector do, besides picking the date object from the array elements? What does the `*.right` return?

And is it of any use if I have a simple 1-dimensional array, like `var data = [3, 6, 2, 7, 5, 4, 8]`?

Thanks for enlightening me.

  [1]: https://github.com/mbostock/d3/wiki/Arrays#d3_bisector

D3: What is a Bisector?

Say I&#39;m spying on a method like this:

    spyOn(util, &quot;foo&quot;).andReturn(true);

The function under test calls `util.foo` multiple times.

Is it possible to have the spy return `true` the first time it&#39;s called, but return `false` the second time? Or is there a different way to go about this?

How to have different return values for multiple calls on a Jasmine spy

I am having some trouble getting a WKWebView in iOS 8 to display an alert dialog that is called from Javascript. After creating a standard WKWebView and loading an HTML file, I have a button on the page that creates a simple alert with some text. This works in UIWebView and in Google Chrome/Safari, but does not appear to be working in WKWebView. Any help is appreciated.

My setup is as follows:

    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.allowsInlineMediaPlayback = YES;
    config.mediaPlaybackRequiresUserAction = false;
    _wkViewWeb = [[WKWebView alloc] initWithFrame:_viewWeb.frame config];
    _wkViewWeb.scrollView.scrollEnabled = NO;
    NSString *fullURL = @&quot;file://.../TestSlide.html&quot;;
    NSURL *url = [NSURL URLWithString:fullURL];
    NSURLRequest *request = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReloadIgnoringCacheData timeoutInterval:10];
	
    [_wkViewWeb loadRequest:request];

The html has the following function:

    &lt;SCRIPT Language=&quot;JavaScript&quot;&gt;
    function alertTest() {
        alert(&quot;Testing Alerts&quot;);
    }
    &lt;/SCRIPT&gt;

And a button:

    &lt;b&gt;Test Alerts: &lt;input type=&quot;button&quot; value=&quot;Alert Popup&quot; onclick=&quot;alertTest()&quot;&gt;&lt;br&gt;&lt;/b&gt; &lt;br&gt;

This setup works in UIWebView and in regular browsers, but does not work in WKWebView. Am I missing something in the configuration? Should I be using one of the WK delegates to control the alert/confirm dialog behavior? Thank you.

iOS WKWebView not showing javascript alert() dialog

How can I find the vue.js component corresponding to a DOM element?

If I have 

    element = document.getElementById(id);

Is there a vue method equivalent to the jQuery

    $(element)

DOM element to corresponding vue.js component

I have a bootstrap 2.32 modal which I am trying to dynamically insert into the HTML of another view. I&#39;m working with Codeigniter 2.1. Following https://stackoverflow.com/questions/27022715/dynamically-inserting-a-bootstrap-modal-partial-view-into-a-view, I have:

    &lt;div id=&quot;modal_target&quot;&gt;&lt;/div&gt;

as the target div for insertion. I have a button in my view that looks like:

         &lt;a href=&quot;#message&quot; class=&quot;btn btn-large btn-info&quot; data-action=&quot;Message&quot; data-toggle=&quot;tab&quot;&gt;Message&lt;/a&gt;

My JS has:

    $.ajax({
        type    : &#39;POST&#39;, 
        url     : &quot;AjaxUpdate/get_modal&quot;,
        cache   : false,
        success : function(data){ 
           if(data){
                $(&#39;#modal_target&#39;).html(data);

                //This shows the modal
                $(&#39;#form-content&#39;).modal();
           }
        }
    });



    

The button of the main view is:

    &lt;div id=&quot;thanks&quot;&gt;&lt;p&gt;&lt;a data-toggle=&quot;modal&quot; href=&quot;#form-content&quot; class=&quot;btn btn-primary btn-large&quot;&gt;Modal powers, activate!&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;

Here is what I&#39;d like to store separately as a partial view:

    &lt;div id=&quot;form-content&quot; class=&quot;modal hide fade in&quot; style=&quot;display: none;&quot;&gt;
        &lt;div class=&quot;modal-header&quot;&gt;
            &lt;a class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&#215;&lt;/a&gt;
            &lt;h3&gt;Send me a message&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-body&quot;&gt;
            &lt;form class=&quot;contact&quot; name=&quot;contact&quot;&gt;
                 &lt;fieldset&gt;

                   &lt;!-- Form Name --&gt;

                &lt;legend&gt;modalForm&lt;/legend&gt;

                &lt;!-- Text input--&gt;
                &lt;div class=&quot;control-group&quot;&gt;
                  &lt;label class=&quot;control-label&quot; for=&quot;user&quot;&gt;User&lt;/label&gt;
                  &lt;div class=&quot;controls&quot;&gt;
                    &lt;input id=&quot;user&quot; name=&quot;user&quot; type=&quot;text&quot; placeholder=&quot;User&quot; class=&quot;input-xlarge&quot; required=&quot;&quot;&gt;
                    &lt;p class=&quot;help-block&quot;&gt;help&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Text input--&gt;
                &lt;div class=&quot;control-group&quot;&gt;
                  &lt;label class=&quot;control-label&quot; for=&quot;old&quot;&gt;Old password&lt;/label&gt;
                  &lt;div class=&quot;controls&quot;&gt;
                    &lt;input id=&quot;old&quot; name=&quot;old&quot; type=&quot;text&quot; placeholder=&quot;placeholder&quot; class=&quot;input-xlarge&quot;&gt;
                    &lt;p class=&quot;help-block&quot;&gt;help&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Text input--&gt;
                &lt;div class=&quot;control-group&quot;&gt;
                  &lt;label class=&quot;control-label&quot; for=&quot;new&quot;&gt;New password&lt;/label&gt;
                  &lt;div class=&quot;controls&quot;&gt;
                    &lt;input id=&quot;new&quot; name=&quot;new&quot; type=&quot;text&quot; placeholder=&quot;placeholder&quot; class=&quot;input-xlarge&quot;&gt;
                    &lt;p class=&quot;help-block&quot;&gt;help&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Text input--&gt;
                &lt;div class=&quot;control-group&quot;&gt;
                  &lt;label class=&quot;control-label&quot; for=&quot;repeat&quot;&gt;Repeat new password&lt;/label&gt;
                  &lt;div class=&quot;controls&quot;&gt;
                    &lt;input id=&quot;repeat&quot; name=&quot;repeat&quot; type=&quot;text&quot; placeholder=&quot;placeholder&quot; class=&quot;input-xlarge&quot;&gt;
                    &lt;p class=&quot;help-block&quot;&gt;help&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;



                    &lt;/fieldset&gt;
            &lt;/form&gt;
        &lt;/div&gt;


        &lt;div class=&quot;modal-footer&quot;&gt;
            &lt;input class=&quot;btn btn-success&quot; type=&quot;submit&quot; value=&quot;Send!&quot; id=&quot;submit&quot;&gt;
            &lt;a href=&quot;#&quot; class=&quot;btn&quot; data-dismiss=&quot;modal&quot;&gt;Nah.&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;

When I click the button, the modal is inserted correctly, but I get the following error:

    TypeError: $(...).modal is not a function 

How can I fix this?
    

TypeError: $(...).modal is not a function with bootstrap Modal

I am looking for a simple throttle in JavaScript. I know libraries like lodash and underscore have it, but only for one function it will be overkill to include any of those libraries.

I was also checking if jQuery has a similar function - could not find.

[I have found one working throttle](https://remysharp.com/2010/07/21/throttling-function-calls), and here is the code:

    function throttle(fn, threshhold, scope) {
      threshhold || (threshhold = 250);
      var last,
          deferTimer;
      return function () {
        var context = scope || this;
    
        var now = +new Date,
            args = arguments;
        if (last &amp;&amp; now &lt; last + threshhold) {
          // hold on to it
          clearTimeout(deferTimer);
          deferTimer = setTimeout(function () {
            last = now;
            fn.apply(context, args);
          }, threshhold);
        } else {
          last = now;
          fn.apply(context, args);
        }
      };
    }

The problem with this is: it fires the function once more after the throttle time is complete. So let&#39;s assume I made a throttle that fires every 10 seconds on keypress - if I do keypress 2 times, it will still fire the second keypress when 10 seconds are completed. I do not want this behavior.

Simple throttle in JavaScript

I have a list of items with scores, ordered by scores, rendered by react.js as a vertically-oriented list of rectangular items (highest scores at top). Hovers and other clicks on the individual items may show/hide extra info, changing their vertical height.

New information arrives that changes the scores, slightly, making some items rank higher and others lower after a re-sort. I&#39;d like the items to simultaneously *animate* to their new positions, rather than appear in their new locations instantly. 

Is there a recommended way to do this in React.js, perhaps with a popular add-on?

(In a similar past situation using D3, a technique I&#39;ve used was roughly:

1. Display the list with item DOM nodes in their natural order, with relative positioning. With relative positioning, other small changes – CSS or JS-triggered – to individual items&#39; extent shift others as expected.
2. Mutate all the DOM nodes, in a single step, to have their actual relative-coordinates as new absolute coordinates – a DOM change that causes no visual change.
3. Re-order the item DOM nodes, within their parent, to the new sort order – another DOM change that causes no visual change.
4. Animate all nodes&#39; top-offsets to their new calculated values, based on the heights of all preceding items in the new ordering. This is the only visually-active step.
5. Mutate all item DOM nodes back to non-offset relative-positioning. Again, this causes no visual change, but the now-relatively-positioned DOM nodes, in the natural ordering of the underlying list, will handle internal hover/expand/etc style changes with proper shifting.

Now I&#39;m hoping for a similar effect in a React-ish way...)

What&#39;s a react.js-friendly way to animate a list-reordering?



&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;a for=&quot;collapseOne&quot; data-toggle=&quot;collapse&quot; href=&quot;#collapseOne&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot; class=&quot;btn btn-primary&quot;&gt;+ addInfo &lt;/a&gt;
        &lt;textarea class=&quot;form-control collapse&quot; id=&quot;collapseOne&quot; rows=&quot;4&quot;&gt;&lt;/textarea&gt;
    &lt;/div&gt;

    &lt;div class=&quot;form-group&quot;&gt;
        &lt;a for=&quot;collapseTwo&quot; data-toggle=&quot;collapse&quot; href=&quot;#collapseTwo&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot; class=&quot;btn btn-info&quot;&gt;+ subtitle &lt;/a&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control collapse&quot; id=&quot;collapseTwo&quot;&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

The problem is when clicking the `addInfo` tab, you could find a jump in expanding the `text_area`, namely, the animation is not smooth.



Bootstrap collapse animation not smooth

I am getting the following error while using Selenium in python:

    selenium.common.exceptions.StaleElementReferenceException: Message: u&#39;stale element reference: element is not attached to the page document\n

Interestingly enough, the error pops up at different times in the for loop.  Sometimes it gets through eg. 4 iterations and other times eg. 7.

Some of the relevant code being run is:

    for i in range(0, 22):
    	u = driver.find_elements_by_id(&quot;data&quot;)
	    text = u[0].get_attribute(&quot;innerHTML&quot;)
	    driver.find_elements_by_class_name(&quot;aclassname&quot;)[0].click()

What does this error mean and what is something I can try to fix this?

StaleElementReferenceException on Python Selenium

I was reading about the difference between two CSS properties `display:none` and `visibility:hidden` and encountered the **DOM reflow** term.

The statement was
&gt; `display: none` causes a DOM reflow whereas `visibility: hidden` does not. 

So my question is: 
### What is DOM reflow and how does it work?

What is DOM reflow?

I have a div in which I animate the content:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    #container {
      position: relative;
      width: 100px;
      height: 100px;
      border-style: inset;
    }
    #content {
      visibility: hidden;
      -webkit-animation: animDown 1s ease;
      position: absolute;
      top: 100px;
      width: 100%;
      height: 100%;
      background-color: lightgreen;
    }
    #container:hover #content {
      -webkit-animation: animUp 1s ease;
      animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
    }
    @-webkit-keyframes animUp {
      0% {
        -webkit-transform: translateY(0);
        visibility: hidden;
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(-100%);
        visibility: visible;
        opacity: 1;
      }
    }
    @-webkit-keyframes animDown {
      0% {
        -webkit-transform: translateY(-100%);
        visibility: visible;
        opacity: 1;
      }
      100% {
        -webkit-transform: translateY(0);
        visibility: hidden;
        opacity: 0;
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;container&quot;&gt;
      &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;



&lt;!-- end snippet --&gt;

On hover, the content slides into the container div.
When I refresh the page and the page loads, the `#content`&#39;s animDown animation will run, and I&#39;d prefer it to run only after a hover event.

Is there a way to do this pure CSS, or I have to figure something out in JS?

http://jsfiddle.net/d0yhve8y/

How to prevent a CSS keyframe animation from running on page load?

The React way to set which option is selected for a select box, is to set a special `value` prop on the `&lt;select&gt;` itself, corresponding to the `value` attribute on the `&lt;option&gt;` element you desire to be selected. For a `multiple` select this prop can accept an array instead.

Now because this is a special attribute, I&#39;m wondering what the canonical way is to *retrieve* the selected options in the same array-of-option-values-structure when the user changes things (so I can pass it through a callback to a parent component etc), since presumably the same `value` property won&#39;t be available on the DOM element.

To use an example, with a text field you would do something like this (JSX):

    var TextComponent = React.createClass({
      handleChange: function(e) {
        var newText = e.target.value;
        this.props.someCallbackFromParent(newText);
      },
      render: function() {
        return &lt;input type=&quot;text&quot; value={this.props.someText} onChange={this.handleChange} /&gt;;
      }
    });

What is the equivalent to replace `???` for this multiple select component?

    var MultiSelectComponent = React.createClass({
      handleChange: function(e) {
        var newArrayOfSelectedOptionValues = ???;
        this.props.someCallbackFromParent(newArrayOfSelectedOptionValues);
      },
      render: function() {
        return (
          &lt;select multiple={true} value={this.props.arrayOfOptionValues} onChange={this.handleChange}&gt;
            &lt;option value={1}&gt;First option&lt;/option&gt;
            &lt;option value={2}&gt;Second option&lt;/option&gt;
            &lt;option value={3}&gt;Third option&lt;/option&gt;
          &lt;/select&gt;
        );
      }
    });

Content Type	Original Author	Original Content on Stackoverflow
Question	goesToEleven	View Question on Stackoverflow
Solution 1 - Javascript	Quentin	View Answer on Stackoverflow
Solution 2 - Javascript	Thiago Negri	View Answer on Stackoverflow

querySelector vs. getElementById

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Create UIImage with solid color in Swift

Using local makefile for CLion instead of CMake

Attributions