Skip to content

Instantly share code, notes, and snippets.

View sebmarkbage's full-sized avatar

Sebastian Markbåge sebmarkbage

View GitHub Profile
@sebmarkbage
sebmarkbage / ReactCanvasDrawing.js
Created July 25, 2014 19:14
Canvas Drawing Example
/** @jsx React.DOM */
var Graphic = React.createClass({
componentDidMount: function() {
var context = this.getDOMNode().getContext('2d');
this.paint(context);
},
componentDidUpdate: function() {
@sebmarkbage
sebmarkbage / SubscriptionIsHard.js
Last active October 11, 2020 23:46
Subscription Is Hard?
class SubscriptionDoneRight extends Component {
state = {
data: Store.read(props.id)
}
getDerivedStateFromProps(props, state) {
return {
data: Store.read(props.id),
};
}
@sebmarkbage
sebmarkbage / JSXSpreadAttributes.md
Last active August 13, 2020 15:18
JSX Spread Attributes

JSX Spread Attributes

If you know all the properties that you want to place on a component a head of time, it is easy to use JSX:

  var component = <Component foo={x} bar={y} />;

Mutating Props is Bad, mkay

@sebmarkbage
sebmarkbage / API.js
Last active August 11, 2020 04:03
Custom Stack Frames
type FrameScope = {
[key:string]: mixed
};
type StackFrame = {
name?: string,
fileName?: string,
lineNumber?: number,
columnNumber?: number,
scope?: FrameScope
};
@sebmarkbage
sebmarkbage / react_legacyfactory.md
Last active March 15, 2020 00:32
Use a factory or JSX

React Element Factories and JSX

You probably came here because your code is calling your component as a plain function call. This is now deprecated:

var MyComponent = require('MyComponent');

function render() {
 return MyComponent({ foo: 'bar' }); // WARNING
@sebmarkbage
sebmarkbage / shortout.js
Created May 5, 2017 05:21
Lodash Shortout
(function() {
/** Used to detect hot functions by number of calls within a span of milliseconds. */
var HOT_COUNT = 800,
HOT_SPAN = 16;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeNow = Date.now;
/**
@sebmarkbage
sebmarkbage / QuizAnswer.md
Last active September 30, 2018 17:42
Global Shared [Synchronous] State

setProps - depends on reading the last reconciled props from the current reconciled state of the app, at the time of the call. It also depends on an object that doesn't necessarily need to be there outside reconciliation. This is unlike setState, which is state that needs to be there. setState is queued up and merged at the time of reconciliation. Not at the time of the call. setState has a side-effect but is not a stateful nor mutative API.

isMounted - reads the current state of the tree, which may be stale if you're in a batch or reconciliation.

getDOMNode/findDOMNode - Reads the currently flushed node. This currently relies on the state of the system and that everything has flushed at this time. We could potentially do a forced render but that would still rely on the state of the system allowing us to synchronously being able to force a rerender of the system. Note: in 0.14, refs directly to DOM node will resolve to the DOM node. This allow you to get access to a node at the time of its choos

function shallowCompare(a, b) {
if (a === b) {
return true;
}
if (typeof a === 'object' && typeof b === 'object' && hiddenClass(a) === hiddenClass(b)) {
return !memcmp(a, b, sizeOfClass(a));
}
if (typeof a === 'function' && typeof b === 'function') {
if (sourceLocation(a) === sourceLocation(b)) {
return shallowCompare(getClosureContextOf(a), getClosureContextOf(b));
el.set('contentEditable', true)
.addEvents({
keydown: function(e){ if (e.key == 'enter') e.preventDefault(); },
keypress: function(e){ if (e.event.which == 0 && e.code == 13) e.preventDefault(); },
blur: function(){ var text = this.get('text'); this.set('text', text); }
});
@sebmarkbage
sebmarkbage / propertynames.txt
Last active August 23, 2017 23:25
Attribute/Property Name Smoke Test
about
aBoUt
accent-Height
accent-height
accentHeight
accept
accept-charset
accept-Charset
acceptCharset
accessKey