Wojciech Morawski HideoKun

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

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

#How to Construct Yourself UI in KeystoneJS

KeystoneJS provide Admin UI with one set of route controllers and view templates(list&item) for all of the models.But usually,you will need some custome views other than Admin UI to display models. Although the KeystoneJS documention don't tell us much about how to contruct custome view,we can learn this from the source code in skeleton project generated by yo keystone,or you can just check out the keystone demo project's source code.We will walk through the blog feature's implementation in this demo application to demonstrate how to construct custome UI in KeystoneJS application.

As KeystoneJS documention described in Routes & Views section,there is a routes/index.js file, where we bind application's URL patterns to the controllers that load and process data, and render the appropriate template.You can find following code in it:

app.get('/blog/:catego

Mac Homebrew (RVM/MySQL/Redis) setup

Follow the steps below to setup a local development environment:

XQuartz

Recommended to download latest XQuartz

iTerm2

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

	var grunt = require('grunt');
	var hooker = require('hooker');

	module.exports = preAndPostHook = function () {
	var currentTask = undefined;

	/**
	* Do something when the task has sta.
	* @param taskName The task name.
	*/

	#!/bin/sh

	set -e
	set -x

	for package in $(npm -g outdated --parseable --depth=0 \| cut -d: -f3)
	do
	npm -g install "$package"
	done

	var resolve = require("path").resolve
	var lock = require("lockfile").lock

	var FILE = resolve(__dirname, "LOCKFILE")
	var PID = process.pid
	var OPTIONS = {retries : 0}
	var SCALE = 16

	var results = []
	var running = SCALE

	//gulp & plugins
	var gulp = require('gulp');
	var gutil = require('gulp-util');
	var jshint = require('gulp-jshint');
	var browserify = require('gulp-browserify');
	var jade = require('gulp-jade');
	var stylus = require('gulp-stylus');
	var mocha = require('gulp-mocha');
	var nodemon = require('gulp-nodemon');
	var livereload = require('gulp-livereload');

	# Compiled source #
	###################
	*.com
	*.class
	*.dll
	*.exe
	*.o
	*.so

	# Packages #