← Software Engineering Daily
Software Engineering Daily
Polypane with Kilian Valkhof
00:48:08
Polypane 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,
Loading summary
Transcript73 lines
- [00:01]
Josh Goldberg
Polypane 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 Balcoff 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. Josh 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 Bluesky, Mastodon, Twitter, Twitch, YouTube and dot com as JoshUakGoldberg.
- [01:17]
Hello everyone. With me today is Killian Velkov, creator of Polypane, a browser for developers. Kilian, welcome to Software Engineering Daily.
- [01:25]
Kilian Balcoff
Hi everyone. Thanks for having me.
- [01:26]
Josh Goldberg
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?
- [01:34]
Kilian Balcoff
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. So 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.
- [02:21]
Josh Goldberg
How did you go from discovering a joy of website development to building a browser for people who build websites?
- [02:28]
Kilian Balcoff
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, they 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 the art or the act of programming. But I do really enjoy 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 web pages. And I think that's why I stuck with it.
- [04:03]
Josh Goldberg
Do you remember the first webpage that you felt that spark, that happiness from?
- [04:08]
Kilian Balcoff
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 spent like months on 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. And that's also what keeps me going. I guess in a way I'm never satisfied and that's why I'm a programmer.
- [05:10]
Josh Goldberg
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.
- [05:18]
Kilian Balcoff
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 aligned with. But I do agree if you use computers every day, there's going to be something where 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 a tiny bit better. That's just how or how at least I as a programmer and a computer user work.
- [05:58]
Josh Goldberg
So at some point you started taking action on that. How did the Polypane browser project come to be in the first place?
- [06:05]
Kilian Balcoff
Yeah, so Polypane is actually like one in a longer line of apps to scratch. My own itch 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 webpage like 15 years ago so I could get everything aligned and then things for like text, shadow helpers, et cetera. 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. So 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, I 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 and the command is always the same. So I built that with like Python and it was nice, 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, WebKit and then @ 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 5 year old version of a web viewer that came with your operating system or use some proprietary webkit that was also super out of date. But 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 runtimes for web technology. So it was a really good match. So I built a bunch of apps in that, like some commercial, 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. So that's how Polypaint was born.
- [09:28]
Josh Goldberg
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.
- [09:39]
Kilian Balcoff
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, it'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 Polypane 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 too 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 just had those two views side by side and then also another view in the middle, or 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 webpage, adds 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 modes, 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 in Poly Pane, 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 onclick handler, then your browser is just going to go, I know what clicking is. There's an onclick 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. But 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 just, it works the way you built it and it works the way you test it. So Polypaint gives you all these tools and warnings and suggestions on how to improve those things in essentially all areas of accessibility.
- [13:24]
Josh Goldberg
That's really lovely. Every team I've been on has a few people who are excited about accessibility, a few people who are maybe not excited, but certainly happy about it, and 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. They use a button and not a div for clickable elements automatically.
- [13:46]
Kilian Balcoff
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 do 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 going to fix it. And you're going to go to your search engine and you're going to find five different ways to solve this issue and 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? 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 really try to help people in the sense that you don't have to be an accessibility expert. You don't have to wake up every morning screaming accessibility to make your website a little bit better every day.
- [15:43]
Josh Goldberg
This episode of Software Engineering Daily is brought to you by Capital One. How does Capital One stack? It starts with applied research and leveraging data to build AI models. Their engineering teams use the power of the cloud and platform standardization and automation to embed AI solutions throughout the business. Real Time Data at Scale enables these proprietary AI solutions to help Capital One improve the financial lives of its customers. That's technology at Capital One. Learn more about how Capital One's modern tech stack data ecosystem and application of AIML are central to the business. By visiting capitalone.comtech I'm looking at the Polypane app website.
- [16:25]
A couple things jump out. One really good looking website. Nice and done.
- [16:28]
Kilian Balcoff
Thank you.
- [16:29]
Josh Goldberg
Yeah, it's also very accessible. I'm tabbing through, but if you look at the homepage, 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 devtools 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. So you're also adding a lot of metadata to what developers see, right?
- [17:02]
Kilian Balcoff
Yeah. So a regular browser shows you a webpage, but your webpage 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 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? Because 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 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 thus hopefully also easily improvable.
- [18:25]
Josh Goldberg
I'd like to dive in at some point to how you did all these things, these meta analyses. And you mentioned using Latron. Are there any features we should surface before we go deeper?
- [18:35]
Kilian Balcoff
Not for this, no. 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, 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 to. 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.
- [19:02]
Josh Goldberg
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?
- [19:12]
Kilian Balcoff
So in Electrum there's this concept of a webview, which is essentially an iframe with extra permissions. So 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 webviews to split that up. And then what Polypane does is it actually communicates a lot into these webviews on, like, they call it, like the main world, which is where your JavaScript runs, and 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 Polypaint syncs all the interaction events across all the panes so that you're really interacting with one page. You just happen to be seeing it at a bunch of different sizes.
- [20:55]
Josh Goldberg
Hang on a second. Syncing events across pages. There's 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?
- [21:11]
Kilian Balcoff
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 synthetic events really only matter for things like clicks, clicks and form submissions and things like that. Whereas, like scrolling, hovering, focus, these are more easily replicated, like across viewports.
- [22:05]
Josh Goldberg
It's interesting though, when you think about it, it really is just with quotes around it, a webview, which is a Glorified iframe and anything that happens, one webview 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 webview and have it be copied to all the other webviews at the same time?
- [22:28]
Kilian Balcoff
Yeah, so I actually built my own Elements Inspector and my own console, because Electron is built on Chromium, so you get the Chrome DevTools for free. But the Chrome devtools are built in a very particular way, namely one website or webpage gets one devtools, and that's never going to be different in Chrome, so that's just the way it works. But yeah, like you said in Polypaint, 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. That 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, etc.
- [23:43]
Josh Goldberg
That's a big, how do they say, feather in your cap? What are some features that are being copied over so recently?
- [23:49]
Kilian Balcoff
Like two years ago, we got CSS nesting and initially DevTools 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 iterated and they iterated and they iterated and then they ended with the design I launched with.
- [24:19]
Josh Goldberg
How does that feel?
- [24:20]
Kilian Balcoff
I mean, that 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 Polypaint. 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:59]
Josh Goldberg
Let'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?
- [25:15]
Kilian Balcoff
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 whaling that on that I communicate that to the developers so that they can fix it before the proper release. So I like all the features that are showing web pages are built for me in a way and I just have to make sure that the inspectable part, the devtools part, is also up to par.
- [26:11]
Josh Goldberg
Developers, we've all been there. It's 3am and your phone blares, jolting you awake. Another alert. You scramble to troubleshoot, but the complexity of your microservices environment makes it nearly impossible to pinpoint the problem quickly. That's why Chronosphere is on a mission to help you take back control with Differential Diagnosis, a new distributed tracing feature that takes the guesswork out of troubleshooting. With just one click, DDX automatically analyzes all spans and dimensions related to a service, pinpointing the most likely cause of the issue. Don't let troubleshooting drag you into the early hours of the morning, just DDX it and resolve issues faster. Cycronosphere was named a leader in the 2024 Gartner Magic Quadrant for Observability Platforms. And at Chronosphere IO Sed, what did.
- [27:00]
You build the devtools part in?
- [27:02]
Kilian Balcoff
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 you know there's a Lot of benefits there and usually it's not a lot of work. But 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 are 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.
- [28:39]
Josh Goldberg
Your performance characteristics, one has to imagine are quite different from the typical web page. Most web pages are fairly static, even if they have interactive bits. Yours is extremely intensive.
- [28:48]
Kilian Balcoff
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 it's all about smaller bundles, which makes sense if you're loading a webpage from the network and download time is like directly affects the speed with which your web page is visible and interactive. But like I'm a desktop app, so my bundle size is like 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 start time of an app. Yeah, I think I said that right. Like website vs app app can be slower to start up. But then what does become important in polypaying is that it might be running for like a day. So 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 a lot of very different types of things that I have to care about where on the web you're like, we'll just add a HTTP refresh 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 refreshing the app.
- [30:26]
Josh Goldberg
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 browse aren't broken?
- [30:34]
Kilian Balcoff
So 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 DevTools 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.
- [31:16]
Josh Goldberg
That's a nifty. You've got the holy trifecta of operating systems in front of you. It's a nifty pearl you got.
- [31:21]
Kilian Balcoff
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 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.
- [32:02]
Josh Goldberg
That's a good segue. I'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?
- [32:14]
Kilian Balcoff
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 codes will decide that, okay, these are the characteristics of an iPhone. So 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. So that solves the issue of you want to use Polypaint, 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 Polypaint. So that's what Portal does.
- [34:42]
Josh Goldberg
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?
- [34:52]
Kilian Balcoff
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 WebKit. Yes. And you can compile it and you can run it, but if you take that webkit 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 WebKit 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 like embed gecko and embed WebKit in.
- [35:33]
Josh Goldberg
That manner, what are the other upcoming features you're excited about with Polypane?
- [35:38]
Kilian Balcoff
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. So I keep that up to date 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 Polypane, 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. If you have a Chromecast, for example, that connects to your apps on your phone or your Google Dots or whatever through MDNs. So if you have Netflix open and it detects your Chromecast, that's because your Chromecast is sending an MDNS message saying, like, hey, I'm a casting device. Here's my details. So Polypane now also does that for Portal, which means that if you have an app that supports MDNs with HTTP that will show up. So then you no longer even have to, like, copy that link or scan the QR code. You can just push the big button that says Polypane Portal and it'll open that URL for you. Which is very cool because I am working on an iPad app for Polypane that also uses MDNS to detect portals. So that way everything just gets even faster. Like, you can start a Portal in Polypane, open up your iPad app, push the big Portal button, and you're up and running on your iPads in mobile Safari as well.
- [38:13]
Josh Goldberg
That's got to be really convenient for people who are not used to scrolling through DNS or local networks to set up browsers.
- [38:20]
Kilian Balcoff
Yeah, so it's apparently, like, it's a very clunky protocol, but there's a couple of NPM packages and React native packages that make it super easy. Like, you just you start listening and like within a couple of milliseconds you have a list of all the devices on your network which can be confronting because you're like, why is my Mac sending out all these services? And what's this weird IoT device doing? But you know, that might be fun to do as well. And then you just have that list and it's a list that says, you know, these IPs have these services on these ports and then it's up to you to figure out which ones are interesting.
- [39:03]
Josh Goldberg
I want to surface a couple other things. Since you bring up that you have new releases, there's a blog that has articles for each of them. First of two, you mentioned by name, people who contribute or give ideas. And that's a really nice thing you do. Thank you, that's lovely. I can tell a lot of developer or developer oriented projects do that. It's kind of like from the auto generated GitHub class. But it's obvious in the Changelog that you've hand done that you've manually shouted people out.
- [39:26]
Kilian Balcoff
Yeah, I started doing that. I always did it, but I did it like in private. It was like, hey, the thing you requested now exists. Hooray. And then at some point I was like, you know, why not just also tell the world that, you know, people came up with good ideas and also like publicly thank people? Because that's, it's a nice thing to do. It makes me feel nice, it makes them feel nice. It might help other people realize that they can also give suggestions and there's a high chance of that being implemented because I think a lot of developers, their experience with using tools is like, you know, there's this tool and I might not like certain things about it, but you know, it's never going to change because they won't listen to me. Well, I'm just Kilian. I'm a single guy. I'm one guy. You can email me, you can DM me, you can go to the Slack channel and if you have a good idea, then I can implement it. And I want to implement it. So I think, yeah, I think it does make it much nicer. It also makes it much nicer for me because if I'm implementing stuff and I'm implementing it for specific people, then I know I'm making them happy and that makes me happy.
- [40:41]
Josh Goldberg
You seem happy. This is an audio only podcast, but there's a sparkle in your eyes, which is very nice to see. The other the of two. Two of two is that's a great segue that there are a lot of people who don't realize, I think, what Polypaint is or what's available to it. You have a blog post from November 2024 where someone who's quite well known, Adam Argyle on the Chrome Devrel team asked on formerly Twitter what it's missing from the Chrome devtools and you, in this blog post, break down all these different, very common requests and explain exactly how they map to built in features into Polypane. So your thing is almost seemingly, quite literally the most requested features from DevTools just in a box.
- [41:21]
Kilian Balcoff
Yeah, yeah. And like, there's a reason those things are the most requested features. So that's also why I tend to have them implemented. As I said, I use Polypane myself all day, so anything where I'm like, it wouldn't be great if it could also do have a JSON viewer, like, sure, now Polypane has a JSON viewer that's built in.
- [41:44]
Josh Goldberg
That is nice.
- [41:45]
Kilian Balcoff
Yeah, yeah. I mean, that is nice. And it took me like a week to build a JSON viewer, like figuring out what are the things I want in a JSON viewer. I think I do some neat things that I haven't seen in other JSON viewers where it's very easy to collapse multiple sections because it like, again, it sort of parses through your. Your JSON file and then if there are repeating structures, then maybe if it's like a GitHub repository, there's all the releases and then all the releases have assets, and then all the assets have download links and if those are all like opened, then it's just endless scrolling to go to a specific release. But then if there's a big button like collapse everything, then you're like, okay, but now I have to like, first press decollapse everything and then go back to releases to un collapse that. And then, you know, that's two steps. So in Polypane, I can just list all like the things that have subsections and you can go like, you know, collapse everything. That's called assets. And now you have a neat little list of releases that you can quickly scroll through and get the stuff you need rather than, you know, doing excessive. So I really hate doing like management stuff in my apps. If I need to do something and then undo it to do the thing I actually wanted to do. Like, that's one step too many and that's annoying and we need to fix that. And like that just permeates throughout Polypaint, beginning with, I don't want to resize my browser. Like, I don't know what I'm doing. Just give me the sizes. I know what the sizes are. Just give them to me.
- [43:30]
Josh Goldberg
Well, that's a beautiful full circle moment that we can close out the discussion on polypanon. Kelly and I have one last question to ask of you in our final two to three minutes together. What is it with you and apple cider? Could you tell us about that?
- [43:42]
Kilian Balcoff
I mean, yeah, sure. So I really enjoy apple cider, which, to be specific, I'm talking about European apple cider, which is hard cider in the us And I've made my own cider in the past to varying degrees of success because it's very difficult to get it, like, the taste of, like, UK cider or a French cider. But right now I'm making an ice cider liqueur. So ice cider is made from apples that have been frozen, and if you freeze apples, then, like, a lot of the apple breaks down and they become much sweeter. So an ice cider is almost like a dessert wine. And it's very tasty. And I recently had one after having had it in my cupboard for three years and then finally going, like, you know, maybe we should taste this. It's a nice bottle and we've been saving it up for. We don't know for what. Let's just open it now. And it was extremely tasty. And then last Christmas, we were together with my extended family or with my family, and both my parents and my brother came up with the same idea, which was, let's all make a liqueur and then have a tasting together. Like, everyone comes up with their own liqueur, and when they're all done, we'll go and taste them together. Which was, like, hilarious because my parents, they came out with, like, bags with like a bottle of vodka and then stuff to build the liqueur in, and they. They handed it out to everyone. And then my brother was like, well, and then he came out with the same bottle of vodka to give to everyone. For the past week, I bought local apples and I cut them up and I froze them for a couple of days and then I unfroze them and I chopped them up some more. And now they're sitting in vodka and they'll have to stay there for at least two weeks. And then I can filter it and bottle it. Then I'm going to add some apple molasses, which is like apple syrup, but, like, very dense, very thick, to back sweeten it or to sweeten it. And then at the end, I should have an extremely tasty liqueur. And I look forward to that succeeding. I hope it succeeds because it is an experiment.
- [46:19]
Josh Goldberg
That sounds fantastic, though. I mean, I've never heard of this iced apple wine before, and it sounds lovely.
- [46:25]
Kilian Balcoff
Apparently, it's a thing from Canada, which makes sense. They have apples, they have ice.
- [46:32]
Josh Goldberg
So those two things are very in abundant qualities and quantities in Quebec and those together.
- [46:39]
Kilian Balcoff
If you make cider out of those, then apparently it becomes much sweeter, like syrupy.
- [46:44]
Josh Goldberg
They have that in Canada, too.
- [46:46]
Kilian Balcoff
Yeah. One of the options was sweetening with maple syrup, but I am going to sweeten with apple just to get, like, even more appley.
- [46:55]
Josh Goldberg
Excellent. Killian, I'm going to be rude and insist that the next time I visit Amsterdam, we will connect and I will try your spirits. I look forward to this.
- [47:05]
Kilian Balcoff
Yeah, I'm happy to host you. Great.
- [47:08]
Josh Goldberg
Well, all that being said, I had a great time this episode. Happy 2025, everyone. We covered Polypane, how it came to be, a lot of the features. We dove into, how it's created, how it's constructed on top of chromium and electron, and we talked about some of the newer stuff. Killian, is there anything else you want to leave us with before we head out?
- [47:26]
Kilian Balcoff
Yeah. So anyone listening, please try out Polypane. There's no strings attached. You can just download it and try it. I'm not asking for your credit card. And if you do try it, let me know how it goes. And if you have, you know, clever ideas, good suggestions, I'm all yours.
- [47:44]
Josh Goldberg
Excellent. Well, this has been a fun interview. Thanks, everyone, for listening. I'm Josh Goldberg with KillianBelkhof for software engineering Daily. Cheers, everyone. Bye.
- [47:53]
Kilian Balcoff
Cheers. Bye. Bye.