Michail michailb

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

Git Cheat Sheet

Committing and Undoing

Adding file for committing

$ git add <filename>

a simple git branching model (written in 2013)

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.

Update: Woah, thanks for all the attention. Didn't expect this simple rant to get popular.

This is an example command for Backtick. A Backtick command consists of some executable JavaScript and a bit of metadata in JSON.

Here are the required steps to create a command:

Create a new Gist with a command.js and command.json file, or simply fork this one.
Write your JavaScript in command.js. This will be injected into and executed on the page the user is currently on when they run it.
Add some metadata to the command.json file:

name: The name of the command.

Make it useful

Install Package Control. For SublimeText 2, paste the following in Terminal:

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

From here on out, use Package Control to install everything. ⌘+Shift+P, then type Install to get a list of installable packages you can 'livesearch through. After installing plugins, they should be running.

Prolog

Google Chrome Developers says:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2

TTF to WOFF2 converting

http://www.fontsquirrel.com/tools/webfont-generator

	/*! = $rembase: 14px
	--------------------------------------------------------------
	* hmtl { font-size: 87.5%; }
	* body { font-size: 14px; font-size: 1rem; line-height: 1; }
	* 4px 0.28571429rem
	* 8px 0.571428571rem
	* 12px 0.857142857rem
	* 13px 0.928571429rem
	* 14px 1rem
	* 16px 1.142857143rem

	import django
	import os

	DJANGO_ROOT = os.path.dirname(os.path.realpath(django.__file__))
	SITE_ROOT = os.path.dirname(os.path.realpath(__file__))

	'''
	Example usage:

	STATIC_ROOT = os.path.join(SITE_ROOT, 'static'),

	#!/usr/bin/env bash

	# fresh-chrome
	#
	# Use this script on OS X to launch a new instance of Google Chrome
	# with its own empty cache, cookies, and user configuration.
	#
	# The first time you run this script, it will launch a new Google
	# Chrome instance with a permanent user-data directory, which you can
	# customize below. Perform any initial setup you want to keep on every

	// Bootstrap Mid-Small - col-ms-* - the missing grid set for Bootstrap3.
	//
	// This is a hack to fill the gap between 480 and 767 pixels - a missing range
	// in the bootstrap responsive grid structure. Use these classes to style pages
	// on cellphones when they transition from portrait to landscape.
	//
	// Contains:
	// Columns, Offsets, Pushes, Pulls for the Mid-Small layout
	// Visibility classes for the Mid-Small layout
	// Redefined visibility classes for the Extra Small layout