Skip to content

Instantly share code, notes, and snippets.

View rn0's full-sized avatar
:bowtie:
testing

Piotr Kapera rn0

:bowtie:
testing
View GitHub Profile
@terashim
terashim / dc-down-all.sh
Last active July 23, 2023 19:40
List or down all Docker Compose projects running on your machine
#!/usr/bin/env bash
#
# Down all running Docker Compose projects
#
docker ps --filter "label=com.docker.compose.project" -q |\
xargs docker inspect |\
jq -r 'map( .Config.Labels ) |
map({"
project": ."com.docker.compose.project",
@wuzzeb
wuzzeb / typed-redux.ts
Last active September 10, 2020 03:26
Type-safe react and redux actions
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 April 19, 2024 04:34
How to use profiling in production mode for react-dom

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

@gaearon
gaearon / prepack-gentle-intro-1.md
Last active February 13, 2024 14:30
A Gentle Introduction to Prepack, Part 1

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 September 30, 2018 09:55
create-subscriber-component proof of concept
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 March 27, 2022 09:29
Advanced example for manually updating subscriptions in response to props changes in an async-safe way
// 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 September 21, 2017 15:23
Type-safe get, set, remove, pick, insert with TypeScript
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 August 28, 2017 13:52
rAF tutorial: boilerplate code
"use strict";
// animation utils
// ===============
const trackTime = id => {
const [entry] = performance.getEntriesByName(id);
if (!entry) {
performance.mark(id);
@rolinger
rolinger / gist:d6500d65128db95f004041c2b636753a
Last active April 2, 2024 03:54
PHP => FCM Push notification tutorial for Android and iOS
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"
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) {