{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-1-2-dark-mode-full-page-screenshots-live-reloading-and-more/","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 1.2: Dark mode, Full page screenshots, Live reloading and more\",\n  \"cover\": \"\",\n  \"date\": \"2019-08-22\",\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, `There is a new version of Polypane available! It brings dark mode, live reloading, full page screenshots and a ton more\ngreat features. Read on for the details. To check out the latest version, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/pricing/\"\n  }), `start your trial`), `.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"whats-new\"\n  }, `What's new?`), mdx(\"h3\", {\n    \"id\": \"dark-mode\"\n  }, `Dark mode`), mdx(\"p\", null, `What can I say, it's dark mode.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/blogs/polypane1-2/overview-dark.png\",\n    \"alt\": \"dark mode\"\n  }))), mdx(\"h3\", {\n    \"id\": \"full-page-screenshots\"\n  }, `Full page screenshots`), mdx(\"p\", null, `You can now generate a full page screenshot of any of your panes, as well as just the viewport. This is one of the\nbest implementations out there and it should work really well for nearly all websites.`), mdx(\"p\", null, `The full page screenshot in Polypane can `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `correctly handle fixed elements and fixed backgrounds, and it can also deal with\nviewport units properly.`)), mdx(\"p\", null, `Most screenshot services don't do either and that means that any page with for example a fixed header will end up with an\nincorrect screenshot. In Polypane, that just works.`), mdx(\"p\", null, `Saved screenshots also include the url and the pane name, so it's easier to keep track of them.`), mdx(\"h3\", {\n    \"id\": \"live-reloading\"\n  }, `Live reloading`), mdx(\"p\", null, `Polypane now has built in live reloading for your projects. Instead of manually refreshing the page, you tell Polypane which folder\nto watch and if it detects changes, it'll refresh the page for you.`), mdx(\"p\", null, `If it's a CSS file or an image Polypane will update them without a page refresh, which is even faster!`), mdx(\"p\", null, `If you can't use Live reload, Polypane now also has an Auto reloading mode that will reload the page at a set interval, and\nof course you can still use your own hot reloading solution as well.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/blogs/polypane1-2/livereload.png\",\n    \"alt\": \"Live reload\"\n  }))), mdx(\"h3\", {\n    \"id\": \"history-and-autosuggestions\"\n  }, `History and autosuggestions`), mdx(\"p\", null, `You can now right click the navigation buttons and navigate to any previously visited page.`), mdx(\"p\", null, `The addressbar now works more like Chrome or Firefox where you can type fragments of urls and it'll match urls that contain all of them.\nIf you previously visited `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `https://polypane.app/docs/list-of-shortcuts/`), ` for example, you can just type \"pol do\" and it'll\nshow you all URLs that match. Navigating like this is much quicker and will really change how you use Polypane.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/blogs/polypane1-2/suggestions.png\",\n    \"alt\": \"suggestions\"\n  }))), mdx(\"h3\", {\n    \"id\": \"keyboard-and-form-syncing\"\n  }, `Keyboard and form syncing`), mdx(\"p\", null, `Any keyboard input and anything you type into forms is now automatically synced between all panes. This means that\nif your site uses keyboard shortcuts you can easily test them in all panes at once, and the same goes for filling in and testing forms.`), mdx(\"h3\", {\n    \"id\": \"shortcut-overlay\"\n  }, `Shortcut overlay`), mdx(\"p\", null, `I got a few user requests for this and it's super handy to have. Press F2 (or use the help menu) to quickly show an overlay\nof all the shortcuts without having to go to the 'getting started' page.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/blogs/polypane1-2/shortcuts.png\",\n    \"alt\": \"shortcuts\"\n  }))), mdx(\"h3\", {\n    \"id\": \"simplified-breakpoints\"\n  }, `Simplified breakpoints`), mdx(\"p\", null, `If you have a large website, it's not strange to have over a dozen CSS breakpoints throughout your site. Showing all of them\nmight not be needed to get a proper overview. With the new simplified breakpoints (which you can find by right-clicking\nthe breakpoints button) Polypane automatically generates `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `5 panes that map to your sites supported widths`), `. This way you get a good\noverview of the range of your responsive styles without needing to see every breakpoint.`), mdx(\"h3\", {\n    \"id\": \"support-for-handling-invalid-certificates\"\n  }, `Support for handling invalid certificates`), mdx(\"p\", null, `Polypane will now show you a warning for unsafe certificates (like expired certificates, or ones with the wrong domain)\nand ask you whether to allow them or not. Your answer will be saved for the current session.`), mdx(\"h3\", {\n    \"id\": \"manual-cache-and-cookie-handling\"\n  }, `Manual cache and cookie handling`), mdx(\"p\", null, `You can now manually clear the cache, cookies and saved basic auth credentials, as well as disable the cache entirely\nwhen using Polypane. Find these in the edit menu.`), mdx(\"h3\", {\n    \"id\": \"historyreplacestate-implementation\"\n  }, `History.replaceState implementation`), mdx(\"p\", null, `Polypane now implements history.replaceState calls, where calling it will update the URL and sync the panes.`), mdx(\"h2\", {\n    \"id\": \"whats-improved\"\n  }, `What's improved?`), mdx(\"h3\", {\n    \"id\": \"speed-improvements\"\n  }, `Speed improvements`), mdx(\"p\", null, `I spend a lot of time optimising the Polypane code and also decoupling the main UI from the panes. The UI should now be\nmore responsive and heavy websites should have less influence on the rest of the UI.`), mdx(\"h3\", {\n    \"id\": \"pane-header-ui\"\n  }, `Pane header UI`), mdx(\"p\", null, `The pane headers have had a facelift. The height is now no longer shown vertically, but sits next to the width above the\npane, and there is more space above the header which keeps things clean.`), mdx(\"p\", null, `The rotation button is now visible in the header as opposed to the overlay, so it's much easier to quickly rotate a pane.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/blogs/polypane1-2/paneheader.png\",\n    \"alt\": \"paneheader\"\n  }))), mdx(\"h3\", {\n    \"id\": \"quick-switcher-ui\"\n  }, `Quick switcher UI`), mdx(\"p\", null, `The quickswitcher, added in 1.1, now spans the whole width and the selected size will be highlighed. The pane resizing\nanimation has been removed to provide a snappier and faster experience.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/blogs/polypane1-2/quickswitcher.png\",\n    \"alt\": \"quickswitcher\"\n  }))), mdx(\"h3\", {\n    \"id\": \"quickly-zoom-by-scrolling\"\n  }, `Quickly zoom by scrolling`), mdx(\"p\", null, `You can now press `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `cmd/ctrl`), ` and scroll to zoom Polypane in and out.`), mdx(\"h3\", {\n    \"id\": \"menu-is-now-always-visible-on-windows\"\n  }, `Menu is now always visible on Windows`), mdx(\"p\", null, `Many users didn't realise Polypane also had a menu that appears when you press `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `alt`), `, so the menu is now shown by default.\nIf you don't like this behaviour you can revert to the old behaviour in the view menu.`), mdx(\"h3\", {\n    \"id\": \"improved-first-launch\"\n  }, `Improved first launch`), mdx(\"p\", null, `The first launch, where you enter your email and license key, now has a sleeker design and lets you choose the website\nyou want to start Polypane with.`), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/blogs/polypane1-2/firstlaunch.png\",\n    \"alt\": \"firstlaunch\"\n  }))), 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`), ` Dark mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `new`), ` Full page and viewport screenshots`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `new`), ` Live reloading and Auto reloading`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `new`), ` History and autosuggestions for the address bar`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `new`), ` Synchronize keyboard and forms between panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `new`), ` Shortcut overlay`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `new`), ` Simplified breakpoints view`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `new`), ` Support for self signed and invalid certificates`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `new`), ` Disable cache, clear cache, cookies and saved auth options`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `new`), ` First time launch experience now lets you choose URL`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `new`), ` history.replaceState support has been added`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `improvement`), ` Faster rendering of main UI`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `improvement`), ` Pane UI is now more streamlined`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `improvement`), ` Redesigned quick switcher`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `improvement`), ` Saved screenshots now include URL`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `improvement`), ` Zooming now also works with ctrl/cmd + scroll`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `improvement`), ` Menubar on Windows now visible by default`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `improvement`), ` License flow rendering improved design`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `bugfix`), ` Minimum dimensions for the app`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `bugfix`), ` Quit no longer broken on mac`)), mdx(\"h2\", {\n    \"id\": \"getting-polypane-12\"\n  }, `Getting Polypane 1.2`), mdx(\"p\", null, `On Mac, Polypane will automatically update. Windows users usually get an automatic update too, but this version requires a one-time manual update. `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `download Polypane`), ` and re-install it. Linux users also need to download the new version from `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), `.`), mdx(\"p\", null, `If you don't have Polypane yet, you can `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/pricing/\"\n  }), `get it here`), `.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":4,"tableOfContents":{"items":[{"url":"#whats-new","title":"What's new?","items":[{"url":"#dark-mode","title":"Dark mode"},{"url":"#full-page-screenshots","title":"Full page screenshots"},{"url":"#live-reloading","title":"Live reloading"},{"url":"#history-and-autosuggestions","title":"History and autosuggestions"},{"url":"#keyboard-and-form-syncing","title":"Keyboard and form syncing"},{"url":"#shortcut-overlay","title":"Shortcut overlay"},{"url":"#simplified-breakpoints","title":"Simplified breakpoints"},{"url":"#support-for-handling-invalid-certificates","title":"Support for handling invalid certificates"},{"url":"#manual-cache-and-cookie-handling","title":"Manual cache and cookie handling"},{"url":"#historyreplacestate-implementation","title":"History.replaceState implementation"}]},{"url":"#whats-improved","title":"What's improved?","items":[{"url":"#speed-improvements","title":"Speed improvements"},{"url":"#pane-header-ui","title":"Pane header UI"},{"url":"#quick-switcher-ui","title":"Quick switcher UI"},{"url":"#quickly-zoom-by-scrolling","title":"Quickly zoom by scrolling"},{"url":"#menu-is-now-always-visible-on-windows","title":"Menu is now always visible on Windows"},{"url":"#improved-first-launch","title":"Improved first launch"}]},{"url":"#full-changelog","title":"Full changelog:"},{"url":"#getting-polypane-12","title":"Getting Polypane 1.2"}]},"excerpt":"There is a new version of Polypane available! It brings dark mode, live reloading, full page screenshots and a ton more\ngreat features. Read on for the details…","frontmatter":{"title":"Polypane 1.2: Dark mode, Full page screenshots, Live reloading and more","cover":"","date":"2019-08-22","updated":null},"fields":{"slug":"/blog/polypane-1-2-dark-mode-full-page-screenshots-live-reloading-and-more/","date":"2019-08-21T22:00:00.000Z","ogFileName":"polypane-1-2-dark-mode-full-page-screenshots-live-reloading-and-more"}}},"pageContext":{"slug":"/blog/polypane-1-2-dark-mode-full-page-screenshots-live-reloading-and-more/"}},"staticQueryHashes":["4164364741","425175329"]}