Skip to content

Instantly share code, notes, and snippets.

View App.js
import React from "react";
import useMutableReducer from "./useMutableReducer";
const reducer = (draft, action, state) => {
switch (action) {
case "increment":
draft.count++;
break;
case "decrement":
draft.count--;
View gist:fd41b7ef683ce9fcd333a79ae644a8d2
/*
Copyright 2011 Martin Hawksey
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
@nuc
nuc / upload-sourcemap.js
Last active Mar 27, 2019
Upload sourcemaps to Sentry
View upload-sourcemap.js
/* eslint-disable no-sync */
const request = require('superagent')
const path = require('path')
const fs = require('fs')
const ACCOUNT = 'account'
const PROJECT = 'project-name'
const TOKEN = 'your-token'
const ASSET_URL = 'https://example.com/assets'
const SOURCEMAPS_PATH = './temp'
View npm_completion_with_install
#!/usr/bin/env bash #adding this to force silly gist highlighting. REMOVE THIS
# This is a modified version of the script generated by https://docs.npmjs.com/cli/completion to include `npm install` autocompletion.
# Basically we added `if` blocks to check for `install` subcommand.
###-begin-npm-completion-###
#
# npm command completion script
#
# Installation: npm completion >> ~/.bashrc (or ~/.zshrc)
@armw4
armw4 / redux-is-smarter-than-you-think.md
Last active Dec 4, 2020
Optimizing your react components via redux....shouldComponentUpdate for free and more...
View redux-is-smarter-than-you-think.md

The Beginning

Yes...it's true...redux is smart....smarter than you even know. It really does want to help you. It strives to be sane and easy to reason about. With that being said, redux gives you optimizations for free that you probably were completely unaware of.

connect()

connect is the most important thing in redux land IMO. This is where you tie the knot between redux and your underlying components. You usually take state and propogate it down your component hiearchy in the form of props. From there, presentational

View lol.js
// paste in your console
speechSynthesis.onvoiceschanged = function() {
var msg = new SpeechSynthesisUtterance();
msg.voice = this.getVoices().filter(v => v.name == 'Cellos')[0];
msg.text = Object.keys(window).join(' ');
this.speak(msg);
};
View README.md

The issue:

..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)

touch-action CSS property can be used to disable this behaviour.

touch-action: manipulation The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

View apiMiddleware.js
import superagent from 'superagent';
import merge from 'lodash/merge';
import { camelizeKeys, decamelizeKeys } from 'humps';
import config from 'config';
const CALL_API = Symbol.for('Call API');
/**
* Prepare headers for each request and include the token for authentication.
* @param {Boolean} token Authentication token
@paulirish
paulirish / what-forces-layout.md
Last active May 10, 2021
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
@gaearon
gaearon / ReduxMicroBoilerplate.js
Last active Mar 26, 2020
Super minimal React + Redux app
View ReduxMicroBoilerplate.js
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
// ------------