{"componentChunkName":"component---src-templates-post-js","path":"/blog/should-i-use/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Should I Use?\",\n  \"date\": \"2020-04-02T00:00:00.000Z\",\n  \"tags\": [\"general\"],\n  \"banner\": \"banner.png\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Good ideas always come back. You don't forget about them. They sit in the corner\\nof your mind, craving your attention. For me, \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Should I Use?\"), \" was one of those\\nideas. This is the story behind the idea, building it, and finally releasing it.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Should I Use?\"), \" is a web application that aims to help developers evaluate\\nwhat JavaScript packages to use based on a baseline set of criteria.\")), mdx(\"p\", null, \"The idea came to me years ago while using \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://caniuse.com/\"\n  }), \"Can I use...\"), \", an\\nindispensable resource for identifying which features are supported across\\nbrowsers and versions. With the expanding popularity of JavaScript \\u2014 and the\\nexplosion of third-party packages released on NPM \\u2014 I felt a significant need\\nfor a tool to help evaluate which packages to use in projects. But instead of\\nbuilding it, I sat on it, waiting for someone else to build it.\"), mdx(\"p\", null, \"And I waited...\"), mdx(\"p\", null, \"And waited...\"), mdx(\"p\", null, \"But it never happened.\"), mdx(\"h2\", {\n    \"id\": \"fast-forward-to-our-2019-company-meetup\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#fast-forward-to-our-2019-company-meetup\",\n    \"aria-label\": \"fast forward to our 2019 company meetup permalink\",\n    \"className\": \"headerLink\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"xmlns\": \"http://www.w3.org/2000/svg\",\n    \"width\": \"24\",\n    \"height\": \"24\",\n    \"fill\": \"none\",\n    \"stroke\": \"currentColor\",\n    \"strokeWidth\": \"2\",\n    \"strokeLineCap\": \"round\",\n    \"strokeLineJoin\": \"round\",\n    \"className\": \"feather feather-link\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"d\": \"M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71\"\n  })), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"d\": \"M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71\"\n  })))), \"Fast-forward to our 2019 company meetup...\"), mdx(\"p\", null, \"I was talking with a few of my coworkers at Differential, explaining the idea\\nstewing in my head for years. To avoid the headaches of releasing it under my\\npersonal brand (feedback, maintenance, support, etc.), I spoke with folks at\\nDifferential about releasing under Differential's brand.\"), mdx(\"p\", null, \"Before I got the \\\"green light\\\", I decided to finally get it out of my head and\\nbuild a \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"very\"), \" basic MVP of the product. I spent every spare minute I had\\nbuilding it. And once I received the official \\\"green light\\\", I built a more\\nrefined first version, opening up an \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Alpha\"), \" version for internal testing. After\\ngetting feedback, I iterated and released the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Beta\"), \". The feedback slowed, and\\nwe made plans to polish and officially release the v1.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://shouldiuse.app\"\n  }), \"https://shouldiuse.app\"), \" is now officially live!\"), \" \\uD83D\\uDE80\"), mdx(PostNote, {\n    mdxType: \"PostNote\"\n  }, \"It's actually been live for some time, but\", ' ', mdx(\"a\", {\n    href: \"https://www.differential.com/posts/should-i-use-and-why-should-i-use-it\"\n  }, \"we're officially announcing it\"), \", which is why I'm talking about it here and now.\"), mdx(\"p\", null, \"I'm incredibly thankful to work for a company that invests in passions that\\nalign with the overall company vision. It's been a blast to build it, get\\nfeedback, iterate, and put something out into the world that will (hopefully)\\nhelp developers everywhere.\"), mdx(\"p\", null, \"While this is a tool for helping developers evaluate which packages to use, I\\nhope, too, that it helps the open-source community by identifying projects in\\nneed of additional support. We're looking at more ways we can promote those\\naspects within the app. Stay tuned.\"), mdx(\"h2\", {\n    \"id\": \"some-nerdy-technical-notes\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#some-nerdy-technical-notes\",\n    \"aria-label\": \"some nerdy technical notes permalink\",\n    \"className\": \"headerLink\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"xmlns\": \"http://www.w3.org/2000/svg\",\n    \"width\": \"24\",\n    \"height\": \"24\",\n    \"fill\": \"none\",\n    \"stroke\": \"currentColor\",\n    \"strokeWidth\": \"2\",\n    \"strokeLineCap\": \"round\",\n    \"strokeLineJoin\": \"round\",\n    \"className\": \"feather feather-link\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"d\": \"M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71\"\n  })), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"d\": \"M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71\"\n  })))), \"Some nerdy technical notes\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"It is hosted on \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"http://netlify.com/\"\n  }), \"Netlify\"), \".\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The app is built in \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://reactjs.org/\"\n  }), \"React\"), \" using \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/facebook/create-react-app\"\n  }), \"Create React App\"), \".\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"It uses a plain, vanilla \", mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"style.css\"), \" file with CSS variables.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"It uses the \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://npms.io/\"\n  }), \"npms\"), \" and \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://developer.github.com/v3/\"\n  }), \"GitHub GraphQL\"), \" APIs to fetch all the\\ndata.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"It uses \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.apollographql.com/\"\n  }), \"Apollo\"), \" to connect to the GitHub API and run GraphQL queries.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"It uses \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/downshift-js/downshift\"\n  }), \"Downshift\"), \" for the autocomplete search input.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"It uses a state machine via \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://xstate.js.org/\"\n  }), \"XState\"), \" for managing all of the logic.\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"750px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b5c3081080f4183c69d74531218b8a17/6fc9e/state-machine.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"54.05405405405405%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsSAAALEgHS3X78AAABNUlEQVQoz3WQSW6DQBBFff875QBZWSxYGNuA4kE0Y9MMjc2UZwork/Ml0Fd1vZo2eZ5nhTHt/bbofl9N13W/ImL494swG9103lU7H2YaJ2tbpVTTNLxN00RqXddRFGVZ1rYt2eOiYRhWGJ+U3ZsbvwfGdrdYKa11kiS73a4sS5IgjTHW2svlst/vT6cT/DzPAo99P6g0z3RFSYA0TeM4PhwORVHwSgSeiufz2fM83/epxVwPGGB+ilQAshkYTwadwShHkKfj8ei67na75VKAK0wef7ws6TgOm8vawKRWVUX/MAyZiP6U+4JF9JF/EARcW8oxpCyCgLkFMFO8gOWY9MFjWIxZwGAoQZzNiawH+w7LklKif0o8swgDTIkX8F/JIHJz9pfItOgB8w3/i552EWlcwf7UJ/AKd1JBSLeoAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Should I Use? State Machine\",\n    \"title\": \"Should I Use? State Machine\",\n    \"src\": \"/static/b5c3081080f4183c69d74531218b8a17/b8ccf/state-machine.png\",\n    \"srcSet\": [\"/static/b5c3081080f4183c69d74531218b8a17/7a748/state-machine.png 188w\", \"/static/b5c3081080f4183c69d74531218b8a17/1a013/state-machine.png 375w\", \"/static/b5c3081080f4183c69d74531218b8a17/b8ccf/state-machine.png 750w\", \"/static/b5c3081080f4183c69d74531218b8a17/beb4a/state-machine.png 1125w\", \"/static/b5c3081080f4183c69d74531218b8a17/b0eb8/state-machine.png 1500w\", \"/static/b5c3081080f4183c69d74531218b8a17/6fc9e/state-machine.png 1776w\"],\n    \"sizes\": \"(max-width: 750px) 100vw, 750px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \"), \" \", mdx(\"cite\", null, \"This is the state\\nmachine, visualized courtesy of \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://xstate.js.org/\"\n  }), \"XState\"), \" and \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://xstate.js.org/viz/\"\n  }), \"its killer\\nvisualizer\"), \".\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"date":"April 02, 2020","title":"Should I Use?","banner":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAABs0lEQVQ4y6VTWU/CQBj0h+tf0Ef1B/hi4hMxAmpRsRHlaAulhSIgHlBKuRIhqO2O3y6tcnhg3GQ2e7SzM/PtrjHG8M/G2CcJW+O97/twu13k9SJy+QIyqoasQF6Mb3IqQZlDWlHFnlWtsYBUdIKwcf+Ay7QCWTXQcbvo9fvo9qbg4/5giMFwGbbjIHEpMxLEQqmC0CxbSGkmZL36Z79X6eyyQoMINbJrOx007bYAP/0nOB0Xd+QseXUtCP1pjEGGNKEsoBsm1IIucuRQQtCaugAuIKNoFEtvXuFslV9eX/9fZc/zxSiWuMDG1g5OL2REonFISRla0cBtrS7s8X/ePE/ciFkEZCHnp8Knlo2CUcJoPEZvMECb8mxRlhWKgq8tSJqbBpgS8lN4K1eqOIhKsOoNlKwKHpstcTW4Ol6sh6cmHNeFRyoXSL8mTKbS2N3bx3Umh6OTBEHCYfwEMekMqUwWulkSmEwmPxOGG/zDVttZtQrfWw4tRKVzrG9u4/gsiYPIoVDGn16xVIYdHBQUYTWFPCfTusWYCsCzo/uFDr3v2l0Dz6PRB8mvhF9YWMXmt5bfATDwdRFuwneEAAAAAElFTkSuQmCC","aspectRatio":1.3636363636363635,"src":"/static/3a52c1bd713ea26539e2b93f996bd778/d456e/banner.png","srcSet":"/static/3a52c1bd713ea26539e2b93f996bd778/8005d/banner.png 188w,\n/static/3a52c1bd713ea26539e2b93f996bd778/49959/banner.png 375w,\n/static/3a52c1bd713ea26539e2b93f996bd778/d456e/banner.png 750w,\n/static/3a52c1bd713ea26539e2b93f996bd778/130bf/banner.png 1125w,\n/static/3a52c1bd713ea26539e2b93f996bd778/52e98/banner.png 1500w","sizes":"(max-width: 750px) 100vw, 750px"}}},"tags":["general"]},"timeToRead":2,"fields":{"slug":"/should-i-use/"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/should-i-use/"}}}