Skip to content

Instantly share code, notes, and snippets.

View pstoica's full-sized avatar
🍉

Patrick Stoica pstoica

🍉
51 followers · 65 following
View GitHub Profile
@njvack
njvack / catmullrom2bezier.js
Created October 10, 2013 21:01
A routine to compute the cubic Bézier spline parameters to fit a curve to points, using the Catmull-Rom algorithm.
//************************************************
//
// Catmull-Rom Spline to Bezier Spline Converter
//
//
// This is an experimental extension of the SVG 'path' element syntax to
// allow Catmull-Rom splines, which differs from Bézier curves in that all
// defined points on a Catmull-Rom spline are on the path itself.
//
// This is intended to serve as a proof-of-concept toward inclusion of a
@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>
@chenglou
chenglou / gist:40b75d820123a9ed53d8
Last active March 13, 2024 12:14
Thoughts on Animation

Interesting part (unmounting & API) is at the end if you're not interested in the rest =).

Stress Tests

This animation proposal is just an attempt. In case it doesn't work out, I've gathered a few examples that can test the power of a future animation system.

  1. Parent is an infinitely spinning ball, and has a child ball that is also spinning. Clicking on the parent causes child to reverse spinning direction. This tests the ability of the animation system to compose animation, not in the sense of applying multiple interpolations to one or more variables passed onto the child (this should be trivial), but in the sense that the parent's constantly updating at the same time as the child, and has to ensure that it passes the animation commands correctly to it. This also tests that we can still intercept these animations (the clicking) and immediately change their configuration instead of queueing them.

  2. Typing letters and let them fly in concurrently. This tests concurrency, coordination of an array of ch

@tsiege
tsiege / The Technical Interview Cheat Sheet.md
Last active June 7, 2024 07:28
This is my technical interview cheat sheet. Feel free to fork it or do whatever you want with it. PLEASE let me know if there are any errors or if anything crucial is missing. I will add more links soon.

ANNOUNCEMENT

I have moved this over to the Tech Interview Cheat Sheet Repo and has been expanded and even has code challenges you can run and practice against!






\

@staltz
staltz / introrx.md
Last active June 7, 2024 23:39
The introduction to Reactive Programming you've been missing
@gaearon
gaearon / observeStore.js
Last active May 19, 2022 10:55
Wait for some condition to become true on a Flux store, useful for react-router async transition hooks
// Usage example:
//
// willTransitionTo(transition, params, query, callback) {
// observeStore(DraftStore, s => s.isLoaded()).then(() => {
// if (DraftStore.isMissingTitle()) {
// transition.redirect('composeDraft', params);
// }
// }).finally(callback);
// }
@sirlancelot
sirlancelot / AddCustomCodePlugin.js
Last active August 29, 2015 14:09
module.exports = AddCustomCodePlugin
function AddCustomCodePlugin() {}
AddCustomCodePlugin.prototype.apply = function(compiler) {
var self = this
compiler.plugin("compilation", function(compilation) {
compilation.mainTemplate.plugin("local-vars", self.localVars.bind(self)))
})
}
@petehunt
petehunt / gist:bd5fa62610f80b6ec087
Created December 28, 2014 08:11
function makeStyle(defaults, tagName) {
tagName = tagName || 'div';
var Style = React.createClass({
getDefaultProps: function() {
return assign({}, defaults);
},
render: function() {
var style = assign({}, this.props);
delete style.children;
@ryanflorence
ryanflorence / folder-structure.md
Last active May 17, 2024 02:07

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.

@nkbt
nkbt / .eslintrc.js
Last active May 11, 2024 13:03
Strict ESLint config for React, ES6 (based on Airbnb Code style)
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"plugins": ["react"],
"ecmaFeatures": {