Thanks to Johnson for giving me a good term to Google with (sans ridiculous false positives).

Here is a list of &quot;feature tour&quot; solutions I&#39;ve found:

 - Joyride | http://zurb.com/playground/jquery-joyride-feature-tour-plugin
 - Intro.js | http://usablica.github.io/intro.js/
 - Hopscotch | http://linkedin.github.io/hopscotch/
 - Crumble | http://blog.tommoor.com/crumble/
 - Pageguide | http://tracelytics.github.io/pageguide/
 - Bootstro.js | http://clu3.github.io/bootstro.js/

I&#39;m sure there are more out there. These solutions can make it far easier for a developer to implement better feature introductions to users.


More into addition of the list we can use lightweight library 
https://github.com/heelhook/chardin.js

How do you make a button in Bootstrap 3 undepress automatically after being clicked?

To replicate my problem, make a page with some buttons, give them appropriate bootstrap classes (and include bootstrap):

    &lt;input id=&quot;one&quot; type=&quot;button&quot; class=&quot;btn btn-default&quot; value=&quot;one&quot;&gt;
    &lt;input id=&quot;two&quot; type=&quot;button&quot; class=&quot;btn btn-primary&quot; value=&quot;two&quot;&gt;

Load the page and click on one of the buttons.  It becomes depressed and highlighted until you click somewhere else on the page (using FF29 and chrome35beta).

Inspecting the input element while clicked and unclicked doesn&#39;t show any additional classes being attached and removed from it.

Here&#39;s an example of Bootstrap buttons staying depressed: http://jsfiddle.net/52VtD/5166/

How to stop buttons from staying depressed with Bootstrap 3

I have a django model, and I need to compare old and new values of field BEFORE saving.

I&#39;ve tried the `save()` inheritance, and `pre_save` signal. It was triggered correctly, but I can&#39;t find the list of actually changed fields and can&#39;t compare old and new values. Is there a way? I need it for optimization of pre-save actions.

Thank you!

django - comparing old and new field value before saving

Is there a system/framework in existence which focuses on providing tutorial / help like overlays in the browser?

Example: You have a webapp which requires a certain level of instruction to the user. In this instruction process you wish to &quot;highlight&quot; (e.g. arrow, colour shading, pulsing border, etc) a certain element on the page, with an accompanied message.

This would be a true overlay, so it would function only in absolute positioning, and not interfere with the existing layout.

I&#39;m looking for an existing solution, before I consider rolling my own.

Client-side &quot;Feature Tour&quot; (tutorial/instructional) overlay system?

Is there a system/framework in existence which focuses on providing tutorial / help like overlays in the browser?
Example: You have a webapp which requires a certain level of instruction to the user. In this instruction process you wish to "highlight" (e.g. arrow, colour shading, pulsing border, etc) a certain element on the page, with an accompanied message.
This would be a true overlay, so it would function only in absolute positioning, and not interfere with the existing layout.
I'm looking for an existing solution, before I consider rolling my own.

Sometimes when I restart the server or there is a network failure the websocket gets closed and I would like to be able to get the current connection status at all time.

I am basically getting the following error and I want to be able to predict it :

&lt;!-- language:lang-js --&gt;

    WebSocket is already in CLOSING or CLOSED state. 
        (anonymous function) 
        InjectedScript._evaluateOn 
        InjectedScript._evaluateAndWrap 
        InjectedScript.evaluate



How to get the current status of a javascript websocket connection

Recently, I started using `reactjs` along with a `backbonejs` router to build an application.

I usually use use `requirejs` for dependency and code management. But, problem arises when I try to include files that contain `jsx` syntax.

This is what I have so far as my `router.js`:

    define([&quot;backbone&quot;, &quot;react&quot;], function(Backbone, React) {
    
      var IndexComponent = React.createClass({
        render : function() {
          return (
            &lt;div&gt;
            Some Stuff goes here
            &lt;/div&gt;
            );
        }
      });
    
    
    
      return Backbone.Router.extend({
        routes : {
          &quot;&quot;: &quot;index&quot;
        },
        index : function() {
          React.renderComponent(&lt;IndexComponent /&gt;, document.getElementById(&#39;index&#39;));
        }
      });
    });

How do I put IndexComponent in its own file and call it in this file ? I have tried the usual method (the same that I have used with backbone and react) but got an error due to `jsx` syntax.

Using reactjs with requirejs

I am currently reading [Async Javascript][1] by Trevor Burnham.  This has been a great book so far.

He talks about this snippet and console.log being &#39;async&#39; in the Safari and Chrome console. Unfortunately I can&#39;t replicate this. Here is the code:

    var obj = {}; 
    console.log(obj); 
    obj.foo = &#39;bar&#39;;
    // my outcome: Object{}; &#39;bar&#39;;
    // The book outcome: {foo:bar};
If this was async, I would anticipate the outcome to be the books outcome. console.log() is put in the event queue until all code is executed, then it is ran and it would have the bar property.

It appears though it is running synchronously.

Am I running this code wrong? Is console.log actually async?



  [1]: http://pragprog.com/book/tbajs/async-javascript

console.log() async or sync?

I am having an issue with Javascript. I&#39;m getting this error message:

&gt; Uncaught NotFoundError: Failed to execute &#39;insertBefore&#39; on &#39;Node&#39;: The node before which the new node is to be inserted is not a child of this node.

Javascript:

    var vidCounter = 0;
	    vidCounter++;
	var originalDiv;
	var newVideo = document.createElement(&quot;video&quot;);
        newVideo.setAttribute(&quot;name&quot;, vidCounter);
		newVideo.setAttribute(&quot;autoplay&quot;, &quot;true&quot;);
		originalDiv = document.getElementById(&quot;othersarea&quot;);
	    document.body.insertBefore(newVideo, originalDiv); 

It is trying to add a `&lt;video&gt;` tag below a div called `othersarea`.

    &lt;div id=&quot;remoteVideos&quot;&gt;
       	&lt;div class=&quot;title&quot;&gt;
		    &lt;h2&gt;Others&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div id=&quot;othersarea&quot;&gt;
		&lt;/div&gt;
    &lt;/div&gt;


How do I fix this? 

I also want to run `attachMediaStream([VIDEO TAG HERE HOW?], event.stream);` on my new video tag.


Uncaught NotFoundError: Failed to execute &#39;insertBefore&#39; on &#39;Node&#39;: The node before which the new node is to be inserted is not a child of this node

Is is possible to embed SVG markup into a ReactJS component? 

    render: function() {
      return (
        &lt;span&gt;
          &lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmln ...
        &lt;/span&gt;
      );
    }

Results in the error: 

&gt; Namespace attributes are not supported. ReactJSX is not XML.

What is the lightest way of doing this. Using something like [React ART][1] is way overkill for what I&#39;m trying to do.


  [1]: https://github.com/facebook/react-art

Embedding SVG into ReactJS

What is example for loading overlay in Swift IOS application when do a long tasks. Example for loading data from remote server.
I googled but not found any answer.

Updated:

Thanks for @Sebastian Dressler this is simple way. I updated my code and it run cool

    public class LoadingOverlay{

    var overlayView = UIView()
    var activityIndicator = UIActivityIndicatorView()
    
    class var shared: LoadingOverlay {
        struct Static {
            static let instance: LoadingOverlay = LoadingOverlay()
        }
        return Static.instance
    }
    
        public func showOverlay(view: UIView) {
            
            overlayView.frame = CGRectMake(0, 0, 80, 80)
            overlayView.center = view.center
            overlayView.backgroundColor = UIColor(hex: 0x444444, alpha: 0.7)
            overlayView.clipsToBounds = true
            overlayView.layer.cornerRadius = 10
            
            activityIndicator.frame = CGRectMake(0, 0, 40, 40)
            activityIndicator.activityIndicatorViewStyle = .WhiteLarge
            activityIndicator.center = CGPointMake(overlayView.bounds.width / 2, overlayView.bounds.height / 2)
            
            overlayView.addSubview(activityIndicator)
            view.addSubview(overlayView)
            
            activityIndicator.startAnimating()
        }
        
        public func hideOverlayView() {
            activityIndicator.stopAnimating()
            overlayView.removeFromSuperview()
        }
    }

let using:

    LoadingOverlay.shared.showOverlay(self.view)
    //To to long tasks
    LoadingOverlay.shared.hideOverlayView()

Loading an &quot;overlay&quot; when running long tasks in iOS

In rare occasions, the overlay on my map (small blue dot) gets a weird glare (big blue area on right) (as seen in picture). Sometimes zooming in or out will fix it, but not always. Can&#39;t find anything on why this would happen. Is it something to do with how it is rendered?


[![enter image description here][1]][1]


    func drawLocations(_ loc: CLLocation)
        {
            let center = CLLocationCoordinate2D(latitude: loc.coordinate.latitude, longitude: loc.coordinate.longitude)
            let lat: CLLocationDegrees = center.latitude
            let long: CLLocationDegrees = center.longitude
            var points = [CLLocationCoordinate2DMake(lat,long),CLLocationCoordinate2DMake(lat,long),CLLocationCoordinate2DMake(lat,long),CLLocationCoordinate2DMake(lat,long)]
            let polygon = MKPolygon(coordinates: &amp;points, count: points.count)
            DispatchQueue.main.async(execute: {
                self.mapView.add(polygon)
            })
        }
    func mapView(_ mapView: MKMapView!, rendererFor overlay: MKOverlay!) -&gt; MKOverlayRenderer!
        {
            if overlay is MKPolygon
            {
                let polygonView = MKPolygonRenderer(overlay: overlay)
                polygonView.lineWidth = 4
                polygonView.strokeColor = UIColor(red: 30/255.0, green: 12/255.0, blue: 242/255.0, alpha: 0.4)
                return polygonView
            }
            return nil
        }


  [1]: https://i.stack.imgur.com/ifRdp.jpg

Swift MKMapView Polygon Overlay glitching

I&#39;m a little bit confused about this, and I feel slightly stupid asking this question, but I want to understand it.

So, say I&#39;m working with a client side web framework, like Backbone, Angular or Durandal. This framework includes routing.

But I of course still have a server for database stuff, and so on, which also has routing.

My question now is: 

&gt;When to use &quot;client-side routing&quot; or &quot;server-side routing&quot;? 
&gt;
&gt;How is it &quot;decided&quot; whether routing is already performed on the client side or whether the request is first sent to the web server? 

I have a particularly hard time imagining this because the client side could do routing before the server ever gets to know about that request. 

I&#39;d be very thankful if someone could explain how these two routing systems work together.

P.S.: I have not included code samples because I&#39;m not looking for an answer concerning a particular framework, but concerning the routing process in general.

When to use &quot;client-side routing&quot; or &quot;server-side routing&quot;?

I&#39;m using react and react-router for my application on the client side. I can&#39;t seem to figure out how to get the following query parameters from a url like:

    http://xmen.database/search#/?status=APPROVED&amp;page=1&amp;limit=20

My routes look like this (the path is totally wrong I know):

    var routes = (
    &lt;Route&gt;
        &lt;DefaultRoute handler={SearchDisplay}/&gt;
        &lt;Route name=&quot;search&quot; path=&quot;?status=:status&amp;page=:page&amp;limit=:limit&quot; handler={SearchDisplay}/&gt;
        &lt;Route name=&quot;xmen&quot; path=&quot;candidate/:accountId&quot; handler={XmenDisplay}/&gt;
    &lt;/Route&gt;
    );

My route is working fine but I&#39;m just not sure how to format the path to get the parameters I want. Appreciate any help on this!

Getting query parameters from react-router hash fragment

I am trying out `Blazor` and i do not understand why when changing a `component` after refreshing the browser page it does not update ? Shouldn&#39;t the `client` update itself similar to how `angular` does?

It only refreshes when i restart the `blazor` server.

**Index.cshtml**

    @page &quot;/&quot;
    
    &lt;h1&gt;Hello, world!&lt;/h1&gt;

If i change lets say the text inside the `&lt;h1&gt;` to `Hello people` , i save the project and i refresh the page ( as i am advised in the `Blazor` tutorial) shouldn&#39;t i see `Hello people` ?


Why does page not update after refresh when .cshtml changes

What is the idiomatic python way to hide traceback errors unless a verbose or debug flag is set? 

Example code:

    their_md5 = &#39;c38f03d2b7160f891fc36ec776ca4685&#39;
    my_md5 = &#39;c64e53bbb108a1c65e31eb4d1bb8e3b7&#39; 
    if their_md5 != my_md5:
        raise ValueError(&#39;md5 sum does not match!&#39;)

Existing output now, but only desired when called with `foo.py --debug`:

    Traceback (most recent call last):
      File &quot;b:\code\apt\apt.py&quot;, line 1647, in &lt;module&gt;
        __main__.__dict__[command] (packages)
      File &quot;b:\code\apt\apt.py&quot;, line 399, in md5
        raise ValueError(&#39;md5 sum does not match!&#39;)
    ValueError: md5 sum does not match!

Desired normal output:

    ValueError: md5 sum does not match!

Here&#39;s a test script: https://gist.github.com/maphew/e3a75c147cca98019cd8


Hide traceback unless a debug flag is set

Lets say we have a simple example as below.

    &lt;input id=&quot;filter&quot; type=&quot;text&quot; /&gt;
    &lt;script&gt;

        function reload() {
		 // get data via ajax
	    }

        $(&#39;#filter&#39;).change($.debounce(250,reload));
    &lt;/script&gt;

What we&#39;re doing is introducing a small delay so that we reduce the number of calls to `reload` whilst the user is typing text into the input. 

Now, I realise that this will depend on a case by case basis but is there an accepted wisdom of how long the debounce delay should be, given an average (or maybe that should be lowest common denominator) typing/interaction speed. I generally just play around with the value until it &quot;feels&quot; right, but I may not represent a typical user. Has anyone done any studies on this? 

Content Type	Original Author	Original Content on Stackoverflow
Question	Spot	View Question on Stackoverflow
Solution 1 - Javascript	Spot	View Answer on Stackoverflow
Solution 2 - Javascript	Harshal Patel	View Answer on Stackoverflow

Client-side "Feature Tour" (tutorial/instructional) overlay system?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

django - comparing old and new field value before saving

How to stop buttons from staying depressed with Bootstrap 3

Attributions