Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
Looking for work

Danny Andrews danny-andrews

💭
Looking for work
View GitHub Profile
@danny-andrews
danny-andrews / get-class.js
Created Jul 11, 2017
Get Class Javascript
View get-class.js
/**
* Returns internal [[Class]] property of an object
*
* Ecma-262, 15.2.4.2
* 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).
View redux-conventions.markdown

@dschinkel

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
danny-andrews / printf.js
Last active Oct 5, 2017
Poor-man's printf
View printf.js
// Named replacements!
const formatString = (string, substitutions = {}) =>
string.replace(
/%{([^}]+)}/g,
(match, id) => {
return substitutions.hasOwnProperty(id) ? substitutions[id] : match
}
);
formatString('%{noun} is %{adjective}', {
@danny-andrews
danny-andrews / url-utils.js
Created Sep 6, 2017
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
danny-andrews / flow-fp.js
Created Sep 12, 2017
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}`)
.map(getClass);
@danny-andrews
danny-andrews / long-term-caching-webpack-config.md
Last active Oct 22, 2018
Long Term caHashing Webpack Config
View long-term-caching-webpack-config.md

I had a hard time finding a solution here that helped. But this tutorial is great and worked for me.

tl;dr

output: {
  filename: '[name].[chunkhash].js'
},
plugins: [
  // Order matters. 'vendor' must come before 'runtime'
  new webpack.optimize.CommonsChunkPlugin({
@danny-andrews
danny-andrews / index.html
Last active Oct 5, 2017
Render Callback Example
View index.html
<div id="root"></div>
@danny-andrews
danny-andrews / facc-example.jsx
Last active Oct 10, 2017
React Abstractions: FaCC
View facc-example.jsx
const LuckyNumber = ({ children }) => children({ number: Math.random() });
const App = () => (
<LuckyNumber>
{({number}) => <div>Your number is: {number}!</div>}
</LuckyNumber>
);
@danny-andrews
danny-andrews / render-prop-example.jsx
Last active Oct 10, 2017
React Abstractions: Render Prop
View render-prop-example.jsx
const LuckyNumber = ({ render }) => render({ number: Math.random() });
const App = () => (
<LuckyNumber
render={({number}) => <div>Your number is: {number}!</div>}
/>
);
@danny-andrews
danny-andrews / component-decorator-example.jsx
Last active Dec 4, 2017
React Abstractions: HoC example
View component-decorator-example.jsx
const withLuckyNumber = Component => (props) => <Component number={Math.random()} {...props} />;
const UnconnectedApp = ({ number }) => <div>Your number is: {number}!</div>;
const App = withLuckyNumber(UnconnectedApp);