Skip to content

Instantly share code, notes, and snippets.

SaraVieira / gist
Last active September 23, 2021 16:33
The Origin of Furries
View gist

In this talk we will be all discussing the origin of the furry fandom. How we will thogheter create a new furry-in-js framework. We will going over how they have changed the current fandom world, our hearts and the js world in 5 very awesome minutes! This talk is to prove a point that stars mean nothing in this case.

halfzebra /
Last active March 23, 2018 17:12
How Create React App changed the way I work

This gist is a proposal for lightning talk at Reactive Conf 2017

Like the idea? Give me a 🌟 and see you in Bratislava!

How Create React App changed the way I work

Hello, my name is Eduard!

I'm the maintainer of Create Elm App and contributor to Create React App and Webpack

alekseykulikov /
Last active March 15, 2023 01:49
Principles we use to write CSS for modern browsers

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

thevangelist / my-component.spec.js
Created August 4, 2016 13:06
The only React.js component test you'll ever need (Enzyme + Chai)
View my-component.spec.js
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../src/my-component';
const wrapper = shallow(<MyComponent/>);
describe('(Component) MyComponent', () => {
it('renders without exploding', () => {
gaearon / connect.js
Last active April 26, 2023 02:22
connect.js explained
View connect.js
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (
gaearon / LinkThatWorksWithRedux.js
Last active November 21, 2018 03:31
Drop-in replacement for React Router <Link> that works with React Redux optimizations (
View LinkThatWorksWithRedux.js
// While I claim this is a drop-in replacement, it is a little bit slower.
// If you have hundreds of links, you might spend a few more milliseconds rendering the page on transitions.
// * This doesn't work great if you animate route changes with <TransitionGroup>
// because the links are going to get updated immediately during the animation.
// * This might still not update the <Link> correctly for async routes,
// as explained in
gaearon / reducers.js
Last active December 11, 2020 14:56
How I'd do code splitting in Redux (pseudo code, not tested!)
View reducers.js
import { combineReducers } from 'redux';
import users from './reducers/users';
import posts from './reducers/posts';
export default function createReducer(asyncReducers) {
return combineReducers({
evanrs /
Last active November 4, 2015 07:14
Rewriting history with predicates (Reactive 2015 lightning talk proposal)

This is a proposal for a lightning talk I would give at the Reactive 2015 conference.

NOTE: If you like it, put a star on it—the number of stars decides if it makes the cut!

Rewriting history with predicates

Redux provides a simple pattern for managing application state. As demonstrated in Dan Abramov's talk following this pattern lets you painlessly implement simple undo and time travel. By keeping a history of actions, and reducing a subset

gaearon / slim-redux.js
Last active May 30, 2023 02:48
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
View slim-redux.js
function mapValues(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
result[key] = fn(obj[key], key);
return result;
}, {});
function pick(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
if (fn(obj[key])) {
tlrobinson / redux-devtools-separate-window.js
Last active August 20, 2019 23:54
Put the awesome redux-devtools in it's own window so it doesn't obscure or be obscured by your application
View redux-devtools-separate-window.js
// give it a name so it reuses the same window
var win =, "redux-devtools", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no");
// reload in case it's reusing the same window with the old content
// wait a little bit for it to reload, then render
setTimeout(function() {
<DebugPanel top right bottom left >