Skip to content

Instantly share code, notes, and snippets.


Danny Andrews danny-andrews

View GitHub Profile
danny-andrews / get-class.js
Created July 11, 2017 19:12
Get Class Javascript
View get-class.js
* Returns internal [[Class]] property of an object
* Ecma-262,
* Object.prototype.toString( )
* When the toString method is called, the following steps are taken:
* 1. Get the [[Class]] property of this object.
* 2. Compute a string value by concatenating the three strings "[object ", Result (1), and "]".
* 3. Return Result (2).
danny-andrews / redux-conventions.markdown
Last active August 18, 2017 17:50
Redux Conventions
View redux-conventions.markdown


You should test those two methods indirectly by testing the behavior... So I'm disagreeing with @markerikson, test through your connected component.

Are you suggesting that you should forego exporting the unconnected component entirely and only test the connected component? I think that is "over testing." This ties your tests unnecessarily to the implementation details of the component it is testing. Because the functionality of the unconnected component (if it has any, that's a whole other can of worms) is completely unrelated to where it receives its props from. Maybe you want to turn that component into a purely presentational component in the future. If you test the connected component, you'll have to change all your tests to not inject a store anymore but pass the props in directly. If you tested the unconnected component, you don't have to do anything except blow away the connected-component-specific tests (more on that below).

I do agree that you should not directly test `mapState

danny-andrews / url-utils.js
Created September 6, 2017 18:58
URL utils that I use in literally every app
View url-utils.js
const removeTrailingSlash = path => path.replace(/\/$/, '');
const ensureTrailingSlash = path => `${removeTrailingSlash(path)}/`;
// Universal usage (no reliance on `document`)
const parseUrl = (href) => {
const match = href.match(/^(https?:)\/\/(([^:/?#]*)(?::([0-9]+))?)([/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);
return match && {
protocol: match[1],
host: match[2],
hostname: match[3],
danny-andrews / flow-fp.js
Created September 12, 2017 18:40
Flow + functional programming = 💩
View flow-fp.js
// Well, shit
const verticalModifiers = ['top', 'middle', 'bottom'];
const horizontalModifiers = ['start', 'center', 'end'];
const modifiers = verticalModifiers.concat(horizontalModifiers);
const getPassthroughClassNames = () => modifiers
.map(name => [name, props[name]])
.filter(([, value]) => value)
.map(([name, value]) => `${name}-${value}`)
danny-andrews / printf.js
Last active October 5, 2017 16:35
Poor-man's printf
View printf.js
// Named replacements!
const formatString = (string, substitutions = {}) =>
(match, id) => {
return substitutions.hasOwnProperty(id) ? substitutions[id] : match
formatString('%{noun} is %{adjective}', {
danny-andrews / index.html
Last active October 5, 2017 20:09
Render Callback Example
View index.html
<div id="root"></div>

Disclaimer: This article is in no way meant to belittle the react-css-modules project, or its author. Gajus is a smart dude and does a lot of great work for free for the JavaScript community to enjoy! ❤️ This is merely an evaluation of this particular library.

As with many popular libraries, I'm sure "react-css-modules" had a valid use-case at the time it was created, but at the present, it's drawbacks far outweigh its benefits. This article is meant to be a warning against picking it up without thinking about what you get from it.

tl;dr: Use "css-loader" over "react-css-modules"/"babel-plugin-react-css-modules" because the latter relies on side-effects, adds cognitive overhead (too much 🦄 ), causes React errors in your tests, requires complex webpack config, requires an additional dependency, is slower than css-loader, and doesn’t work with webpack/babel import aliases.


**Throws error when trying to use an undefined class name.

danny-andrews / using-classnames.js
Last active October 9, 2017 18:46
Do You Really Need react-css-modules?: Using classnames
View using-classnames.js
import styles from './styles.css';
import classnames from 'classnames';
<div className={classnames(styles.localClass, 'global-class')}>Hi</div>;
danny-andrews / mixing-global-and-local.jsx
Last active October 9, 2017 18:49
Do You Really Need react-css-modules?: Mixing global and local
View mixing-global-and-local.jsx
// With react-css-modules
import './styles.css';
<div className="global-class" styleName="local-class">Hi</div>;
// With css-loader
import styles from './styles.css';
<div className=`${styles.localClass} global-class`>Hi</div>;
danny-andrews / side-effects.js
Created October 9, 2017 18:49
Do You Really Need react-css-modules?: Side-effects
View side-effects.js
// With css-loader
import styles from './styles.scss';
export default () => <div className={styles.myClass}>Hi</div>;
// With react-css-modules
import './styles.scss';
export default () => <div styleName="myClass">Hi</div>;