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?

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>

renatorib

Using Operator Mono with Fira Code ligatures in Atom.

1. Open your Atom's Stylesheet
   

2. Put this css

atom-text-editor {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

Pawka

import argparse
import datetime
import json
import requests

if __name__ == "__main__":
    parser = argparse.ArgumentParser()
    parser.add_argument("--token", required=True,
            help="Kindervibe auth token")
    parser.add_argument("--pk", required=True,

ddunbar

New Build System Tricks

Command Line

alias xcbuild=$(xcode-select -p)/../SharedFrameworks/XCBuild.framework/Versions/A/Support/xcbuild
# THIS DOESNT WORK YET: xcbuild openIDEConsole  # … then switch to Xcode ➡️
xcbuild showSpecs
xcbuild build <foo.pif> [—target <target>]

cereallarceny

// Ignore those pesky styles
require('ignore-styles');

// Set up babel to do its thing... env for the latest toys, react-app for CRA
require('babel-register')({
  ignore: /\/(build|node_modules)\//,
  presets: ['env', 'react-app']
});

// Now that the nonsense is over... load up the server entry point

tomchentw

The flow

husky (setup git commit hooks) -> lint-stages (run specific commands by file type) -> imagemin (minify files)

git add -A
git commit # It will compress your images into git repo now

Since the images is now fully compressed, no extra steps is required by webpack/browserify……whatever.

kitze

import React from 'react';

const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children;

const Header = ({shouldLinkToHome}) => (
  <div>
    <ConditionalWrap
      condition={shouldLinkToHome}
      wrap={children => <a href="/">{children}</a>}
    >

gcanti

// Adapted from http://lukajcb.github.io/blog/functional/2018/01/03/optimizing-tagless-final.html

import { Applicative, Applicative1 } from 'fp-ts/lib/Applicative'
import { Apply, Apply1, Apply2C, applySecond, liftA4 } from 'fp-ts/lib/Apply'
import * as array from 'fp-ts/lib/Array'
import * as const_ from 'fp-ts/lib/Const'
import { HKT, Type, Type2, URIS, URIS2 } from 'fp-ts/lib/HKT'
import { IO, io, URI as IOURI } from 'fp-ts/lib/IO'
import { Option, some } from 'fp-ts/lib/Option'
import { getProductSemigroup, Semigroup } from 'fp-ts/lib/Semigroup'

JoelBesada

const JSZip = require('jszip')
const { parseBuffer } = require('bplist-parser')
const { isObject, each, find } = require('lodash')

const parseArchivedValue = value => {
  return parseBuffer(new Buffer(value, 'base64'))
}

const parseArchivedString = obj => {
  const { $objects } = parseArchivedValue(