Skip to content

Instantly share code, notes, and snippets.

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.

@getify
getify / gist:7ae82fdc2e86bf66bcba
Last active March 27, 2022 19:50
List of ES6 books either out or in progress...
@justinobney
justinobney / Microsoft.PowerShell_profile.ps1
Created April 17, 2015 22:59
Microsoft.PowerShell_profile.ps1
Set-Alias subl 'C:\Program Files\Sublime Text 3\sublime_text.exe'
Set-Location E:\Projects
$Shell = $Host.UI.RawUI
$size = $Shell.WindowSize
$size.width=85
$size.height=150
$Shell.WindowSize = $size
$size = $Shell.BufferSize
$size.width=70
@chantastic
chantastic / on-jsx.markdown
Last active May 13, 2025 12:04
JSX, a year in

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

{
"parser": "babel-eslint",
"env": {
"browser": true,
"node": true,
"jasmine": true,
"phantomjs": true
},
"settings": {
"ecmascript": 6,
@gaearon
gaearon / combining.js
Created June 3, 2015 18:03
Combining Stateless Stores
// ------------
// counterStore.js
// ------------
import {
INCREMENT_COUNTER,
DECREMENT_COUNTER
} from '../constants/ActionTypes';
const initialState = { counter: 0 };
@mvidacovich
mvidacovich / SortHelper.cs
Created July 29, 2015 18:23
Queryable extension for sorting on strings
void Main()
{
var collection = Student; // all students
collection.OrderBy("FirstName",true).Skip(0).Take(50).Select (s => new {s.StudentId, s.FirstName}).Dump();
collection.OrderBy("FirstName",true).Skip(50).Take(50).Select (s => new {s.StudentId, s.FirstName}).Dump();
}
public static class SortHelper
{
public static IQueryable<T> OrderBy<T>(this IQueryable<T> queryable, string propertyName, bool asc)
const compose = (...fns) => (x) => fns.reduce( (v, f) => v.then ? v.then(f) : f(v), x)
@paulirish
paulirish / what-forces-layout.md
Last active July 10, 2025 08:36
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
// npm i mkdirp node-fetch minimist
var path = require('path');
var fs = require('fs');
var fetch = require('node-fetch');
var mkdirp = require('mkdirp');
var argDefaults = {
dir:'test',
template: 'module'
}