Skip to content

Instantly share code, notes, and snippets.

Andrew Clark acdlite

Block or report user

Report or block acdlite

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@acdlite
acdlite / coordinating-async-react.md
Last active Sep 12, 2019
Demo: Coordinating async React with non-React views
View coordinating-async-react.md

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

@acdlite
acdlite / pureRenderMixin.js
Last active Jul 17, 2019
Pure Render Mixin in ES6
View pureRenderMixin.js
function pureRenderMixin(Component) {
Component.prototype.shouldComponentUpdate(nextProps, nextState) {
return !shallowEqual(this.props, nextProps) ||
!shallowEqual(this.state, nextState);
}
return Component;
}
class MyComponent extends React.Component {}
@acdlite
acdlite / app.js
Last active Jul 4, 2019
Quick and dirty code splitting with React Router v4
View app.js
// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {
@acdlite
acdlite / flux.js
Last active May 31, 2019
A Redux-like Flux implementation in <75 lines of code
View flux.js
/**
* Basic proof of concept.
* - Hot reloadable
* - Stateless stores
* - Stores and action creators interoperable with Redux.
*/
import React, { Component } from 'react';
export default function dispatch(store, atom, action) {
@acdlite
acdlite / prefetch.js
Last active Dec 13, 2018
Prefetching in React
View prefetch.js
function prefetch(getKey, getValue, getInitialValue, propName) {
const inFlight = new Set();
const cache = new Map();
return ChildComponent => {
return class extends React.Component {
state = {value: getInitialValue(this.props)};
componentWillReceiveProps(nextProps) {
const key = getKey(nextProps);
if (cache.has(key)) {
// Use cached value
@acdlite
acdlite / app.js
Last active Nov 4, 2018
Minimal router using existing React Router primitives
View app.js
const history = createHistory();
const router = createReactRouter(routes);
history.listen((location => {
router.match(location, (err, state, redirectInfo) => {
// Integrate with external state library (Redux), or render directly
React.render(
<RouterComponent {...state} />;
);
});
@acdlite
acdlite / Dataloader.js
Last active Aug 15, 2018
Idea for Dataloader component
View Dataloader.js
// The `loader` prop is a Dataloader instance
// https://github.com/facebook/dataloader
class Dataloader extends React.Component {
state = {data: null, isLoaded: false};
componentWillMount() {
this.prefetchData(this.props);
}
componentWillReceiveProps(nextProps) {
if (this.props.id !== nextProps.id || this.props.loader !== nextProps.loader) {
this.setState({isLoaded: false});
@acdlite
acdlite / convert-video-for-web.sh
Last active Aug 21, 2017
Convert videos for web
View convert-video-for-web.sh
#!/bin/bash
# Based on http://asisolve.com/ffmpeg-encoding-settings-for-web-video/
for f in src/*.mov
do
name=$(basename $f .mov)
# Convert to mp4
ffmpeg -i $f -vcodec libx264 -preset slow -profile main -crf 25 -acodec libfdk_aac -ab 64k dist/$name.mp4
@acdlite
acdlite / SassMeister-input.scss
Created Nov 4, 2013
More experimenting using maps to organize Susy grids (or any other kind of data). Essentially, this is just abstracting calls to map-set() and map-merge to make the syntax more friendly. Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
$_grids: ();
@mixin add-grid($g, $name) {
$_grids: map-merge($_grids, ($name: $g));
}
@acdlite
acdlite / SassMeister-input.scss
Created Nov 4, 2013
Experiment using Sass maps to organize Susy Next configuration. Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
$grid: (
small: 90% 8 1/4,
medium: 80% 8 1/4,
large: 80% 12 1/4,
);
You can’t perform that action at this time.