otakustay

/**
 * @file 为一个组件提供初始化时异步获取数据的能力
 * @author zhanglili
 */

import {PureComponent, createElement} from 'react';
import {zipObject, identity, noop} from 'lodash';
import {wrapDisplayName} from 'recompose';

/**

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?

jakelear

<script id="shader-fs" type="x-shader/x-fragment">
'
      varying highp vec2 vTextureCoord;
      varying highp vec3 vLighting;
      #ifdef GL_ES
        precision highp float;
      #endif

      uniform highp vec2 resolution;

briansmith

How to Generate & Use Private Keys using OpenSSL's Command Line Tool

These commands generate and use private keys in unencrypted binary (not Base64 “PEM”) PKCS#8 format. The PKCS#8 format is used here because it is the most interoperable format when dealing with software that isn't based on OpenSSL.

OpenSSL has a variety of commands that can be used to operate on private key files, some of which are specific to RSA (e.g. openssl rsa and openssl genrsa) or which have other limitations. Here we always use

yetone

const noop = () => {}
const supportsCSSText = getComputedStyle(document.body).cssText !== ''

function copyCSS(elem, origElem) {
    let computedStyle = getComputedStyle(origElem)

    if (supportsCSSText) {
        elem.style.cssText = computedStyle.cssText
    } else {
        Object.keys(computedStyle).forEach(prop => {

muratgozel

// If you are planning to use postcss plugins like autoprefixer, 
//you probably should precompile your jss style objects with postcss-js before running your app.
// Because autoprefixer makes a network request and loads caniusedb json file into your bundle 
//and this will dramaticly increase the size of your bundle.

// So lets create a precompile script

// Following 2 library needed for writing compiled jss style objects to files
var fs = require("fs");
var stringifyObject = require("stringify-object"); 

Avaq

const I  = x => x
const K  = x => y => x
const A  = f => x => f (x)
const T  = x => f => f (x)
const W  = f => x => f (x) (x)
const C  = f => y => x => f (x) (y)
const B  = f => g => x => f (g (x))
const S  = f => g => x => f (x) (g (x))
const S_ = f => g => x => f (g (x)) (x)
const S2 = f => g => h => x => f (g (x)) (h (x))

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

nolanlawson

// Promise.all is good for executing many promises at once
Promise.all([
  promise1,
  promise2
]);

// Promise.resolve is good for wrapping synchronous code
Promise.resolve().then(function () {
  if (somethingIsNotRight()) {
    throw new Error("I will be rejected asynchronously!");

kejun

var React         = require('react');
var EventListener = require('react/lib/EventListener');
var partition     = require('linear-partitioning');

var TileLayout = React.createClass({
  getDefaultProps: function() {
    return {
      gutter: 0,
      photos: []
    }