chris montgomery montchr

Fluid Aspect

fluid-aspect is a Sass mixin for creating intrinsic ratios in CSS. Intrinsic ratios allow elements to fill the width of their containing block and resize on the fly while maintaining their aspect ratio.

@include fluid-aspect($ratio, [$target]);

$ratio: An aspect ratio represented as two numbers separated by a space. Defaults to 1:1
$target: A selector targeting the element to be made fluid. Defaults to "> :first-child"

This is one chapter of my "Chrome Extension Workshops" tutorial, see the rest here: https://gist.github.com/caseywatts/8eec8ff974dee9f3b247

Unrelated update: my book is out! Debugging Your Brain is an applied psychology / self-help book

Making Bookmarklets

I'm feeling very clever. I've got this sweet line of javascript that replaces "cloud" with "butt". My mom would LOVE this, but she doesn't computer very well. I'm afraid to show her the Developer Console and have her type/paste this in. But she IS pretty good at bookmarks, she knows just how to click those!

A bookmark normally takes you to a new web page. A bookmarklet is a bookmark that runs javascript on the current page instead of taking you to a new page. To declare that it is a bookmarklet, the "location" it points to starts with javascript:.

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.

About Sass and Gzip

Hey guys! I have a question regarding Sass usage and Gzip compression. If anyone knows something, be sure to share. :)

A quick reminder

It's good practice to use Sass @extend rather than including mixins when possible because of the way Sass handles @extend. To put it simple, it doesn't take the CSS content from the extended selector to place them in the extending one. It works the other way around: it takes the extending selector and append it to the extended selector.

	#!/usr/bin/python
	# encoding: utf-8
	#
	# Copyright (c) 2013 [email protected].
	#
	# MIT Licence. See http://opensource.org/licenses/MIT
	#
	# Created on 2013-11-01
	#

	#!/bin/bash

	# Usage: ./distribute_user.sh [username] [role]

	ARGS="$@"
	echo "Adding user $1 as $2 to all sites"

	SITES=$(wp site list --field=url --format=csv)
	for site in $SITES
	do

	Solarized
	#FDF6E3,#EEE8D5,#93A1A1,#FDF6E3,#EEE8D5,#657B83,#2AA198,#DC322F

	Solarized Dark
	#073642,#002B36,#B58900,#FDF6E3,#CB4B16,#FDF6E3,#2AA198,#DC322F

	<?php
	/**
	* Sync Groups from WordPress to Discourse
	*
	* First creates 'groups' meta_key (which should be customized to your needs)
	* Then it monitors for changes in the 'groups' meta_value and connects to Discourse API to sync groups
	*
	* WordPress References
	* https://core.trac.wordpress.org/browser/tags/3.9/src/wp-includes/meta.php?order=name#L235
	* http://wordpress.stackexchange.com/questions/16835/how-to-hook-update-post-meta-and-delete-post-meta

	# There was a day where I have too many color schemes in iTerm2 and I want to remove them all.
	# iTerm2 doesn't have "bulk remove" and it was literally painful to delete them one-by-one.

	# iTerm2 save it's preference in ~/Library/Preferences/com.googlecode.iterm2.plist in a binary format
	# What you need to do is basically copy that somewhere, convert to xml and remove color schemes in the xml files.

	$ cd /tmp/
	$ cp ~/Library/Preferences/com.googlecode.iterm2.plist .
	$ plutil -convert xml1 com.googlecode.iterm2.plist
	$ vi com.googlecode.iterm2.plist

	$base-font-size: 16px;
	$base-line-height: 1.5;

	// this value may vary for each font
	// unitless value relative to 1em
	$cap-height: 0.68;


	@mixin baseline($font-size, $scale: 2) {