Skip to content

Instantly share code, notes, and snippets.

Avatar

Grady Kuhnline heygrady

View GitHub Profile
@heygrady
heygrady / render-props.md
Last active Jul 14, 2020
Avoiding HOC; Favoring render props
View render-props.md
@heygrady
heygrady / mapDispatchToProps.md
Last active Jul 8, 2020
Redux containers: mapDispatchToProps
View mapDispatchToProps.md

Redux containers: mapDispatchToProps

This document details some tips and tricks for creating redux containers. Specifically, this document is looking at the mapDispatchToProps argument of the connect function from [react-redux][react-redux]. There are many ways to write the same thing in redux. This gist covers the various forms that mapDispatchToProps can take.

@heygrady
heygrady / start-server.js
Last active Jun 5, 2020
create-react-app ssr dev script
View start-server.js
// @remove-on-eject-begin
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
// @remove-on-eject-end
'use strict';
View classnames-bind.md

Using the classnames.bind method

Many people who work with React are familiar with the excellent classnames library. If you aren't familiar, it provides a simple function for gluing classnames together. In web programming in general, there are many times that we need to add or remove multiple classes based on conditional logic. The classnames library makes this easy.

More and more developers are embracing CSS Next and the power of CSS modules. However, when you add CSS modules to your react components, working with classnames gets more difficult. Typically, CSS modules is implemented with class name mangling. Transforming human readable class name strings into unique identifiers helps ensure that every class name in your app is unique.

This means that you can write your component CSS in isolation without worrying about the dreaded class name collisions that have plagued CSS

@heygrady
heygrady / redux-module-patterns.md
Last active Apr 13, 2020
Redux module patterns: app state, view state and regional state
View redux-module-patterns.md

Redux module patterns

app state, view state and regional state

separating components and containers

and code-splitting reducers



@heygrady
heygrady / rules-for-components.md
Last active Apr 7, 2020
Rules for crafting good components
View rules-for-components.md

Rules for crafting good components

Here are some good rules for a high-quality react-redux app.

We're in the process of reworking our app to make it more maintainable. In a previous meeting we discussed the general rules of thumb for writing maintainable code. Here we're going to be covering rules of thumb for writing good components.

  1. Components should do one thing.
    • We use BEM as a guide.
    • A nested "block" should be a standalone component.
  2. Prefer stateless functional components.
@heygrady
heygrady / preloading-data-redux.md
Created Mar 1, 2018
Preloading data in a redux application
View preloading-data-redux.md

Preloading data in a redux application

A redux app is a chicken and egg problem. Given a particular state, the app should render a certain thing. But... where does that state come from?

Starting from empty

Given a blank state, the app needs to rely on the URL to fetch the right data to populate the state.

In a server-side app, the initial state is determined in exactly this way. Given the initial URL, populate the state, render the app, send it to the client.

In a client-side app the situation is exactly the same, except it's totally different. On the client you have way more contextual information than just the URL. Given the URL, the current app state, a components own props and its internal state... a component must decide which data it needs loaded.

View redux-jsonapi-resources.md

Redux JSONAPI Resources

Ideas:

  1. Store resources in redux following the JSONAPI resource spec.
  2. Provide actions and thunks for managing resources similar to what Ember Data Models support.

Let's take an example of a building that has floorplans.

View example.css
.box {
-moz-box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
-o-box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
}
@heygrady
heygrady / refactoring-for-maintainability.md
Last active May 8, 2019
Refactoring for maintainability
View refactoring-for-maintainability.md

Refactoring for maintainability

There is no "right" way to do anything. Any best practice exists because it's been found by someone to be better than what they were doing before. Often there's a reason that one way is better... but no way is the perfect way. Everything has pitfalls.

If you've been working on a codebase — any code base — for more than a year, you have likely run into a few pitfalls. The decisions we make today have downstream consequences. It's difficult for young developers to tease out which choices will cause big problems in the future. It's difficult for seasoned developers to distinguish between how they usually do it and "the best way".

Best practices change all the time. Like any other type of technology, people are constantly finding ways to improve code. It can be a full time job keeping up with new developments... and emerging best practice don't always stick around. Anyone invested in the early days of ES6 may remember the hype around decorators. At the time they we

You can’t perform that action at this time.