Ben Frain benfrain

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T	go to file
⌘⌃P	go to project
⌘R	go to methods
⌃G	go to line
⌘KB	toggle side bar
⌘⇧P	command prompt

SVG sprite generator, by Sérgio Lopes

Requirements

Python
Inkscape (on command line path)
ImageMagick

Observables

You don't really need a framework or fancy cutting-edge JavaScript features to do two-way data binding. Let's start basic - first and foremost, you need a way to tell when data changes. Traditionally, this is done via an Observer pattern, but a full-blown implementation of that is a little clunky for nice, lightweight JavaScript. So, if native getters/setters are out, the only mechanism we have are accessors:

var n = 5;
function getN() { return n; }
function setN(newN) { n = newN; }

console.log(getN()); // 5

setN(10);

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	require 'base64'

	# tools.ietf.org/html/rfc2397
	# developer.mozilla.org/en/data_URIs

	# "data:" + MIME type + ";base64," + base64-encoded content
	def to_data_url(content, content_type)
	outuri = 'data:' + content_type + ';base64'
	content = Base64.encode64(content).gsub("\n", '')
	outuri += ",#{content}"

	<% pages = sitemap.resources.find_all{\|p\| p.source_file.match(/\.html/) } %>
	<?xml version="1.0" encoding="UTF-8"?>
	<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<% pages.each do \|p\| %>
	<url>
	<loc>http://youdomain.com/<%=p.destination_path.gsub('/index.html','')%></loc>
	<priority>0.7</priority>
	</url>
	<% end %>
	</urlset>

	// Using the Modular Scale plugin along with Compass Vertical Rhythms module.
	// The goal is to use MS to give us the values,
	// and use VR to apply those values to our typography.

	// ---------------------------------------------------------------------------
	// Defaults

	$base-size: 24px;
	$ratio: major-third() fifth();

	mymodule {
	@at-root {
	.#{&}-header { ... }
	.#{&}-footer { ... }
	.#{&}-body {
	a { ... }
	span { ... }
	p { ... }
	}
	}

	browse to folder in terminal and run:

	python -m SimpleHTTPServer