Chris Pearce chris-pearce

## array_iteration_thoughts.md

      
              1 file
            
          
              116 forks
            
          
              41 comments
            
          
              599 stars
            
          
                ljharb
                / array_iteration_thoughts.md
            
            
              Last active
              May 22, 2024 09:22
            
              
                Array iteration methods summarized
              
          
    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

  
## lazy-images.js
// 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?
//

## gist_tag.rb
# 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'

## microdata_resume_cv.html
<!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>

## what-forces-layout.md

      
              1 file
            
          
              813 forks
            
          
              108 comments
            
          
              8096 stars
            
          
                paulirish
                / what-forces-layout.md
            
            
              Last active
              May 21, 2024 09:11
            
              
                What forces layout/reflow. The comprehensive list.
              
          
    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


## perf.js
(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;

## trello-css-guide.md

      
              1 file
            
          
              126 forks
            
          
              62 comments
            
          
              1475 stars
            
          
                bobbygrace
                / trello-css-guide.md
            
            
              Last active
              May 15, 2024 16:01
            
              
                Trello CSS Guide
              
          
    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?

  
## _decimal.scss
// _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

## high-dpi-media.css
/* ---------------------------------------------------------- */
/*                                                            */
/* 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                           */
	// 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 */