Skip to content

Instantly share code, notes, and snippets.

Redux-based flux implementation with promises support

There is middleware.js that extends basic dispatcher to support promises. Each action with promise will dispatch 2 simple actions: one when request started (to show preloader) and another when request finished (with success or error). action-creator.js is a simple example of how promise-actions is looks like: it is a plain object with 2 keys: promise and types. store.js is a simple example of store (reducer) that contain both data and loading statuses for some data object. It listen 3 types of actions and changes data accordingly. All works great until we try to implement growl-like notifications for each action.

Notifications

It is a simple store, that listen all success / error actions and push new notification into collection of notifications. It also support feature to hide notification (remove item by id from collection). I would like to have notifications, that display only for a few seconds and then will dissapear. So, redux way is t

import React, { Component, PropTypes } from 'react';
export default class CreditCardField extends Component {
static propTypes = {
value: PropTypes.string,
onChange: PropTypes.func,
}
static defaultProps = {
value: ''
}
@afitiskin
afitiskin / step2_card-info_base.html
Last active December 29, 2015 15:59
Webzilla terminal styles
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<title>ECommPay</title>
<link rel="stylesheet" type="text/css" media="all" href="css/global.css">
<link rel="stylesheet" type="text/css" media="all" href="css/global-override.css">
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.countdown.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
@afitiskin
afitiskin / gist:6112536
Last active December 20, 2015 09:59
Попытка сделать модификаторы БЭМ более приятными в использовании за счет изменения нотации именования.

Альтернативный способ именования модификатора в методологии БЭМ

Строится по формуле <префикс>-<состояние>-<значение>, с учетом 3х правил:

  1. Префикс всегда it (как функция it в Jasmine)
  2. Состояние описывается глаголом в 3 лице, единственноом числе (простым или вкупе с дополнением): is, has, has_icon, looks_like, stands, appears
  3. Значение состояния описывается существительным или прилагательным: hidden, buttons, dark

Получаем: it-is-hidden, it-looks_like-link, it-has-childs

@afitiskin
afitiskin / underscore-template-extend.js
Last active December 17, 2015 10:18
Now you can use DOM-element contents as a template. Just pass DOM-element id (like '#dom-element-id') and all those element's contents (innerHTML) will used as a template string.
(function () {
'use strict';
var cache = {};
_.templateDefault = _.template;
_.template = function (str, data) {
var match, elem;
if (match = str.match(/^#(\S+)$/)) {
if (!_.has(cache, str)) {
elem = document.getElementById(match[1]);
cache[str] = elem ? elem.innerHTML : str;
@afitiskin
afitiskin / underscore-pickup-mixin.js
Last active December 17, 2015 10:09
Add _.pickUp function to underscore object. This function (like _.pick function) returns a copy of the array, filtered to only have values for the whitelisted values (or array of values). For example: _.pickUp(['yes', 'no', 'yep', 'nope'], true, false, true, false) returns ['yes', 'yep'] Allow to pass second parameter as an array of values: _.pi…
(function () {
'use strict';
_.mixin({
pickUp: function () {
var args = Array.prototype.slice.call(arguments),
array = args.shift(),
result = [];
if (args.length === 1 && _.isArray(args[0])) {
args = args.shift();