stephanbogner

var paths = [
    ["Account"],
    ["Account", "Payment Methods"],
    ["Account", "Payment Methods", "Credit Card"],
    ["Account", "Payment Methods", "Paypal"],
    ["Account", "Emails"],
    ["Account", "Emails", "Main Email"],
    ["Account", "Emails", "Backup Email"],
    ["Account", "Devices"],
    ["Account", "Devices", "Google Pixel"],

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?

threepointone

// inifinite scrolling of content without extra wrappers 
const { render, findDOMNode  } = ReactDOMFiber

class App extends React.Component {
  render() {
  // wrap the root element with an Intersection Observer, exposing .observe for children
    return <Intersection>
      <div style={{ height: 200, overflow: 'auto' }}>
        <Page offset={0} count={10} />
      </div>

geoffreydhuyvetters

What is React Fiber? And how can I try it out today?

what?

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.

• Andrew Clark: What's Next for React — ReactNext 2016
• React Fiber Architecture

why?

kmokidd

// --------------------------MQ--------------------------//
/* iPhone4 iPhone5/5s
 * 超级低端 Android
 */
@media (max-device-width: 320px){
}

/* Especially for iPhone4 */
@media (max-device-width: 320px) and (max-device-height: 480px) and (-webkit-min-device-pixel-ratio: 2){
}

Erichain

##MAC OS下安装和配置android-sdk

###安装

在MAC上安装android-sdk，标准的安装方法是使用homebrew，运行如下命令：

brew update

brew install android-sdk

bishboria

These links no longer work. Springer have pulled the free plug.

Graduate texts in mathematics

duplicates = multiple editions

A Classical Introduction to Modern Number Theory, Kenneth Ireland Michael Rosen

A Classical Introduction to Modern Number Theory, Kenneth Ireland Michael Rosen

kmokidd

/* display:flex; */
.flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
/* for Android 4.3- */
.flex > * {display: block;}
/* row reverse */
.flex.flex--reverse { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
/* column */
.flex--clo { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
/* column reverse*/
.flex--col.flex--reverse { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }

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

gaearon

// ------------
// counterStore.js
// ------------

import {
  INCREMENT_COUNTER,
  DECREMENT_COUNTER
} from '../constants/ActionTypes';

const initialState = { counter: 0 };