Skip to content

Instantly share code, notes, and snippets.

@gaearon
gaearon / FixSoundCloudArtworkUrl.js
Created November 7, 2014 17:00
An express app that redirects to largest SoundCloud artwork URL that doesn't 404.
'use strict';
var express = require('express'),
app = express();
require('./config/development')(app, express);
require('./config/production')(app, express);
var redis = require('redis'),
request = require('request'),
@gaearon
gaearon / webpackdevserver_pushstate.js
Created December 14, 2014 17:49
WebpackDevServer + pushState hook
server = new WebpackDevServer(webpack(config), {
contentBase: contentBase,
publicPath: config.output.publicPath,
hot: true
});
server.listen(port, '0.0.0.0');
server.app.use(function pushStateHook(req, res, next) {
var ext = path.extname(req.url);
'use strict';
/**
* Adapted from https://github.com/Khan/react-components/blob/master/js/timeout-transition-group.jsx
* with the following additions:
*
* - Use BEM-ish modifiers (--enter, --enter--active, --leave, --leave--active)
* - Work better with rAF batching strategy (see https://github.com/facebook/react/issues/2292)
*
* The CSSTransitionGroup component uses the 'transitionend' event, which
'use strict';
var AppDispatcher = require('../dispatcher/AppDispatcher'),
ActionTypes = require('../constants/ActionTypes'),
ScreenSizes = require('../constants/ScreenSizes'),
{ createStore } = require('../utils/StoreUtils');
function getScreenSize() {
if (window.matchMedia('(min-width: 100em)').matches) {
return ScreenSizes.EXTRA_LARGE;
'use strict';
var ScreenSizeStore = require('../stores/ScreenSizeStore');
var ScreenSizeMixin = {
getInitialState() {
return this.getScreenSizeState();
},
getScreenSize() {
@gaearon
gaearon / getSupportedTransformProperty.js
Created January 27, 2015 19:45
getSupportedTransformProperty.js
'use strict';
var TRANSFORM_VARIANTS = {
'WebkitTransform': '-webkit-transform',
'Transform': 'transform'
};
function test() {
var testEl = document.createElement('div'),
style = testEl.style;
@gaearon
gaearon / Scrolljack.jsx
Last active April 1, 2020 17:11
Scrolljack.jsx
'use strict';
var React = require('react'),
PureRenderMixin = require('../mixins/PureRenderMixin'),
getSupportedTransformProperty = require('../utils/getSupportedTransformProperty'),
{ PropTypes, Children } = React;
const transformProperty = getSupportedTransformProperty();
const styles = {
root: {
@gaearon
gaearon / PaginatedList.js
Created March 9, 2015 13:43
PaginatedList with invalidation
'use strict';
var { union, find, without, clone } = require('underscore'),
invariant = require('react/lib/invariant');
class PaginatedList {
constructor(ids) {
this._ids = ids || [];
this._pageCount = 0;
this._nextPageUrl = null;
let BlogPostPage = React.createClass({
render() {
<div>
<SiteNavigation />
<MainContentArea>
{connectToStores({
posts: store => ({
post: store.getPost(this.props.postId),
nextPost: store.getPostAfter(this.props.postId)
})
export default {
getInitialState() {
const data = {};
this.subscribe(this.props, this.context, (key, value) => {
data[key] = value;
});
this.unsubscribe();
return { data };