Chris Pearce chris-pearce

Array Iteration

https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

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

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

	// Lazy Load Images
	// Assumes WebP versions exist for all images
	//
	// data-img="A\|B\|C\|D\|E"
	// A = source url
	// B = alt
	// C = prepend? (y/n)
	// D = insert into (descendent selector)
	// E = svg?
	//

	# A Liquid tag for Jekyll sites that allows embedding Gists and showing code for non-JavaScript enabled browsers and readers.
	# by: Brandon Tilly
	# Source URL: https://gist.github.com/1027674
	# Post http://brandontilley.com/2011/01/31/gist-tag-for-jekyll.html
	#
	# Example usage: {% gist 1027674 gist_tag.rb embed %} //embeds a gist for this plugin

	require 'cgi'
	require 'digest/md5'
	require 'net/https'

	<!DOCTYPE html>
	<html>
	<head>
	<!-- Meta conf -->
	<meta charset="UTF-8">
	<!-- Meta info -->
	<title>HTML5 Microdata Resume (CV) Template</title>
	<meta name="description" content="An example of how to layout a semantic html5 page for a curriculum vitae/resume">
	<meta name="keywords" content="template, html, semantic, microdata, resume, cv, curriculum, vitae">
	</head>

	(function () {
	var perfBar = function(budget) {

	window.onload = function() {
	window.performance = window.performance \|\| window.mozPerformance \|\| window.msPerformance \|\| window.webkitPerformance \|\| {};


	var timing = window.performance.timing,
	now = new Date().getTime(),
	output, loadTime;

	// _decimal.scss \| MIT License \| gist.github.com/terkel/4373420

	// Round a number to specified digits.
	//
	// @param {Number} $number A number to round
	// @param {Number} [$digits:0] Digits to output
	// @param {String} [$mode:round] (round\|ceil\|floor) How to round a number
	// @return {Number} A rounded number
	// @example
	// decimal-round(0.333) => 0

	/* ---------------------------------------------------------- */
	/* */
	/* A media query that captures: */
	/* */
	/* - Retina iOS devices */
	/* - Retina Macs running Safari */
	/* - High DPI Windows PCs running IE 8 and above */
	/* - Low DPI Windows PCs running IE, zoomed in */
	/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
	/* - Android hdpi devices and above */