guibot17

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.

---

guibot17

(function(){

  var SCROLL_WIDTH = 24;

  var btn_popup = document.getElementById("btn_popup");
  var popup = document.getElementById("popup");
  var popup_bar = document.getElementById("popup_bar");
  var btn_close = document.getElementById("btn_close");
  var smoke = document.getElementById("smoke");

guibot17

import {Pipe, PipeTransform} from 'angular2/core';

/*
 * Changes the case of the first letter of a given number of words in a string.
*/

@Pipe({name: 'titleCase', pure: false})
export class TitleCase implements PipeTransform {
    transform(input:string, length: number): string{
        return input.length > 0 ? input.replace(/\w\S*/g, (txt => txt[0].toUpperCase() + txt.substr(1).toLowerCase() )) : '';

guibot17

// Assuming you have included the firebase script tag above this javascript
// For reference here is the tag: <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>

// Assumes you have already authenticated the user.

// Setup your firebase reference
var ref = new Firebase('https://your-app.firebaseIO-demo.com/');

// Setup a way to get your userid (Assuming using provided firebase authentication method...)
function getUser(authData) {

guibot17

/*
 * jQuery special events for delayedEnter, delayedLeave, and delayedHover
 * Author: Scott Jehl, scott@filamentgroup.com
 * Copyright (c) 2011 Filament Group
 * licensed under MIT
 * note: Each event can be used with bind or live event handling as you would use mouseenter,mouseleave, and hover
 * events fire after 200ms timeout
*/
(function($){
  //delayedEnter event

guibot17

#RxJS 5 Operators By Example

UPDATE: I have moved the contents of this gist plus more to https://github.com/btroncone/learn-rxjs and http://www.learnrxjs.io. 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.

Chinese Version by: @DrakeLeung

Table of Contents

• buffer

guibot17

/**
 * @class
 * @description
 * Wrapper for HTML5 audio. 
 */
import {Injectable, NgZone} from 'angular2/core';
import {Observer} from 'rxjs/Observer';
import {Observable} from 'rxjs/Observable';

declare var AudioContext:any;

guibot17

// Available in jCanvas v20.1.0

// The pixel multiple to snap to
var snapToAmount = 40;
// Round the given value to the nearest multiple of n
function nearest(value, n) {
  return Math.round(value / n) * n;
}
$('canvas').drawArc({
  layer: true,

guibot17

<ng-template #followingpost let-author="author" let-age="age" let-text="text" let-badge="badge">
    <div class="container-fluid">
        <div class="card">
            <div class="header">
                <h4 class="title">{{ author }}</h4>
                <p class="category">il y a {{ age }} jours</p>
            </div>

            <div class="content" [innerHTML]="text">
            </div>

guibot17

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.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()