{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-11-json-viewer-new-accessibility-tools-chromium-106-iphone-14-devices-and-screenshot-updates/","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 11: JSON viewer, new accessibility tools, Chromium 106, iPhone 14 devices and screenshot updates\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2022-10-04\",\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 11 now renders JSON files in a completely new viewer, adds a ton of new accessibility testing features and improves upon existing ones, updates the rendering engine to Chromium 106, includes new iPhone 14 devices and has new screenshotting features.`), mdx(\"p\", null, `We've also made improvements to the Element, Live CSS and Meta panels as well as added more into to the node tooltips.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"json-viewer\"\n  }, `JSON Viewer`), mdx(\"p\", null, `Polypane now included a JSON viewer that lets you visualize your JSON, inspect and filter it. There are two modes: you can show the JSON as it's sent from the server (optionally pretty-printing it), or show it in an interactive tree view.`), mdx(\"img\", {\n    src: \"/doc-img/json/tree.png\",\n    className: \"imgshadow\",\n    alt: \"JSON viewer showing GitHub user details\"\n  }), mdx(\"p\", null, `In the tree view you can quickly collapse, expand and filter your JSON object. Each property has an icon matching the type of the value, like text, number or URL. Where possible, values are richly displayed: URLs get a favicon and are clickable, datetimes get a pretty printed preview etc.`), mdx(\"p\", null, `In the treeview you can expand and collapse individual objects and arrays, but you can also expand and collapse all properties or pick which properties you want to expand in one go. This really helps when you're dealing with large JSON files and want to hide a lot of info you don't currently need.`), mdx(\"p\", null, `The JSON viewer is automatically launched whenever you open a JSON file, locally or from a server, in both the panes and in the Browse panel. We have a lot of plans on where to take the JSON viewer next and look forward to your feedback.`), mdx(\"h2\", {\n    \"id\": \"accessibility-features\"\n  }, `Accessibility features`), mdx(\"p\", null, `This release we've been working with a lot of you (❤️ thank you!) to figure out where the gaps in Polypane's tooling are when it comes to assessing accessibility issues effectively.`), mdx(\"p\", null, `With the new and improved tooling, we hope we closed the gap letting you use Polypane end-to-end when auditing websites for accessibility issues. If you're missing functionality, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support/\"\n  }), `let us know`), `!`), mdx(\"h3\", {\n    \"id\": \"new-visualization-debug-tools\"\n  }, `New visualization debug tools`), mdx(\"p\", null, `One of the first things that came up discussing with the team at `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://elevenways.be\"\n  }), `ElevenWays`), ` was tooling to quickly show all the roles and ARIA attributes on a page. With the new 'Show Roles' and 'Show ARIA attribute' debug tools you can now not only get an overview with a single click, you can also easily export screenshots to use in auditing reports or issue tickets.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Show Roles debug tool`)), mdx(\"img\", {\n    src: \"/doc-img/overlays/roles.png\",\n    className: \"imgshadow\",\n    alt: \"Roles used on the Polypane homepage\"\n  }), mdx(\"p\", null, `The Show Roles debug tool highlights all elements that have a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `role`), ` attribute and lists both the role and the element name. This helps you verify that the role is applicable and valid for a given element.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Show ARIA attributes debug tool`)), mdx(\"img\", {\n    src: \"/doc-img/overlays/arias.png\",\n    className: \"imgshadow\",\n    alt: \"Aria attributes used on the Polypane hompage\"\n  }), mdx(\"p\", null, `The show ARIA attributes debug tool on the other hand lists `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `all`), ` ARIA attributes and values that are applied to a given element. Test if ARIA attribute usage makes sense and if the right combinations are used.`), mdx(\"h3\", {\n    \"id\": \"updated-achromatopsia-simulator-and-new-photophobia-simulator\"\n  }, `Updated achromatopsia simulator and new Photophobia simulator`), mdx(\"p\", null, `Recently, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://natebaldw.in/\"\n  }), `Nate Baldwin`), ` release the `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `amazing`), ` `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://colorandcontrast.com/\"\n  }), `Color `, `&`, ` Contrast`), `. It's an amazing online resource with everything there is to know about, well, color and contrast. Included are lots of visualizations and examples, including for achromatopsia (full color blindness). We highly recommend you check it out.`), mdx(\"p\", null, `Comparing Nate's visualization to the one available in Polypane, we realized that ours was simulating `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `cerebral`), ` achromatopsia. So we set out to create a more true-to-experience visualization for achromatopsia itself:`), mdx(\"img\", {\n    src: \"/doc-img/overlays/achromatomaly.png\",\n    className: \"imgshadow\",\n    alt: \"The new achromatomaly simulator shown next to a regular pane\"\n  }), mdx(\"p\", null, `In the process, we renamed our existing visualization to indicate it's simulating cerebral achromatopsia. We also added a new Photophobia simulation:`), mdx(\"img\", {\n    src: \"/doc-img/overlays/photophobia.png\",\n    className: \"imgshadow\",\n    alt: \"The new photophobia simulator shown next to a regular pane\"\n  }), mdx(\"p\", null, `With these updates, we hope to create a more true-to-life experience, though it's worth noting that no two people experience anything we simulate the same way. The simulators are indicative and you should use them for broad-strokes analysis, not for specific styling tweaks.`), mdx(\"h3\", {\n    \"id\": \"focused-element-in-focus-order-outline\"\n  }, `Focused element in focus order outline`), mdx(\"video\", {\n    src: focus,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/debug-tools/#track-focus\"\n  }), `Track Focus debug tool`), ` can be used to highlight the element that is currently focused in a pane, but if you don't want to turn that debug tool on, we now also highlight the focused elements in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/outline-panel/#focus-order-tab-order\"\n  }), `focus order outline panel`), ` and in the focus order overlay provided by it. Thanks `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://yatil.net\"\n  }), `Eric`), ` for requesting this feature!`), mdx(\"h3\", {\n    \"id\": \"target-size-debug-tool-wcag-22-support\"\n  }, `Target size debug tool WCAG 2.2 support`), mdx(\"p\", null, `This request by `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/toegonline\"\n  }), `Ronny`), ` was made all the way back in June but it took me a while to get around to it. One of the new success criteria in WCAG 2.2 is a specification for minimum sizing for clickable elements (\"targets\").`), mdx(\"video\", {\n    src: target,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `Polypane already included a \"Target size\" debug tool that tested using 48 by 48 pixels, following Google's 'mobile friendly' algorithm. Now you can choose whether to use the WCAG 2.2 version (24px), Apple HIG (44px) or Google's Mobile Friendly heuristic (48px with some allowed overlap). Thanks Ronny!`), mdx(\"h3\", {\n    \"id\": \"contrast-checker-debug-tool\"\n  }, `Contrast Checker debug tool`), mdx(\"p\", null, `We improved a bunch of stuff to the Contrast Checker debug tool. This started after we noticed there sometimes was a 0.01 difference in the calculated contrast ratio that our debug tool and our new color picker gave us.`), mdx(\"h4\", {\n    \"id\": \"getting-it-001-more-correct\"\n  }, `Getting it 0.01 more correct`), mdx(\"p\", null, `After investigation, it turned out that in some situations we were incorrectly handling opacity on elements. We updated the algorithm we used to calculate accurate color contrast, and now there is no longer a difference between picking colors on screen and having Polypane generate them from your CSS, even in complex situations with many layers of transparency.`), mdx(\"h4\", {\n    \"id\": \"choosing-between-aa-and-aaa\"\n  }, `Choosing between AA and AAA`), mdx(\"p\", null, `You can now choose if you want to test against AA or AAA color contrast, bringing it in line with our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/color-contrast/\"\n  }), `online color contrast tester`), `.`), mdx(\"h4\", {\n    \"id\": \"click-to-apply\"\n  }, `Click to apply`), mdx(\"p\", null, `When Polypane finds contrast issues, we automatically calculate the closest color that does have enough contrast with the background. In previous releases, you could hover the suggestion to preview it and click the color to copy it to your clipboard.`), mdx(\"video\", {\n    src: contrast,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `In Polypane 11, clicking now copies and applies the suggestion, making it easy for you to head over to the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `elements inspector`), ` and tweaking the color to your liking.`), mdx(\"h3\", {\n    \"id\": \"detect-small-text-debug-tool\"\n  }, `Detect small text debug tool`), mdx(\"img\", {\n    src: smalltext,\n    className: \"imgshadow\",\n    alt: \"A warning shown for small text with a 'increase' button.\"\n  }), mdx(\"p\", null, `Like the Contrast Checker tool, the Detect small text debug tool now applies the suggested font size with the click of a button, letting you see the effect of a font change instantly.`), mdx(\"h2\", {\n    \"id\": \"color-picker-updates\"\n  }, `Color picker updates`), mdx(\"p\", null, `We added three new features to our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/color-picker/\"\n  }), `color picker`), `:`), mdx(\"h3\", {\n    \"id\": \"test-non-text-contrast\"\n  }, `Test non-text contrast`), mdx(\"p\", null, `Alongside Small text and Large text, you can now also check against the WCAG guideline for non-text contrast (3:1). Thanks Eric for requesting it!`), mdx(\"h3\", {\n    \"id\": \"visible-suggested-color\"\n  }, `Visible suggested color`), mdx(\"p\", null, `Instead of only showing the overlaid square, the color suggestion is now also shown as text below the contrast ratio. Click it to quickly copy the suggestion to your clipboard.`), mdx(\"h3\", {\n    \"id\": \"export-swatches\"\n  }, `Export swatches`), mdx(\"p\", null, `Click the new screenshot button in the color picker to export a swatch image:`), mdx(\"img\", {\n    src: swatch,\n    className: \"imgshadow\",\n    style: {\n      borderRadius: '1em'\n    },\n    alt: \"Color Swatch #a1779d on #2f4853 with contrast ratio 2.591 and suggestion #aa84a6\"\n  }), mdx(\"p\", null, `We hope this will make it easier to communicate color changes across your team or in your audits. Additionally, the file name contains a textual description of the image that you can use as alt text when distributing the image. This was another great request by Eric.`), mdx(\"h2\", {\n    \"id\": \"screenshot-updates\"\n  }, `Screenshot updates`), mdx(\"p\", null, `The screenshotting functionality has received a number of quality-of-life improvements.`), mdx(\"h3\", {\n    \"id\": \"dimensions-are-back-in-the-overview-screenshot\"\n  }, `Dimensions are back in the overview screenshot`), mdx(\"p\", null, `When creating the new fast overview screenshot we left out the pane dimensions, showing just the title for each pane. We've re-activated them:`), mdx(\"img\", {\n    src: overview,\n    className: \"imgshadow\",\n    alt: \"Three pane overview with the dimensions shown.\"\n  }), mdx(\"h3\", {\n    \"id\": \"path-tool\"\n  }, `Path tool`), mdx(\"p\", null, `The screenshot editor (powered by `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://pqina.nl/pintura/?aff=xLXrx&ref=polypane\"\n  }), `Pintura`), `) has been updated to the latest version and now includes a new \"path\" tool that you can use to draw polygons on top of your image.`), mdx(\"video\", {\n    src: path,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"set-preferred-action-for-screenshots\"\n  }, `Set preferred action for screenshots`), mdx(\"img\", {\n    src: screenshotoptions,\n    alt: \"Options menu with the screenshot part highlighred.\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem\",\n      \"cssFloat\": \"right\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `Instead of always opening the screenshot editor, you can now select what you want to do when creating a screenshot: open the editor, save it directly to disk, or copy it to clipboard.`), mdx(\"p\", null, `Depending on what you make screenshots for this really speeds up your workflow. Find the option in the settings menu.`), mdx(\"h3\", {\n    \"id\": \"new-ui-for-selecting-element-screenshots\"\n  }, `New UI for selecting Element screenshots.`), mdx(\"p\", null, `When selecting elements on a page for the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/making-screenshots/#element-screenshots\"\n  }), `Element Screenshot`), ` (or `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/snippets/\"\n  }), `Live CSS`), ` panel) we now dim the rest of the page, rather than draw a blue line around an element. This makes it easier to see which element you're selecting.`), mdx(\"video\", {\n    src: inspect,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"elements-inspector\"\n  }, `Elements inspector`), mdx(\"p\", null, `We're continuing to refine the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Elements inspector`), `, which lets you inspect and edit elements in all panes at the same time. This time, we've updated the box model visuals, made it easier to get element information and fixed some annoying bugs.`), mdx(\"h3\", {\n    \"id\": \"updated-box-model\"\n  }, `Updated box model`), mdx(\"p\", null, `This came about when `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://meijer.ws/\"\n  }), `Stephan`), ` asked if the box model visualization in browsers could be more useful and show more information about the display of the element. That's exactly the type of stuff we want to do with Polypane, so we quickly came up with a way to show the border-radius and if an element had a box shadow inside the box model:`), mdx(\"img\", {\n    src: boxmodel,\n    className: \"imgshadow\",\n    alt: \"Box model showing border radius\"\n  }), mdx(\"p\", null, `Each border with a radius has a thickened line, and if all border radii are the same their value is shown in the top right, otherwise each border radius is shown in the corner. Lastly, if an element has an explicit overflow, like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `auto`), ` or `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `scroll`), `, that's shown in the bottom right:`), mdx(\"img\", {\n    src: boxmodel2,\n    className: \"imgshadow\",\n    alt: \"Box model showing overflow info\"\n  }), mdx(\"p\", null, `All three of these additions help you get a better idea of what the element looks like. Thanks Stephan! And if you have ideas on how to make the box model visualization more useful, let us now!`), mdx(\"h3\", {\n    \"id\": \"click-to-copy-font-info-and-dimensions\"\n  }, `Click to copy font info and dimensions`), mdx(\"p\", null, `To quickly copy the font declaration and the dimensions of an element you can now click their display in the element panel:`), mdx(\"img\", {\n    src: eleminfo,\n    className: \"imgshadow\",\n    alt: \"Elements panel highlighting the font and dimensions.\"\n  }), mdx(\"h3\", {\n    \"id\": \"new-color-contrast-indicator\"\n  }, `New color contrast indicator`), mdx(\"p\", null, `The color contrast indicator in the elements panel now matches the one used elsewhere, using the \"AA\" and \"AAA\" markers instead of checkmarks. You can hover the marker to get the specific ratio and a preview of the colors:`), mdx(\"img\", {\n    src: elempanelcolor,\n    className: \"imgshadow\",\n    alt: \"Element panel with a color contrast tooltip showing a preview.\"\n  }), mdx(\"h3\", {\n    \"id\": \"noteworthy-bugfixes\"\n  }, `Noteworthy bugfixes`), mdx(\"p\", null, `Polypane 11 also includes some noteworthy fixes to the way style editing works. We no longer show suggestions as soon as you focus an element, but only after you begin typing or press the arrow keys. This also fixed another issue, which is that sometimes you had to tab twice to go to the next item when adding a style rule. You could also get into a situation where a disabled and subsequently deleted style would still be listed. Those are now correctly removed.`), mdx(\"p\", null, `We've also fixed a bug related to how we parse CSS selectors that use `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `:is()`), ` and friends containing other pseudo-classes like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `:hover`), `.`), mdx(\"p\", null, `Though the elements panel and Polypane worked without a problem, it did cause a console message. If you used something like Redbox or Next.js, they throw a big red error box on top of your site for any console error (even those that don't come from your app). That will no longer happen!`), mdx(\"h2\", {\n    \"id\": \"meta-panel\"\n  }, `Meta panel`), mdx(\"p\", null, `As always, there are subtle (and less subtle) new changes to the way various social media render their social media previews that we've updated, and we added proper GIF handling.`), mdx(\"h3\", {\n    \"id\": \"support-for-gifs\"\n  }, `Support for GIFs`), mdx(\"p\", null, `When implementing \"`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#sniper-links\"\n  }), `sniper links`), `\", the reference article we consulted had a GIF as OG image. After testing we noticed that some social media allowed the animated GIF while others used the first frame of the GIF and disabled the animation. Polypane now accurately shows the way social media previews deal with GIFs.`), mdx(\"h3\", {\n    \"id\": \"updated-slack-twitter-and-telegram-previews\"\n  }, `Updated Slack, Twitter and Telegram previews`), mdx(\"p\", null, `The Slack preview has updated designs for the large and small image variants, Telegram has a new maximum width, and Twitter changed how they deal with information-poor pages that we now follow.`), mdx(\"p\", null, `For Slack Polypane now automatically hides the image when it's larger than 2 megabytes, the default value in Slack:`), mdx(\"img\", {\n    src: slack,\n    className: \"imgshadow\",\n    alt: \"Slack preview with a too-large image\"\n  }), mdx(\"h2\", {\n    \"id\": \"ui-updates\"\n  }, `UI Updates`), mdx(\"p\", null, `We've made improvements to the UI in various places across the application:`), mdx(\"h3\", {\n    \"id\": \"new-iphone-14-devices\"\n  }, `New iPhone 14 devices`), mdx(\"p\", null, `Polypane 11 includes the new iPhone 14 device sizes in our devices list. The difference between the regular and `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `pro`), ` versions are a little weird this time around, which we've written about here: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/thanks-iphone-14-designing-for-device-sizes-is-dead/\"\n  }), `Thanks iPhone 14, designing for device sizes is dead`), `.`), mdx(\"h3\", {\n    \"id\": \"more-info-in-the-element-tooltip\"\n  }, `More info in the element tooltip`), mdx(\"p\", null, `If an element uses a flex or grid layout that's now shown with a small icon in the element tooltip. Additionally, the contrast indicator has a preview just like the Elements panel.`), mdx(\"img\", {\n    src: flexindicator,\n    className: \"imgshadow\",\n    alt: \"Element tooltip showing a flex icon and a contrast preview\"\n  }), mdx(\"p\", null, `For images, the element tooltip now also shows the current src so you can quickly see which of your responsive variants is loaded.`), mdx(\"h3\", {\n    \"id\": \"sniper-links\"\n  }, `Sniper links`), mdx(\"p\", null, `When you request a new licence key from inside the app we now detect if you use one of the popular email providers (like Gmail, Outlook etc) and provide direct links to your inbox, sometimes even filtering your inbox to emails coming from just us (using query parameters). This means you no longer have to manually go to your inbox and search it for emails coming from Polypane.`), mdx(\"img\", {\n    src: sniper,\n    className: \"imgshadow\",\n    alt: \"Polypane license key step showing a sniper link for Gmail.\"\n  }), mdx(\"p\", null, `This technique is called \"Sniper links\" and it really speeds up both the email verification step when you sign up, and the licence request step during the app activation.`), mdx(\"h3\", {\n    \"id\": \"debug-tools-split-into-categories\"\n  }, `Debug tools split into categories`), mdx(\"img\", {\n    src: debug,\n    alt: \"A list of debug tools split into categories.\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem\",\n      \"cssFloat\": \"right\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `While the list of simulators was already split up into different categories, the list of debug tools was just one long list and as we reached 20+ debug tools it started to become a little hard to find things. So the debug tools are now also split into four categories:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Layout`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Accessibility`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Content`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Disable features`)), mdx(\"p\", null, `By splitting it up into categories it should be easier to find a specific debug tool, and hopefully also helps you understand what each one does.`), mdx(\"p\", null, `For an overview of what all debug tools do, head over to our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/debug-tools/\"\n  }), `docs on debug tools`), `.`), mdx(\"h3\", {\n    \"id\": \"context-menu-defaults-to-preferred-devtools\"\n  }, `Context menu defaults to preferred devtools`), mdx(\"p\", null, `Depending on if you have set the Polypane devtools or the Chromium devtools as the default, the first \"Inspect element\" item in the context menu will now use your preferred devtools.`), mdx(\"p\", null, `So whenever you right-click to inspect an element, the first item in the context menu is the one you'll want to use.`), mdx(\"h3\", {\n    \"id\": \"picking-a-starting-layout\"\n  }, `Picking a starting layout`), mdx(\"p\", null, `When activating a new copy of Polypane, rather than letting you choose between three responsive panes, or five mobile panes, the last step in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/setup/\"\n  }), `activation flow`), ` now lets you choose between two starter layouts: the responsive design (horizontal) layout and a more traditional browser layout (with the full layout and sidebar open):`), mdx(\"img\", {\n    src: setup3,\n    alt: \"Polypane setup step where you can choose between two starter layours.\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `Starting with three panes can be a lot when you just get started with Polypane, so we wanted to make it easy for people to get started with all the tooling that Polypane provides, even if they don't need multiple viewports just yet.`), mdx(\"h2\", {\n    \"id\": \"updated-chromium-to-106\"\n  }, `Updated Chromium to 106`), mdx(\"p\", null, `Chromium has been updated to `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `106.0.5249.61`), `, and ships with a number of experimental features turned on by default, like support for the page transition API and jpegXL.`), mdx(\"p\", null, `Head over to our docs on `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/experimental-chromium-features/\"\n  }), `Experimental Chromium Features`), ` for a full overview of the available APIs. If you'd like to see one activated, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support/\"\n  }), `Let us know`), `.`), mdx(\"h2\", {\n    \"id\": \"get-polypane-11\"\n  }, `Get Polypane 11`), mdx(\"p\", null, `Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.`), mdx(\"p\", null, `Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` to download the latest version!`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Don't have Polypane yet? There is a 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://dashboard.polypane.app/register\"\n  }), `Try it for free`), `.`)), mdx(\"h2\", {\n    \"id\": \"polypane-11-changelog\"\n  }, `Polypane 11 Changelog`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `New Features`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` JSON viewer`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` iPhone 14 devices`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Save color swatch as image (Thanks Eric!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Duplicate tab feature`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Photophobia simulator`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Role visualization debug tool`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Aria visualization debug tool (Thanks ElevenWays!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Copy link, copy link as markdown and open in browse panel support for tabs`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Copy link as markdown context option for all links`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Chromium 106.0.5249.61`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Sniper links and layout picker in app setup`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improvements`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Achromatopsia simulator is now more true to life`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Debug tools are now split into categories`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Target size debug tool now supports wcag2.2, Apple HIG and Android guidelines (Thanks Ronny!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Target size debug tool no longer checks inline links per specification`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Text size debug tool: Clicking a suggestion applies it`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color Contrast debug tool: now supports AAA checking`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color contrast debug tool: improved logic for solid text in elements with transparency`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color contrast debug tool: clicking a suggestion applies it`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: focus outline highlights the currently focused element`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: images now also show input`, `[type=image]`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: focus order overlay has updated colors`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: image overview warns for alt text of 200+ characters`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: image overview warns for alt text containing emojis`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Live CSS and source panels now use platform specific monospace font (Thanks Ivan!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Live CSS Panel now has better indenting and formatting support`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Live CSS Panel font size now follows the rest of the UI`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Node tooltips now show icon for flex and grid boxes.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Node tooltips now show current src`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: a11y tab shows auto-suggestions for role attribute`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: clicking font or dimensions now copies them to clipboard`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: supports nested pseudo-classes like :is(:hover)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: box model now shows border radius, box shadow and overflow indicators (Thanks Stephan!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: tree-view has a max-width and height to prevent it from pushing away the rest`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: color contrast now shows a preview and \"AA\" or \"AAA\" instead of check marks`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: Proper handling of GIFs for all social media previews`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: Slack card now supports unexpanded images, and updated image views`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: Telegram card preview`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: Twitter card preview`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Enable experimental JPEGXL support`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated Google Fonts database`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Trial period now has a visible button in the header to go back to tutorial`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` New handling of past due and paused subscriptions`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Add spacing between pane header icons`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated screenshot editor`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Option to set default action for screenshots`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Overview screenshot now shows dimensions above each pane again`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` New design for element screenshot and live CSS element selection`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Improve logic for disabling cache and cache clearing to be more effective regardless of server settings`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` When right-clicking input fields on mac, a context-menu option for the emoji picker is visible`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Context menu \"inspect element\" defaults to the currently selected one being the first`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Less calls to CrUX data when not available`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color picker now lets you check against non-text contrast (Thanks Eric!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` New shortcut to open and focus console: `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `cmd/ctrl shift j`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Shortcut to open settings (Thanks Roel!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Emulation: There is a new \"auto\" option for color scheme emulation that follows the app settings`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Fixes`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Random resize all panes functionality works again`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: Prevent showing suggestions before typing or using the arrow keys`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: sometimes you needed to press tab twice in the style editor`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: emptying a text node in the navigator prevented it from being updated again`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: Disabled and removed CSS styles were still visible in the elements panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: commas in pseudo-selectors no longer cause newlines in selector`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent reading out node env on load`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Choice of device or viewport sizing wasn't preserved on device change`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Overview screenshots heights now better fit the visible panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Make screenshot button in full mode no longer falls behind devtools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` 0.01 difference between color contrast debug tool and color picker`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue where node tooltip rendering wasn't properly applied`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Alignment of add icon in cookie overview`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Outline panel: issue where link list would be empty`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue where Polypane's scripts would interfere with core-js on a website (Thanks Oleg!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent errors when calculating the specificity for nested compound CSS selectors`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Last open tab should not have a visible close button`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Improve loading of .prettierrc.js variant`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue where context menu on tabs on Windows weren't handled correctly (Thanks Reinhard!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Panes no longer shrunk to fit (Thanks Andrew!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Tooltips in detached panel not rendering correctly`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Meta panel: Incorrect missing favicon message if a site has just a favicon.ico`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Incorrect synced hover states for Tailwind CSS in dark mode (Thanks Austin!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Node tooltip not being visible for some sticky elements`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":13,"tableOfContents":{"items":[{"url":"#json-viewer","title":"JSON Viewer"},{"url":"#accessibility-features","title":"Accessibility features","items":[{"url":"#new-visualization-debug-tools","title":"New visualization debug tools"},{"url":"#updated-achromatopsia-simulator-and-new-photophobia-simulator","title":"Updated achromatopsia simulator and new Photophobia simulator"},{"url":"#focused-element-in-focus-order-outline","title":"Focused element in focus order outline"},{"url":"#target-size-debug-tool-wcag-22-support","title":"Target size debug tool WCAG 2.2 support"},{"url":"#contrast-checker-debug-tool","title":"Contrast Checker debug tool","items":[{"url":"#getting-it-001-more-correct","title":"Getting it 0.01 more correct"},{"url":"#choosing-between-aa-and-aaa","title":"Choosing between AA and AAA"},{"url":"#click-to-apply","title":"Click to apply"}]},{"url":"#detect-small-text-debug-tool","title":"Detect small text debug tool"}]},{"url":"#color-picker-updates","title":"Color picker updates","items":[{"url":"#test-non-text-contrast","title":"Test non-text contrast"},{"url":"#visible-suggested-color","title":"Visible suggested color"},{"url":"#export-swatches","title":"Export swatches"}]},{"url":"#screenshot-updates","title":"Screenshot updates","items":[{"url":"#dimensions-are-back-in-the-overview-screenshot","title":"Dimensions are back in the overview screenshot"},{"url":"#path-tool","title":"Path tool"},{"url":"#set-preferred-action-for-screenshots","title":"Set preferred action for screenshots"},{"url":"#new-ui-for-selecting-element-screenshots","title":"New UI for selecting Element screenshots."}]},{"url":"#elements-inspector","title":"Elements inspector","items":[{"url":"#updated-box-model","title":"Updated box model"},{"url":"#click-to-copy-font-info-and-dimensions","title":"Click to copy font info and dimensions"},{"url":"#new-color-contrast-indicator","title":"New color contrast indicator"},{"url":"#noteworthy-bugfixes","title":"Noteworthy bugfixes"}]},{"url":"#meta-panel","title":"Meta panel","items":[{"url":"#support-for-gifs","title":"Support for GIFs"},{"url":"#updated-slack-twitter-and-telegram-previews","title":"Updated Slack, Twitter and Telegram previews"}]},{"url":"#ui-updates","title":"UI Updates","items":[{"url":"#new-iphone-14-devices","title":"New iPhone 14 devices"},{"url":"#more-info-in-the-element-tooltip","title":"More info in the element tooltip"},{"url":"#sniper-links","title":"Sniper links"},{"url":"#debug-tools-split-into-categories","title":"Debug tools split into categories"},{"url":"#context-menu-defaults-to-preferred-devtools","title":"Context menu defaults to preferred devtools"},{"url":"#picking-a-starting-layout","title":"Picking a starting layout"}]},{"url":"#updated-chromium-to-106","title":"Updated Chromium to 106"},{"url":"#get-polypane-11","title":"Get Polypane 11"},{"url":"#polypane-11-changelog","title":"Polypane 11 Changelog"}]},"excerpt":"Polypane 11 now renders JSON files in a completely new viewer, adds a ton of new accessibility testing features and improves upon existing ones, updates the…","frontmatter":{"title":"Polypane 11: JSON viewer, new accessibility tools, Chromium 106, iPhone 14 devices and screenshot updates","cover":"/img/mail/icon.svg","date":"2022-10-04","updated":null},"fields":{"slug":"/blog/polypane-11-json-viewer-new-accessibility-tools-chromium-106-iphone-14-devices-and-screenshot-updates/","date":"2022-10-03T22:00:00.000Z","ogFileName":"polypane-11-json-viewer-new-accessibility-tools-chromium-106-i-phone-14-devices-and-screenshot-updates"}}},"pageContext":{"slug":"/blog/polypane-11-json-viewer-new-accessibility-tools-chromium-106-iphone-14-devices-and-screenshot-updates/"}},"staticQueryHashes":["4164364741","425175329"]}