Michael Swanson mswanson

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

Moving to ES6 from CoffeeScript

I fell in love with CoffeeScript a couple of years ago. Javascript has always seemed something of an interesting curiosity to me and I was happy to see the meteoric rise of Node.js, but coming from a background of Python I really preferred a cleaner syntax.

In any fast moving community it is inevitable that things will change, and so today we see a big shift toward ES6, the new version of Javascript. It incorporates a handful of the nicer features from CoffeeScript and is usable today through tools like Babel. Here are some of my thoughts and issues on moving away from CoffeeScript in favor of ES6.

While reading I suggest keeping open a tab to Babel's learning ES6 page. The examples there are great.

Punctuation

Holy punctuation, Batman! Say goodbye to your whitespace and hello to parenthesis, curly braces, and semicolons again. Even with the advanced ES6 syntax you'll find yourself writing a lot more punctuatio

I upgraded a small app from ember-cli from 0.1.11 to 0.2.0 today. It took a couple hours. Here are some notes.

Prep

First, I read the release notes.

`ember init`

I recommend committing your changes right before running ember init. That way, you can accept all the overwrites and easily discard the ones you don't want. kellyselden maintains a repo called ember-cli-output that tracks the changes in what ember init generates over time. You can find the v0.2.0 changes here.

To remove a submodule you need to:

Delete the relevant section from the .gitmodules file.
Stage the .gitmodules changes git add .gitmodules
Delete the relevant section from .git/config.
Run git rm --cached path_to_submodule (no trailing slash).
Run rm -rf .git/modules/path_to_submodule (no trailing slash).
Commit git commit -m "Removed submodule "
Delete the now untracked submodule files rm -rf path_to_submodule

Install OS X 10.10 Yosemite in VirtualBox

Due to the high usage of this guide and the lack of comfort in Gist's commenting area, I decided to make a blog post out of this which you can find here:

http://blog.frd.mn/install-os-x-10-10-yosemite-in-virtualbox/

Mac OS X 10.10 Yosemite

Custom recipe to get OS X 10.10 Yosemite running from scratch, setup applications and developer environment. I use this gist to keep track of the important software and steps required to have a functioning system after a semi-annual fresh install. On average, I reinstall each computer from scratch every 6 months, and I do not perform upgrades between distros.

This keeps the system performing at top speeds, clean of trojans, spyware, and ensures that I maintain good organizational practices for my content and backups. I highly recommend this.

You are encouraged to fork this and modify it to your heart's content to match your own needs.

Install Software

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.

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

	// app/controllers/sign-in.js
	import Ember from 'ember';

	export default Ember.Controller.extend({
	actions: {
	signIn(){
	this.set('errors', null);
	var params = { identification: this.get('email'), password: this.get('password') };
	// Redirects to index route on success (configurable in config/environment.js)
	this.get('session').authenticate('simple-auth-authenticator:oauth2-password-grant', params);

	// tests/acceptance/foo-test.js

	// Assert that text should be found
	assert.hasText('Not Found'); // Error: Could not find text "Not Found" on the page

	// Provide custom message
	assert.hasText('Not Found', 'Expected to find "Not Found"'); // Error: Expected to find "Not Found"

	// Find any number of elements containing the query text
	text('Found'); // [<div>Found</div>, <input value="Found">]