Pete Hunt petehunt
petehunt
/ gist:5687230
Last active
June 3, 2022 06:37
— forked from zpao/gist:5686416
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** @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); |
petehunt
/ gist:5687276
Last active
June 3, 2022 06:37
— forked from zpao/gist:5686416
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** @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() { |
petehunt
/ gist:5920306
Created
July 3, 2013 16:42
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 = {} |
petehunt
/ gist:5924025
Created
July 4, 2013 00:33
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
petehunt
/ gist:5962128
Created
July 9, 2013 23:07
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>wtf</title> | |
| </head> | |
| <body> | |
| yolo | |
| <script> | |
| window.addEventListener('mousemove', function() {}, false); | |
| </script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>wtf</title> | |
| </head> | |
| <body> | |
| yolo | |
| <script> | |
| window.addEventListener('mousemove', function() {}, false); | |
| </script> | |
| </body> |
petehunt
/ gist:6689857
Created
September 24, 2013 19:18
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** @jsx React.DOM */ | |
| var Hello = React.createClass({ | |
| mixins: [LinkedStateMixin], | |
| getInitialState: function() { | |
| return {name: 'phunt'}; | |
| }, | |
| render: function() { | |
| return ( | |
| <div> |
petehunt
/ gist:6789788
Created
October 2, 2013 06:23
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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> |
petehunt
/ gist:7618353
Created
November 23, 2013 18:42
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
OlderNewer