Nur Rony nurrony

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

Variables

Latency numbers every programmer should know

L1 cache reference ......................... 0.5 ns
Branch mispredict ............................ 5 ns
L2 cache reference ........................... 7 ns
Mutex lock/unlock ........................... 25 ns
Main memory reference ...................... 100 ns             
Compress 1K bytes with Zippy ............. 3,000 ns  =   3 µs
Send 2K bytes over 1 Gbps network ....... 20,000 ns  =  20 µs
SSD random read ........................ 150,000 ns  = 150 µs

Read 1 MB sequentially from memory ..... 250,000 ns = 250 µs

Generators vs Fibers

Both ES6 generators and node-fibers can be used to block a coroutine while waiting on some I/O without blocking the entire process. Both can do this for arbitrarily deep call stacks. The main difference between the capabilities of the two is how explicit the syntax is.

Generators - Safe, but Explicit

In code that uses ES6 generators:

var run = require('gen-run'); // https://github.com/creationix/gen-run

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

Possible solutions

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.

from streams session

end-of-stream - specify a callback to be called when a stream ends (which is surpsingly hard to get right)
duplexify - compose a Duplex stream from a Readable and a Writable stream
pump - pipe streams together and close all of them if one of them closes
pumpify - combine an array of streams into a single duplex stream using pump and duplexify
through2 - tools for making Transform streams
from2 - tools for making Readable streams

from "participatory modules" session

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

	/**
	* First, better, "set exports/return" option
	*/
	(function (define) {
	//The 'id' is optional, but recommended if this is
	//a popular web library that is used mostly in
	//non-AMD/Node environments. However, if want
	//to make an anonymous module, remove the 'id'
	//below, and remove the id use in the define shim.
	define('id', function (require) {

	#!/usr/bin/env ruby

	require 'faraday'
	require 'json'
	require 'gitlab'

	module Redmine
	Host = nil
	APIKey = nil

	{
	"env": {
	"browser": true,
	"node": true,
	"es6": true
	},

	"plugins": ["react"],

	"ecmaFeatures": {