Polypane. Browser for web devs

Polypane. Browser for web devs

@polypane.app

See every screen, device & user preference, while you build. Chromium-based workspace for building great websites. Built for web developers who care | Try out for free at https://polypane.app | By @kilianvalkhof.com

2.1K followers2.1K following316 posts

Pinned

Polypane 31 is here and ...it has a boatload of cool new features! 🖼️ Canvas layout with free-form placement ↔️ Flex item inspector 🎯 Navigate to custom properties ...and back! 🔍 Per-pane zoom settings 🏎️ Page performance monitoring 📱new iPhone 18 and duo presets polypane.app/blog/polypan...

polypane.appPolypane 31: Canvas layout, elements panel improvements and Chromium 155 | PolypaneThis release has a new canvas layout that lets you freely arrange panes on an infinite canvas. The elements panel now lets you filter styles, search the DOM…

Things are happening in browser land! Chromium 156 shipped support for CSS random() so you can try all the demos below without needing experimental features turned on. Firefox 148 has it behind a feature flag you can enable, and the demos look fantastic there too. polypane.app/blog/experim...

polypane.appExperimenting with the new pure CSS random() function | PolypaneCSS is getting a random() function that lets you set properties with a random value, opening up a ton of interesting creative possibilities. In this article…

Polypane. Browser for web devs reposted

Yet another great idea! I appreciate knowing what metadata is now obsolete. Modern insight tools focus on jacking up scores, but these kind of insights matter too because they help retain meaning an appreciation for our code. Polypane’s meta panel is a lovely place full of insight ✨

Every long-lived website ends up with cobwebs. 🕸️ Things that used to do something, but no longer do. Like httpequiv for IE8-10, your fb:pages id or the Windows 8 tile tags. None of them do anything anymore. But which ones can you safely get rid of? The next version of Polypane will tell you!

Every long-lived website ends up with cobwebs. 🕸️ Things that used to do something, but no longer do. Like httpequiv for IE8-10, your fb:pages id or the Windows 8 tile tags. None of them do anything anymore. But which ones can you safely get rid of? The next version of Polypane will tell you!

We've updated our color contrast checker at colorcontrast.app. 1. It now gives suggested colors for APCA failures too 2. You can use color names along with regular color notations 3. It comes with a WebMCP tool, if you're into that. The contrast checker on our own site is updated too.

colorcontrast.appColor Contrast Checker for WCAG & APCA. Analyse, preview and get color suggestions.Check the contrast between colors using WCAG or APCA and get suggestions for better colors in hex, RGB, HSL or HWB.

…okay apparently I should’ve added this way earlier, you all greatly prefer this over the other methods 😅 Just a reminder that I am very responsive to any user request you might have.

You can now create a new Polypane account by signing in with Google, alongside the existing GitHub and username/password registration options.

Polypane. Browser for web devs reposted

If you're an accessibility auditor or implementer, Polypane 31 has a massive time-saving feature for you! With per-pane zoom settings, you can now check 100% page zoom right alongside 200% and 400% zooms, letting you check WCAG 1.4.4 and 1.4.10 in one fell swoop, with easy comparison back to 100%.

Polypane. Browser for web devs reposted

Seriously, if you're not using Polypane for development, you're missing out. Highly recommended.

Polypane 31 is here and ...it has a boatload of cool new features! 🖼️ Canvas layout with free-form placement ↔️ Flex item inspector 🎯 Navigate to custom properties ...and back! 🔍 Per-pane zoom settings 🏎️ Page performance monitoring 📱new iPhone 18 and duo presets polypane.app/blog/polypan...

Polypane. Browser for web devs reposted

Working on an infinite canvas is just so, so smooth.

Polypane 31 is here and ...it has a boatload of cool new features! 🖼️ Canvas layout with free-form placement ↔️ Flex item inspector 🎯 Navigate to custom properties ...and back! 🔍 Per-pane zoom settings 🏎️ Page performance monitoring 📱new iPhone 18 and duo presets polypane.app/blog/polypan...

Polypane. Browser for web devs reposted

The root scroller in your browser (the one scrolling the viewport) is special, but it's really easy to accidentally create a new scroll container. Learn how those nested scroll containers break scroll restoration, mobile browser UI and more, plus how to avoid them.

polypane.appThe root scroller and how not to lose it | PolypaneEvery page has one main scroll container that scrolls the page itself: the root scroll container, or root scroller for short. Because it scrolls the entire page…

The root scroller in your browser (the one scrolling the viewport) is special, but it's really easy to accidentally create a new scroll container. Learn how those nested scroll containers break scroll restoration, mobile browser UI and more, plus how to avoid them.

polypane.appThe root scroller and how not to lose it | PolypaneEvery page has one main scroll container that scrolls the page itself: the root scroll container, or root scroller for short. Because it scrolls the entire page…

Polypane. Browser for web devs reposted

I've been debugging sites using different scroll containers at different viewports widths and thinking of ways to make it clearer what's happening, rather than people thinking the sync in Polypane doesn't work. The first change is in: highlighting the scroll badge of whatever is being scrolled.

Polypane. Browser for web devs reposted

There's apparently a thing about Cloudflare's tunnel... So a reminder that @polypane.app has that feature built-in. Single click, network or public URL, short-lived unique non-indexed URL. Everything is synced to all devices, all console messages are sent back to the console. polypane.app/portal/

polypane.appPolypane Portal | PolypanePolypane Portal shares your local development environment with anyone, anywhere, on any device while keeping everything in sync.

We love it!

Sajid Anwar@sajidanwar.com

The latest @firefoxnightly.bsky.social has CSS random() support enabled by default, please give it a try! I quite like the demos from @polypane.app here: polypane.app/blog/experim...

live now!

Kilian Valkhof@kilianvalkhof.com

Playing around with something I barely understand: displacement filters in SVG! The backdrop in the @polypane.app header now has defraction and chromatic abberation, an upgrade from the simple blur + saturate it had. Chromium only, with the previous style as fallback for other browsers.

Polypane. Browser for web devs reposted

Replying to @polypane.app

Our source panel can now toggle between the rendered and the server-sent HTML! Both are automatically formatted, both are validated. If you're not sure if an HTML issue starts on the server or in your JS, that's now super easy to find.

if you missed it last friday, we have a new version out! 🥳

Polypane 30.1 is here! Yep, already. We landed a few features that were so cool we just couldn't wait. This one's not as massive as Polypane 30, so find the highlights below! polypane.app/blog/polypan...

Polypane. Browser for web devs reposted

Replying to @polypane.app

Our elements panel got an exciting addition. Hover over the specificity of a selector to see each part of it highlighted, so you know exactly what's responsible. Intelligent enough to drill down into nested `:is()` selectors, intelligent enough to drill up into nested selectors.

Updated placeholdifier overlay We switched out the blocking of text for replacing it with scribbles, to make it even easier to focus on the design above the content. This, and dozens of other improvements and fixes are now available in Polypane 30.1!

Our elements panel got an exciting addition. Hover over the specificity of a selector to see each part of it highlighted, so you know exactly what's responsible. Intelligent enough to drill down into nested `:is()` selectors, intelligent enough to drill up into nested selectors.

Our source panel can now toggle between the rendered and the server-sent HTML! Both are automatically formatted, both are validated. If you're not sure if an HTML issue starts on the server or in your JS, that's now super easy to find.

Polypane. Browser for web devs reposted

Well this is just cool! It even has the invisible cone between an item and its submenu so it doesn't close as you move diagonally. Video made in @polypane.app BTW :)

Patrick Brosset@patrickbrosset.com

Wow, I had no idea. You can already test Open-UI's proposed native menu elements in Chromium (enable "Experimental Web Platform features" flag in about://flags first). Full native menu bar support with just HTML code! Read the explainer: open-ui.org/components/m... Demo: jsbin.com/qorupiwivu/1...

Polypane. Browser for web devs reposted

Polypane. Browser for web devs reposted

Polypane 30 is out! 🤩 🛝 Playgrounds: go from .html to multi-device testing in 3 clicks 🔤 text-scale emulation 📹 recording w/ sound 🌐 Network panel filtering & sorting ✨ Sidepanel browser extensions 🔗 Standard.site validation & previews 🌍 Chromium 152 ⛰️ MORE STILL polypane.app/blog/polypan...

polypane.appPolypane 30: Playgrounds, Side Panel extension API, updated video recording and Chromium 152 | PolypanePolypane 30 introduces Playgrounds so you can open directories as real HTTPS URLs in seconds, adds support for the Side Panel extension API, brings major…

Polypane. Browser for web devs reposted

Woah. Huge Polypane update.

Polypane 30 is out! 🤩 🛝 Playgrounds: go from .html to multi-device testing in 3 clicks 🔤 text-scale emulation 📹 recording w/ sound 🌐 Network panel filtering & sorting ✨ Sidepanel browser extensions 🔗 Standard.site validation & previews 🌍 Chromium 152 ⛰️ MORE STILL polypane.app/blog/polypan...

Polypane. Browser for web devs reposted

The best browser for developers is made by @kilianvalkhof.com.

Polypane 30 is out! 🤩 🛝 Playgrounds: go from .html to multi-device testing in 3 clicks 🔤 text-scale emulation 📹 recording w/ sound 🌐 Network panel filtering & sorting ✨ Sidepanel browser extensions 🔗 Standard.site validation & previews 🌍 Chromium 152 ⛰️ MORE STILL polypane.app/blog/polypan...

Polypane. Browser for web devs reposted

Polypane v30 ✨ Network panel got more stable and insightful — see requests alone or grouped by origins, both very useful depending on your optimization angle. Emulating svh overlay is now on by default — always see what’s ACTUALLY above the fold on mobile. Fast startup 💨 Check out the changelog.

Polypane 30 is out! 🤩 🛝 Playgrounds: go from .html to multi-device testing in 3 clicks 🔤 text-scale emulation 📹 recording w/ sound 🌐 Network panel filtering & sorting ✨ Sidepanel browser extensions 🔗 Standard.site validation & previews 🌍 Chromium 152 ⛰️ MORE STILL polypane.app/blog/polypan...

Polypane 30 is out! 🤩 🛝 Playgrounds: go from .html to multi-device testing in 3 clicks 🔤 text-scale emulation 📹 recording w/ sound 🌐 Network panel filtering & sorting ✨ Sidepanel browser extensions 🔗 Standard.site validation & previews 🌍 Chromium 152 ⛰️ MORE STILL polypane.app/blog/polypan...

polypane.appPolypane 30: Playgrounds, Side Panel extension API, updated video recording and Chromium 152 | PolypanePolypane 30 introduces Playgrounds so you can open directories as real HTTPS URLs in seconds, adds support for the Side Panel extension API, brings major…

Polypane. Browser for web devs reposted