Reworking presentations I give into articles with interactive demos is so much fun. All the hard parts of thinking about what to say, how and in which order is already done, and now I just get to come up with cool little widgets.
Yes: the api does’t do any calculations for you. It just knows how to format what’s given.
We make good use of the Intl API in our app and on our website, so it was high time we did a Polypane-style deep-dive on it.
Check out our new article, play around with the interactive examples or hear Kilian yap about it on video. Whatever works for you!
polypane.app/blog/the-int...
Tool: HTML Form Checker, by @polypane.app:
https://polypane.app/form-inspector/
#tools #exploration #auditing #debugging #html
I sometimes get asked to implement a screen reader emulator into @polypane.app and while that sounds cool, it would cause people to focus on and test the wrong things.
Thanks to @yatil.net I now have a good resource to point to when they ask why: yatil.net/blog/screen-...
The specification smells a little funny, but we've already implemented emulation for it.
If you're looking to up your CSS layout game, Ahmad is definitely the person to go to, and the layout maestro looks great. Get it before tomorrow!
If you find yourself needing to pitch Polypane to your colleagues, PM or CTO, we made a handy list of common questions they might have and how to address them!
polypane.app/docs/pitchin...
While you're here, wanna learn more about @starting-style?
Check out our blog post, which also goes into why Polypane's elements panel shows these styles and other browsers do not.
polypane.app/blog/how-to-...
Part of the Polypane Elements UI. The style tab is selected listing ":hover" and ":focus" lines with switches. The hover switch is turned on.
Part of the Polypane Elements panel. There is a CSS style wrapped in @starting-style, and a turned-on switch is visible next to it.
Polypane's elements panel shows editable pseudo styles as well as @starting-style for any element. This is already extremely useful, and it's unique among browser devtools.
In the next release, you can toggle their state right from the styles💡
Excellent idea by @yatil.social, can't wait to ship!
I'm already so used to the hold-alt/option-to-inspect tool that I REPEATEDLY try to use it in other browsers despite only having this ability for a few weeks with @polypane.app! 😂🤩
It's ready.
Flex and Grid overlays on inspection will ship in the next version.
bsky.app/profile/kili...
By the way, there are *tons* of other features that Polypane has that devs asked for in other devtools. Here's an article from 2024 listing developer requests that Polypane already provided.
Things have only gotten better since then.
polypane.app/blog/the-dev...
Polypane is really cool
Finding the containing block is *super easy* in @Polypane.app, which literally just lists it for each element in the Elements panel.
Along with the offsetParent and the stacking context parent, two other important concepts that often confuse devs
Way too many developers are sleeping on Polypane ;)
a complex flex-wrapped layout with dozens of items. The entire element is highlighted with all the spacing between elements rendered with a flex-gap visualisation.
One thing that a lot of you have reported feels missing in Polypane peek (our awesome hold-alt/option-to-inspect tool polypane.app/docs/polypan... ) are grid and flexbox layout visualisations.
Building it is ...complex, but luckily our own site has plenty of stress tests like the one below!
We just released Polypane 28.0.2 with many bugfixes, big performance improvements throughout the app, 25% smaller installer size, new warnings in the outline and meta panels and a fix for macOS autoupdate. 🥳
Except the fix for macOS autoupdate didn't work. 😬 so we also released 28.0.3 to fix that 😎
AI Business Excellence Awards Most Innovative Web Developer Browser Polypane
We just got recognised as the most innovative web developer browser in the Business Excellence Awards by Acquisition International magazine! 😎
Not enough people know this! Sharing your localhost to a public URL takes just two clicks in @polypane.app.
👨🍳💋 for testing on all your real-world devices. Interactions are synced, logging is sent to Polypane.
😍 for letting others see your WIPs. Share your stuff w/o deploying
polypane.app/portal/
A dialog titled "Code faster with AI-powered suggestions". There is a block saying "Things to consider", and within it highlighted is that your code "may be seen by human reviewers"
If you turn on "AI-suggestions" (that are so bad they preemptively warn you it's probably wrong and also maybe don't run it), Google will slop up your console history and let human reviewers see it.
Use a browser where the dev can't be bothered to ex-filtrate your data. Try @polypane.app.
Not enough people know this! Sharing your localhost to a public URL takes just two clicks in @polypane.app.
👨🍳💋 for testing on all your real-world devices. Interactions are synced, logging is sent to Polypane.
😍 for letting others see your WIPs. Share your stuff w/o deploying
polypane.app/portal/
(I did log an issue, maybe there's a workaround)
There's not really something we can do to fix this. The CSS for the popup is...not good. It uses absolute positioning everywhere, that means when Electron gets the intrinsic ("preferred") height/width it's much smaller than the content.
I guess the Chrome UI team compensates for poor behavior here.
Not really. You can inspect the popup when launching Polypane with a remote debugging port. There are a ton of different small things that can cause issues within extensions. I’ll put it on the list to check out and see if we can do anything about it
Kilian is in Montreal, Canada all week for Confoo.
If you’re at Confoo: come say hi, Kilian brought stickers. If you’re not, you really should be!
If you want a Polypane demo at your office this week, reach out!
A man and a woman viewing two laptops. We see the covers of the laptops and one of them is covered in stickers by Polypane, Fronteers, NL Design System and more.
Accessibility researcher (and Polypane user) @200ok.nl was on national TV just now to talk about the (lack of) accessibility of online chatbot and …what’s that on his laptop? 👀
How to Debug the “@ starting-style” At-Rule in Polypane, by @polypane.app:
polypane.app/blog/how-to-debug-the-st...
#howtos #debugging #css #animations #polypane
Direct, actionable feedback and insights while you develop is exactly our goal with Polypane 🤩
...Seems to be working again. Pfew 😮💨
direct installs and updates work again, for Homebrew you'll need to wait until they have updated SHAs, which should be in ~3hr or so.