Pascal pascalmaddin

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

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

Create new instance of ImageEnhancer
Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
- We set the width & height HTML attributes of the image to the required size
- We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
- We then set a class of image-replace onto each newly created transparent image
We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe

	<!DOCTYPE html>
	<head>
	<title>Stay Standalone</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<script src="stay_standalone.js" type="text/javascript"></script>
	</head>
	<body>
	<ul>
	<li><a href="http://google.com/">Remote Link (Google)</a></li>

	[
	{
	"keys": ["super+alt+shift+5"],
	"command": "set_layout",
	"caption" : "1-2 Grid",
	"args":
	{
	"cols": [0.0, 0.5, 1.0],
	"rows": [0.0, 0.5, 1.0],
	"cells":

	/**
	* This gist demonstrates how to properly load jQuery within the context of WordPress-targeted JavaScript so that you don't
	* have to worry about using things such as `noConflict` or creating your own reference to the jQuery function.
	*
	* @version 1.0
	*/
	(function( $ ) {
	"use strict";

	$(function() {

	@mixin arrow_helper($arrowSize, $arrowColor, $margin, $side, $align) {
	@if $side == "top" {
	border-bottom-color: $arrowColor;
	top: -2 * $arrowSize;
	}
	@if $side == "bottom" {
	border-top-color: $arrowColor;
	bottom: -2 * $arrowSize;
	}
	@if $side == "left" {

	// swap the keybindings for paste and paste_and_indent
	{ "keys": ["super+v"], "command": "paste_and_indent" },
	{ "keys": ["super+shift+v"], "command": "paste" }