Skip to content

Instantly share code, notes, and snippets.

View bjrmatos's full-sized avatar

BJR Matos bjrmatos

140 followers · 38 following
View GitHub Profile
@zpao
zpao / 2015-03-20.md
Last active June 10, 2016 10:44

React-Core Meeting Notes 2015-03-20

Note: This is the first time we're sharing meeting notes publicly. The primary reason we haven't shared these is because we often mix public discussions with matters that are Facebook specific and should not be public. We're really trying to be more open about our development process and what's happening inside the project so moving forward, we'll be sharing meeting notes. While most of us do work at Facebook, we're committed to this being an open project - for now we'll filter out the private notes from the public notes. Hopefully we can make it possible for these meetings to be open to any who wish to attend.

Attendees:

  • @zpao
  • @sebmarkbage
  • @spicyj
  • @jeffmo
@ryanflorence
ryanflorence / gist:a93fd88d93cbf42d4d24
Last active October 6, 2016 21:44
var pureRender = (Component) => {
Object.assign(Component.prototype, {
shouldComponentUpdate (nextProps, nextState) {
return !shallowEqual(this.props, nextProps) ||
!shallowEqual(this.state, nextState);
}
});
};
module.exports = pureRender;
@thomasboyt
thomasboyt / loading.md
Created October 22, 2014 15:09
Flux loading state pattern

I've been struggling to come up with a good pattern for handling loading state in Flux (specifically using Fluxxor, though I think this is an issue for any implementation).

When I say "loading state," what I mean is state in a store that tracks:

  • Whether the data handled by the store was loaded
  • Whether the store is currently attempting to load data
  • Whether the data loaded successfully or errored
  • The error message, if it errored

Here's my first (very simple) pass at this, a store mixin called LoadingStoreMixin.js:

@jlongster
jlongster / forms-with-react.js
Last active May 8, 2017 14:15
higher-order form components w/react
// Simple wrapper to use bootstrap's grid system to position elements side-by-side
var VerticalFieldsElement = React.createClass({
render: function() {
return dom.div(
{ className: 'clearfix' },
React.Children.map(this.props.children, function(child) {
if(!child) {
return child;
}
@jorupp
jorupp / gist:2af4d8583bd592b8331f
Created March 4, 2015 15:43
Lock all media queries in their current state
function process(rule) {
if(rule.cssRules) {
for(var i=rule.cssRules.length-1; i>=0; i--) {
process(rule.cssRules[i]);
}
}
if(rule.type == CSSRule.MEDIA_RULE) {
if(window.matchMedia(rule.media.mediaText).matches) {
rule.media.mediaText = "all";
} else {
@aarongustafson
aarongustafson / getActiveMQ.js
Last active June 27, 2017 03:59
A simple way to track media query use in your JavaScript
// Get the active Media Query as defined in the CSS
// Use the following format:
// #getActiveMQ-watcher { font-family: "default"; }
// @media only screen and (min-width:20em){ #getActiveMQ-watcher { font-family: "small"; } }
// etc.
window.getActiveMQ = function() {
// Build the watcher
var $watcher = document.createElement('div'),
// alias getComputedStyle
computed = window.getComputedStyle,
@jimfb
jimfb / gist:fb2a04fe3fa4637d7d62
Created December 30, 2015 05:37
Special React Props

Most props on a JSX element are passed on to the component, however, there are two special props (ref and key) which are used by React, and are thus not forwarded to the component.

For instance, attempting to access this.props.key from a component (eg. the render function) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: <ListItemWrapper key={result.id} id={result.id} />) While this may seem redundant, it's important to separate app logic from reconciling hints.

@robinduckett
robinduckett / callbackHell.js
Last active September 28, 2017 16:08
// Callback Hell. You and I both know it's hell.
// Here's a secret: Escape Callback Hell...
// ... by using classes, you fucking jackass.
// This is shit:
fs.readdir('tmp', function(err, list) {
async.map(list, function(item, cb) {
cb(null, item.toUpperCase());
}, function(err, results) {
@jlongster
jlongster / smart-wrapper.js
Last active February 8, 2018 16:14
// 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;
}
@petehunt
petehunt / React sortable
Created December 9, 2013 22:30
Here's an example of React + jQuery UI sortable. The key thing to note is that we have the render() method do absolutely nothing and use componentDidUpdate() + React.renderComponent() to proxy updates through to the children. This lets us manage the DOM manually but still be able to use all the React goodies you know and love.
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://fb.me/react-0.5.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
</head>