btroncone

Comprehensive Introduction to @ngrx/store

By: @BTroncone

Also check out my lesson @ngrx/store in 10 minutes on egghead.io!

Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!

Table of Contents

btroncone

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.

Table of Contents

• buffer
• bufferCount
• bufferTime

djspiewak

Explaining Miles's Magic

Miles Sabin recently opened a pull request fixing the infamous SI-2712. First off, this is remarkable and, if merged, will make everyone's life enormously easier. This is a bug that a lot of people hit often without even realizing it, and they just assume that either they did something wrong or the compiler is broken in some weird way. It is especially common for users of scalaz or cats.

But that's not what I wanted to write about. What I want to write about is the exact semantics of Miles's fix, because it does impose some very specific assumptions about the way that type constructors work, and understanding those assumptions is the key to getting the most of it his fix.

For starters, here is the sort of thing that SI-2712 affects:

def foo[F[_], A](fa: F[A]): String = fa.toString

DrBoolean

const {Left, Right}  = require('data.either')
const Tuple = require('fantasy-tuples').Tuple2

//List :: Either Null (Tuple a List)

const empty = () =>
  Left(null)

const cons = (x, l) =>
  Right(Tuple(x, l))

Dorus

var source$ =  Rx.Observable.marble("1--23--456--7890--");
var enter$ =   Rx.Observable.marble("-e-----e----------");
var exit$ =    Rx.Observable.marble("---x-------x------");
var sampler$ = Rx.Observable.marble("a--b--c--d--e--f--");
var full$ =    Rx.Observable.marble("01234567890abcdefg");

source$.draw('source', '#container')
  .debounceTime(1050).draw('debounceTime(1)', '#container');
source$.auditTime(1050).draw('auditTime(1)', '#container');
source$.throttleTime(1050).draw('throttleTime(1)', '#container');

gaearon

// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
  // It lets us inject component as the last step so people can use it as a decorator.
  // Generally you don't need to worry about it.
  return function (WrappedComponent) {
    // It returns a component
    return class extends React.Component {
      render() {
        return (

johnlindquist

Angular 2 Starter Template

http://plnkr.co/edit/2aIgMzUx7XgZe9EA6upB?p=preview&open=app%2Fapp.component.ts

Smart Container

http://plnkr.co/edit/EIsS2pFsDwATaq1Ibxvb?p=preview

Dumb Component

http://plnkr.co/edit/hCCEtt1SVohWN80s0ej8?p=preview&open=app%2Fapp.component.ts

Encapsulated Styles and :host

stoeffel

import Html exposing (..)


type These a b
    = This a
    | That b
    | Both a b
    | Neither

davidchambers

var convertPercentage = function(percentage) {
  if (percentage == null) {
    return null;
  } else {
    return parseFloat(percentage.replace(/[^-\d.]/g, ''));
  }
};

slorber

// FP languages permit to evaluate if/else expressions as values.
// In many cases it permits to avoid using mutable variables (var/let), multiple returns, or nested ternary operators

// This is the do { } notation (stage 0), that permits to write the following right now with Babel.

const Users = ({users}) =>   (
  <div>
    {users.map(user =>
      <UserCard key={user.id} user={user}/>