Skip to content

Instantly share code, notes, and snippets.

SaraVieira / gist
Last active December 5, 2023 11:59
The Origin of Furries

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 April 14, 2024 00:32
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)
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 11, 2024 06:46
connect.js explained
// 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 (
// 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!)
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 March 25, 2024 19:12
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
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
// 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 >