Skip to content

Instantly share code, notes, and snippets.

View ferdinandsalis's full-sized avatar
🎯
Focusing

Ferdinand Salis ferdinandsalis

🎯
Focusing
View GitHub Profile
@iammerrick
iammerrick / PinchZoomPan.js
Last active April 22, 2024 02:54
React Pinch + Zoom + Pan
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;
@deanrad
deanrad / redux-distilled.md
Last active December 27, 2020 18:31
TL;DR Better Redux involves using maps of action types to reducers, not switch/case statements

Distilling the Essence of Reducers

Redux has brought the notion of reducer back into the awareness of many developers for whom they are a novel concept. In fact they are quite simple, and used all the time in such things as SUM aggregations in databases, where they compute a single value from many.

It's great that Redux has made reducers known to a broader audience, though they are relatively ancient concepts in programming, in fact. But the particular way Redux illustrates a reducer in its documentaion is, in my opinion, with a coding style that is harder to extend and read than it should be. Let's distill reducers down to their essensce, and build up Redux reducers in a way that lowers complexity, and helps separate Redux idioms from your business logic.

The simplest reducer

A reducer is a pure function that accepts more arguments than it returns. That is to say - one whose "arity" is greater than 1. It 'reduces' the two things you pass it down to a single value. Here are two reducers, in a map

@insin
insin / auth.js
Last active April 9, 2018 14:09
Redux auth duck (where duck = https://github.com/erikras/ducks-modular-redux)
var {handleResponse} = require('.utils')
var {setErrorMessages} = require('./messages')
var CHECK_TOKEN = 'auth/CHECK_TOKEN'
var CHECK_TOKEN_FAILURE = 'auth/CHECK_TOKEN_FAILURE'
var CHECK_TOKEN_SUCCESS = 'auth/CHECK_TOKEN_SUCCESS'
var LOGIN = 'auth/LOGIN'
var LOGIN_FAILURE = 'auth/LOGIN_FAILURE'
@wmertens
wmertens / full stack redux.md
Last active February 8, 2022 22:46
making an awesome server with the redux model, Work In Progress

Thought experiment: Redux-like stateless server

Description

We describe a model for client-server processing where the Redux model is used to minimize stateful code. This should allow live-reloading server code, and make it possible to share code (e.g. optimistic updating) between client and server.

Dramatis Personae

  • Assume a server consisting of multiple worker processes that do not share memory and may be running on multiple hosts.
    • Workers have middleware, root reducers and an app state object
  • Workers can be dynamically added and removed
@mattiamanzati
mattiamanzati / handling auth in redux
Created August 25, 2015 16:27
Auth handling in redux.
Before reading:
This is a soft auth check. Auth check should always be done server side, if not, your rest api are not checking correctly for auth.
1. Auth is in the store.
You need to setup constants for AUTH_SET_TOKEN and AUTH_LOGOUT,
then create the action creators authSetToken(token) and authLogout() action creators.
Then setup a reducer that when AUTH_SET_TOKEN is dispatched, sets the internal state to {token: token},
and when logout is dispatched, clears it.
Now setup a utility function isLoggedIn(state) function, that only checks in state.auth.token exists, this is a soft check.
@tlrobinson
tlrobinson / redux-devtools-separate-window.js
Last active August 20, 2019 23:54
Put the awesome redux-devtools in it's own window so it doesn't obscure or be obscured by your application
// give it a name so it reuses the same window
var win = window.open(null, "redux-devtools", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no");
// reload in case it's reusing the same window with the old content
win.location.reload();
// wait a little bit for it to reload, then render
setTimeout(function() {
React.render(
<DebugPanel top right bottom left >
@gaearon
gaearon / ReduxMicroBoilerplate.js
Last active March 26, 2020 00:35
Super minimal React + Redux app
import React, { Component } from 'react';
import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux';
import { provide, connect } from 'react-redux';
import thunk from 'redux-thunk';
const AVAILABLE_SUBREDDITS = ['apple', 'pics'];
// ------------
// reducers
// ------------
@jquense
jquense / app.js
Last active August 29, 2015 14:26
implementation of redux's combineReducers adding flux waitFor()
import { createStore } from 'redux';
import combineReducers from './combineReducers';
let Store = createStore(combineReducers({
reducerA(state = 0, action, waitFor){
if ( action.type === 'TEST'){
waitState = waitFor(waitFor.reducerB)
if ( waitState.reducerB === 5 )
state = 10
@olivierlacan
olivierlacan / migrate_postgresql_database.md
Last active March 24, 2022 20:30
How to migrate a Homebrew-installed PostgreSQL database to a new major version (9.3 to 9.4) on OS X. See upgraded version of this guide: http://olivierlacan.com/posts/migrating-homebrew-postgres-to-a-new-version/

This guide assumes that you recently run brew upgrade postgresql and discovered to your dismay that you accidentally bumped from one major version to another: say 9.3.x to 9.4.x. Yes, that is a major version bump in PG land.

First let's check something.

brew info postgresql

The top of what gets printed as a result is the most important:

@jquense
jquense / 0. intro.md
Last active September 24, 2022 05:10
Alternative ways to define react Components

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&amp;%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is