benatkin

// Place user-specific overrides in this file, to ensure they're preserved
// when upgrading
{
  "folder_exclude_patterns": [".svn", ".git", ".hg", "CVS", "node_modules"]
}

jonathanmoore

Share Counts

I have always struggled with getting all the various share buttons from Facebook, Twitter, Google Plus, Pinterest, etc to align correctly and to not look like a tacky explosion of buttons. Seeing a number of sites rolling their own share buttons with counts, for example The Next Web I decided to look into the various APIs on how to simply return the share count.

If you want to roll up all of these into a single jQuery plugin check out Sharrre

Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.

Twitter

Sjeiti

/**
 * getLessVars parses your LESS variables to Javascript (provided you make a dummy node in LESS)
 * @param {String} id The CSS-id your variables are listed under.
 * @param {Boolean} [parseNumbers=true] Try to parse units as numbers.
 * @return {Object} A value object containing your LESS variables.
 * @example
 * LESS:
 * 	@myLessVariable: 123px;
 * 	#dummyLessId { width: @myLessVariable; }
 * Javascript:

karlhorky

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

jayj

// --------------------------------------------------
// Flexbox LESS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------

// Flexbox display
// flex or inline-flex
.flex-display(@display: flex) {
	display: ~"-webkit-@{display}";
	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox

rwaldron

(function( exports ) {
  var priv = new WeakMap();

  function Emitter() {
    priv.set(this, {
      events: {}
    });
  }

  Emitter.prototype.on = function( type, handler ) {

branneman

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

Possible solutions

akella

<snippet>
	<content><![CDATA[
<!-- begin $1 -->
<div class="$1">
	$2
</div>
<!-- end $1 -->
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>di</tabTrigger>

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

sudodoki

So, some tools that might help with icon fonts:

1. Build fonts from existing glyphs:
   [IcoMoon][1] — meta-resource, using font-awesome & other fonts, either publicly available or purchasable
   [flaticon][2]

2. Build fonts from your own images online, but needs editing special template:
   [IconVault][3]

3. Something in between:
   [Fontastic][4]