randylien

Web Components Resources

Specs / standardization

W3C Introduction to Web Components - explainer/overview of the technologies

• Custom Elements
• HTML Imports
• Shadow DOM
• CSS Scoping Module

randylien

tmux cheatsheet

As configured in my dotfiles.

start new:

tmux

start new with session name:

randylien

tmux shortcuts & cheatsheet

start new:

tmux

start new with session name:

tmux new -s myname

randylien

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

So you're curious in learning this new thing called (Functional) Reactive Programming (FRP).

Learning it is hard, even harder by the lack of good material. When I started, I tried looking for tutorials. I found only a handful of practical guides, but they just scratched the surface and never tackled the challenge of building the whole architecture around it. Library documentations often don't help when you're trying to understand some function. I mean, honestly, look at this:

Rx.Observable.prototype.flatMapLatest(selector, [thisArg])

Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.

randylien

/**
 * Adapted from https://github.com/Khan/react-components/blob/master/js/timeout-transition-group.jsx
 */

var React = require('react/addons');
var ReactTransitionGroup = React.addons.TransitionGroup;
var Velocity = require('velocity-animate');

var transitions = {
	// Forcefeeding: property order = [after, before]

randylien

/**
 * Adapted from https://github.com/Khan/react-components/blob/master/js/timeout-transition-group.jsx
 */

var React = require('react/addons');
var ReactTransitionGroup = React.addons.TransitionGroup;
var Velocity = require('velocity-animate');

var transitions = {
	// Forcefeeding: property order = [after, before]

randylien

var AppConstants = require('../constants/AppConstants.js');
var AppDispatcher = require('../dispatchers/AppDispatcher.js');
var api = require('../utils/api');

var ActionTypes = AppConstants.ActionTypes;

module.exports = {
  create_customer: function(data){
    api.customer.create(data);
  }

randylien

/** @jsx React.DOM */
'use strict';

var React = require('react'),
    { PropTypes } = React;

var AudioPlayer = React.createClass({
  propTypes: {
    source: PropTypes.string.isRequired,
    isPlaying: PropTypes.bool.isRequired,

randylien

I've been struggling to come up with a good pattern for handling loading state in Flux (specifically using Fluxxor, though I think this is an issue for any implementation).

When I say "loading state," what I mean is state in a store that tracks:

• Whether the data handled by the store was loaded
• Whether the store is currently attempting to load data
• Whether the data loaded successfully or errored
• The error message, if it errored

Here's my first (very simple) pass at this, a store mixin called LoadingStoreMixin.js:

randylien

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

So you're curious in learning this new thing called Reactive Programming, particularly its variant comprising of Rx, Bacon.js, RAC, and others.

Learning it is hard, even harder by the lack of good material. When I started, I tried looking for tutorials. I found only a handful of practical guides, but they just scratched the surface and never tackled the challenge of building the whole architecture around it. Library documentations often don't help when you're trying to understand some function. I mean, honestly, look at this:

Rx.Observable.prototype.flatMapLatest(selector, [thisArg])

Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.