Polypane with Kilian Valkhof

0:00Polypane is a specialized web development browser that simplifies creating and testing modern websites. A key feature is that it provides multiple screen sizes at once, with synchronized scrolling and interactions, so developers can test different layouts and breakpoints simultaneously. Polypane also focuses on accessibility tools, real-time previews, and debugging features. Kilian Valkoff is the founder of Polypane, which develops the Polypane browser. In this episode, he speaks with Josh Goldberg about his career and the creation of his browser. This episode is hosted by Josh Goldberg, an independent full-time open-source developer.

0:37Josh works on projects in the TypeScript ecosystem, most notably TypeScript ES Slint, the tooling that enables ES Slint and Prettier to run on TypeScript code. Josh is also the author of the O 'Reilly Learning TypeScript book, a Microsoft MVP for developer technologies, and a live code streamer on Twitch. Find Josh on Blue Sky, Mastodon, Twitter, Twitch, YouTube, and.com as Joshua K. Goldberg.

1:16Hello, everyone. With me today is Kilian Valkov, creator of Polypane, a browser for developers. Kilian, welcome to Software Engineering Daily. Hi, everyone. Thanks for having me. Yeah, I'm really excited about this. I've been hearing about Polypane for a while. Before we dive into it, though, I'd like to talk about you a little bit. Kilian, can you tell us who are you? Yeah, sure. I'm Kilian. I am in my mid-30s. So for people that do math, which I don't, I'm from the year 1988. I am a developer, a web developer that just happens to build desktop applications. When I was very, very young, I decided that I wanted to build games, as most of us.

1:57So I pestered my dad into getting me a Borland C++ environment and then proceeded to understand absolutely nothing about it. And at the same time, I discovered FrontPage and discovered that websites do make sense. and now like over 20 years later that's all I do. How did you go from discovering a joy of website development to building a browser for people who build websites? Well so when I talk to people about like enjoying coding etc I'm not one of those people and I've heard developers likened to like they're not specifically like clever which enables them to be a good programmer or they're not like quick thinking or whatever.

2:49They just have a very high threshold for frustration. Because if you're a programmer, all the work you do means that the thing you're working on is broken or unfinished or not in the state where you want it to be. So that's like the frustrating part. And then when the programming is done, it's no longer frustrating anymore because now you have the thing, but you're also not programming anymore. So I tend to be very annoyed when I'm building stuff right up until it works. And then I'm happy with the thing I built, but I don't like take particular joy out of like the art or the act of programming.

3:34But I do really enjoy like creating things. And the nice thing about websites, and that was true right from the start, especially compared to like C++ is that you get to experience the results at the speed of a page refresh. So that part where I do get my enjoyment from is much more frequent when building webpages. And I think that's why I stuck with it. Do you remember the first webpage that you felt that spark that happiness from? I mean, no, not really. So I started building web pages at like age 11. And then I built like my webpage, like my website, as you do. And then the second iteration of that, I had spent like months on a flash intro with like all the cool stuff, like music, sliding doors, sound effects and getting that done was a lot of fun but of course it was flash so then the next time I looked at it on a different computer suddenly nothing was matched up to the music anymore and it was no longer like satisfying so it's all very short-lived that joy because there's always something to improve there's always something where you go like oh well maybe I can also do this or this.

5:00And that's also what keeps me going, I guess, in a way. I'm never satisfied and that's why I'm a programmer. It's almost a very pessimistic, but at the same time, it's kind of an optimistic viewpoint. There's always something more to do. There's always some more fun to be extracted from the process. Yeah. So, I mean, you can get philosophical about that because there's like this concept of Kaizen, which is like continuous improvement, which is something that I know of but I don't like feel particularly strongly like aligned with but I do agree like if you use computers like every day there's going to be something where like you know this can work better or smoother or faster or if this button was just in this place over here I wouldn't miss it like three times a day and my life would be like a tiny bit better like that's just how or how at least I as a programmer and a computer user work.

5:58So at some point you started taking action on that. How did the Polypane browser project come to be in the first place? Yeah so Polypane is actually like one in a longer line of apps to scratch my own itch. It started like way back building like jQuery plugins for things that I wanted because you know jQuery was very friendly I could start with it relatively straightforward building things that I needed like I built like a tiny helper that overlaid a grid on your web page like 15 years ago so I could get everything aligned and then things for like tech shadow helpers etc. Then at some point I figured out that you could build desktop applications quite easily not with like all these languages that I didn't know, but with Python, which I knew a little.

6:52So I spent some time building like a bunch of Python applications. Some of them are still like easily available, installable in many Linux distributions. So one that I've actually used it today, it's called Trimage. And all it is, is like a tiny GUI where you can drag your images onto and it'll compress them. and I built that because nothing like that existed on Linux, which I use, which I've been using for a very long time. And like typing the command line command for that, for like a folder or a bunch of files is super annoying and slow. And like opening up the folder and then dragging it into the application is really fast.

7:36And the command is always the same. So I built that with like Python and it was nice and it was fun and it had like a decent layout engine to build the GUI but then later on like platforms came out that let you build with web technologies like Adobe Air if you remember what that is. Adobe doesn't want you to remember but it existed and then from there other tools like node web kit and then at some point atom came along atom the code editor which was built with something that would be called electron and that was actually where to me the promise of using web technologies to build desktop applications became true for the first time because up until then there was always this huge asterisk where yes you could build web technologies, but it used like the crappy five-year-old version of a web viewer that came with your operating system or use some proprietary web kits that was also super out of date.

8:46But Electron was like, nope, it's just Chromium. Like you open Chrome, that's Chromium. You open Electron. It's the same thing. So not only did you have immediate like feature parity with the web, which most of the other tools didn't have. It was also like one of the fastest run times for web technology. So it was a really good match. So I built a bunch of apps in that, like some commercials, some, again, to scratch my own itch. And then Polypane was just one of them where I was like, you know, it's super annoying to resize my browser all the time. Why not just show a bunch of sizes side by side and see how that goes?

9:26So that's how Polypane was born. You bring up the feature set of Polypane, and I'd like to get that in front of folks. For those who haven't played with it before, what are some of the, or at least what's the main draw of Polypane, the browser? Yeah, so there's really two areas where Polypane gets used. And the core idea is you as a web developer need to do a lot of stuff to build a quality website. And a lot of things that are quality are very hard to do in a regular browser. because a browser is actually working against you a little. For example, if you write really shitty HTML, like garbage HTML, all uppercase, you don't close any of the tags, then your browser is going to go, well, you know, it's fine.

10:14It's fine. We'll just try. And it'll start fixing all these things for you to make sure that the promise of the web interoperability is preserved and the end user still gets to see something. but then at the same time it's kind of like you lying to yourself like i built something and it works in the browser but it works like despite what i did and not because of what i did so poly pain flips that around and it tries to make everything you do really easy to see it started with responsive design where if you build a website usually what people did was they did the desktop site completely and then they resized it to small and then they started fixing and then maybe they would go back to desktop and see what they inadvertently broke while fixing the mobile version and usually if you do that it's going to take a couple of times to go back and forth back and forth back and forth per page to make sure that you didn't miss everything so what if you You just have those two views side by side and then also another view in the middle.

11:26Or maybe you had like five different views because these are all the phones you care about. So that's something Polypane does. You can see your web page at all these different sizes and then also all these different emulation modes. So you can have one viewport pretending to be an iPhone, one pretending to be like a Galaxy Tab tablet, one pretending to be a Windows device. So you can see how your webpage responds in all these different situations. And then in addition to that, also with like light and dark mode, like rather than flipping your entire operating system from light to dark mode or to like force color mode or increase contrast or reduce motion or all these things that you can develop for.

12:10In Polypane, you can do the same thing, but it only affects that single viewport. so you still get your code editor looking normal and you still get your animations in all the other places that you do want them but you get to test your website in all these different variations that it comes in so that's the one part the other part is accessibility so doing accessibility well is really hard again because the browser hides a lot of stuff for you if you have a diff with an on-click handler, then your browser is just going to go, I know what clicking is. There's an on-click handler on this thing. So if you click it, then I'm just going to do the thing because that's clearly what you intended and we're just going to roll with it.

12:53But if I'm a keyboard user, I can't go to that div. I can't click that div. I can't tap to it. And if you are a sighted user, if you are a mouse user, then knowing that that's wrong is really difficult because there is nothing wrong for you. It works the way you built it and it works the way you test it. So Polypane gives you all these tools and warnings and suggestions on how to improve those things in essentially all areas of accessibility. That's really lovely. Every team I've been on has a few people who are excited about accessibility, a few people who are, you know, maybe not excited, but certainly happy about it.

13:33And then the rest of the people who have those energies in other, perhaps also important areas. So it's nice to have a tool that'll apply that same line of thinking for us. You know, they use a button and not a div for ClickWilElement automatically. Yeah. So what I think is important, like I think at some level, everyone cares about accessibility because accessibility isn't like just, you know, I can't see the webpage because I'm blind or I can't cross the street because I'm in a wheelchair. There's also accessibility in the sense that like, you know maybe I have carpal tunnel and now I can't use my mouse very well you know I'm gonna have to adapt so what I really try to do in polypane is to make sure that it doesn't just tell you what you're doing wrong because there's like tons of tools that you can use that will tell you all the ways you are building websites wrong and you can run them and you get like a list of a dozen things and you're like yeah my project manager doesn't care about any of these so whatever what i try to in polypane is i'm going to tell you what's wrong but then i'm also going to hand you the solution or the fix so that even if you had like the good intention like this is an issue that i didn't know was an issue and i'm gonna fix it and you're gonna go to your search engine and you're going to find five different ways to solve this issue.

14:59And you're going to have to choose which one is the one that's right. Or I'm just going to move this ticket to done because again, my project manager isn't going to judge me for it. But if polypane goes, you know, instead of this, why not this? And you can just copy and paste it. Then you're going to copy and paste it. And again, like drag the ticket to done and move on with your life. But in the meantime, you've improved the accessibility of your website. So I really try to help people in the sense that you don't have to be an accessibility expert. You don't have to like wake up every morning screaming accessibility to make your website like a little bit better every day.

15:40I'm looking at the polypane.app website. A couple of things jump out. One, really good looking website. Thank you. It's also very accessible. I'm tabbing through. But if you look at the homepage, right? Right in center is this lovely screenshot of Polypane. And you can see that, as you're describing, the screenshot shows there are three different browsers, iPhone 11, iPhone 14, then a light mode of another one. And then on the side, you've also got some other information that's not normally there in other browser dev tools. You've got this info with meta and site info that's saying the doctype, the viewport, whether it's mobile friendly and so on.

16:15So you're also adding a lot of metadata to what developers see, right? Yeah, so a regular browser shows you a web page, but your web page contains way more information, primarily all the stuff you put in your head. And I'm sure like every developer listening to this podcast has at some point had to fix a title or a description or an OG image in production, because they missed it, because it's very difficult to figure out that, you know, the description is still like placeholder text. So in Polypane, there's all these different lenses to look at your website. And one of them is like, what's the meta information?

16:58Because that meta information gets used when you share it on X or when it pops up in a search engine or when it gets syndicated with like your JSON-LD data or when there is a security issue. People will see if you have a security.txt file in the well-known folder with contact details. And is that still up to date? Does it exist even? So all these things that surround the visual design, I think also are important. They're, again, also marks of quality. So it tries to make all of that easily accessible and easily inspectable. And that's hopefully also easily improvable. Well, I'd like to dive in at some point to how you did all these things, these meta analyses, and you mentioned using Electron.

17:48Are there any features we should surface before we go deeper? Not for this. No, that like, usually when I give a demo, I can give a demo of an hour of just me talking about all the features. And then at the end of the hour, I go, Oh, by the way, we also have like, and then, of course, that's always the killer feature for the people I'm giving the demo too that's how it goes but like yeah we could deep dive into any aspect of polypane and there's going to be like additional features great let's deep dive now the first the banner feature is that you i think you show multiple browser viewports of the same page at the same time how does that work so in electron there's this concept of a web view which is essentially an iframe with extra permissions.

18:37So on the web, iframes are very limited. You can't just randomly like iframe apple.com into your website because that would be bad. But if you are a desktop application, then showing web pages is one of the things that does make sense. Desktop applications are trusted. You give them access to your file system, to your system information. So they are privileged in that way. And then to make sure that there's a proper separation from like the privileged part of your app and the webpage that you're showing, you can use web views to split that up. And then what Polypane does is it actually communicates a lot into these web views on like, they call it like the main world, which is where your JavaScript runs.

19:26And then there's an isolated world where my JavaScript runs and they're completely separate. So you can never get to Polypane's JavaScript and vice versa. And I use that isolated world to make sure that I can sync all the actions that you do because like just showing multiple sizes is neat. But if I like type in one of the viewports, I want it to happen everywhere. If I click submit somewhere, I want that to happen everywhere. If I scroll. If I hover something, I want to make sure that the hover style is correct everywhere. So polypane syncs all the interaction events across all the paints so that you're really interacting with one page.

20:09You just happen to be seeing it at a bunch of different sizes. Hang on a second. Syncing events across pages. There is a difference between a naturally created keyboard or mouse, let's say event versus a synthetically created one by JavaScript. How do you make sure that the pages all experience the events in the same way? So this is where it gets really technical. The difference between a regular event and a synthetic event is something that you as a programmer don't have to care about, but some frameworks do. So for example, React and Vue, they have different code for handling synthetic events compared to real events and I try not to get too clever with things so I am sending synthetic events in all the other places and then I'm like tricking React and Vue into still accepting it even if it's synthetic and then that like synthetic events really only matter for things like clicks clicks and form submissions and things like that.

21:14Whereas like scrolling, hovering, focus, these are more easily replicated like across viewports. It's interesting though, when you think about it, it really is just, just with quotes around it, a web view, which is a glorified iframe. And anything that happens, one web view can be copied to others. So let's say I'm a developer and I'm of course tinkering around in dev tools. Is there a way for me to say, apply my tinkerings to one web view and have it be copied to all the other web views at the same time? Yeah. So I actually built my own elements inspector and my own console because Electron is built on Chromium.

21:54So you get the Chrome dev tools for free, but the Chrome dev tools are built in a very particular way. Namely, one website or web page gets one dev tools and that's never going to be different in chrome so that's just the way it works but yeah like you said in polypane if i'm going to increase the font size of my heading i want that to happen everywhere so i built my own elements inspector that you know it takes all the styles it parses them it lists them in order of specificity you can live edit them there's like a little color picker, you can disable them and enable them, like anything that you want from an element inspector, except that it applies your changes to all the viewports that you're looking at right now.

22:43That was a massive amount of work, and I had to rewrite it a bunch of times to improve the way it worked. But I'm now at a point where the stuff I build is now getting copied into Chromium and Firefox, et cetera. that's a big how do they say feather in your cap what are some features that are being copied over so recently like two years ago we got css nesting and initially dev tools in chrome just like didn't display that because they didn't have code for that so polypane was actually together with safari the first to show nested selectors in the element inspector and then chromium got them and then they iterate it and they iterate it and they iterate it and then they ended with the design i launched with how does that feel i mean that's makes me feel like i was right which is always a great feeling and also there's two parts to it of course like i don't want them to copy me but like I'm building a browser so I am also copying them in a way and I want everyone to use polypane so all the features that are cool in polypane if they end up in other browsers that's also annoying but also like yeah I came up with a design that worked so well that one of the largest companies in the world is now doing the same thing and that feels really good and that also means that I'm striving to continue doing that.

24:16Let's talk about that last bit, striving to continue innovation. You are but one person. There are quite a few people working on each of Firefox, Chrome, Safari. How do you keep up with all the latest and greatest, given that the web platform is continuing and continuously evolving? Yeah. So I am a single person team. That's true. what you need to understand or what you do understand, but I don't implement web features myself. I get Chromium for free. So if Chromium implements CSS nesting, I just have to make sure that I can display that correctly. And that's if, for example, I inspect a specific nesting and it crashes in a specific beta version of Chrome that I happen to be mailing that on, that I communicate that to the developers so that they can fix it before the proper release.

25:11So all the features that are showing webpages are built for me in a way. And I just have to make sure that the inspectable parts, the DevTools parts is also up to par. What did you build the DevTools part in? So the entire UI is built in React. I started Polypane as like a side project back in 2015. So it's coming up to a decade, which is insane. But like that also means that I started with like React 0.13 and I've just slowly like layered up. It's running React 19 now. I try to keep up with like all the latest releases as soon as they come out. because there's a lot of benefits there and usually it's not a lot of work.

26:06But yeah, so that's all the visual stuff is React, React components. I still use a whole lot of class-based components. One, because they're already built and I'm not gonna like rebuild them just for the sake of rebuilding. And also I prefer class-based in many situations because I really like life cycles and they make a lot of sense to me and they are very clear in class-based components and you can do stuff to the lifecycle that's much easier to grasp than like functional components. So it's a bit of a mix where like larger components that do need more lifecycle management, which you do if you're managing the entire CSS of like five different viewports at once and you're trying to combine that cleverly, there are going to be a lot of places where like react not right now wait a bit stuff like that but yeah it's all react your performance characteristics one has to imagine are quite different from the typical web page those web pages are fairly static even if they have interactive bits yours is extremely intensive yeah and so that that's very different from the usual like what people care about in performance because if you look at resources for performance for React.

27:27It's all about smaller bundles, which makes sense if you're loading a web page from the network and download time directly affects the speed with which your web page is visible and interactive. But I'm a desktop app, so my bundle size is over 10 megabytes. And that doesn't matter because like I'm also shipping Chromium. The 10 megabytes isn't going to be like the bottleneck there. And you, like the startup time of a desktop app can be different to the startup time of an app. Yeah, I think I said that right. Like website versus app, app can be slower to startup. But then what does become important in Polypane is that it might be running for like a day.

28:17So if there's a memory leak somewhere where there's one event listener that I'm not unregistering, then that might end up being like 2000 event listeners by the end of the day. And that becomes an issue. So there's like a lot of very different types of things that I have to care about where on the web, you're like, you know, we'll just add a HTTP refresh. Like for every five minutes and it'll be fine for the next couple of months until we do a root cause analysis, et cetera. I can't go around like refreshing the app. That would be quite frustrating. How do you test or how do you validate over time that your performance characteristics for people running like a browser aren't broken?

29:01so a lot of it does come down to feel like i use my browser all the time on like i have a linux device in front of me right now and i have a mac device to my left and i have a windows device to my right and they're all running polypane right now so it's a lot of manual testing and then the chromium dev tools performance tab is really really useful and it allows me to very specifically check for specific interactions in the app because I can start a performance trace, do a specific action and see its outcome. And then very quickly iterate on that. That's a nifty. You've got the holy trifecta of operating systems in front of you.

29:47It's a nifty for you. So yeah, I've been using Linux as my main operating system for the past decade. I vastly prefer it to the other two. But if you build a product for developers, you need to be on all the operating systems. And then also it needs to feel right on all the operating systems. So the app is slightly different on all three operating systems to make sure that I do like somewhat stick to the, like how the operating system handles closing and opening or where the close buttons are. or how the menu is presented to make sure that it does feel cohesive with the rest of your device. That's a good segue.

30:31I'd like to move into some of the final stages of the interview, talking about what's coming next. And speaking of working across devices, could you tell us what is Polypane Portal? Yeah, so Polypane is a web browser. It lets you build websites and test that, yada, yada, yada, yada. But it only runs Chromium. so you can have a viewport in polypane that pretends to be like an android phone or pretends to be an iphone or pretends to be firefox that's very useful because then you can test if your code responds well to running in that environment say you have a polyfill that you only apply to safari you can test that in polypane because your code will decide that okay these are the characteristics of an iPhone.

31:20So I'm going to load my polyfill now, and then you can test your polyfill without you needing to trot out an actual iPhone. However, if the issue is on the other side, if there is a bug in Safari, or if there's a rendering issue in Firefox, then polypaint isn't going to help you. And that was very frustrating to me because that means that you do have to then go and open Firefox and then manually do all the same things you were already doing in Polypane but in Firefox or even worse like on your phone you have to like bring up your IP address for your local host and then type in your IP address and then you miss a dot and you have to type it again and it's just annoying so portal is if you're running a local server and you have that open in polypane you can open a portal and that will proxy your local server either to your network or through a public url to the entire world and then you can open that like either by sending that link or you can show a qr code in polypane and you can open that on all your devices and you can have them like laid out on the table and then it's the same thing so anything you do in polypane whether that's scrolling or editing styles or clicking or typing, it happens on all of the devices around you.

32:48So that solves the issue of you want to use Polypane, you still need to test all these other browsers, all these other devices, but you don't want to do that one by one because that's slow and boring. Now you can do all of that in one go as well, and you can still interact with all of them through Polypane. So that's what Portal does. I could see a future in which portal is pulled into as even part of the default experience. Why stick with Chromium if you can just use the user's native browsers? So there is no, you can use the native browsers on desktop. So if you are on Linux or if you are on Windows, there is a web kit.

33:30Yes, and you can compile it and you can run it. But if you take that web kit and you hold it next to an iPhone, it's not the same thing. It's very different. And you want to be testing the iPhone, not like the webkits on your device. So there is no way to do proper cross-platform, cross-device testing without real devices, as much as I would want to embed Gecko and embed webkits in that manner. What are the other upcoming features you're excited about with Polypane? So I actually just released a version today. I release a version like roughly every month. Today's update was a little bit minimal because, you know, I also took a Christmas break, but it's running on the latest Chromium again.

34:20So I keep that up to date, you know, with Chromium as quickly as possible. So Chromium 132 came out on the 8th of January. So it had like a rolling release in the past week. And then yesterday, Electron updated to using that version of Chromium. And then today it's running in polypin and you get parity with what your actual users use. So that's very important to me. But that does mean that it's very light on other features. One neat thing that I built is that if you use Portal, it now announces itself through something called MDNS. which if you're on Mac you might have heard as Bonjour the Bonjour service essentially what that does is it solves the issue of there is a thing in your network that can do a thing or a device in your network that can do a thing but you don't know where it is you don't know its IP address so mDNS is a way for all of the devices that you have to broadcast these are the things I have available.