Skip to content

Instantly share code, notes, and snippets.

Avatar

Pete Hunt petehunt

  • Smyte
  • San Francisco, CA
View GitHub Profile
View gist:5687230
/** @jsx React.DOM */
var MyComponent = React.createClass({
getInitialState: function() {
// set up the initial state. used for "logical" initialization code
return {perMinute: '-', perDay: '-'};
},
componentDidMount: function() {
// fired only once, when the component is added to the DOM
// used for initialization code that has "side effects" i.e. i/o, jquery plugins, etc
var socket = io.connect(this.props.url);
View gist:5687276
/** @jsx React.DOM */
var MyRootComponent = React.createClass({
getInitialState: function() {
return {perMinute: '-', perDay: '-'};
},
componentDidMount: function() {
var socket = io.connect(this.props.url);
socket.on('business.clickout', this.setState.bind(this));
},
render: function() {
View gist:5920306
import os
import json
import subprocess
import sys
def relativize(path):
return os.path.relpath(os.path.abspath(path), os.path.abspath('.'))[:-3]
DEPS_MEMO = {}
View gist:5924025
var visitors = require('react-tools/vendor/fbtransform/visitors').transformVisitors;
var transform = require('react-tools/vendor/fbtransform/lib/transform').transform;
console.log(transform(visitors.react, '/** @jsx React.DOM */<p />').code);
View gist:5962128
function resetBrowserify(cb) {
window.require = null;
// TODO: somehow identify all browserified script tags
var scripts = Array.prototype.slice.call(document.querySelectorAll("script[src='build/browserified.js']"));
scripts.map(function(script) {
script.remove();
var newScript = document.createElement('script');
newScript.src = script.src;
document.head.appendChild(newScript);
});
@petehunt
petehunt / gist:6601468
Created Sep 17, 2013
omg memory allocations
View gist:6601468
<html>
<head>
<title>wtf</title>
</head>
<body>
yolo
<script>
window.addEventListener('mousemove', function() {}, false);
</script>
</body>
@petehunt
petehunt / gist:6601475
Created Sep 17, 2013
memory allocations oh no
View gist:6601475
<html>
<head>
<title>wtf</title>
</head>
<body>
yolo
<script>
window.addEventListener('mousemove', function() {}, false);
</script>
</body>
View gist:6689857
/** @jsx React.DOM */
var Hello = React.createClass({
mixins: [LinkedStateMixin],
getInitialState: function() {
return {name: 'phunt'};
},
render: function() {
return (
<div>
View gist:6789788
// component with layout
var Link = React.createClass({
mixins: [LayoutMixin]
render: function () {
<span>
{this.props.children[0]}
{this.transferPropsTo(<a>{this.props.children[1]}</a>)}
{this.props.children[2]}
</span>
View gist:7618353
First of all, I have an experimental branch with React that lets you use compile CSS animations just-in-time with our reconciliation system and use those instead of pure JS. So I recognize that they should be supported.
In my experience CSS transitions and animations work fine for things that will always animate fully and will never have the animation changed. A good example is a fade out when deleting a list item.
I've just found that in my own work most animations are tied with direct user touch manipulation (like animating out the left nav w/ parallax and opacity) which requires frame-by-frame responsiveness to touch events and inertia calculations based on the user's touch velocity. It's impossible to do this without doing frame-by-frame.
Your skepticism is definitely warranted and I complain to browser vendors whenever I see them about this. In my experience, modern (1 year old) phones can do this with minimal jank but there can still be issues. Assuming you're already avoiding reflows, here are the
You can’t perform that action at this time.