Skip to content

Instantly share code, notes, and snippets.

View parties's full-sized avatar

Eric Ogden parties

View GitHub Profile
@aheitzmann
aheitzmann / my-connected-component.tsx
Last active September 30, 2021 06:14
A best practice pattern for defining and using typescript types for a redux-react connected component
import * as React from 'react'
import * as Redux from 'redux'
import { MyReduxState } from './my-root-reducer.ts'
export interface OwnProps {
propFromParent: number
}
interface StateProps {
@jasonblanchard
jasonblanchard / README.md
Last active July 1, 2022 00:19 — forked from int128/README.md
Watching build mode on Create React App

Create React App does not provide watching build mode oficially (#1070).

This script provides watching build mode for an external tool such as Chrome Extensions or Firebase app.

How to Use

Create a React app.

Put the script into scripts/watch.js.

@int128
int128 / README.md
Last active January 21, 2024 14:52
Watching build mode on Create React App

Create React App does not provide watching build mode oficially (#1070).

This script provides watching build mode for an external tool such as Chrome Extensions or Firebase app.

How to Use

Create a React app.

Put the script into scripts/watch.js.

@cpsubrian
cpsubrian / README.md
Last active March 27, 2023 13:34
React decorators for redux/react-router/immutable 'smart' components.

This is my typical decorator stack for a 'smart component' used as the component for react-router route. Note some code is missing here but this should give you the idea.

Example usage:

StateDetailsScene.js

import React from 'react'
import _ from 'lodash'
import route from 'core/decorators/route'
@markerikson
markerikson / appEntryPoint.js
Last active August 1, 2022 07:41
Webpack React/Redux Hot Module Reloading (HMR) example
import React from "react";
import ReactDOM from "react-dom";
import configureStore from "./store/configureStore";
const store = configureStore();
const rootEl = document.getElementById("root");
@paulirish
paulirish / what-forces-layout.md
Last active April 30, 2024 17:56
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
@yoavniran
yoavniran / ultimate-ut-cheat-sheet.md
Last active April 13, 2024 16:19
The Ultimate Unit Testing Cheat-sheet For Mocha, Chai, Sinon, and Jest

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

@tdegrunt
tdegrunt / Razer Synapse Yosemite.md
Created September 19, 2014 09:21
How to fix Razer Synapse in Mac OSX 10.0 Yosemite

How to fix Razer Synapse in Mac OSX 10.0 Yosemite

Start Terminal.app and type:

sudo nvram boot-args="kext-dev-mode=1"

Verify that command works by typing:

sudo nvram -p | grep -i boot-args
@robatron
robatron / javascript-log-wrapping.md
Last active February 6, 2024 06:49
Wrapping `console.log` (et al.) in your own function to modify logging behavior.

JavaScript Log Wrapping

Wrapping console.log (et al.) in your own function to modify logging behavior.

Why?

You may want a simple way to: