{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-2-device-emulation-new-modes-and-simulators/","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/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Polypane 2: device emulation, new modes and simulators\",\n  \"cover\": \"\",\n  \"date\": \"2019-11-06\",\n  \"type\": [\"announcement\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `Polypane 2 is out! In Polypane 2 we're introducing a bunch of often-asked for features, like full device emulation, filtering and a vertical view mode but also some completely new functionality that just might change how you build websites: overlays, simulators and visual diffing.`), mdx(\"p\", null, `These new features give you better insights in your site right at your fingertips and make laborious tasks like contrast checking or QA much, much faster.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"new-logo\"\n  }, `New logo`), mdx(\"img\", {\n    src: \"/icons/icon-144x144.png\",\n    style: {\n      float: 'left',\n      marginRight: '1rem',\n      marginTop: '2rem'\n    }\n  }), mdx(\"p\", null, `We decided to give the logo a little refresh. The colors in the previous version were a little dull and no longer fit with the rest of the colors in our design.`), mdx(\"p\", null, `The new logo is also more legible in small sizes, feels fresher, and if you squint it kind of looks like a P.`), mdx(\"h2\", {\n    \"id\": \"new-view-modes\"\n  }, `New view modes`), mdx(\"p\", null, `We streamlined the view modes in Polypane. There are now four: Horizontal, which is the default view, Vertical, which is new and lets you scroll vertically to see all panes, Focus mode and Full mode. Devtools mode is gone because Devtools extensions can now be used everywhere with our new isolate panes feature (read on for more about that).`), mdx(\"p\", null, `Vertical view mode is really nice to get a really high-level overview of your site by zooming all the way out:`), mdx(\"img\", {\n    src: \"/blogs/polypane-2/vertical.png\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `All view modes now have single-key shortcuts so switching between them is even faster. Read more about them in the documentation: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/layouts/\"\n  }), `view modes`), `.`), mdx(\"h2\", {\n    \"id\": \"overlays-and-simulators\"\n  }, `Overlays and simulators`), mdx(\"p\", null, `Polypane now supports \"Overlays\" for each pane. We already had an overlay for all panes with our \"layout debugging\" feature, but they can now be applied per pane and the available number of overlays has grown to over 15 items.`), mdx(\"p\", null, `Simulate all versions of color blindness, quickly test your site for accessibility issues or make your page editable to quickly make text changes.  There's a few more overlays, so try them out!`), mdx(\"p\", null, `Overlays will help you develop faster, catch bugs earlier, test your site in new ways and in the end, produce better websites.`), mdx(\"img\", {\n    src: \"/blogs/polypane-2/overlays.png\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, `In the image above from left to right we have: an accessibility check, a colorblindness simulator, a farsightedness simulator and a dyslexia simulator.`)), mdx(\"h2\", {\n    \"id\": \"isolate-panes-in-beta\"\n  }, `Isolate panes (in beta)`), mdx(\"p\", null, `Isolate panes is a new mode that changes the way Polypane works. Websites in Polypane up to now had a shared context, which meant that for example we had a single devtools for all panes. With isolate panes, each pane has its own context. With this each pane has access to devtools extensions, and we can do `, mdx(\"strong\", null, `full device emulation`), `.`), mdx(\"p\", null, `If you're doing javascript-heavy sites, or want to test with device emulation, turning Isolate panes on in the edit menu can really improve the experience you have in Polypane. `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `Since Polypane 4 isolate panes are out of beta`)), mdx(\"h2\", {\n    \"id\": \"device-emulation\"\n  }, `Device emulation`), mdx(\"img\", {\n    src: \"/blogs/polypane-2/emulation.png\",\n    className: \"imgshadow\",\n    style: {\n      float: 'right',\n      marginLeft: '1rem',\n      marginTop: '2rem'\n    }\n  }), mdx(\"p\", null, `You can set the device type, emulate touch, configure the pixelRatio and set the user agent. Our Device presets have been updated to include these, so they will automatically be applied in Isolate panes mode.`), mdx(\"h3\", {\n    \"id\": \"custom-http-headers\"\n  }, `Custom HTTP headers`), mdx(\"p\", null, `A unique new feature in Polypane is the ability to set custom headers per pane.`), mdx(\"p\", null, `With custom headers, you can send extra information to your server and test things like multiple languages using the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `accept-language`), ` header, or come up with your own headers and configure your server to do things like test multiple themes, print additional debug information or discard destructive actions so testing forms becomes much easier. Anything is possible.`), mdx(\"p\", null, `Read more about `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/emulation/\"\n  }), `device emulation and custom HTTP headers`), `.`), mdx(\"h2\", {\n    \"id\": \"visual-diffing-with-reference-images\"\n  }, `Visual diffing with reference images`), mdx(\"video\", {\n    loop: true,\n    autoPlay: true,\n    playsInline: true\n  }, mdx(\"source\", {\n    src: \"/static/reference-f14b35b34c27c1a62c84db3a1de8c7f3.mp4\",\n    type: \"video/mp4\"\n  })), mdx(\"p\", null, `Each pane can now have a reference image applied to it. Reference images can be overlaid or shown side-by-side with pane. You can use this to compare a site to it's original design, or compare a site to a screenshot made earlier.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `We don't think website should look exactly the same as the design, and they're always going to be cross-browser differences so pixel-perfect matching shouldn't be the goal.`), ` But this will significantly speed up the work for anyone doing QA or checking that a design has been implemented correctly, and combining Polypane's screenshot functionality with the visual diffing option in the reference image feature is immensely powerful.`), mdx(\"p\", null, `Find out more about `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/reference-image/\"\n  }), `reference images`), `.`), mdx(\"h2\", {\n    \"id\": \"filtering-panes\"\n  }, `Filtering panes`), mdx(\"p\", null, `You can now quickly filter panes based on their device category (Mobile, Tablet, Desktop and Other). If you have a custom list of device presets, it will use your own custom categories. This will quickly let you toggle hide and show various types of devices without losing your custom set panes.`), mdx(\"h2\", {\n    \"id\": \"update-to-chromium-78\"\n  }, `Update to Chromium 78`), mdx(\"p\", null, `Polypane is now running on Chromium 78, bringing it up-to-date with Chrome itself.`), mdx(\"h2\", {\n    \"id\": \"full-changelog\"\n  }, `Full changelog:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Vertical view mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Overlays and simulators`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Device emulation`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Visual diffing support with reference images`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Filter panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Isolate panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` New icon`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Upgrade to Chromium 78`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Better no-caching support`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Shortcuts to switch view modes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Remember last used folder for live reload`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Reload same url works correctly`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Support parsing CSS without media queries`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Close button and quickswitcher are no longer overlaid by window controls on mac`)), mdx(\"h2\", {\n    \"id\": \"update-notes\"\n  }, `Update notes`), mdx(\"p\", null, `Because of the upgrade to Chromium 78, you will have to reinstall your devtools extensions for them to work.`), mdx(\"h2\", {\n    \"id\": \"getting-polypane-2\"\n  }, `Getting Polypane 2`), mdx(\"p\", null, `Polypane will automatically update on Mac and Windows. Linux users need to download the new version from\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` and if you're on Mac and Windows but don't want to wait on the update popup, you can find\nyour download there as well.`), mdx(\"p\", null, `If you don't have Polypane yet there is a free 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/pricing/\"\n  }), `Get it here`), `.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"tableOfContents":{"items":[{"url":"#new-logo","title":"New logo"},{"url":"#new-view-modes","title":"New view modes"},{"url":"#overlays-and-simulators","title":"Overlays and simulators"},{"url":"#isolate-panes-in-beta","title":"Isolate panes (in beta)"},{"url":"#device-emulation","title":"Device emulation","items":[{"url":"#custom-http-headers","title":"Custom HTTP headers"}]},{"url":"#visual-diffing-with-reference-images","title":"Visual diffing with reference images"},{"url":"#filtering-panes","title":"Filtering panes"},{"url":"#update-to-chromium-78","title":"Update to Chromium 78"},{"url":"#full-changelog","title":"Full changelog:"},{"url":"#update-notes","title":"Update notes"},{"url":"#getting-polypane-2","title":"Getting Polypane 2"}]},"excerpt":"Polypane 2 is out! In Polypane 2 we're introducing a bunch of often-asked for features, like full device emulation, filtering and a vertical view mode but also…","frontmatter":{"title":"Polypane 2: device emulation, new modes and simulators","cover":"","date":"2019-11-06","updated":null},"fields":{"slug":"/blog/polypane-2-device-emulation-new-modes-and-simulators/","date":"2019-11-05T23:00:00.000Z","ogFileName":"polypane-2-device-emulation-new-modes-and-simulators"}}},"pageContext":{"slug":"/blog/polypane-2-device-emulation-new-modes-and-simulators/"}},"staticQueryHashes":["4164364741","425175329"]}