Mike McBride mikemcbride

Modulo Liquid filter for Jekyll

Got nested columns in your grid-based Jekyll site?

Wondered why you didn't have a way to calculate the modulo inside your posts loop to open and close your 'rows' containing those nested columns?

Add this filter to your _plugins directory, and use it like so:

{{ x | mod:y }}

Tested against the WebKit git repo by entering the repo with 1 file dirty.

git diff --quiet --ignore-submodules HEAD # Will tell if there are any uncomitted changes, staged or not.
0.6 sec

git diff-index --quiet HEAD # Only tracked
2 sec

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.

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

Launch quicktime player
do Screen recording

	#!/bin/bash

	echo -e "\033[0mCOLOR_NC (No color)"
	echo -e "\033[1;37mCOLOR_WHITE\t\033[0;30mCOLOR_BLACK"
	echo -e "\033[0;34mCOLOR_BLUE\t\033[1;34mCOLOR_LIGHT_BLUE"
	echo -e "\033[0;32mCOLOR_GREEN\t\033[1;32mCOLOR_LIGHT_GREEN"
	echo -e "\033[0;36mCOLOR_CYAN\t\033[1;36mCOLOR_LIGHT_CYAN"
	echo -e "\033[0;31mCOLOR_RED\t\033[1;31mCOLOR_LIGHT_RED"
	echo -e "\033[0;35mCOLOR_PURPLE\t\033[1;35mCOLOR_LIGHT_PURPLE"
	echo -e "\033[0;33mCOLOR_YELLOW\t\033[1;33mCOLOR_LIGHT_YELLOW"

	.flex() {
	display: -webkit-box;
	display: -moz-box;
	display:-webkit-flex;
	display: -ms-flexbox;
	display:flex;
	}

	.flex-justify(@justifyStyle) {

	{
	"name": "my-app",
	"version": "1.0.0",
	"description": "My test app",
	"main": "src/js/index.js",
	"scripts": {
	"jshint:dist": "jshint src/js/*.js",
	"jshint": "npm run jshint:dist",
	"jscs": "jscs src/*.js",
	"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",

	/* bling.js */

	window.$ = document.querySelectorAll.bind(document);

	Node.prototype.on = window.on = function (name, fn) {
	this.addEventListener(name, fn);
	};

	NodeList.prototype.__proto__ = Array.prototype;

	# Your init script
	#
	# Atom will evaluate this file each time a new window is opened. It is run
	# after packages are loaded/activated and after the previous editor state
	# has been restored.
	#
	# An example hack to log to the console when each text editor is saved.
	#
	# atom.workspace.observeTextEditors (editor) ->
	# editor.onDidSave ->

	cd ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets
	echo 'html { -webkit-animation: adjustHue 20s infinite !important; } @-webkit-keyframes adjustHue { 50% { -webkit-filter: hue-rotate(360deg); }}' >> Custom.css