ClickerMonkey

// when T is any|unknown, Y is returned, otherwise N
type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N;
  
// when T is never, Y is returned, otherwise N
type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N;

// when T is a tuple, Y is returned, otherwise N
// valid tuples = [string], [string, boolean], 
// invalid tuples = [], string[], (string | number)[]

kamleshchandnani

Talk link

This is a CFP for ReactiveConf open call for lightning talks. If you'd like to see this talk become a reality, please ⭐️ star this gist. #ReactiveConf

lencioni

// Usage:
// 
// function loader() {
//   return new Promise((resolve) => {
//     if (process.env.LAZY_LOAD) {
//       require.ensure([], (require) => {
//         resolve(require('./SomeComponent').default);
//       });
//     }
//   });

insin

var Col = require('react-bootstrap/lib/Col')
var PageHeader = require('react-bootstrap/lib/PageHeader')
var React = require('react')
var Row = require('react-bootstrap/lib/Row')
var {connect} = require('react-redux')
var {reduxForm} = require('redux-form')

var DateInput = require('./DateInput')
var FormField = require('./FormField')
var LoadingButton = require('./LoadingButton')

paulirish

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

jlongster

// Have some complicated non-React widgets that manipulate DOM?
// Do they manage a list of DOM elements? Here's how to wrap it
// into a React component so you can "constantly rerender" it.

// A dumb non-react widget that manually manage some DOM node that
// represent a list of items
function NonReactWidget(node) {
  this.node = node;
}

caseyamcl

HOLY GAWD PEOPLE..

• Don't write all your new code on the production machine!
• Use a VCS!
• Document your functions using DocBlocks!
• Document your API (at least LIST the endpoints)... I have to decipher the meaning from your code, and that isn't really clear
• Use a single identifier as the primary ID in the API for a resource (ie don't return a list of group ids for listing groups and then expect the group name as the identifying parameter for modifying a group)
• Use a consistent model for representing the same data model in different endpoints!
• Don't concatenate fields in the API results unless there is a good reason to (e.g first name and last name)
• Don't expose the underlying database logic. This is leaky abstraction, especially when you do it inconsistently!!

ryanflorence

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.

bobbygrace

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

---

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

kerryrodden

license: apache-2.0