Skip to content

Instantly share code, notes, and snippets.

@danielmcgrath
danielmcgrath / RCTButtonManager.h
Last active June 11, 2016 18:41
Somewhat outdated example of creating an iOS React Native bridge for the Button SDK (https://www.usebutton.com/developers).
#import "RCTBridgeModule.h"
@interface ButtonManager : NSObject <RCTBridgeModule>
@end

Pattern Matching

This is a strawman proposal for adding pattern matching to ECMAScript. Pattern matching is useful for matching a value to some structure in a similar way to destructuring. The primary difference between destructuring and pattern matching are the use cases involved - destructuring is useful for binding pieces out of larger structures whereas pattern matching is useful for mapping a value's structure to data or a set of behaviors. In practice this means that destructuring tends to allow many shapes of data and will do its best to bind something out of it, whereas pattern matching will tend to be more conservative.

Additionally, the power of pattern matching is increased substantially when values are allowed to participate in the pattern matching semantics as a matcher as well as a matchee. This proposal includes the notion of a pattern matching protocol - a symbol method that can be implemented by objects that enables developers to use those values in pattern matching. A common scenario w

@OlegIlyenko
OlegIlyenko / Event-stream based GraphQL subscriptions.md
Last active July 4, 2024 07:31
Event-stream based GraphQL subscriptions for real-time updates

In this gist I would like to describe an idea for GraphQL subscriptions. It was inspired by conversations about subscriptions in the GraphQL slack channel and different GH issues, like #89 and #411.

Conceptual Model

At the moment GraphQL allows 2 types of queries:

  • query
  • mutation

Reference implementation also adds the third type: subscription. It does not have any semantics yet, so here I would like to propose one possible semantics interpretation and the reasoning behind it.

@paulirish
paulirish / what-forces-layout.md
Last active July 25, 2024 07:49
What forces layout/reflow. The comprehensive list.

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
@maisano
maisano / RouteTransition.jsx
Last active September 15, 2023 07:29
Using react-motion with react-router
import React, { PropTypes } from 'react';
import { TransitionMotion, spring } from 'react-motion';
/**
* One example of using react-motion (0.3.0) within react-router (v1.0.0-rc3).
*
* Usage is simple, and really only requires two things–both of which are
* injected into your app via react-router–pathname and children:
*
* <RouteTransition pathname={this.props.pathname}>
@sebmarkbage
sebmarkbage / Enhance.js
Last active January 31, 2024 18:33
Higher-order Components
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {

2015-01-29 Unofficial Relay FAQ

Compilation of questions and answers about Relay from React.js Conf.

Disclaimer: I work on Relay at Facebook. Relay is a complex system on which we're iterating aggressively. I'll do my best here to provide accurate, useful answers, but the details are subject to change. I may also be wrong. Feedback and additional questions are welcome.

What is Relay?

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

@cvrebert
cvrebert / survey.md
Last active May 8, 2024 16:13
Click and focus behavior across browsers & OSes

Test apparatus: http://jsfiddle.net/hRub4/

(Windows = Windows 8.1 desktop)

  • Windows Chrome 39
    • Button focuses on click and via keyboard tabbing
    • Anchor focuses on click and via keyboard tabbing
  • Windows Firefox 30.0
    • Button focuses on click and via keyboard tabbing
    • Anchor focuses on click and via keyboard tabbing
  • Windows Internet Explorer 11
/** @jsx React.DOM */
var React = require('react/addons');
// from https://github.com/Polymer/paper-ripple/blob/master/paper-ripple.html
var waveMaxRadius = 150;
//
// INK EQUATIONS
//
@staltz
staltz / introrx.md
Last active July 26, 2024 04:24
The introduction to Reactive Programming you've been missing