Skip to content

Instantly share code, notes, and snippets.

:bowtie:
testing

Piotr Kapera rn0

:bowtie:
testing
Block or report user

Report or block rn0

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@wuzzeb
wuzzeb / typed-redux.ts
Created Oct 6, 2018
Type-safe react and redux actions
View typed-redux.ts
import * as React from "react";
import * as redux from "redux";
import * as reactRedux from "react-redux";
// a variant of middleware which tracks input and output types of the actions
export type Dispatch<A> = (a: A) => void;
export type Middleware<A1, A2> = (dispatch: Dispatch<A2>) => (a: A1) => void;
export function composeMiddleware<A1, A2, A3>(m1: Middleware<A1, A2>, m2: Middleware<A2, A3>): Middleware<A1, A3> {
return d => m1(m2(d));
}
@bvaughn
bvaughn / index.md
Last active Aug 19, 2019
How to use profiling in production mode for react-dom
View index.md
@gaearon
gaearon / prepack-gentle-intro-1.md
Last active Jul 27, 2019
A Gentle Introduction to Prepack, Part 1
View prepack-gentle-intro-1.md

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

  • Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.
@bvaughn
bvaughn / create-subscriber-component-poc.js
Last active Sep 30, 2018
create-subscriber-component proof of concept
View create-subscriber-component-poc.js
type SubscribableConfig = {
// Maps property names of subscribable data sources (e.g. 'someObservable'),
// To state names for subscribed values (e.g. 'someValue').
subscribablePropertiesMap: {[subscribableProperty: string]: string},
// Synchronously get data for a given subscribable property.
// It is okay to return null if the subscribable does not support sync value reading.
getDataFor: (subscribable: any, propertyName: string) => any,
// Subscribe to a given subscribable.
@bvaughn
bvaughn / updating-subscriptions-when-props-change-example.js
Last active Aug 10, 2019
Advanced example for manually updating subscriptions in response to props changes in an async-safe way
View updating-subscriptions-when-props-change-example.js
// This is an advanced example! It is not typically required for application code.
// If you are using a library like Redux or MobX, use the container component provided by that library.
// If you are authoring such a library, use the technique shown below.
// This example shows how to safely update subscriptions in response to props changes.
// In this case, it is important to wait until `componentDidUpdate` before removing a subscription.
// In the event that a render is cancelled before being committed, this will prevent us from unsubscribing prematurely.
// We also need to be careful about how we handle events that are dispatched in between
// `getDerivedStateFromProps` and `componentDidUpdate` so that we don't put stale values into the `state`.
@gcanti
gcanti / type-safe-ops.ts
Created Sep 21, 2017
Type-safe get, set, remove, pick, insert with TypeScript
View type-safe-ops.ts
import { ObjectOmit } from 'typelevel-ts'
const get = <O, K extends keyof O>(k: K, o: O): O[K] => o[k]
const set = <O, K extends keyof O>(k: K, v: O[K], o: O): O => Object.assign({}, o, { [k as any]: v })
const remove = <O, K extends keyof O>(k: K, o: O): ObjectOmit<O, K> => {
const copy: any = Object.assign({}, o)
delete copy[k]
return copy
@bendc
bendc / raf-boilerplate.js
Created Aug 28, 2017
rAF tutorial: boilerplate code
View raf-boilerplate.js
"use strict";
// animation utils
// ===============
const trackTime = id => {
const [entry] = performance.getEntriesByName(id);
if (!entry) {
performance.mark(id);
@rolinger
rolinger / gist:d6500d65128db95f004041c2b636753a
Last active Aug 15, 2019
PHP => FCM Push notification tutorial for Android and iOS
View gist:d6500d65128db95f004041c2b636753a
Below is a full tutorial on how to setup and use Googles Firebase push notification API for both Android and iOS. It is based on this
earlier implementation of Googles GCM method: https://gist.github.com/prime31/5675017 - FCM is the new method and GCM will eventually be
retired.
## THE BELOW METHOD IS THE NEWER FCM METHOD:
Register your app in the FCM Console: https://console.firebase.google.com (add project)
1. Click on the newly added project, in the upper left menu is the "Overview" and Gear Settings.
2. Click on the GEAR settings icon, and then on "Project Settings"
3. In the main screen, click on "Cloud Messaging"
View deferComponentRender.js
import hoistStatics from 'hoist-non-react-statics';
import React from 'react';
/**
* Allows two animation frames to complete to allow other components to update
* and re-render before mounting and rendering an expensive `WrappedComponent`.
*/
export default function deferComponentRender(WrappedComponent) {
class DeferredRenderWrapper extends React.Component {
constructor(props, context) {
@iammerrick
iammerrick / PinchZoomPan.js
Last active Aug 15, 2019
React Pinch + Zoom + Pan
View PinchZoomPan.js
import React from 'react';
const MIN_SCALE = 1;
const MAX_SCALE = 4;
const SETTLE_RANGE = 0.001;
const ADDITIONAL_LIMIT = 0.2;
const DOUBLE_TAP_THRESHOLD = 300;
const ANIMATION_SPEED = 0.04;
const RESET_ANIMATION_SPEED = 0.08;
const INITIAL_X = 0;
You can’t perform that action at this time.