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

HenrikJoreteg

Why would you want to do this? Because you often don't need more. It's nice to not have to think about your "router" as this big special thing.

Instead, with this approch, your app's current pathname is just another piece of state, just like anything else.

This also means that when doing server-side rendering of a redux app, you can just do:

var app = require('your/redux/app')
var React = require('react')

paulirish

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

bomberstudios

NOTE: the list has moved to https://github.com/sketchplugins/plugin-directory

Sketch Plugins

A list of Sketch plugins hosted at GitHub, in no particular order.

• brandonbeecroft/Lorem-Ipsum-Plugin-for-Sketch This is a plugin for quickly creating Lorem Ipsum text in Sketch
• sebj/Sketch Templates and Plugins for Sketch by Bohemian Coding
• FredericJacobs/crop_Artboard A script to export the Sketch App artboards to the clipboard
• almonk/SketchGit A simple Git client built right into Sketch.

jonbretman

(function (root) {

    var type = function (o) {

        // handle null in old IE
        if (o === null) {
            return 'null';
        }

        // handle DOM elements

plasticmind

<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png" sizes="120x120">

jbenet

a simple git branching model (written in 2013)

This is a very simple git workflow. It (and variants) is in use by many people. I settled on it after using it very effectively at Athena. GitHub does something similar; Zach Holman mentioned it in this talk.

Update: Woah, thanks for all the attention. Didn't expect this simple rant to get popular.

PaulKinlan

(function() { 
  var CSSCriticalPath = function(w, d, opts) {
    var opt = opts || {};
    var css = {};
    var pushCSS = function(r) {
      if(!!css[r.selectorText] === false) css[r.selectorText] = {};
      var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
      for(var i = 0; i < styles.length; i++) {
        if(!!styles[i] === false) continue;
        var pair = styles[i].split(": ");

jamesdwilson

#!/bin/sh
# Follows https://github.com/oortcloud/unofficial-meteor-faq#where-should-i-put-my-files
# I release this into the Public domain -osirisx11 on freenode
: <<'END'
osiris@krypton:~/playpen$ ~/meteor-create.sh example
example: created.

To run your new app:
   cd example
   meteor