Marcial Cambronero marcialca

Yeoman generators with Browserify

Browserify is a tool that allows us to write node-style modules that compile for use in the browser. Like node, we write our modules in separate files, exporting external methods and properties using the module.exports and exports variables

generator-browserify is a generator with a Browserify setup, offering choices between Gulp or Grunt and Foundation or Bootstrap.

generator-angular-with-browserify is a generator for bundling Angular.js with Browserify

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

	/*!
	An experiment in getting accurate visible viewport dimensions across devices
	(c) 2012 Scott Jehl.
	MIT/GPLv2 Licence
	*/

	function viewportSize(){
	var test = document.createElement( "div" );

	test.style.cssText = "position: fixed;top: 0;left: 0;bottom: 0;right: 0;";

	// Based on https://github.com/james2doyle/saltjs
	window.$ = function(s) {
	return document[{
	'#': 'getElementById',
	'.': 'getElementsByClassName',
	'@': 'getElementsByName',
	'=': 'getElementsByTagName'}[s[0]]
	\|\| 'querySelectorAll'](s.slice(1))
	};

	#!/usr/bin/env bash
	#
	# Approach:
	# 1. Find variable declaration in the form of "$my-var: anyvalue"
	# 2. Loop through found variables and find occurrences of each variable in all sass files
	# 3. Filter out vars that occurred only once

	if [ -z "$1" ]; then
	echo "Please specify a directory as the first argument."
	exit 1

	* {
	font-size: 12pt;
	font-family: monospace;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: black;
	cursor: default;
	}