staydecent

import check from 'check-arg-types'

import createAction from '/util/createAction'

export const TOGGLE_DROPDOWN = 'TOGGLE_DROPDOWN'
const toggleDropdownAction = createAction(TOGGLE_DROPDOWN)

export function toggleDropdown (uid) {
  check(arguments, ['string'])
  return toggleDropdownAction({uid})

staydecent

import {css} from 'glamor'

import {closeModal} from '/actions'

import {Card} from '/components/elements/card'

const fadeIn = css.keyframes({
  '0%': { opacity: 0 },
  '100%': { opacity: 1 }
})

staydecent

What if every React component received the entire state object, and just use pipe/mapProps to get whats needed?

Or do you often pass values derived in a parent component down into a child?

And if so, what if there was a query api for defining the derived state values?

So if two components needs the same computed value of some property in the state object, they can use the same query and it can be optimized/cached there.

I’ve been getting kinda annoyed during development, where I’m like oh.. this parent component computes a value, and has all these children.. and later on I decide one of those children has a child, that needs that same computed value. Then I have to go back up the component tree and make sure I pass that value down.

staydecent

Ramda for all of your Redux needs

Ramda is a practical functional library for JavaScript programmers. While a few of the functions can be found in the JavaScript language, all of the Ramda functions are curryable and mutation free.

Ramda for your Reducer

The way I implement the Flux/Redux pattern is simply to hold a state object in a safe place -- that is a place that can only be mutated by explicit dispatching of actions. Or, explicit dispatching of instructions on how to mutate the state and return it anew.

In practice, this usually means my reducer is filled with a switch statement with very similar logic for updating, setting, or removing different nested properties on the state object.

staydecent

const Preact = require('preact')
const atom = require('atom')
const {reducer, set, update, remove} = require('atom-lens-reducer')

const pipe = require('ramda/src/pipe')
const memoize = require('ramda/src/memoize')
const find = require('ramda/src/find')
const propEq = require('ramda/src/propEq')

const store = atom(reducer, {

staydecent

var atom = require("atom")

// Inspiration reference:
// https://raw.githubusercontent.com/Day8/re-frame/master/images/Readme/6dominoes.png

// 1. Query - computed properties
// 2. Listen - effect handlers
// 3. Dispatch - describe mutations

// 1. Query

staydecent

const css = require('glamor')
const Preact = require('preact')
const {h, render} = Preact

css.insertRule('body { font-family: "Verdana" }')

console.log('css', css)

const Layout = () =>
    h('div', {className: css.css({

staydecent

set nocompatible
set modelines=0
set wildcharm=<C-z>

filetype off 

" save swap files globally
set directory^=$HOME/.vim/tmp//

" Tabs

staydecent

D3 Volume Indicating Avatars

A Pen by Adrian Unger on CodePen.

License.

staydecent

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": [
    "transform-es2015-spread",
    "transform-object-rest-spread",
    [
      "./node_modules/babel-plugin-jsx-import/src/index.js",