Jamie jamiemagique

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

a simple git branching model

This is a very simple git workflow. It (and variants) is in use by many people. I settled on it after using it very effectively at Athena. GitHub does something similar; Zach Holman mentioned it in this talk.

The gist

Shallow

Real unit test (isolation, no children render)

Simple shallow

Calls:

constructor
render

	<!DOCTYPE html>
	<html<?php print $html_attributes; ?>>
	<head>
	<?php print $head; ?>
	<title><?php print $head_title; ?></title>
	<?php print $styles; ?>
	<?php print $head_scripts; ?>
	</head>

	<body<?php print $body_attributes;?>>

	//==== Simple SCSS mixin to create CSS triangles
	//==== Example: @include css-triangle ("up", 10px, #fff);
	@mixin css-triangle ($direction: "down", $size: 20px, $color: #000) {
	width: 0;
	height: 0;
	border-left: $size solid #{setTriangleColor($direction, "left", $color)};
	border-right: $size solid #{setTriangleColor($direction, "right", $color)};
	border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)};
	border-top: $size solid #{setTriangleColor($direction, "top", $color)};
	}

	(function() {
	var CSSCriticalPath = function(w, d, opts) {
	var opt = opts \|\| {};
	var css = {};
	var pushCSS = function(r) {
	if(!!css[r.selectorText] === false) css[r.selectorText] = {};
	var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
	for(var i = 0; i < styles.length; i++) {
	if(!!styles[i] === false) continue;
	var pair = styles[i].split(": ");

	var uniqueArray = function(arrArg) {
	return arrArg.filter(function(elem, pos,arr) {
	return arr.indexOf(elem) == pos;
	});
	};

	var uniqEs6 = (arrArg) => {
	return arrArg.filter((elem, pos, arr) => {
	return arr.indexOf(elem) == pos;
	});

	/**
	* Axios Request Wrapper
	* ---------------------
	*
	* @author Sheharyar Naseer (@sheharyarn)
	* @license MIT
	*
	*/

	import axios from 'axios'

	/* Client side, works in Chrome 55 and Firefox 52 without transpilation */
	//https://blogs.msdn.microsoft.com/typescript/2016/11/08/typescript-2-1-rc-better-inference-async-functions-and-more/
	async function fetchURLs() {
	try {
	// Promise.all() lets us coalesce multiple promises into a single super-promise
	var data = await Promise.all([
	/* Alternatively store each in an array */
	// var [x, y, z] = await Promise.all([
	// parse results as json; fetch data response has several reader methods available:
	//.arrayBuffer()

	const timing = store => next => action => {
	performance.mark(`${action.type}_start`);
	let result = next(action);
	performance.mark(`${action.type}_end`);
	performance.measure(
	`${action.type}`,
	`${action.type}_start`,
	`${action.type}_end`
	);
	return result;