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?

lattner

Swift Concurrency Manifesto

Author: Chris Lattner

Chinese Translation by Jason Yu

Contents

• Introduction
• Overall Vision

koba04

/**
 * @providesModule ReactConsole
 */
'use strict';

const colors = require('colors');

const ReactDOMFrameScheduling = require('ReactDOMFrameScheduling');
const ReactFiberReconciler = require('ReactFiberReconciler');

justgage

How to Elm

This is a basic guide on how to learn Elm rather than actually teach you. I'm going to mostly link to resources that I feel are valuable and try to "teach you how to fish".

The main purpose is to accelerate your learning and save you a lot of googling and weeding through bad explinations.

Essential links

• Main website http://elm-lang.org
• Elm packages search and docs

majak

diff --git a/node_modules/react-native/React/Views/RCTScrollView.m b/node_modules/react-native/React/Views/RCTScrollView.m
--- a/node_modules/react-native/React/Views/RCTScrollView.m
+++ b/node_modules/react-native/React/Views/RCTScrollView.m
@@ -136,7 +136,7 @@
  * default UIKit behaviors such as textFields automatically scrolling
  * scroll views that contain them and support sticky headers.
  */
-@interface RCTCustomScrollView : UIScrollView<UIGestureRecognizerDelegate>
+@interface RCTCustomScrollView : UIScrollView<UIGestureRecognizerDelegate, RCTClippingView>
 

tianjianchn

/*global __DEV__*/

import StackTrace from 'stacktrace-js';
const Fabric = require('react-native-fabric');
const { Crashlytics } = Fabric;

//call this to start capturing any no-handled errors
exports.init = function(captrueOnDebugMode){
  if (__DEV__ && !captrueOnDebugMode) {
    return;

Aldredcz

Notes

• This code handles any JS runtime error during rendering React components. Without this handling, once an error occurs, whole component tree is damaged and can't be used at all. With this handling, nothing will be rendered in production environment (error span in dev env.) + in production the error is logged to Sentry (if you are not using it just delete related code)
• This is basicaly a workaround for proposed feature in React core - described in Issue: facebook/react#2461
• Works for all variants of Component creation - React.createClass, extending React.Component and also stateless functional components.
• To get this work, just put this snippet into your entry js file. Then it will work in whole application.
• Also supporting React Hot Reload!
• If you find this useful, please retweet https://twitter.com/Aldredcz/status/744650159942995968 :)

Ideas

• specify custom error renderer (global / per component, e.g. by implementing method renderOnError() in a comp

lornajane

Keyboard-only Mac Cheatsheet

Hi, I'm Lorna and I don't use a mouse. I have had RSI issues since a bad workstation setup at work in 2006. I've tried a number of extra hardware modifications but what works best for me is to use the keyboard and only the keyboard, so I'm in a good position and never reaching for anything else (except my coffee cup!). I rather unwisely took a job which required me to use a mac (I've been a linux user until now and also had the ability to choose my tools carefully) so here is my cheatsheet of the apps, tricks and keyboard shortcuts I'm using, mostly for my own reference. Since keyboard-only use is also great for productivity, you may also find some of these ideas useful, in which case at least something good has come of this :)

Apps List

There's more detail on a few of these apps but here is a quick overview of the tools I've installed and found helpful

Tool	Link	Comments

jefflarkin

#!/bin/bash
#FIXME Add usage() function to improve documentation

# Enable exposure of the specified GPIO pin (0-8)
gpio_enable()
{
  if [[("$1" -lt 0) || ("$1" -gt 8)]] ; then
    echo "Valid pins are 0-8"
    return -1;
  fi

johan

(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.JSXTransformer=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(_dereq_,module,exports){"use strict";var ReactTools=_dereq_("../main");var inlineSourceMap=_dereq_("./inline-source-map");var headEl;var dummyAnchor;var inlineScriptCount=0;var supportsAccessors=Obj