Arnaud B. mistergraphx

I did a talk the other night at Up Front Berlin about some use cases for features in Sass from the past year. The slides are here; but I wanted to publish some notes so this post is one part of those notes.

My talk focused on the map data-type, and specifically on combining maps with directives such as @content, @at-root, and unique-id() in interesting ways. One of these is a mixin design pattern that solves some problems with using @extendand placeholder (silent) selectors in Sass:

having placeholder extensions appear somewhere way up in the top of your code, because that's where you imported them; and
having to think about choosing @include vs. @extend in the first place.

This "self-aware" mixin works by creating (and extending) a placeholder selector for itself dynamically, the first time it is included, and uses a map to keep records of these includes, so when it is subsequently in

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

1. Create a folder in Dropbox or Google Drive

We'll use ~/Dropbox/Macnotes in this example

2. Copy the notes folder to the new folder in Dropbox or Google Drive

We'll use Finder for this instead of terminal as the cp -r command also copies the contents of all aliases and the Notes folder has a lot of those. Quit notes Open terminal and enable hidden files in Finder:

defaults write com.apple.finder AppleShowAllFiles YES.

Vanilla JavaScript Quick Reference / Cheatsheet

Just migrated it from Codepen.io to markdown. Credit goes to David Conner.

Working with DOM	Working with JS	Working With Functions
Accessing Dom Elements	Add/Remove Array Item	Add Default Arguments to Function
Grab Children/Parent Node(s)	Add/Remove Object Properties	Throttle/Debounce Functions
Create DOM Elements	Conditionals

	#!/bin/sh

	set -e
	set -x

	for package in $(npm -g outdated --parseable --depth=0 \| cut -d: -f3)
	do
	npm -g install "$package"
	done

	// Set up line-height and colour defaults for this mixin.
	$line-height: 20px!default;
	$line-color: #94d4ff!default;

	/**
	*
	* Baseline Mixin
	* Handy dandy mixin to provide a baseline for your typography.
	*
	* The mixin carries two arguments — the $baseline, which should match your line-height, and $baseline-color, the colour you want the lines to be.

	// Photoshop Script to Create iPhone Icons from iTunesArtwork
	// Original: https://gist.github.com/appsbynight/3681050

	// Turn debugger on. 0 is off.
	// $.level = 1;

	try
	{
	// Prompt user to select iTunesArtwork file. Clicking "Cancel" returns null.
	var iTunesArtwork = File.openDialog("Select a sqaure PNG file that is at least 1024x1024.", "*.png", false);

	/**
	* Make sure Graphicsmagick is installed on your system
	* osx: brew install graphicsmagick
	* ubuntu: apt-get install graphicsmagick
	*
	* Install these gulp plugins
	* glup, gulp-image-resize, gulp-imagemin and imagemin-pngquant
	*
	* Group images according to their output dimensions.
	* (ex: place all portfolio images into "images/portfolio"

	#CACHE{0}
	[(#HTTP_HEADER{Content-type: text/xml[; charset=(#CHARSET)]})]<?xml
	version="1.0"[ encoding="(#CHARSET)"]?>
	<rss version="2.0" [(#REM) rss 2.0.9)]
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	>
	[(#SET{channel,#ENV{url}\|analyser_site})]
	<channel[ xml:lang="(#LANG)"]>
	[<title>(#GET{channel}\|table_valeur{nom_site}\|textebrut\|texte_backend)</title>]

Arnaud B. mistergraphx

Screencapture and animated gifs

Capturing (Easy)

1. Create a folder in Dropbox or Google Drive

2. Copy the notes folder to the new folder in Dropbox or Google Drive

Vanilla JavaScript Quick Reference / Cheatsheet

Developer setup for Mac OS X 10.11 El Capitan

Software

Install from App Store