Leonard barnslig

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

Polymorphic Associations reversed

It's pretty easy to do polymorphic associations in Rails: A Picture can belong to either a BlogPost or an Article. But what if you need the relationship the other way around? A Picture, a Text and a Video can belong to an Article, and that article can find all media by calling @article.media

This example shows how to create an ArticleElement join model that handles the polymorphic relationship. To add fields that are common to all polymorphic models, add fields to the join model.

	function readFile(file) {
	var reader = new FileReader();
	var deferred = $.Deferred();

	reader.onload = function(event) {
	deferred.resolve(event.target.result);
	};

	reader.onerror = function() {
	deferred.reject(this);

	require 'gollum/frontend/app'
	require 'digest/sha1'

	class App < Precious::App
	User = Struct.new(:name, :email, :password_hash, :can_write)

	before { authenticate! }
	before /^\/(edit\|create\|delete\|livepreview\|revert)/ do authorize_write! ; end

	helpers do

	@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; }
	50% { background-color: #ccffcc; }
	100% { background-color: #ccffff; } }

	@-moz-keyframes bgcolor { 0% { background-color: #ffccf2; }
	50% { background-color: #ccffcc; }
	100% { background-color: #ccffff; } }

	@-ms-keyframes bgcolor { 0% { background-color: #ffccf2; }
	50% { background-color: #ccffcc; }