HN user

kilian

5,215 karma

Creator of https://polypane.app, The browser for ambitious developers.

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 ]

Posts157
Comments543
View on HN
polypane.app 28d ago

Experimenting with Random() in CSS

kilian
23pts10
piccalil.li 8mo ago

Programming principles for self taught front-end developers

kilian
2pts0
polypane.app 8mo ago

Using Chrome-devtools-MCP with Polypane

kilian
1pts0
polypane.app 1y ago

The WebAIM Million 2025: Solving the most common issues

kilian
2pts0
polypane.app 1y ago

Decoding CSS Selectors:has(:not) vs:not(:has)

kilian
1pts0
kilianvalkhof.com 2y ago

The problem with new URL(), and how URL.parse() fixes that

kilian
3pts1
www.bbc.com 2y ago

Mona: Australian art museum sued over women's-only exhibit

kilian
11pts10
polypane.app 2y ago

Experimental Chromium Web Platform Features

kilian
1pts0
polypane.app 2y ago

Where to put text so it doesn't overlap in the new X (Twitter) preview

kilian
1pts0
polypane.app 2y ago

Using the Intl Segmenter API

kilian
3pts0
polypane.app 3y ago

Offset parent and stacking context: positioning elements in all three dimensions

kilian
4pts0
kilianvalkhof.com 3y ago

The Gotchas of CSS Nesting

kilian
2pts0
kilianvalkhof.com 3y ago

I no longer understand prefers-contrast

kilian
3pts0
polypane.app 3y ago

Polypane 12: introducing the Command bar

kilian
9pts0
kilianvalkhof.com 3y ago

When going somewhere does a thing: on links and buttons

kilian
1pts0
kilianvalkhof.com 3y ago

On better browsers: arbitrary media queries and browser UIs

kilian
1pts0
polypane.app 4y ago

Polypane 9: Screenshot editor, structured data support and new debug tools

kilian
1pts0
polypane.app 4y ago

Forced Colors Explained

kilian
16pts7
polypane.app 4y ago

Forced colors explained

kilian
53pts2
polypane.app 4y ago

Always open localhost in your development browser

kilian
5pts0
polypane.app 4y ago

The EyeDropper API: Pick colors from anywhere on your screen

kilian
2pts0
kilianvalkhof.com 5y ago

Detecting media query support in CSS and JavaScript

kilian
1pts0
fixa11y.com 5y ago

Show HN: Fix contrast, a free browser extension that fixes text contrast issues

kilian
23pts11
polypane.app 5y ago

Faking container queries with CSS Grid

kilian
1pts0
polypane.app 5y ago

Creating websites with prefers-reduced-data

kilian
20pts1
kilianvalkhof.com 5y ago

I want my own media queries in browsers

kilian
1pts0
polypane.app 5y ago

Beautiful CSS 3D Transforms

kilian
8pts0
kilianvalkhof.com 5y ago

Supercharging <input type=number>

kilian
1pts0
www.heartinternet.uk 6y ago

Beyond screen sizes: responsive design in 2020

kilian
2pts0
kilianvalkhof.com 6y ago

For many, accessibility is an unknown unknown

kilian
4pts0

The point isn't showing what they look like, it's that the result is randomized. Screenshots aren't, so that kind of defeats the purpose.

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.

The wallet app UI is the peak of Apple's 'single 20y/o in sf' design.

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.

This is strongly in tin-foil hat territory but: streaming video costs a lot more money than streaming some JSON to populate a UI. Every minute you spent browsing the catalogue over playing a video is probably a significant costs saving for Netflix.

This reasoning misses a very large portion of Polypane, which is that you use it while developing, not just testing. It's a replacement for your time in Chrome/Firefox/Safari, not your time testing across devices (real or through online tooling like Browserstack).

It does however minimise that device testing time. So it all depends on how valuable that time is for you.

Sure. Chromium is an evergreen browser, which means it's continuously patched and updated in the background. Getting a pinned Chromium version takes quite a lot of work, and really only happens in very specific, controlled environments.

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.

It just seems insincere for you to advertise browser features that are built in as features of your app specifically

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?

I don’t see how you can come to that conclusion with even a superficial reading of the homepage, unless you count ‘shows web pages’ as ‘almost all features’.

And even then the homepage only lists about 30% of what Polypane does.

Those are customers. Just like for example on netlify.com.

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.

Polypane is a chromium-based browser that you install on your own device and use while building applications that lets you develop at different (emulated) devices and screensizes/variation in one overview, with a bunch of development, accessibility and quality tools built right in.

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)

This feels like a lay-up, but here you go :) https://polypane.app/docs/emulation/#emulation-or-simulation

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)

[1] https://polypane.app/docs/portal/

Using Polypane doesn't mean you can skip out on testing other rendering engines. That's such an important point that I even mention it on the homepage!

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.

[1] https://polypane.app/portal/

Happy to answer this. Polypane is a browser. If you don't keep your browser rendering engine up to date, you're opening yourself to a whole host of security issues (not to mention just generally diverging from what your end users use). Keeping that rendering engine up to date means dealing with a slew of potentially breaking changes with each new chromium version.

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.

There's a huge list of things Polypane emulates beyond the screen size.

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.

Years ago I made https://fuckyeahkeming.com/ with the same premise. It had some good ones but after some time it’s just repeats of the same few words/letter combos for the funny ones: li becoming u, cl becoming d.

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.

Very cool. I recently implemented my own accessibility tree visualization [1] Yours is very interesting, getting away from the tree itself to a visualization more focused on grouping discrete units.

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...

That's pretty cool! Get ready to keep these up to date monthly or become obsolete quickly.

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/

[1] https://polypane.app/