developit

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

acdlite

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

loretoparisi

injc=(src,cbk) => { let script = document.createElement('script');script.src = src;document.getElementsByTagName('head')[0].appendChild(script);script.onload=()=>cbk() }
injc("https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js",() => injc("https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js",() => console.log("ready")))

evancz

A vision for data interchange in Elm

How do you send information between clients and servers? What format should that information be in? What happens when the server changes the format, but the client has not been updated yet? What happens when the server changes the format, but the database cannot be updated?

These are difficult questions. It is not just about picking a format, but rather picking a format that can evolve as your application evolves.

Literature Review

By now there are many approaches to communicating between client and server. These approaches tend to be known within specific companies and language communities, but the techniques do not cross borders. I will outline JSON, ProtoBuf, and GraphQL here so we can learn from them all.

drcmda

import Reconciler from 'react-reconciler'
import omit from 'lodash/omit'
import capitalize from 'lodash/capitalize'
import { actions as elementActions } from './store/elements'
import * as Elements from './elements'

const roots = new Map()
const emptyObject = {}

const Renderer = Reconciler({

ferdinandsalis

import React from 'react'
import revalidation from 'revalidation'
import gql from 'graphql-tag.macro'
import { filter } from 'graphql-anywhere'
import { curry } from 'ramda'
import { compose, withProps, withHandlers } from 'recompose'
import { graphql } from 'react-apollo'
import { Button } from '../common/styled'
import { getValue } from '../form/utils'
import { isRequired } from '../../utils/validation'

GingerBear

/**
 * - check symlink in depencency and devDepency
 * - if found, generate rn-cli-config.js
 * - react-native start with rn-cli-config
 */

const packageJson = require('./package.json');
const fs = require('fs');
const exec = require('child_process').execSync;
const RN_CLI_CONFIG_NAME = `rn-cli-config-with-links.js`;

sebmarkbage

let cache = new Map();
let pending = new Map();

function fetchTextSync(url) {
  if (cache.has(url)) {
    return cache.get(url);
  }
  if (pending.has(url)) {
    throw pending.get(url);
  }

rauschma

The scope of a variable is the region of the program in which you can directly access the variable:

if (true) {
  let x = 123;
}

Here, the scope of x is the then-block of this if-then-else statement.

nhducit

#!/usr/bin/env bash
cd <projectDir>
currentBranch=$(git rev-parse --abbrev-ref HEAD)
git checkout master
git pull
git checkout $currentBranch
git rebase master