Emmanuel Garcia blasten

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

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

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

	iPad

	1024 × 690 In landscape on iOS 4.3
	1024 × 672 In landscape on iOS 5
	768 × 946 In portrait on iOS 4.3
	768 × 928 In portrait on iOS 5

	1024 × 660 Always showing bookmarks bar in landscape on iOS 4.3
	1024 × 644 Always showing bookmarks bar in landscape on iOS 5
	768 × 916 Always showing bookmarks bar in portrait on iOS 4.3

	// How fast can you get all the intervals that overlap with another interval?
	// WTF.. who cares. Well if you are given the task to find all the stories
	// from a facebook timeline visible to the user,
	// how would you do that without blocking the user's scrolling?
	// Imagine, you mark the stories as read and notify the server that the user saw those stories.

	// It turns out you can achieve this task in log time using a segment tree.
	// More about segment trees:
	// http://community.topcoder.com/tc?module=Static&d1=tutorials&d2=lowestCommonAncestor#Segment_Trees
	// Sample:

	(function() {
	'use strict';

	// First paint perf.
	if (window.chrome && window.chrome.loadTimes) {
	const getFP = function() {
	let load = chrome.loadTimes();
	let fp = (load.firstPaintTime - load.startLoadTime) * 1000;
	return Math.round(fp);
	};

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Responsive Grid</title>

	<style>

	body {

	import hify from './create-element';
	import React from 'react';
	import { render } from 'react-dom';

	const h = hify(React.createElement.bind(React));

	class Test extends HTMLElement {
	static observedAttributes = ['attr']
	attributeChangedCallback (name, oldValue, newValue) {
	this.innerHTML = `Hello, ${this.getAttribute('attr')}!`;

	Hi All!

	I've recently launched a tool that wraps many of the commands here with a user interface. This desktop application is currently available for macOS. There's a roadmap outlining planned features for the near future.
	Feel free to request any features you'd like to see, and I'll prioritize them accordingly.
	One of the most important aspects of this application is that every command executed behind the scenes is displayed in a special log section. This allows you to see exactly what’s happening and learn from it.

	Here's the link to the repository: https://github.com/Pulimet/ADBugger

	App Description:
	ADBugger is a desktop tool designed for debugging and QA of Android devices and emulators. It simplifies testing, debugging, and performance analysis by offering device management, automated testing, log analysis, and remote control capabilities. This ensures smooth app performance across various setups.