{"componentChunkName":"component---node-modules-gatsby-theme-mdx-deck-src-templates-deck-js","path":"/","matchPath":"/*","result":{"data":{"deck":{"id":"6eee6977-9661-5e29-999a-08e998da4959","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 theme = myTheme;\nvar _frontmatter = {};\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 Layout = makeShortcode(\"Layout\");\nvar Logo = makeShortcode(\"Logo\");\nvar StartButton = makeShortcode(\"StartButton\");\nvar Metadata = makeShortcode(\"Metadata\");\nvar Emoji = makeShortcode(\"Emoji\");\nvar LocalStorage = makeShortcode(\"LocalStorage\");\nvar ColorGrid = makeShortcode(\"ColorGrid\");\nvar TriggerError = makeShortcode(\"TriggerError\");\nvar Button = makeShortcode(\"Button\");\nvar layoutProps = {\n  theme: theme,\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(Layout, {\n    mdxType: \"Layout\"\n  }, mdx(Logo, {\n    demo: true,\n    width: \"100%\",\n    mdxType: \"Logo\"\n  }), mdx(\"center\", null, mdx(\"p\", null, \"Welcome! In this interactive demo, you'll learn about the benefits that FeaturePeek has to offer. \")), mdx(StartButton, {\n    mdxType: \"StartButton\"\n  })), mdx(\"hr\", null), mdx(Layout, {\n    mdxType: \"Layout\"\n  }, mdx(\"h2\", null, \"What is FeaturePeek?\"), mdx(\"p\", null, \"FeaturePeek spins up \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"on-demand staging environments\"), \" every time you open a pull request on your frontend repo.\"), mdx(\"p\", null, \"Unlike typical staging environments, FeaturePeek's environments are \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"packed with bonus features\"), \" that make it easy for your reviewers to leave great feedback. \"), mdx(\"p\", null, \"It works with static sites and sites containerized with Docker. And it doesn't matter who your hosting provider is \\u2013 since FeaturePeek doesn't touch your infrastructure, it works whether you deploy on anything from \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"AWS\"), \" to \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Zeit\"), \".\")), mdx(\"hr\", null), mdx(Layout, {\n    mdxType: \"Layout\"\n  }, mdx(\"h2\", null, \"Floating widget\"), mdx(\"p\", null, \"See the widget in the bottom left? That's added automatically. You don't need to install any dependencies for it to appear \\u2013 you get it just by deploying to FeaturePeek. \"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Go ahead and click on it to open it up.\"), \" You'll see useful contextual info like who created the pull request and a description of what changed.\"), mdx(\"p\", null, \"This is also where you can \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"comment\"), \" and \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"create new issues.\"), \" Comments are mirrored to the GitHub pull request, and issues are saved to the repo.\")), mdx(\"hr\", null), mdx(Layout, {\n    mdxType: \"Layout\"\n  }, mdx(\"h2\", null, \"Browser context included\"), mdx(\"p\", null, \"Whenever someone writes a comment or issue on FeaturePeek, \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"detailed metadata\"), \" about their browsing context is sent along with it. \"), mdx(Metadata, {\n    mdxType: \"Metadata\"\n  }), mdx(\"p\", null, \"You'll never have to chase down details like URL or browser version from your reviewers again.\")), mdx(\"hr\", null), mdx(Layout, {\n    mdxType: \"Layout\"\n  }, mdx(\"h2\", null, \"Screenshots and screen recordings\"), mdx(\"p\", null, \"You can take screenshots of elements on the page, and screen recordings of your interactions. They'll be posted inline in the pull request comments and issues on GitHub.\"), mdx(Emoji, {\n    mdxType: \"Emoji\"\n  }), mdx(\"p\", null, \"Normally, you'd have to use a third-party app to record and convert your media to a gif. But with FeaturePeek, you can do it in just a few clicks.\"), mdx(\"p\", null, \"Try opening up the floating widget and creating a new comment. In the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Attach\"), \" dropdown, select an option. You won't be able to submit the comment until you create an account, but this should give you an idea about how easy it is to attach screenshots and recordings.\"), mdx(\"p\", null, \"And yes, this \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"works on mobile too\"), \".\")), mdx(\"hr\", null), mdx(Layout, {\n    mdxType: \"Layout\"\n  }, mdx(\"h2\", null, \"Deep linking\"), mdx(\"p\", null, \"By the way \\u2013 notice how when you navigate from page to page, the URL changes. Even though your web app is being served in a \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"frame\"), \", its routes are exposed in the window's \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"location hash\"), \", making it super easy to share.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Go ahead and refresh this page\"), \" \\u2013 you'll arrive right here again. We'll wait for you \\uD83D\\uDE01.\"), mdx(\"p\", null, \"Imagine previewing builds without checking out branches, installing dependencies, or resarting dev servers \\u2013 but rather by visiting a link instead.\")), mdx(\"hr\", null), mdx(Layout, {\n    mdxType: \"Layout\"\n  }, mdx(\"h2\", null, \"Persistent logins\"), mdx(\"p\", null, \"Does your web app allow users to log in?\"), mdx(\"p\", null, \"Since each FeaturePeek project gets a dedicated subdomain, your \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"cookies\"), \" and \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"local storage\"), \" will persist from one environment to another. \"), mdx(\"p\", null, \"This means you will \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"remain logged in across environments\"), \", saving you from the annoyance of re-authenticating with your web app every time you visit a new build.\"), mdx(LocalStorage, {\n    mdxType: \"LocalStorage\"\n  }), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Enter your name\"), \" in the text input above. When you visit a running environment of \", mdx(\"a\", {\n    href: \"https://dashboard.featurepeek.com/peek/ppnh5v1#/6\",\n    target: \"_blank\"\n  }, \"a different pull request in this repo\"), \", you'll see your name already be filled in.\")), mdx(\"hr\", null), mdx(Layout, {\n    mdxType: \"Layout\"\n  }, mdx(\"h2\", null, \"Measure pixels\"), mdx(\"p\", null, \"Here's a hidden feature.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Try holding down the Option key\"), \" (Alt key on Windows) to bring up the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"measurement tool\"), \". Hover and click while holding down the key to measure from one element to another. \"), mdx(ColorGrid, {\n    mdxType: \"ColorGrid\"\n  }), mdx(\"p\", null, \"Again, you don't need to add any code to your website, or install any browser extensions \\u2013 you get this automatically just by deploying to FeaturePeek. \")), mdx(\"hr\", null), mdx(Layout, {\n    mdxType: \"Layout\"\n  }, mdx(\"h2\", null, \"Record views and errors\"), mdx(\"p\", null, \"Every time an environment gets viewed, FeaturePeek records who viewed it. This lets you know that your reviewers are actually running and checking your proposed changes. \"), mdx(\"p\", null, \"Similarly, if your reviewer encounters a \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"JavaScript exception\"), \" \\u2013 an error in the code \\u2013 it'll be logged and saved for you to fix. \"), mdx(TriggerError, {\n    mdxType: \"TriggerError\"\n  }), mdx(\"p\", null, \"Open up the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Activity pane\"), \" in the floating widget, and then \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"click the button above\"), \". You'll notice that the error from this intentionally faulty example gets captured.\")), mdx(\"hr\", null), mdx(Layout, {\n    mdxType: \"Layout\"\n  }, mdx(\"h2\", null, \"Thank you!\"), mdx(\"p\", null, \"That concludes the demo! Thanks for checking it out. \"), mdx(\"p\", null, \"Create a FeaturePeek account to use with your own projects. All new teams have a two-week free trial. \"), mdx(\"br\", null), mdx(Button, {\n    href: \"https://dashboard.featurepeek.com/login\",\n    target: \"_blank\",\n    mdxType: \"Button\"\n  }, \"Start your free trial today\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"matchPath":"/*","id":"6eee6977-9661-5e29-999a-08e998da4959","slug":"","title":"What is FeaturePeek?"}}}