The article starts with instructions on how to actually see and interact with the demos (the easiest is to use https://polypane.app ), as well as a video showing all the demos from the article running in Polypane.
5,215 karma · joined December 16, 2009
My personal website: https://kilianvalkhof.com I can be found on twitter here: https://twitter.com/kilianvalkhof
Email me at my first name at my domain. :)
[ my public key: https://keybase.io/kilianvalkhof; my proof: https://keybase.io/kilianvalkhof/sigs/Honu9NuMzBbMULL6H9nqtguM73so4wPGxsKlsGFpOJI ]
The article starts with instructions on how to actually see and interact with the demos (the easiest is to use https://polypane.app ), as well as a video showing all the demos from the article running in Polypane.
Personally, I've found that just moving the screen out of the sun (for example by turning it upside-down, or holding my hand in front of it) when refreshing a page is enough to prevent it.
Anyone that has multiple card from the same bank (because, say, you have a personal account and a shared account with your partner) has to do the "pick between the two identical looking top 20px of cards" dance every time they use Wallet to pay for something. It is mind-boggling that the current UI persists.
Needing to fill in the paperwork for a saas is a PITA. Is there anything I could add to the site or elsewhere that would have made that easier for you?
It does however minimise that device testing time. So it all depends on how valuable that time is for you.
If you happen to work in such an environment you have vastly different considerations from the other 99% of developers building websites and apps on the public facing web.
Sorry but I honestly don't understand this line of reasoning. Advertising a product having a feature in no way means claiming other products do not have the same or similar features.
I could list dozens of things not in Firefox, Chrome or any other browser that Polypane has (and in fact, you list off a few that definitely aren't in Firefox. ) but even so, listing the features a specific product has is the whole point of a marketing website.
Do you also expect Apple to list HP and Acer laptop alongside their Macbooks because those also have screens and keyboards, or otherwise it would be insincere they advertise (on their own marketing website) the screen of a Macbook?
And even then the homepage only lists about 30% of what Polypane does.
At least the icons are right!
I had a title stating that for the longest time, then I noticed nearly all other landing pages simply have it without title and just a clean list of logos, so I changed it to that as well.
Browserstack is an online device testing tool where you check if your site works on different real devices one-by-one. That is to say, they don't really compete: if you don't have real devices to test with then Browserstack is an excellent option.
What users mostly find is that by using Polypane (fast, local) they have far less use of Browserstack (slow, online) and the entire process speeds up. There will always be a need for real device testing.
There's no gen AI integrations, and I don't have any planned. You can happily use Claude or CoPilot in the browse panel though (which is a little browser that lives inside Polypane, so you can browse without losing the context of your project)
Polypane doesn't simulate the specific rendering engine of other browsers, it just pretends to be another browser (which is what emulation is) so you can test that the code you wrote for those browsers (for example, a polyfill) responds well. You'll still need to test in those real browsers to check against their rendering bugs or support gaps. (but something like Polypane portal[1] can make that step much easier)
So yeah, you should be testing (mobile) Safari and Firefox too. Chrome on android has some different APIs compared to Chrome on desktop, but rendering is identical.
When developing your site, you can use Polypane Portal[1] to tunnel your local site to real devices while keeping them fully in sync with what you do in Polypane, so you can scroll, interact, inspect and even edit across real devices from inside Polypane, saving you a ton of time.
So there's two reasons:
1. The only way to do that continuous upkeep of the rendering engine that I have found to be sustainable is with a subscription.
2. I definitely don't want to be responsible for people using years-old versions of Chromium.
For devices:
- user agent
- reported platform
- device pixel ratio
- rendering mode (mobile rendering and desktop rendering respond differently depending on your viewport meta tag)
- default input device
- orientation APIs
Beyond that it can also emulate reading direction, page language, browser locale, user-configured default font-size, different network settings and a whole range of different media queries like color-scheme, reduced-motion reduced-data, reduced-transparency, prefers-contrast, forced-colors (windows high contrast mode) and color gamut. I'll be adding even more device browser-specific emulations later this year.Happy to answer any questions folks have!
Other common issues are text being printed in the wrong font (using default letter shapes but the wrong kerning info), missing spaces (“me at” to “meat”) or poor tracking, which is excess space applied to all letters.
I stopped because it started feeling pedantic rather than funny.
My thinking was to show the entire structure and through that help people focus on a logical flow through the page. Flipping that around and thinking of the tree as a set of discrete blocks, where the cohesion inside each block is more important, is very interesting.
Happy to chat if you want to compare notes!
[1] https://polypane.app/blog/polypane-20-1-the-accessibility-tr...
Some AI companies follow robots.txt (OpenAI and Google, for example) but others ignore it. There's also other limitations around using robots.txt to sole this problem: https://searchengineland.com/robots-txt-new-meta-tag-llm-ai-...
One of the downsides of tools like this is that your URL needs to be available online so if there's an issue, your iteration loop is quite long.
In Polypane [1] I've built social media previews that work with any local URL but also let you overwrite that URL for the social media that display those. I built (and frequently maintain) previews for X/Twitter, Facebook, Slack, LinkedIn, Discord, Mastodon, Discord, Google Search, Bluesky, Mastodon and Threads. For all of those I have the design for their light and dark mode so you really can test everything. It also tells you what's missing and what is incompatible. Check it out: https://polypane.app/social-media-previews/