(by @andrestaltz)
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.
<!doctype html> | |
<!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ --> | |
<html> | |
<head> | |
<title>iOS 8 web app</title> | |
<!-- CONFIGURATION --> |
(by @andrestaltz)
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.
/** @jsx React.DOM */ | |
var ReadingTimeWidget = React.createClass({ | |
getInitialState: function() { | |
return ({ | |
secondsRequired: null, | |
}); | |
}, | |
componentWillMount: function() { | |
var cdiv = this.props.contentDiv; |
/* bling.js */ | |
window.$ = document.querySelectorAll.bind(document); | |
Node.prototype.on = window.on = function (name, fn) { | |
this.addEventListener(name, fn); | |
} | |
NodeList.prototype.__proto__ = Array.prototype; |
// modified from this: https://github.com/emiloberg/nativescript-emulator-reload | |
// all sources | |
var babelSrc = [ 'src/**/*.js', '!src/tns_modules', '!src/tns_modules/**', '!src/node_modules', '!src/node_modules/**' ]; | |
var jadeSrc = [ 'src/**/*.jade' ]; | |
var sassSrc = [ 'src/**/*.scss' ]; | |
var resources = [ 'src/{App_Resources,tns_modules,node_modules}/**', 'src/package.json']; | |
// Which emulator to run? |
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.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
{0: 'tench, Tinca tinca', | |
1: 'goldfish, Carassius auratus', | |
2: 'great white shark, white shark, man-eater, man-eating shark, Carcharodon carcharias', | |
3: 'tiger shark, Galeocerdo cuvieri', | |
4: 'hammerhead, hammerhead shark', | |
5: 'electric ray, crampfish, numbfish, torpedo', | |
6: 'stingray', | |
7: 'cock', | |
8: 'hen', | |
9: 'ostrich, Struthio camelus', |
"use strict"; | |
// helpers | |
function mat2d(mat) { | |
const n = Math.sqrt(mat.length); | |
return Array.from(Array(n), (_, i) => mat.slice(i * n, i * n + n)); | |
} | |
function range(n, f = v => v) { | |
return Array.from(Array(n), (_, i) => f(i)); | |
} |