Supper Club × Polypane with Kilian Valkhof

I sure hope you're hungry.

Oh, I'm starving.

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Tolinski and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food, so buckle up and grab that old handle because this ride is going to get wild.

This is the Syntax supper club.

Welcome to the Syntax Supper Club.

Today, we have of a very special guest.

We have, Kylian Volkoff. Is that how you say your last name, Kylian? That's very good.

Oh, nice. Okay. Hear

it that well.

Oh, okay. Now I feel like you're just buttering me up, but thank you. No. No. I'm not.

We're gonna be talking about developer tools, specifically Killian's tool, which is Polypane. We're gonna be talking all about some of the cool things In Polypane, I've been using this thing myself for a little bit now.

And, yeah, we're just gonna be talking all about what it's like to be building cool dev tools and What are some neat type of dev tools that people don't often think about? With me as always is Wes

Hey, everybody. Excited to be talking about polypain.

I know Scott has been head over heels over this tool, and it's just It's really cool. I've been trying it out myself. On the polypane train. Yeah.

Yeah.

So welcome to Syntax, Killian.

Let's get started by maybe you can tell the audience a little bit about who you are, what you work on, and, what you do. Yeah. Sure. So I'm, I'm Cillian. I'm a developer from the Netherlands.

I've been a developer for a very long time.

I started my first company when I was 16, which was, you know, just building websites and and then later when they became a thing, apps for for other companies. So I I actually predate The responsive web? That's a kind of a special indicator. Yeah. Wow. Yeah.

We often feel that way around here. Oh, that's good. I'm in good company then. Yeah. Essentially, I've I've always been writing tools to help me Build websites faster, easier, better.

So, I I built, an image compressor, Like, a decade ago, I built a Linux interface for f. Lux, which makes your screen more yellow at night. Like, nowadays, all the operating systems do that, But, you know, back then, it was pretty special that such a tool existed.

That was yeah. But you you worked on that, or you you worked on the Linux version of it? Yeah. I I worked on the Linux,

GUI for that. Wow. That's cool. And then, You know, did some other things, came across, Node Web Kits at the time, which let you, build desktop apps with Web technologies.

So before that, it was all Python, and I was essentially, like, stumbling my way through, You know, whatever they need to make desktop apps work, not really having an idea what I was doing, but, You know, at at some point, it works, and then I stopped touching it.

But with Node Web Kits, I have more of an idea of what to do.

And then, like, shortly after Node Web Kits, Electrom came out.

Yeah.

And that's when I really started, You know, figuring out and playing around with, you know, making a bunch of desktop apps. So I started out with, like, a super simple Note taking application.

Because one of my pet peeves was that I'm like, I'm a serial, autosaver.

So I'll I'll write, like, 3 words, then press command s and write another word, then press command s again, just to be sure.

And then at some point, I was like, you know, this is kind of dumb. I could just build an app that just saves automatically every time I type something.

Yeah. So I did that, and then, of course, I added a pithy message whenever you did press command s. Mhmm. It'd be like, I already saved this while you're pressing command s.

So I see that message daily now. So it it hasn't worked, But, you know, the app exists. And then from there on, I started working on Polypane,

which is it's a whole other story. We can get into that as well. Yeah. Let's get into the Polypane side of things. For for those of you out there who have never heard of this app, basically, you could think of Polypane as a dev tool, a a dev tool browser that is More full featured than anything else, I think, in this class. So you have all of the different, Responsive view ports in 1 canvas so you can see your your site and all these different, canvas sizes all at once, Which is a, you know, a thing that other browsers are doing. And and that's like the the surface of the iceberg because there there's just a 1,000,000,000 more little Extremely useful dev tools inside of here that we'll get into in this episode, so don't feel like we have to talk about them now. But how how did you get into Polypane, and how did that Become a thing. Yeah. So, I started working on polypane in

2015, so quite a quite a while ago.

Wow. At that point, like, the landscape looked quite different.

With my company, I had just switched over all the designers to Sketch, from Photoshop.

And one of the cool things that Sketch did at the time was something called artboards, which, like, again, now it's not that special, but back then, it was revolutionary.

I remember that. Yeah.

And It was super cool because you could design a website and then you can have, like, your mobile artboards, next to your tablet artboards, next to your laptop artboards, And it was just a really good way of designing and then keeping the overview of, you know, which components look Which way? At different sizes.

You could really see, like, see the connections and and see How it all fit together.

So I I was using that workflow in Sketch, really enjoying myself.

But then when it came to the point where I had to implement designs, I was back in Chrome, And all I could see was, you know, the 1 screen size. And, you know, I like everyone else, I'd be resizing my window all the time.

And then at some points, I thought, you know, just like pressing command s all the time, like, this is kind of dumb.

Probably there's a better way. And then I remembered, like, the thing I was doing in Sketch was super nice.

Why not try and build that? So I did. I built, like, this mini app in, at 1 night with 3 iframes side by side and an address bar on top of it, like, with an button that said reload next to it, and I just started using it. And that was a really cool experience.

So I, you know, I kept working on it a little bit, and the the word reload, I replaced it with a nice icon. I added some more CSS, and I had a quick button to get to the dev tools for for each of these things.

And I was just happily using it, but not really thinking much about it, until at one point, I started comparing my hours, like, before Polypane and after Polypane, And it ended up I was 60% faster in implementing designs.

So at that point, I figured, you know, there's probably something here. Maybe I should take this a little bit more seriously, and that's that's really when I decided, like, you know, this is what I wanna do And started, like, fully working on polypane, adding a whole bunch of features,

polishing it, all the things. Nice. So it started out as, like, an iframe kind of, like, the canvas tool, like you mentioned specifically with the Sketch Artboards. So So that was, like, the genesis of it all, which is interesting because, like I said, like, on the surface, like, that's what a lot of people see when they see the app is first and foremost. You can See all of your windows at once when you when you're designing things. And in fact, you know, I use this quite substantially in our redesign, and it helped me out a lot to be able to have all these different Canvas sizes. But when I I made a a TikTok showing off that I really like this browser, I got a lot of people being like, Yeah. X, y, and z. These other products already do that. And I think it's important to state that that's, like, not all this thing does, because while that is, like, a great feature, you've been busy adding Mhmm. A lot of features into this thing. So I guess before we get into some of the nitty or grittier type of dev tools that you have in this, let's talk a little bit about How it's built. So, you mentioned that you were doing a lot with Electron. Is this an Electron app? Is that is that the Yeah. Yeah.

So so this is using Electron. What what are you using for the front end of it, so to say? I'm using React

and just, like, plain CSS.

So the this app started with React 0.14 and, you know, just Kept it up to date. Now it's at React 18.

Still just plain CSS because that's what I'm I'm good at what I understand, and just lots and lots and lots of components everywhere. That's unreal. So the

the, like, the gooey of the, like, the browser part, like, the the part where you type your address in and all that, did you have to recreate that, or is that Is that part of Elektron? That's all HTML and CSS and sort of reverse engineering

All the cleverness that browsers do Wow.

To, you know, to figure out how the URL Or the URL that the user actually meant,

stuff like that. To parse the whole URL too. I didn't even think of that. Yeah. Yeah. Yeah. So

Browsers do a lot of really clever stuff to whatever you type into the URL bar before it ends up being rendered.

Yeah. And you just don't realize that until it doesn't work in your app, and you're like, why? What what are the other browsers doing? Like, what What about, like the biggest one for me is, like, when you type in, like, local u URLs, either

local host or dot locals, or You have, like, a a DNS set up locally that were resolved. Do you have to do anything weird there, or is that network level? That's actually network level. The,

Like, the the cleverness that many browsers do is more around, like, HTTPS stuff.

Yeah.

The www part of a URL is mostly a lie as far as browsers are concerned.

And then there are some funny things that Polypane doesn't actually do, but that other browsers do. For example, in Polypane, if you mistype .com quickly enough.

Oh, and and press enter quickly enough. It will just auto fix that for you.

And you you never noticed that because it happens before you realize that you typo'd, but it's in there. Yeah. And we don't make mistakes anyways. Right? Like, nobody makes mistakes.

Yeah.

And, and all the browsers nowadays, they will proactively forward you to to the www or without www if one of them doesn't work, including passing the HTTP to HTTPS barrier, which spec wise like, I'm I'm not an expert, but, like, That probably shouldn't happen, but so for example, if you're if you have HTTPS and your site only works with about www, and you type it with www.

That's a subdomain. That's a different URL, so it just should just give a four zero four.

Yeah. But But no browser will do that because that's a very bad user experience.

In Polypane, I do do that.

So I think if you're the developer of a website, you should know.

But I get I get questions about that. Like, why Does my URL not work in Polypane? It works in all the other browsers. Oh, interesting. I have to explain people that their server is misconfigured.

Yeah. Well, that's it's probably better to catch it there than to accidentally catch it on, like, a curl request. Exactly. Exactly. So that that's that's a very interesting balance in Polypane where,

like, it is a user facing product,

but I also can't be too accommodating because that would obscure things that you as a developer should want to fix. Totally. Yeah. It's a dev tool at the end of the day. I'm I'm really impressed with this. It's funny. I'm really impressed with this URL bar overall because, yeah, I would've I would have thought this was, like a native Chromium one, not just because of the how it feels to use, but, like, even the icon style of all the buttons feels like exactly chrome. And that's I was gonna ask you, like, how did you get all of these, like, browser extension type of icons in here? But the fact that this whole thing is part of the React app That answers that question entirely.

So it feels very much like a browser. Right? You said it's built in electron with React on, the the the front end here.

What about, like, the dev tools pane? So the dev tools to maybe give some explanation has, like, an elements tab like you'd expect in Chrome. But you can also open the actual Chrome, dev tools. So is your

Dev tools, elements, tab stuff, is that all custom as well? Yeah. That's all custom as well. That's, like, tons and tons of JavaScript Inspecting, your page across all the panes.

I I built that because, the Chromium dev tools, they work by attaching to, a web contents, which is like a single thing displaying a web page.

And it's it's super good at that, but I'm displaying Multiple pages, like editing 1 and then editing the other and then editing the 3rd isn't a really good experience if you want to, like, really quickly see the effects of style changes or content changes. Or even, like, the highlighting when you're hovering over an element,

You get highlighting on all of the canvases, not just one of them. Yeah. So that's that's custom.

That's my my own highlighting tooltip. And the neat thing is that that means I can put anything I want in that highlighting thing.

Yeah. So it it has, Like, specific information for images, specific information for links, specific information for form elements that, You know, show you just a little bit more information than, the regular Chromium tooltips.

So, for example, for images, I show the alt text, And that really helps people doing accessibility audits. Oh, yeah. They can just very quickly, like, hover over an image, Press alt, which shows the the tooltip, and then see if the alt text is there and if it makes sense. Man,

That that's wild to me that, because this this section of it I mean, it's such a a small section of the app overall, But the amount of work I'm just, like, going in my brain. The amount of work it would take to build out a custom dev tool set up like this and then be able to Mhmm. Augment it. So not just to be feature com you know, compatible or or, you know, close, but it's like, There there's that's very specific things like you mentioned that are able to be in here. That's really blowing my mind right now.

One of the my favorite Aspects of this in like, from a meta side of things. So there is the info tab in your dev tools. Yeah. And this is something I wish every single browser had because What it does is it gives you previews of all of the different social images based on, all of the different types of sites, what it's gonna look like. I was recently designing my social cards, and this was, like, a huge help for me to be able to see in. Yeah. What this would look like in Discord, LinkedIn, Slack, Facebook, Twitter, light mode, dark mode. What what is it gonna look like in All of these situations, but not only that, you it shows that there's no robots dot txt on this file that I'm looking at. There's, You know, over 60% of your page font size is below 12 pixels.

Uh-oh. I gotta fix that. Like, it it puts us all right In front of me, in this this meta information, and it's shocking that no other browsers have this when we have all of these Ideas of OG images and stuff like that that we all need.

So I guess, the the big question here for me is, like, is this Is every single feature in here a result of dogfooding, or

are are you just good at knowing what people want out of this stuff? Yeah. Like, I need that. I didn't even know you had that feature in there. And, like, the amount of times I've had to deploy something just to test What it looks like in the Twitter card validator, which is broken half the time,

so good. What sorry. When I call this app an iceberg, Wes, you're gonna be saying that a lot there's an endless amount of stuff like that. Sorry. Continue, Kelly.

Yeah. So it's, it's a whole bunch of dogfooding, But also a whole bunch of listening to to people that come with their ideas and seeing how we can make that work. And, of course, like, the the fun thing is that sometimes they ask for something, and it's super easy to implement. And I can email back, like, in half an hour, like, look. It's working. It'll be in the next 3 weeks.

And then other times, something that sounds Just a simple will take me, like, 2 weeks, and I have to say, like, you know, sorry. I'm not gonna do that right now.

And then sometimes I get nerd sniped, and it was like, I yeah. I I need this to happen, so I'm I'm gonna make it happen. Wow. But yeah. So the the info pane is actually the 1st pane that I added or the the panel that I added into Polypaint, because, indeed, it was like, you know, I wanna be able to see all the, OpenGraph previews.

But then I I had that, and I was like, you know, this feels kind of, like, not inspectable.

Like, I I had the I had the previews. Like, I, I hand built all those previews as well and, like, figure out, like, If you use Twitter, then it uses the Twitter description. But if that's not there, it uses the OG description.

And like reimplement

there. Yeah. Yeah. Yeah. Yeah. Like, reverse engineer and figure out all the waste they lie and All the things you can be broken at, and they'll still try and make it work because, you know, that's best for them. Yeah. They want it to work. Yeah. Yeah. But then I had that and was Like, okay, but now I have a Twitter preview and a Facebook preview, but how do they get built? So that's where I added, Like the the top parts where it shows you, like, the favicon and the title and the open graph tags and the the Twitter tags, etcetera. And even get further into this info tab,

the next part of it is the outline tab, which gives you, like, a full on outline of your site based on different things. So the default option being headings, But then you can also do landmarks if you want to get the outline of your site via landmarks, links, images. And honestly, my favorite one is The focus order of things because typically, you know, when you're building for keyboard accessibility, you kinda wanna know where your Keyboard order in generally is, right, your tab order.

If you if you hit the tab button, what's gonna focus on next? And what's really cool is that this is maybe one of the coolest features on here, is there's an overlay. And I didn't know this overlay existed until Kelly and I had a meeting. Andy, he was showing me this outlines feature, and this is something that I completely overlooked.

And it will it will show you a A diagram over the top of your website, 1, 2, 3, 4, 5, with arrows pointing to where to where it goes next In the tab order of your website, so that way you're never having to, like, guess what the tab order is. You can see a visual version of it, and that way you can test it without Having to hit tab a 1000000000 times to see where it goes next. And I can see very clearly from looking at my website, like, When and where the tab order falls apart if it does at all.

It's so cool. It's just like so Was this again okay. I'm gonna just keep asking this, but this outline feature here, was this something people were asking for? Because I've never heard of anything like this. Yeah. So this This was definitely a feature people were asking for.

There are also browser extensions that, you know, adds like the dots.

So you can go 1, 2, 3, and I I think that's in either in Edge or in Firefox now as well, where they'll they'll number it.

But then it becomes like one of those those children's, drawing things where it's like connect the dots. Like, hey. I found 1. Now where's where's number 2? So that's where I, you know, added the arrows. Like, you then you can just follow the line.

And that was fun because, like, it's 1 giant SVG, so I had to figure out How to put, like, the arrow in the middle, and I do that with, like, a a marker element.

So there's there's a little rectangle some not not a rectangle, a triangle somewhere else, and then I Put that as a marker on the middle of each line.

Man. Wow.

You know, a line has a color, But I don't know what color it's going to be displayed on. So I needed my lines to have outlines To make sure that, you know, what whatever wherever it's displayed, where it's light or in dark, that there's enough contrast.

So I I don't have a very sophisticated solution for that. I just draw the line twice, and one of them is slightly thicker and white.

But that that's how you get the the nice outline, and that means that it it works,

like, on every background. I'm curious about this The color picker. There's just so many little things in this app that's like, oh, wow. That is an entire app in itself. It's a whole yeah. Yeah. Like, the how did You how did you build the color picker? How do you even get access to the color of everything inside of this app? Oh, yeah. The color picker has, Like a like a zoom in eyedropper for those of you who aren't using this app. Yeah. So that that's actually a a really new Chromium API. Oh, really? Yeah.

It's called the eyedropper API.

I I was keeping track of that for a while. Like, It it was implemented, like, visually at some point, but it did didn't actually do anything. And then it landed fully.

So I I could already, like, implement all the other parts of the color picker, and then just wait for that to land.

And It landed in, behind the experimental flag first, as as most features do.

Yeah. Then, like, the benefits of building your own browser is you can just turn those toggles on by default

and and ship that. Yeah. I was wondering I was gonna ask about that. Yeah. So you can do that? You can you can turn a flag on in

in in Electron and ship that with that flag on? Okay. Cool. And what about the Screenshot. Is that an another API, or is that a is that a,

Electron API? Yeah. That's just a a regular Electron API. That's nice. It's that's

I guess the benefit of, building in Electron is that the some of the limitations of being in the browser aren't as limiting When you have control of the whole whole browser.

Right? Yes. So browsers have a very strict security model For very good reasons, but but for very good reasons, I don't need that to apply to, like, my part of of Polypane.

And you can configure that really quite nicely in Electron.

If you start building with Electron, There are really good security documentation.

There is really good security documentation available on, like, what to do and what not to do, because you are, like, sort of marrying potentially web content to a thing that has complete access to your entire file system.

So you do want, like, a little bit of a barrier between that. So if you do cool stuff with Electron, go read those those docs.

But, yeah, you you get a little more control over which parts of your app have access to which parts of the operating system. Is everything that you're writing

JavaScript, or do you ever have to dip into native code? At some point, I had some native codes.

But because Electron is a cross platform application, that's actually really annoying, to maintain across, like, across all platforms with changing note versions.

So, specifically, I use native codes to, stitch images together when I create a full size screenshot, so a screenshot of the entire page because there there's multiple ways to do that and Creating multiple screenshots and then stitching stitching them together is by far the best one.

So I was using native code for that, But I ditched that for JavaScript codes. That's 10 times as slow, just so that I I didn't have to bother, Like, recompiling every time I blinked.

And Yeah. That's still fine. Like, 10 times as slow is still pretty okay, in the grand scheme of things.

Yeah. When you're generating a lot of screenshots, you're not you don't need that be like an instantaneous

response anyways, at least in my my experience. Yeah. You you can dress it up as well, which is kind of what I do. Like, I I blur the pane, then I show a little spinner.

And stuff stuff is happening, and that that makes it okay if it Takes a little longer. Don't look. Don't look. Don't look over here. We're doing something.

Okay. So in addition to having all these pains and having all these global tools, there's also Individual tools for each canvas.

So I think it's, a good idea to talk about some of these tools that we have for each canvas, and we can get into some accessibility stuff because this app is filled with accessibility highlights, so to say. Mhmm.

But I love that you can on each of these Individual canvases.

You can add rulers and guides and columns and rows, and you can have programmatic rulers.

And and that was something I had wrote an extension for myself was to drop in some, like, rulers.

And that was never super fun, but I always loved it for typesetting or making sure all my margins are tuned up.

Mhmm. The rulers and guides and columns and rows and those types things. This is inspirational coming straight from Sketch. Is that, like, you're just like, what kind of design tools did could we have in the browser? Yeah. Again, this this started like dogfooding.

Like, I wanted to line stuff up, and, you know, everyone has their own way of doing that in the browser. Like, they'll they'll add, like, they'll open up, like, a notes window and then, like, align it on top of the page, Or they'll open, like, the screenshot tool and then drag that around, and, like, everyone has their own little workflow there.

But all of it is kind of clunky.

So I just wanted to put a line somewhere, and then have it stay there while I did other stuff.

But, you know, then you need some UI to place that line, And, ideally, you'd have, like, some idea of where like, at how many pixels you were placing the line. So I had to Figure out how to write those rulers or, you know, draw those rulers.

And then I had doubts, And then I was like, okay. But, you know, I now have this thing that sits on top of each pane.

Maybe I can also draw columns and and rows in there because it's kind of the same type of math. Mhmm. And I'm I'm not a very big math guy.

I I usually just, like, try stuff until it works.

Like, does this formula work? No. Maybe I need to invert something or whatever.

So if I have something, I I try to reuse it.

That's what I did with the The the columns and the rows, and then

the grid is essentially just those 2 combined. And then you took it another step further with the overlay, And this is a feature I haven't seen too many places else is that image overlay.

So for all of our design challenged folks out there, you know, I personally worked with a lot of developer designer types who, you know, have brought back a a design, And that design does not match the mock up, and you just say, alright. Are you even looking at this thing? And and so this this has a A reference image overlay where you can drop a reference image on top of your pane to design directly on. And I gotta say That that's a feature that I personally don't need, but I know a lot of other developers

who could freely use.

So the the this is, like yeah. I I also don't use this because I design everything in the browser nowadays.

Mhmm. But I do remember fondly sitting down with a designer or developer depending on what my role was and figuring out, like, where doesn't the thing match? Like, where doesn't the font size match? Where is the spacing off? Where and it's just really easy if you can overlay an image, and then figure it out that way.

Or what I usually do if I do end up, like, with a screenshot, like, what what I do sometimes do is take a screenshot of an old version of the page and then show that, and I do that side by side. So there's an option. You can toggle from overlay to side by side.

And then if you do side by side, it essentially becomes another ping.

Mhmm. So it's it's linked to the web page, and it it scrolls along with the web page. Oh, cool. And that way you can you can, you know, still very quickly compare, but it's not Like, I don't care about, like,

8 pixels here or there if if it generally looks good. Yeah. And it's hard to get everything perfect at any Every single screen size. What about, like, your so inside the OnePane, there's debug tools and simulators, which we can talk about this because there's a lot of Accessibility stuff. But before we do, like, what's your what's your background in accessibility? Because it it seems like you've Loaded this thing with accessibility tools.

Yeah. Yeah. Once you start, it's very hard to Stop adding adding cool things. Like, oh, happy this. And then, you you know, the way I've I've set up these debug tools is that each is like a discrete Scripts that stakes the the documents elements, and then you can do whatever.

So it's super easy to add A ebook tool. But yeah. So people do tend to ask me, like, you know, why accessibility? And I I don't have any, like, personal story with that or whatever.

But when I started doing websites, like, web standards were just coming up, and, you know, we were fighting the fights against IE 6. And, You know, that's just where I started. Like, you need to write good x HTML, and your CSS needed to validate, And it needed to be accessible, otherwise, you weren't doing a good job.

And I I still very much Think that way, like, you're doing a job, which is build a website and, like, the browser Compensates a lot for you, which is nice, and that's part of the specification.

But, like, it's your job to make sure that the browser doesn't have to do that because it'll be better for it and it'll be more resilient, and It'll work, like, 10 years from now, 20 years from now, so, you know, better get that right.

And then it becomes well, if you better get it right and the browser makes it really easy for you to do it wrong And, like, conversely, make it really hard to figure out for you what you're doing wrong because the the browser will fix it for you anyway.

How then do you help a developer understand what the issue is and and why what they're doing that seemingly works is actually the wrong thing? So that's where a lot of that that tooling comes from. Nice. Wow. So

inside of these debugging tools, there's, like, one Clicks. You said they're just kind of like scripts.

1 clicks to do so many things. Reachability for your left hand, your right hand, unneeded Scrollbars contrast checker with double a or triple a, track focus, show z index, detect small size, show ARIA attributes. There's the Ally CSS that does, like, an overlay. There's totally Ally, which I haven't used this before, but it seems like, its own tool that Yeah. Allows you to again have, like, overlays.

Then in as far as content goes, readability, There's a content chaos test.

What is the content chaos test?

So that that'll take Each text note and randomly half it, double it, or triple it. Oh my god. So it's essentially like a super quick way to test if your stuff doesn't break.

If you, for example would translate it to German indeed. Yeah.

Oh my gosh. This is so helpful. Those of you don't I don't I don't think about this. So many times you get a design from a designer, that has a card with perfectly tuned, you know, 16 characters or whatever for your text, and then you start plugging in some real text and the whole thing breaks. So this is like a great opportunity to show your designers, like, what this could very well look like in various situations and get people really thinking about dynamic sizes and dynamic things. There's also one click to disable CSS, one click to disable images, one click to disable JavaScript, which, like, Testing that kind of stuff is never any fun. You got to do Mhmm. Jump through hoops to do it. You have to hunt and find. These are all just a one click away.

There's also a bunch of simulators for, disability issues. So you can simulate color blindness color blindness of different types, blue, yellow, red, green, Bulk like, every different I I didn't even know there was more than, like, 2 or 3 types of color blindness, and I'm looking at, like, 20 of them here. So, it's While you can simulate farsightedness, tunnel vision.

I like the dyslexia simulator. It's a little cheeky, but it's fun.

You can simulate a night mode or a brighten screen or a dim screen.

Wow. So there's just so many I'm sorry. I'm I'm gonna this whole episode is gonna come off like an advertisement because I I I just I really like, the fact that you've made all of these things that are No fun to test for. And what happens is people just don't test for them. Exactly.

They just ignore them. And you made it really easy for for people to have these at a glance.

And even to continue that further, there's media emulation and network. You can auto quickly toggle, prefers color scheme, reduce motion, forced colors. These are the types of things that, again, so many people just straight up, you know, ignore because they're hidden behind hidden behind menus. Is that really The the goal here is to just bring all of these these

useful things to people's fingertips. Yeah. Just make it super easy to test All the things you should be testing because, you know, if something like, for example, do you know how to disable JavaScript in Chrome? I don't.

I and it goes in there. The menus or the preferences? Out of the hunt for it. Yeah. Yeah. And and, you know, I've been using that for

well over a decade.

And and, you know, that's mostly okay Because, like, Chrome isn't for developers. Chrome is for users. And if a user accidentally disables JavaScript, then, you know, that's very bad.

You don't want that to happen, but the benefit of polypane is that I can have an entirely different balance in terms of, You know, what what features I surface. So there's, like, there's no bookmarks at the moment, though people are asking for that, so I'll probably implement it.

But there are, you know, these debug tools that make it really easy to, you know, have a light pane and a dark pane side by side. So you're you're not constantly Switching back and forth.

Handy. So Yeah. So all of the things in Polypane really work well together In that in other browsers, what usually happens is that you you can only ever see one thing And one variant. And it's usually when you see multiple variants side by side that you notice the things that are wrong.

That makes sense. Because you'll see, like, the light mode and the dark mode, and then you'll see, like, a specific text that's The same color on both that you you don't expect. But if you only see the 1, then that doesn't, Jump out as much, and probably you forgot to switch, like, 1 variable for 1 element.

And if you see it side by side, that's very Very easy to find.

Whereas if you keep toggling, then, you know, your eyes need to readjust, like, not super long, but for an instant.

And you you miss those things.

At the end of the day, that's a quality issue and maybe not a huge quality issue.

But, if you can you know,

I want people to make better websites. That's that's the whole thing. We we talk about that a lot. It's like if tooling Tooling is really the only way to make some of these things, websites, faster, better, stronger, whatever.

The human is only going to do so much. And if we want things to if we want to do things like compress all of our images or or convert them to web p if it's supported, All of that type of stuff, that can't be a manual task. You have to have some sort of tool in place to to do that.

1 question I'm curious here is about, like, I know you You can list all the breakpoints and whatnot. Do you have to parse the CSS on the page at all? Or Yes. Like, is there any cut so what is that? Is that a bunch of node processes?

Yeah.

And it's not quick.

And, there's a bunch of stuff I want to do, but can't right now, because the browser APIs just don't exist.

And, like, there's attention there because I want them to exist, but the specification writers Generally, don't because it's not like user facing. It's it's tooling.

And if it's tooling, then, you know, The Chrome DevTools team can just build that in c plus plus and use it, rather than, You know, making that accessible through JavaScript APIs. So for example, I had to implement layer support in the, Polypane elements panel.

But The way I do that is with the JavaScript CSS object model.

So I I parse CSS style rules.

And for each of those, you don't necessarily know whether or not they are in a layer.

You have to, like, parse up the tree until you find a layer and then match that, and then parse further because, you know, you can put layers in layers In layers in layers in layers in layers.

So I have to do all this manual stuff to figure out, like, what does the layer 3 actually look like And then which rules sit in which layers? So there there are things the polypane elements panel doesn't do.

For example, if you import CSS, you can assign a layer to that import.

I haven't implemented that. I might at some point, but, if you really need that, then you you are going to need the the Chrome dev tools for that. Yeah, man. Wild. So, okay.

I I could go on all day about this stuff because there's a lot of, like I said, a lot of tools that are Just not on the surface level of this thing.

Is there anything that we missed that you're particularly proud of, or or do we hit all the big big stuff? So one of the things that

either surprise people at first or they they don't notice it at all, But Polypane can actually sync hover effects across all the different panes.

So you can Nice. You can, Like, hover over your menu, and if that does a fancy thing, it it'll do that in all the panes.

And, again, that really speeds up your workflow if you're, Like testing stuff, and it can do that for hover, for focus, for form inputs.

So if you have, like, a bunch of forms to test, Then you can just do that in a single pane, and then all the other panes will automatically follow.

But then if you submit the form, I catch that and make sure that it only happens in one pane Rather than you, like, sending your server 14 forms to process and, you know, delete this line from the database extra hard or whatever.

So I, yeah, I I do really or I think I do really clever stuff with the syncing.

And if you don't notice it, that means it's it's doing its thing. And if you do notice it, that Also means it's doing its thing, I hope.

But, yeah, I I really like that. It took me a long time to get that right, but it still feels like magic whenever I you know, I test all the websites all the time in Polypane. And, you know, whenever I see the sinking. It really, really makes me very happy. That's awesome.

Okay. Now's the part of the show. We're gonna get into the Supper clubs where we ask you the same kind of questions we ask everybody.

West, do you wanna take that first one?

Yeah. What, computer are you using with this? And I'm gonna add on top of that monitor.

Do you have a massive monitor to put all these panes in there?

No. Actually, so I I have a a a NUC that I use, which runs Linux, which is my primary device?

A knock is spelled. Yeah. I don't know knock. Oh, it's,

It's a soother in Canada.

It's, it's like a max sized Intel device.

So Nuxt are made by Intel, and Nuxt stands for next unit of computing.

Oh, I've seen these online as tech tips. It's like a little box. Yeah. They're just, like, tiny machines. They sit on your on your desk, and they're really nice. I have one for my my home media center.

And then when I went to look for, like, a new desktop computer, I was like, I'm not gonna Get this big, big machine and and, you know, constantly bump into it with my knees.

I'm just gonna get, like, a little box, and and that'll be fine.

For the longest time, I used a 10 year old's 24 inch Samsung Sync Master screen. Sync Masters were the best. Yes.

And, I mean, it it it still hasn't died, but I did replace it recently.

So the reason I used it for a very long time was because I don't think that If you have the fanciest monitor as a designer that you actually design things well for regular screens, So you you need a little bit of crappiness to make sure that you compensate for, like, the average Asus laptop That's you know, that sits in a corner somewhere that no one really wants to use. Yeah.

But I I replaced that with a Lenovo 7 a 27 inch screen.

I forgot which which one, But it has, like, a really fancy foot. Like, there's, it sits on the table with, like, a a little square, and then there's 1 pole going to, to the screen, so it's, like, really clean under the

under the monitor. Yeah. What about, like, keyboard? Do you use anything

Interesting for a keyboard. Well, I so before we go to that, I also have an Intel MacBook, which Oh, okay. I'm on right here. Yeah. And I have this thing, which is oh, of course, you can't see that, but, a Surface Go, a Microsoft Surface Go. So, of course, I need to make sure that Polypane works well on all the operating systems. Mhmm. Yeah.

But I, again, didn't want to buy a Windows machine that, you know, that's a big laptop or a big box.

So I got a Surface Go.

It's very slow, Now I'm thinking of replacing it with, like, the newer version.

But, again, that's kind of okay because it means I can test Polypane on something that's that has a Pentium Processor. I kid you not.

They, like, they resurrected That Brent name specifically for this device? Oh,

I we used to test IE 6 on a, Like a CRT monitor, like old computer. Oh my gosh. It felt very, like, appropriate to do so. You would, like, have to boot it on and, like, come back to it 10 later. Alright. Let's test out e six. Alright. Let's take a look. Yeah. It's it's kind of like that.

Yeah. Yeah. So in in terms of keyboard and mouse, I just used the Logitech MX Keys and the MX Master 3.

Up until a year ago, I had the MX Revolution, which is the best mouse ever, but, hasn't been made in well over a decade. And mine finally died, and I Couldn't repair it, so, I got the MX Master 3, and it's decent.

Oh, yeah. I've I've been on the MX Master 2 for years. I bought it like a a month before. I remember telling Scott, oh, I got the new MX Master. It was on sale. And he's I'm pretty sure it was Skye. That's because the new one's coming out next month. Oh, it wasn't me. I'm gonna tell you that because I am not on Now now I stand out. I I I do, like, trackpad all day. Give me the biggest trackpad that exists, and I'll take that. Oh, man.

That's cool. What about your text editor?

I still use Atom.

I've tried switching over to Versus codes, Like, 4 or 5 times, and I I just get stuck on the particulars.

Like, For example, everything in Versus code has a pointer cursor, and that just annoys me to no end.

Like, that's not how a desktop app works.

Like, that's another thing.

You know, Versus Code is Electron. Atom is also Electron. Polypane is Electron.

But, like, there are rules for how a desktop app should behave, in terms of Hover effects, Gershaws, all sorts of things, context menus.

And I just want that to work more or less consistently across all my apps. Yeah. And Atom does it well, and Versus Code still doesn't.

So I, like, I put up Versus Codes Sometimes, if I need, like, like, I I'm I built an Astro website, and there's no Astro template support in Atom, so that's annoying to write. So I do that in Versus Code.

And then go back. When I need to do react again, I just go back to Atom.

Awesome. And I'll I'll I'll keep trying for a while, but, Yeah. Atom works,

and I'm happy with it. If it works, it works. What about, if you what do you do to stay up to date in programming stuff. I read

a lot of newsletters.

I try to stay up to date with what all the browsers are doing naturally.

Mhmm.

And that that's mostly, like, Chromium bug reports and, canary releases and and stuff like that.

That's mostly it. Like, I I read a lot of articles online, and I get them from wherever.

Nice. I used to be a very big reader user, like Google Reader, but that died, and I haven't really found the proper replacement, and I don't think I ever will.

Like, Twitter Google Playground. Yeah. Took that role for a while, but We'll we'll see how that goes. Yeah. Yeah.

Yeah. Might be, might be not around for a a little bit more.

So you are obviously up to date with browser tech and probably APIs and everything that's coming down the thing. Is there anything that you're really excited about or Or maybe Wish would move a little bit faster.

So I I really like that CSS nesting is now getting traction.

Yes. Yeah.

So, that's like, a version of that is behind the flag in the most recent Chromium, so that's that's kind of cool.

I think style queries are going to be very cool.

I haven't really gotten into container queries yet, because every time I want to use container queries, I end up with something that actually is more suited for media queries, and I use that instead. So, for example, I just built, JSON fewer into Polypane.

I was like, cool. Now I can just use container queries everywhere because That's super well supported in in the very specific browser version that I know I ship.

Yeah. You ship the flag. Yeah. Or just even without a product. Yeah. Yeah. Yeah. And,

I ended up not using it because I I didn't need it.

And, you know, would I have used container queries? I would have actually had to write more codes To to make that work, but I think style queries are going to be very cool, particularly when you can combine that with, CSS custom properties, and then a little further down the line, CSS toggles, which let you keep, like, state like things in CSS.

So that's all going to be very, very interesting. Man.

Yeah. CSS is going to be a totally different I mean, it always feels like this, but it it they're gonna it's gonna be a totally different landscape very soon here.

I mean, especially once container queries drop. But, again, after all this other stuff, I mean, we Wes and I have had so many episodes on the future of CSS, and we've never Had 1 on CSS toggles. This just goes to show you, like, how many different things are coming to the browser here for CSS.

Okay.

What about, sick picks and shameless plugs? Did you come with a sick pick for us today? Yeah. But it's kind of an ask as well.

So for the past year, I've been wanting a split orthogonal keyboard.

Me too.

Yeah. I know because I I found actually one of your comments on Reddit, a while ago with, like, the exact same problem I have, which is that I want 1, but I don't know anything about it.

It's all super intimidating, and I definitely don't want to spend a couple €100 and then solder something myself, which I've never done before. And then, like, either lose a limb or, or worse.

So So, yeah, my sick pick is if someone could come up with a split orthogonal keyboard with low profile keys That's prebuilt.

Then I I'm your guy. I'm gonna give you money. Please let me know. Yes.

I'm in the same boat. I will I'll gladly take your money for that exact thing. I want low profile, and I want a split split keyboard. Cool. What about shameless plugs? Would you like to plug anything?

Well so I have this browser, but, you know? So, yeah, we talked about Polypane, but, I also have 2 other tools that I think are pretty cool. So I have a tool called Fix Alley, which is fixaoneoney.com, which is for now, it's a free browser extension that you can install and that will just Automatically fix contrast issues on all the websites you visit.

Oh.

How nice. This for Polypane, So the contrast checkering polypane will automatically provide you with a color for every contrast issue.

So it'll be like, you know, this gray is way too light. Here's a better gray, or here's a better blue, or here's a better red. Like, whatever color you use, I find the the closest one that does have enough contrast, and I just repackaged that into a thing that Fixes browsers for peep or fixes websites for people, so then you you don't really have to bother as a user anymore. As a user, you just want it to work.

And the idea is that, you know, as time goes on, I'll add more and more, extensions that, like, fix these Small or big accessibility issues for people, and, like, just in a way that it just fixes it for them and they don't have to think about it.

So that's that's my my shameless plug number 1.

The other one is another app I built called Superposition dot design.

So Superposition is an app where you open your web page, then it parses all your CSS.

You can see where I got that from, and then it spits out design tokens for you.

Man. So you can export that to CSS, to JavaScript, to Android XML.

And I also built an Adobe XD and a Figma plug in. So if you have the app open And you have XD or Figma open, then you can use the design tokens directly in your design tool. These things don't rule. I'm gonna throw on polypane.app

as well into this list. We'll have all these links available in the show notes. Everyone, go check all this stuff. And, Killian, you are, killing it in the, design tools and dev tools.

Awesome. Yeah. Thank you so much for coming on. This I could honestly probably ask you questions for another hour of, how did you do this? What's this? And this is really, really cool.

Cool. Alright. Well, thanks again. Really appreciate it. Likewise. Thanks. Thanks,

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player Or drop a review if you like this show.