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

lirbank

#!/bin/sh
DOMAIN=airlab.io
PORT=3000

# Find configured IPv4 addresses, skip localhost
IP=`ifconfig |grep -oE "(inet )([0-9]+\.[0-9]+\.[0-9]+\.[0-9]+)"|awk '{print $2}' | grep -v "127.0.0.1"`
echo "Your IP:       $IP"

# Replace periods with hyphens
HOSTNAME=`echo $IP | tr '.' '-'`

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.

---

yhsiang

var gulp        = require('gulp'),
    gutil       = require('gulp-util'),
    stylus        = require('gulp-stylus'),
    uglify      = require('gulp-uglify'),
    jade        = require('gulp-jade'),
    concat      = require('gulp-concat'),
    livereload  = require('gulp-livereload'),
    tinylr      = require('tiny-lr'),
    express     = require('express'),
    app         = express(),

chriskjaer

var gulp        = require('gulp'),
    gutil       = require('gulp-util'),
    sass        = require('gulp-sass'),
    csso        = require('gulp-csso'),
    uglify      = require('gulp-uglify'),
    jade        = require('gulp-jade'),
    concat      = require('gulp-concat'),
    livereload  = require('gulp-livereload'), // Livereload plugin needed: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
    tinylr      = require('tiny-lr'),
    express     = require('express'),

egaumer

$scope.pager = {

    pageChange: function(pageNum) {
        $scope.search(resultPager.get(pageNum));
    },

    next: function() {
        this.pageChange(resultPager.next());
    },

YannBrrd

// app.js
angular.module('cs_demo', [
    'controllers', 
    'elasticjs.service',
    'ui.bootstrap'
]);

color2life

- 10.upto(20) do |i|

getify

    <script src="../vendor/lab2.min.js"></script>
    <script type="text/javascript">
      var start = (+new Date);

      // load some scripts dependent on each other (in parallel but preserving execution order)
      $LAB
      .setOptions({AlwaysPreserveOrder:true})
      .script('a.js')
      .script('b-needs-a.js')
      .script('c-needs-b.js')

revolunet

// LZW-compress a string
function lzw_encode(s) {
    var dict = {};
    var data = (s + "").split("");
    var out = [];
    var currChar;
    var phrase = data[0];
    var code = 256;
    for (var i=1; i<data.length; i++) {
        currChar=data[i];