{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/clever-polypane-debugging-features-im-loving-by-ryan-trimble/","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\": \"Clever Polypane Debugging Features I'm Loving by Ryan Trimble\",\n  \"cover\": \"/blogs/ryan/cover.svg\",\n  \"date\": \"2024-10-31\",\n  \"type\": [\"casestudy\"]\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, `Over on `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://css-tricks.com\"\n  }), `CSS Tricks`), `, Ryan Trimble recently wrote about a feature in Polypane that he just discovered: the different overlays that the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `Outline panel`), ` can show. He writes:`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `\"I’m working on a refresh of my personal website, what I’m calling the HD remaster. Well, I wouldn’t call it a “full” redesign. I’m just cleaning things up, and Polypane is coming in clutch.\"`)), mdx(\"p\", null, `During his `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `HD Remaster`), `, Ryan made extensive use of the various panels in Polypane, like the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/meta-information/\"\n  }), `Meta panel`), ` and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `Outline panel`), `.`), mdx(\"p\", null, `Both of these give you deep insights into the structure of your pages in a way that's otherwise hard to get. Ryan then found the Focus over overlay that visually shows the focus order of elements on the page. He writes:`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `\"These types of seemingly small, but useful features are abundant throughout Polypane.\"`)), mdx(\"img\", {\n    src: polypaneRyan,\n    alt: \"Polypane laptop view with focus order overlay enabled, displays guide lines marking the location of each focusable items\"\n  }), mdx(\"p\", null, `Thanks for sharing this Ryan, we can only agree! `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Check out the full article here: `, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://css-tricks.com/clever-polypane-debugging-features-im-loving/\"\n  }), `Clever Polypane Debugging Features I’m Loving`), `.`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"tableOfContents":{},"excerpt":"Over on  CSS Tricks , Ryan Trimble recently wrote about a feature in Polypane that he just discovered: the different overlays that the  Outline panel  can show…","frontmatter":{"title":"Clever Polypane Debugging Features I'm Loving by Ryan Trimble","cover":"/blogs/ryan/cover.svg","date":"2024-10-31","updated":null},"fields":{"slug":"/blog/clever-polypane-debugging-features-im-loving-by-ryan-trimble/","date":"2024-10-30T23:00:00.000Z","ogFileName":"clever-polypane-debugging-features-im-loving-by-ryan-trimble"}}},"pageContext":{"slug":"/blog/clever-polypane-debugging-features-im-loving-by-ryan-trimble/"}},"staticQueryHashes":["4164364741","425175329"]}