paulirish

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

simX

sudo defaults write /Library/Preferences/com.apple.windowserver DisplayResolutionEnabled -bool YES;
sudo defaults delete /Library/Preferences/com.apple.windowserver DisplayResolutionDisabled;

// by the way, you need to logout and log back in for this to take effect.  Or at least that's what
// Quartz Debug says.  Who knows, maybe it's lying?

// P.S. Go to [Apple menu --> System Preferences --> Displays --> Display --> Scaled] after logging
// back in, and you'll see a bunch of "HiDPI" resolutions in the list to choose from.

necolas

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name

tannerlinsley

export default function createCrudHooks({
  baseKey,
  indexFn,
  singleFn,
  createFn,
  updateFn,
  deleteFn,
}) {
  const useIndex = (config) => useQuery([baseKey], indexFn, config)
  const useSingle = (id, config) =>

pburtchaell

/**
 * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
 * 
 * To overcome this, create media queries that target the width, height, and orientation of iOS devices. 
 * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing 
 * the height of element `.foo` —which is a full width and height cover image.
 *
 * iOS Resolution Quick Reference: http://www.iosres.com/
 */
 

paulirish

/* bling.js */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
}

NodeList.prototype.__proto__ = Array.prototype;

jlong

var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

anthonyshort

// Media Queries in Sass 3.2
//
// These mixins make media queries a breeze with Sass.
// The media queries from mobile up until desktop all 
// trigger at different points along the way
//
// And important point to remember is that and width
// over the portrait width is considered to be part of the
// landscape width. This allows us to capture widths of devices
// that might not fit the dimensions exactly. This means the break

scottjehl

/*
  * anchor-include pattern for already-functional links that work as a client-side include
  * Copyright 2011, Scott Jehl, scottjehl.com
  * Dual licensed under the MIT
  * Idea from Scott Gonzalez
  * to use, place attributes on an already-functional anchor pointing to content
    * that should either replace, or insert before or after that anchor
    * after the page has loaded
    * Replace:	<a href="..." data-replace="articles/latest/fragment">Latest Articles</a>
    * Before:	<a href="..." data-before="articles/latest/fragment">Latest Articles</a>

danielkcz

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Util } from 'expo'

export default class App extends React.Component {
  state = {
    updated: false,
  }
  componentWillMount() {
    Util.addNewVersionListenerExperimental(() => {