47
Polypane 6.2: HTML validation, robots.txt support, RTL emulation and more
In Polypane 6.2 we focused on improving the app performance and consistency, particularly around updating, pane resizing, tab handling and dark mode.
We still added a fair few new features, including some that many of you have been requesting. Here's everything new in Polypane 6.2:
The source panel in Polypane now automatically validates your HTML for you. A lot of you have been asking for this, and now it's here!
The HTML validation in Polypane is 100% local so you're not uploading your HTML source (potentially with user data!) to an online validator, and we check the generated source (which the source panel also displays) so you can check the HTML generated by frameworks as well.
For any of the issues you can hover over the element to highlight the elements in all panes. The source panel itself will also scroll to the issue in the HTML and highlight it. Clicking the element takes you to the Elements panel so you can fix the issue.
We've been in contact with the folks that built Toybox systems for a while now and a few months ago we set out to create an integration between Toybox Systems and Polypane. Today, we release it!
Toybox System is a bug reporting tool that makes it really easy to take a screenshot of a part of the page and then share a message with your team. The integration in Polypane lets you create screenshots, drop pins and leave comments and inspect everyone else's comments right inside a pane.
We're very excited about this integration! It makes Polypane an even better tool for QA, since you find issues much faster with Polypane, and now report them super fast using Toybox Systems.
This is the first of a few integrations we plan on releasing. If there are other tools you'd like to see integrated into Polypane, let us know!
The Meta panel now shows your site's robots.txt file, ordered by user agent. If you have a robots meta tag, we also show that here so you get the full overview.
Polypane automatically checks if the current page is blocked for each user agent and if you have settings that aren't supported by that user-agent.
As with all other entries in the Meta panel, you can copy each Robots.txt declaration and we'll automatically format it correctly for you.
The social media previews in the Meta panel have always had support for the light and dark themes of different social media (provided they had one, looking at you LinkedIn) but you had to switch the theme of the entire browser to see them. We've now added a toggle to the previews so you don't have to do that anymore.
We've also improved the accuracy of the Twitter, Facebook and Google previews.
Now that Safari 15 is going to support multiple theme colors, Polypane has been updated to show these in a list together with their media value. Clicking the color preview now copies the color.
Lastly, we've improved many of the checks and warnings in the Meta panel. We now warn about canonical urls that dont have the right format, viewports that limit the user, missing alt attributes and incorrect formatting for image URLs.
Most of the web is in English, a language that reads from left-to-right. But there are many languages that you read from right-to-left, like Arabic, Hebrew, Farsi and Urdu. Websites in these languages can be given an RTL (right-to-left) direction that tells the browser to render everything in that reading mode. It flips the text-alignment as well as moves the position of markers and other browser-native things.
For people developing bidirectional websites, switching between LTR and RTL often involved editing the source in devtools, updating a cookie or updating the code elsewhere. With the new RTL emulation in Polypane, doing this takes a single click.
Even if you don't create bidirectional websites, you can also use this to check if your logical properties are configured correctly. Properties like
margin-inline-end will automatically flip from the right-side to the left-side when switching from LTR to RTL rendering.As a result of our work on supporting Web Components we've been working with a few beta testers to built a new system for developers to communicate between panes, the Polypane Message Bus.
With this message bus you can send and handle messages between panes, letting you implement your own syncing logic where Polypane can't, like for canvas-based websites (like games) or web components with a closed root.
The message bus is very lightweight while unlocking a whole new way for developers and QA to test their sites across viewports and emulated devices. We can't wait to see what you'll do with it!
Check out the documentation on the Message Bus for the API specification.
The updating logic in Polypane hasn't been touched in a fair few releases and had bugs that prevented some users from automatically updating. For 6.2 we completely rewrote our updating logic. If you experienced issues updating those should be gone from 6.2 onwards.
Polypane does not touch CSP headers in default mode. Unfortunately that means that with very strict CSP settings, certain Polypane functionality is also blocked from running. If this happens on one of your sites, you can now disable CSP in the Edit menu.
We added new Android devices (based on popularity) and a new UHD (4K) preset. If you're missing a device you want Polypane to emulate, please let us know!
Live reload now automatically ignores dotfolders (it already ignored dotfiles) and will ignore any custom query parameters when hot reloading CSS files. This will cause updates to be more performant and CSS updates in particular to happen faster.
We've greatly expanded the number and type of warnings we give in the outline panel, as well as add more support for outlines created with aria attributes.
For the Landmarks overview, we'll now warn about missing-but-expected element, elements of which we expect just one but see multiple, and when landmarks are nested in other landmarks in an unexpected way.
The Links overview now warns you about empty content or href attributes that point to using links for JS logic.
The Focus order overview incorrectly ignored summary elements, but now reports them in the overview.
For the Image overview we made the first step towards helping you create better alt text. Polypane will now warn you when you use redundant language in your alt text, like "image of...".
Of course after implementing that last feature, we promptly found (and fixed) an image on our own site with exactly that alt text!
We've improved the color contrast checker under the hood, making it more accurate and implementing an updated design that makes it easier to see which element is checked. We also fixed an issue where some sites didn't allow you to copy the suggestion on click.
There's many other Quality-of-life improvements in this release. Interacting with tabs is now more similar to other browsers, the performance of pane resizing has drastically improved, you can right-click a single pane to reload just that pane, we improved the performance of animations across the application and much more.
Check the changelog below for the full list of updates, and of course every new and improved feature has been added to the documentation.
Polypane is available for Windows, Mac (with versions for Intel and M1) and Linux (.deb or AppImage).
Polypane automatically updates on Mac and Windows. Linux users need to download the new version from
the download page. You can find the Mac and Windows versions on that page too.
the download page. You can find the Mac and Windows versions on that page too.
Don't have Polypane yet? There is a 14 day trial available. Try it for free.
New Features
Improvements
Fixes
47