When hosting our web applications, we often have one public IP
address (i.e., an IP address visible to the outside world)
using which we want to host multiple web apps. For example, one
may wants to host three different web apps respectively for
example1.com, example2.com, and example1.com/images on
the same machine using a single IP address.
How can we do that? Well, the good news is Internet browsers
| $ brew install markdown htmldoc | |
| $ markdown <file.md> | htmldoc --cont --headfootsize 8.0 --linkcolor blue --linkstyle plain --format pdf14 - > <file.pdf> |
These rules are adopted from the AngularJS commit conventions.
| var mediaJSON = { "categories" : [ { "name" : "Movies", | |
| "videos" : [ | |
| { "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org", | |
| "sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ], | |
| "subtitle" : "By Blender Foundation", | |
| "thumb" : "images/BigBuckBunny.jpg", | |
| "title" : "Big Buck Bunny" | |
| }, | |
| { "description" : "The first Blender Open Movie from 2006", | |
| "sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ], |
| /** | |
| * get - XHR Request | |
| */ | |
| let get = function (url) { | |
| return function (callback) { | |
| let xhr = new XMLHttpRequest(); | |
| xhr.open('GET', url); | |
| xhr.onreadystatechange = function() { | |
| let response = xhr.responseText; |
2015-01-29 Unofficial Relay FAQ
Compilation of questions and answers about Relay from React.js Conf.
Disclaimer: I work on Relay at Facebook. Relay is a complex system on which we're iterating aggressively. I'll do my best here to provide accurate, useful answers, but the details are subject to change. I may also be wrong. Feedback and additional questions are welcome.
Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).
| var gulp = require('gulp'); | |
| var sourcemaps = require('gulp-sourcemaps'); | |
| var source = require('vinyl-source-stream'); | |
| var buffer = require('vinyl-buffer'); | |
| var browserify = require('browserify'); | |
| var watchify = require('watchify'); | |
| var babel = require('babelify'); | |
| function compile(watch) { | |
| var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel)); |
| // An `Object.observe()` "polyfill" using ES6 Proxies. | |
| // | |
| // Current `Object.observe()` polyfills [1] rely on polling | |
| // to watch for property changes. Proxies can do one better by | |
| // observing property changes to an object without the need for | |
| // polling. | |
| // | |
| // Known limitations of this technique: | |
| // 1. the call signature of `Object.observe()` will return the proxy | |
| // object. The original object needs to be overwritten with this return value. |
| /** | |
| * This code is licensed under the terms of the MIT license | |
| * | |
| * Deep diff between two object, using lodash | |
| * @param {Object} object Object compared | |
| * @param {Object} base Object to compare with | |
| * @return {Object} Return a new object who represent the diff | |
| */ | |
| function difference(object, base) { | |
| function changes(object, base) { |
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