I was curious about this as well.  These appear to be data- attributes that are created by [plunker][1] when including external libraries in its editor. Since plunker is used heavily throughout the development community that is probably why you see it appearing a lot.

By themselves they don&#39;t do anything special, unless a library or service decides to use them.  

The &#39;data-semver&#39; attribute appears to be an implementation of [Semantic Versioning][2] 

To the best of my knowledge no libraries actually use them for any sort of dependency checking/loading.


  [1]: http://plnkr.co/
  [2]: http://semver.org/

The `data-` attribute is new in [HTML5][1] and can be used to store arbitrary (text) data. The part after the &#39;-&#39; can be chosen by the author of the document. So you could have an attribute called myAge on the image of a person: `&lt;img src=&quot;imageOfMe.jpg&quot; data-myAge=&quot;42&quot; /&gt;`. It is mostly used to save data for javascript applications.


  [1]: http://ejohn.org/blog/html-5-data-attributes/

I am developing an application which will send emails using C#. The app will be able to use templates for mail, among other things. The problem is I&#39;m having trouble finding any Office.Interop references, which means I cannot work with Outlook. 

Office is installed on my computer, but I&#39;ve also tried to install the PIA from this link http://www.microsoft.com/en-us/download/details.aspx?id=3508. Unfortunately, this didn&#39;t change anything: When I launch the MSI it stops without a word, and I don&#39;t know if that is part of the problem.

Cannot find Microsoft.Office.Interop Visual Studio

I am trying to get started with Ansible to provision my Vagrantbox, but I can’t figure out how to deal with host files.

According to the documentation the should be storred in `/etc/ansible/hosts`, but I can’t find this on my system (Mac OS X). I also seen examples where the `host.ini` file situated in the document root adjacent to the vagrant file.

So my question is where would you store your hostfile for setting up a single vagrant box?

Where to store Ansible host file on Mac OS X

I have seen tags like this in HTML. What are these attributes?

**This is NOT a duplicate of the `data-*` question.**

**Edit:**
I am looking for these two specific attributes, not `data-*` in general, nor data-require**d**, as Google suggests. If you search the web, you can find these attributes are used in many places. I guess this is some like of dependency management software? 

    &lt;link data-require=&quot;bootstrap-css@*&quot; data-semver=&quot;3.0.0&quot; rel=&quot;stylesheet&quot; href=&quot;//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css&quot; /&gt;
     
    &lt;script data-require=&quot;angular.js@1.1.x&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js&quot; data-semver=&quot;1.1.5&quot;&gt;&lt;/script&gt;
    &lt;script data-require=&quot;ui-bootstrap@0.5.0&quot; data-semver=&quot;0.5.0&quot; src=&quot;http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js&quot;&gt;&lt;/script&gt;


What are &quot;data-require&quot; &quot;data-semver&quot; in HTML files?

I have seen tags like this in HTML. What are these attributes?
This is NOT a duplicate of the <code>data-*</code> question.
Edit:
I am looking for these two specific attributes, not <code>data-*</code> in general, nor data-required, as Google suggests. If you search the web, you can find these attributes are used in many places. I guess this is some like of dependency management software?
<pre><code class="hljs language-javascript">&#x3C;link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
 
&#x3C;script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5">&#x3C;/script>
&#x3C;script data-require="ui-bootstrap@0.5.0" data-semver="0.5.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js">&#x3C;/script>
</code></pre>

I&#39;m wondering how to select an element that does not have a specific class using JavaScript, not jQuery.

For example, I have this list:

	&lt;ul id=&quot;tasks&quot;&gt;
	  &lt;li class=&quot;completed selected&quot;&gt;One Task&lt;/li&gt;
	  &lt;li&gt;Two Task&lt;/li&gt;
	&lt;/ul&gt;

and I select the completed task by:

	var completeTask = document.querySelector(&quot;li.completed.selected&quot;);

But then I&#39;m not sure how to select the list item that does not have those classes.



How to Select Element That Does Not have Specific Class

I&#39;ve searched all over stackoverflow / google for this, but can&#39;t seem to figure it out. 

I&#39;m scraping social media links of a given URL page, and the function returns an object with a list of URLs. 

When I try to write this data into a different file, it outputs to the file as `[object Object]` instead of the expected: 
    [ &#39;https://twitter.com/#!/101Cookbooks&#39;,
    &#39;http://www.facebook.com/101cookbooks&#39;] 
as it does when I `console.log()` the results.

This is my sad attempt to read and write a file in Node, trying to read each line(the url) and input through a function call `request(line, gotHTML)`: 

    fs.readFileSync(&#39;./urls.txt&#39;).toString().split(&#39;\n&#39;).forEach(function (line){
    	console.log(line); 
    	var obj = request(line, gotHTML); 
    	console.log(obj); 
    	fs.writeFileSync(&#39;./data.json&#39;, obj , &#39;utf-8&#39;); 
    });   

for reference -- the `gotHTML` function: 

    function gotHTML(err, resp, html){ 
    	var social_ids = []; 
    
        if(err){
    		return console.log(err); 
    	} else if (resp.statusCode === 200){ 
    		var parsedHTML = $.load(html); 
    
    		parsedHTML(&#39;a&#39;).map(function(i, link){
    			var href = $(link).attr(&#39;href&#39;);
    			for(var i=0; i&lt;socialurls.length; i++){
    				if(socialurls[i].test(href) &amp;&amp; social_ids.indexOf(href) &lt; 0 ) {
    					social_ids.push(href); 
    				}; 
    			}; 
    		})
    	};
    
    	return social_ids;
    };






Write objects into file with Node.js

For a new node.js project I&#39;m working on, I&#39;m thinking about switching over from a cookie based session approach (by this, I mean, storing an id to a key-value store containing user sessions in a user&#39;s browser) to a token-based session approach (no key-value store) using JSON Web Tokens (jwt).

The project is a game that utilizes socket.io - having a token-based session would be useful in such a scenario where there will be multiple communication channels in a single session (web and socket.io)

How would one provide token/session invalidation from the server using the jwt Approach? 

I also wanted to understand what common (or uncommon) pitfalls/attacks I should look out for with this sort of paradigm. For example, if this paradigm is vulnerable to the same/different kinds of attacks as the session store/cookie-based approach.

So, say I have the following (adapted from [this][1] and [this][2]):

Session Store Login:

    app.get(&#39;/login&#39;, function(request, response) {
        var user = {username: request.body.username, password: request.body.password };
        // Validate somehow
        validate(user, function(isValid, profile) {
            // Create session token
            var token= createSessionToken();

            // Add to a key-value database
            KeyValueStore.add({token: {userid: profile.id, expiresInMinutes: 60}});

            // The client should save this session token in a cookie
            response.json({sessionToken: token});
        });
    }

Token-Based Login:

    var jwt = require(&#39;jsonwebtoken&#39;);
    app.get(&#39;/login&#39;, function(request, response) {
        var user = {username: request.body.username, password: request.body.password };
        // Validate somehow
        validate(user, function(isValid, profile) {
            var token = jwt.sign(profile, &#39;My Super Secret&#39;, {expiresInMinutes: 60});
            response.json({token: token});
        });
    }

--

A logout (or invalidate) for the Session Store approach would require an update to the KeyValueStore 
database with the specified token.

It seems like such a mechanism would not exist in the token-based approach since the token itself would contain the info that would normally exist in the key-value store.


  [1]: http://blog.auth0.com/2014/01/15/auth-with-socket-io/
  [2]: http://coderead.wordpress.com/2012/08/16/securing-node-js-restful-services-with-jwt-tokens/

Invalidating JSON Web Tokens

This is starting to bug me and I&#39;d either like it turned off or fixed. So Webstorm has a sweet feature in it&#39;s HTML parser that will attempt to resolve directories in strings that are supposed to reference a file in your project. For example:

![two examples][1]

Webstorm is correct. My front end code is all in `/app` but my server serves up files in app on the root, so in the web context `/app` is actually just `/`. As a side, this behavior also impacts my angular templates:

![webstorm hates angular directive templateUrl][2]

and my angular-ui routes (I imagine it would do that for regular angular routes as well).

![webstorm hates angular routes templateUrl][3]

Is there a way that I can change webstorm to treat `/app` as the root so this is a useful feature? If not, is there a way I can disable this? I tried going into the inspector, but couldn&#39;t find an option for it:

![webstorm inspector][4]

And no, it&#39;s not the XML one... I tried.

Help appreciated. Thanks...


  [1]: http://i.stack.imgur.com/z1kQ0.png
  [2]: http://i.stack.imgur.com/e8R8S.png
  [3]: http://i.stack.imgur.com/PC2KO.png
  [4]: http://i.stack.imgur.com/MEEqL.png

Webstorm: &quot;Cannot Resolve Directory&quot;

Is it possible to filter an array of objects, such that the value of property can be either of a few values (OR condition) **without writing a custom filter**

This is similar to this problem - [Angular.js ng-repeat :filter by single field][1]

But instead of 

    &lt;div ng-repeat=&quot;product in products | filter: { color: &#39;red&#39; }&quot;&gt;

is it possible to do something like this
 
    &lt;div ng-repeat=&quot;product in products | filter: { color: &#39;red&#39;||&#39;blue&#39; }&quot;&gt;

for a sample data as follows-

    $scope.products = [
       { id: 1, name: &#39;test&#39;, color: &#39;red&#39; },
       { id: 2, name: &#39;bob&#39;, color: &#39;blue&#39; }
       /*... etc... */
    ];

I&#39;ve unsuccessfully tried 

    &lt;div ng-repeat=&quot;product in products | filter: { color: (&#39;red&#39;||&#39;blue&#39;) }&quot;&gt;



  [1]: https://stackoverflow.com/questions/14733136/angular-js-ng-repeat-filter-by-single-field

Angular.js ng-repeat filter by property having one of multiple values (OR of values)

I am trying to create a webpage which is made up of a header and bellow the header a list of items. I want the list of items to be vertically scrollable. I also would like the webpage to take up the entire window but not be bigger. Currently my problem is the list of items is not scrollable and instead extends far below the bottom of the window and this is causing the window to be scrollable. What should the *CSS* properties be on the *html*, *body*, *header* and *list items*?

    doctype html
    html
        head
            link(href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot;)
        body
            div#wrapper
                h1 Interactive Contact Directory
                div(class=&quot;tools&quot;)
                    |Search: 
                    br
                    input(type=&quot;text&quot; id=&quot;searchBox&quot;)
                    select(name=&quot;searchBy&quot; id=&quot;searchBy&quot;)
                        option(value=&#39;firstname&#39;) First Name
                        option(value=&#39;lastname&#39;) Last Name
                        option(value=&#39;email&#39;) Email
                    br
                    br
                div(id=&quot;listingHolder&quot;)
                    ul(id=&quot;listing&quot;)
                div(id=&quot;listingView&quot;)

Bellow is the current style sheet I have


    html{
        height: 100%;
    }
    body {
        background:#121212;
        margin:0px;
        padding:0px;
        font-family:&quot;Open Sans&quot;, sans-serif;
        height: 100%;
    }
    #wrapper {
        max-height: 100%;
    }
    h1 {
        margin:0px;
        color:#fff;
        padding:20px;
        text-align:center;
        font-weight:100;
    }
    .tools {
        text-align:center;
        color:#fff;
    }
    #searchBox {
        padding:7px;
        border:none;
        border-radius:5px;
        font-size:1.2em;
    }
    a.filter {
        display:inline-block;
        padding:5px 10px;
        margin:5px;
        background:#0472C0;
        color:#fff;
        text-decoration:none;
        border-radius:3px;
    }
    a.filter:hover {
        background:#0B9DE0;
        color:#fff;
    }
    ul#listing {
        list-style:none;
        padding:0px;
        margin:0px;
        background:#fff;
        width:100%;
    }
    ul#listing li {
        list-style:none;
        border-bottom:1px solid #eee;
        display:block;
    }
    ul#listing li .list-header {
        padding:10px;
        cursor:pointer;
        display:block;
    }
    
    ul#listing li .list-header:hover {
        background:#7893AB;
        color:#fff;
    }
    ul#listing li .list-header.active {
        background:#447BAB;
        color:#fff;
    }
    ul#listing li .details {
        display:none;
        background:#efefef;
        padding:20px;
        font-size:0.9em;
    }
    #listingHolder{
        width: 50%;
        overflow: scroll;
    }

CSS how to make scrollable list

I have a function named `generateNoise()` which creates a canvas element and paints random RGBA values to it; which, gives the appearance of noise.  

----------


My Question
-----------

What would be the best way to infinitely animate the noise to give the appearance of movement. So that it may have more life?


----------


[JSFiddle][1]

    function generateNoise(opacity) {
    	if(!!!document.createElement(&#39;canvas&#39;).getContext) {
    		return false;
    	}
    	var canvas = document.createElement(&#39;canvas&#39;),
    		ctx = canvas.getContext(&#39;2d&#39;),
    		x,y,
    		r,g,b,
    		opacity = opacity || .2;
    
    		canvas.width = 55;
    		canvas.height = 55;
    
    		for (x = 0; x &lt; canvas.width; x++){
    			for (y = 0; y &lt; canvas.height; y++){
    				r = Math.floor(Math.random() * 255);
    				g = Math.floor(Math.random() * 255);
    				b = Math.floor(Math.random() * 255);
    
    				ctx.fillStyle = &#39;rgba(&#39; + r + &#39;,&#39; + b + &#39;,&#39; + g + &#39;,&#39; + opacity + &#39;)&#39;;
    				ctx.fillRect(x,y,1,1);
    
    			}
    		}
    		document.body.style.backgroundImage = &quot;url(&quot; + canvas.toDataURL(&quot;image/png&quot;) + &quot;)&quot;;
    
    }
    generateNoise(.8);

  [1]: http://jsfiddle.net/u35yn/

Animating canvas to look like tv noise

I&#39;m building a new WordPress theme (don&#39;t know if that&#39;s relevant) and there&#39;s this issue that keeps bugging me.

I&#39;ve loaded up Roboto Slab from Google Webfonts (included the CSS in `&lt;head&gt;` section). On every other browser out there, font is rendered OK, except Google Chrome. When I first load up the website in Google Chrome, texts using that custom font are NOT displayed AT ALL (even tho font-stack has Georgia as a fallback - `&quot;Roboto Slab&quot;, Georgia, serif;`). After I hover the styled link, or retrigger any CSS property in Inspector - texts become visible.

Since I&#39;ve started the theme some time ago, I can clearly remember that it was working perfectly before. Is this some known recent Chrome update bug? 

**First load**:

[![enter image description here][1]][1]


**After I reapply any of the CSS properties, get into responsive view or hover an element**:
 
[![enter image description here][2]][2]

Anyone have similar issues? How should I proceed with this?

Thanks!


  [1]: https://i.stack.imgur.com/WYuJx.png
  [2]: https://i.stack.imgur.com/qjvpg.png

Google Fonts are not rendering on Google Chrome

Is it possible to hide element 5 seconds after the page load?
I know there is [a jQuery solution](https://stackoverflow.com/questions/683363/jquery-autohide-element-after-5-seconds).

I want to do exactly same thing, but hoping to get the same result with CSS transition.

Any innovative idea? Or am I asking beyond the limit of css transition/animation?

CSS Auto hide elements after 5 seconds

I&#39;m using bootstrap jumbotron, and including a background image. Resizing the screen makes the image tile and repeat, whereas I want the image to be responsively resized.

    &lt;div class=&quot;jumbotron&quot; style=&quot;background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;&quot;&gt;
       &lt;div class=&quot;container for-about&quot;&gt;
       &lt;h1&gt;About&lt;/h1&gt;
       &lt;/div&gt;
    &lt;/div&gt;

How would you go about making the image responsive? [The site is HERE](http://californiafootgolfclub.com/dev/about/). Thanks for your ideas!

Responsive Bootstrap Jumbotron Background Image

I can add a regular style rule via the + sign (New Style Rule) but I can&#39;t add one under the &quot;Pseudo ::before Element&quot; or &quot;Pseudo ::after Element&quot; sections of the Style Inspector. If I try to add the `::before` or `::after` element into the HTML via &quot;Edit as HTML&quot;, it comes out as text. My workaround is to add `&lt;span class=&quot;pseudo_before&quot;&gt;&lt;/span&gt;` and then style that. Am I missing something?

Content Type	Original Author	Original Content on Stackoverflow
Question	J-16 SDiZ	View Question on Stackoverflow
Solution 1 - Javascript	TimS	View Answer on Stackoverflow
Solution 2 - Javascript	t.animal	View Answer on Stackoverflow

What are "data-require" "data-semver" in HTML files?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Where to store Ansible host file on Mac OS X

Cannot find Microsoft.Office.Interop Visual Studio

Attributions