Una Kravets una

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

Core JavaScript Fundamentals:

Code Avengers: http://www.codeavengers.com/javascript/1#1.1

JavaScript for Absolute Beginners video series (never watched all these before, but seems ok): http://channel9.msdn.com/Series/Javascript-Fundamentals-Development-for-Absolute-Beginners

Good reference book - JavaScript Definitive Guide: http://it-ebooks.info/go.php?id=416-1374962086-a7b5f33e035c5b66a423b1ceef3cfa60

An understanding of what parts of the language to stay away from - JavaScript the Good Parts book:

Pure SASS-adaption of Lea Verou's contrast-ratio javascript. Can be useful when eg. generating colored buttons from a single supplied color as you can then check which out of a couple of text colors would give the best contrast.

This script currently lacks the support for alpha-transparency that Lea supports in her script though.

In addition to the color-contrast adaption there's also some math methods that were needed to be able to calculate the exponent of a number and especially so when the exponent is a decimal number. A 2.4 exponent is used to calculate the luminance of a color and calculating such a thing is not something that SASS supports out of the box and not something I found a good pure-SASS script for calculating and I much prefer pure-SASS over ruby extensions. The math methods might perhaps be unecessary though if you're running Compass or similar as they may provide compatible math methods themselves.

Normal usage: `color: pick_best_color(#f00

Why would you want to do this? Because you often don't need more. It's nice to not have to think about your "router" as this big special thing.

Instead, with this approch, your app's current pathname is just another piece of state, just like anything else.

This also means that when doing server-side rendering of a redux app, you can just do:

var app = require('your/redux/app')
var React = require('react')

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

	<!doctype html>

	<!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ -->

	<html>
	<head>
	<title>iOS 8 web app</title>

	<!-- CONFIGURATION -->

	@mixin same($values...) {
	$length: length($values);
	$value: nth($values, $length);

	@for $i from 1 to $length {
	#{nth($values, $i)}: $value;
	}
	}

	// Usage:

	'use strict';

	// simple express server
	var express = require('express');
	var app = express();
	var router = express.Router();

	app.use(express.static('public'));
	app.get('/', function(req, res) {
	res.sendfile('./public/index.html');

	var elements = document.querySelectorAll("div"),
	callback = (el) => { console.log(el); };

	// Spread operator
	[...elements].forEach(callback);

	// Array.from()
	Array.from(elements).forEach(callback);

	// for...of statement

	// Load fonts async by default
	// Load sync from SW cache when available.
	//
	// Snippet assumes your Service Worker caches fonts as part of installation, so that
	// an 'activated' Service Worker means the fonts are cached with 100% confidence.
	if (
	'serviceWorker' in navigator &&
	navigator.serviceWorker.controller !== null &&
	navigator.serviceWorker.controller.state === 'activated'
	) {