Daniel Ferrer DanFerrer

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

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.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

The Ultimate Unit Testing Cheat-sheet

For Mocha, Chai and Sinon

using mocha/chai/sinon for node.js unit-tests? check out my utility: mocha-stirrer to easily reuse test components and mock require dependencies

Sinon Chai
Chai
Sinon
Mocha

Sublime Text 3 Setup

Install Package Control

Install Package Control for easy package management.

Open the console with Ctrl+`
Paste in the following:

	<!DOCTYPE html>
	<html ng-app="sampleApp" lang="en">
	<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
	<title>Practice With Bootstrap</title>
	<script>
	angular.module('sampleApp', []).controller('practiceController', function($scope) {

	require 'pry'
	require 'pry-nav'

	def create_groups(student_list, group_size, total_days)
	binding.pry
	# groups = student_list.each_slice(group_size) {\|student\| p student}
	# return groups
	my_student_list = student_list
	groups = Array.new(total_days, Array.new(group_size))
	groups.map! do \|students\|

	<!-- Begin Student Index -->
	<div id="random-full-width-content" class="this-div-is-just-a-helpful-container">
	<div class="section section-services student-index">
	<div class="section-title">
	<span>Flatiron School Class 003</span>
	</div>
	</div>


	<div class="section section-blog">