Oscar Lodriguez code0wl

Conventions

A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
lengths are in any unit (ex: pixels)
code snippets are in JavaScript

Degrees to radians

angleRad = angleDeg * Math.PI / 180;

RxJS 5 Operators By Example

⚠️ UPDATE: I have moved the contents of this gist plus more to http://www.learnrxjs.io and https://github.com/btroncone/learn-rxjs. For expanded examples, explanations, and resources, please check out this new location!

A complete list of RxJS 5 operators with easy to understand explanations and runnable examples.

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

Protractor API

http://angular.github.io/protractor/#/api

Note: Most commands return promises, so you only resolve their values through using jasmine expect API or using .then(function()) structure

Based on this post: https://spagettikoodi.wordpress.com/2015/01/14/angular-testing-cheat-sheet/ by @crystoll

Control browser

browser.get('yoururl'); // Load address, can also use '#yourpage'

WebSockets - An Introduction

WebSockets is a modern HTML5 standard which makes communication between client and server a lot more simpler than ever. We are all familiar with the technology of sockets. Sockets have been fundamental to network communication for a long time but usually the communication over the browser has been restricted. The general restrictions

The server used to have a permanent listener while the client (aka browser) was not designated any fixed listener for a more long term connection. Hence, every communication was restricted to the client demanding and the server responding.
This meant that unless the client requested for a particular resource, the server was unable to push such a resource to the client.
This was detrimental since the client is then forced to check with the server at regular intervals. This meant a lot of libraries focused on optimizing asynchronous calls and identifying the response of asynchronous calls. Notably t

HotPlate

You have a 16x16 grid of which the 4 centermost cells are always 100 degrees and the cornermost cells are always 0 degrees. All other cells start at 50 degrees.

For example, a 6x6 grid would look like this:

|  0  | 50  | 50  | 50  | 50  |  0  |
| 50  | 50  | 50  | 50  | 50  | 50  |

| 50 | 50 | 100 | 100 | 50 | 50 |

	// Karma configuration file, see link for more information
	// https://karma-runner.github.io/1.0/config/configuration-file.html
	const process = require('process');
	process.env.CHROME_BIN = require('puppeteer').executablePath();

	module.exports = function (config) {
	config.set({
	basePath: '',
	frameworks: ['jasmine', '@angular-devkit/build-angular'],
	plugins: [

	// Import all

	import Rx from "rxjs/Rx";

	Rx.Observable
	.interval(200)
	.take(9)
	.map(x => x + "!!!")
	.bufferCount(2)
	.subscribe(::console.log);

	function Foo(who) {
	this.me = who;
	}

	Foo.prototype.identify = function() {
	return "I am " + this.me;
	};

	function Bar(who) {
	Foo.call(this,"Bar:" + who);