Skip to content

Instantly share code, notes, and snippets.

View danny-andrews's full-sized avatar

Danny Andrews danny-andrews

View GitHub Profile
danny-andrews / get-class.js
Created July 11, 2017 19:12
Get Class Javascript
* 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


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
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 = 💩
// 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
// 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
<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
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
// 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
// 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>;