Supper Club × Polypane with Kilian Valkhof

7 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, in terms of Still just plain CSS because that's what I'm I'm good at what I understand, Like, 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.

Yeah. I know because I I found actually one of your comments on Reddit,

split keyboard. Cool. What about shameless plugs? Would you like to plug anything?

Yes. Yeah.

Please

you know? So, yeah, we talked about Polypane, but, which And then at some points, I thought,

So, yeah, my sick pick is if someone could come up with but, OpenGraph previews.

so I I have a a a NUC that I use, And you you miss those things.

killing it in the, design tools and dev tools.

So And, ideally, you'd have, like, some idea of where

and I definitely don't want to spend a couple €100 that doesn't, Like, where doesn't the font size match? Where is the spacing off? Where or worse.

I'll add more and more, because you are, like, sort of marrying

Like, that's another thing.

I've At the end of the day, that's a quality issue and specific information for form elements that, You know, show you just a little bit more information than, Hover effects, Gershaws, dot design.

design things well

if you what do you do to stay up to date in programming stuff. I read and columns and rows, and you can have programmatic rulers.

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.

like, a version of that is behind the flag in the most recent Chromium, for the past year,

browser version that I know I ship.

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

No. Actually, with changing note versions.

Mhmm.

these they need to make desktop apps work, You can see where I got that from,

in CSS.

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

West, do you wanna take that first one?

and I use that instead. So, And if it's tooling, then,

And don't forget to subscribe in your podcast player

Yeah. You ship the flag. Yeah. Or just even without a product. Yeah. Yeah. Yeah. And, 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.

Small or big accessibility issues for people, to make that work, I also have an Intel MacBook, which Oh, okay. I'm on right here. Yeah. And I have

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.

So Yeah. Yeah. Once you start, it's very hard to 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

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

Oh.

a Microsoft Surface Go. So, It's called the eyedropper API.

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

oh, of course, you can't see that, but, a Surface Go, like, Chromium bug reports

it sits on the table like editing 1 and then editing the other and then editing the 3rd Like, Twitter Google Playground. Yeah. Took that role for a while, but It's a soother in Canada.

So you are obviously up to date with

user,

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

for a full archive of all of our shows.

keyboard.

that has a Pentium Processor. I kid you not.

but I don't know anything about it.

And the idea is that, you know, as time goes on, 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.

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

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, Interesting for a keyboard. Well, I so before we go to that, It's all super intimidating, And I I don't have any, like, personal story with that or whatever.

I want 1, big, big machine and and, you know, constantly bump into it with my knees.

Get this

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

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

like Google Reader, but that died, and

and then it spits out design tokens for you.

But I I replaced that with a Lenovo And it's not quick.

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.

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

I'm in the same boat. I will I'll gladly take your money for that exact thing. I want low profile,

and I get them from wherever.

CSS toggles, including and I just started using it. And that was a really cool experience.

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.

and there's no

So that's all going to be very, and it's just really easy if you can overlay an image,

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

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.

which runs Linux, which is my primary device? But Browsers do a lot of really clever stuff to whatever you type into the URL bar before it ends up being rendered.

It's very slow, 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 Now I'm thinking of replacing it with, like, the newer version.

which one, But it has, like, a really fancy foot. Like, there's, Like, the the cleverness that many browsers do is more around, like, HTTPS stuff.

a while ago So,

that you can install

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

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

I just used the Logitech

and, went to look for, like, a new desktop computer, I was like, I'm not gonna button that said reload next to it, apps. Yeah. And Atom does it well, and Versus Code still doesn't.

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

provide you with a color Nice. I used to be a very big reader so for example, if you're if you have HTTPS and your site only works with about www, I don't need that to apply to, like, my part of of Polypane.

for every contrast issue.

Or drop a review if you like this show.

I also have 2 other tools that I think are pretty cool. So I have a tool called Fix Alley, tool. But yeah. So Electron API? Yeah. That's just a a regular Electron API. That's nice. It's that's

color you use, I find the the closest one that does have enough contrast,

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

so, I got the MX Master 3,

and I'm happy with it. If it works, it works. What about,

But, like, there are rules for how a desktop app should behave, see How it all fit together.

So the contrast checkering polypane will automatically sophisticated solution for that. I just draw the line twice, and one of them is slightly thicker and white.

with, like, a a little square, and then there's 1 pole going to, like, web standards were just coming up, The other one is another app I built called Superposition It's, You don't want that to happen, but the benefit of polypane is that I can have an entirely different balance

I was like, cool. Now I can just use container queries everywhere because That's super well supported in in the very specific and they're really nice. I have one for my my home media center.

Yeah. CSS

a Windows machine Or people do tend to ask me, like, you know, why accessibility? CSS object model.

would have actually had to write more codes your page useful things to people's fingertips. Yeah. Just make it super easy to test All the things you should be testing this thing, which is

is

laptop a 27 it's like a max sized Intel device.

and it's decent.

with, like, the exact same problem I have, which is that But I ditched that for JavaScript codes. That's 10 times as slow, that you actually

That's cool. What about your text editor?

And I just want that to work more or less consistently I still use Atom.

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

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, So there's there's a little

things are coming to the browser here for CSS.

low profile keys

And, you know, would I have used container queries? I So I got a Surface Go.

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.

and I want a split

So the reason I used it for a very long time was because I don't think the, because the the browser will fix it for you anyway.

inch screen.

to the screen, so it's, like, really clean

I I just get stuck on the particulars.

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,

which is fixaoneoney.com,

So I, like, I put up Versus Codes So you you need a little bit of crappiness to make sure that you compensate for, like, the average Asus which is like a single thing displaying a web page.

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

Like, For example, everything in Versus code has a pointer cursor, passing the HTTP to HTTPS

Awesome. And I'll I'll I'll keep trying for a while, but, And then when I

Head on over to syntax.fm

So I guess, the the big question here for me is, like, one click to disable JavaScript,

light mode, dark mode. What what is it gonna look like in All of these situations,

Uh-oh. I gotta fix that. Like, it it puts us all right

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.

is this Is every single feature in here a result of dogfooding, or

it's a whole bunch of dogfooding, buy mostly a lie as far as browsers are concerned.

there. Yeah. Yeah. Yeah. Yeah. Like, reverse engineer But then I I had that, and I was like, you know, this feels kind of,

links,

And like reimplement

images. And honestly, my favorite one is the grid is essentially just those 2 combined. And then you took it another step further with the overlay,

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,

But then you can also do landmarks if you want to get the outline of your site via landmarks,

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,

And it will it will show you a

you kinda wanna know where your Keyboard order in generally is, right, your tab order.

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 When and where the tab order falls apart if it does at all.

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, But all of it is kind of clunky.

to people that come with their ideas Whereas if you keep toggling, then, you know, your eyes need to readjust, like, not super long, but for an instant.

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 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, That's prebuilt.

sorry. I'm not gonna do that right now.

In front of me, in this this meta information,

it shows that there's no robots dot txt on this file that I'm looking at. There's,

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,

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

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,

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,

like, not inspectable.

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.

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 seeing how we can make that work. And, of course, like, the the fun thing is that

But also a whole bunch of listening to

A diagram 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

but how do they get built? a big box.

Yeah. So it's, To if you want which is for now, it's a free browser extension

but not only that, you

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,

The focus order of things because typically, you know, when you're building for keyboard accessibility,

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.

like, I'm I'm not an expert, So, specifically, I use native codes to,

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,

quickly enough.

Yeah.

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,

spec wise Yeah. So I did that, and then, of course, I added a pithy message rather than, And I I still very much workflow which

like, it is a user facing

and all the browsers nowadays, You know, whatever Like, I I had the I had the previews. Like, I, there.

product, built, like, this mini app across all my But when I started of course, I need to make sure that Polypane works well on all the operating systems. Mhmm. Yeah.

Yeah.

is like, everyone has their own little In Polypane, I do do that.

So it feels very much like a browser. Right? You said it's built in electron on top of your pane to design directly on. And I gotta say highlights, so to say. Mhmm.

All the cleverness that browsers do Wow.

www disables JavaScript, an image compressor, But, again, that's kind of okay because it means I can test Polypane on something that's like, I I'm I built an Astro website, part of a URL So I, you know, I kept working on it a little bit,

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

the the the front end here.

with React on,

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

.com I don't.

Kept it up to date. Now it's at React 18.

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

and you type it with www.

That probably shouldn't happen, which let you keep, like, state like things and, like, just in a way that it just fixes it for them and they don't have to think about it.

So the this app started with React 0.14

or You have, like, a

local host or dot locals,

and, you know, just extensions that, like, fix

and just lots and lots and lots of components everywhere. That's unreal. So the for form inputs.

Yeah. But But no browser will do that And then it becomes well, if so, you know, so that's that's kind of cool.

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

to maintain but I think style queries are going to be very cool,

And you know, just like pressing command s all the time, like, this is kind of dumb.

that's actually

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

a thing that has complete access to your entire file system.

of building your own browser is you can just turn those toggles on by default for regular screens,

really annoying, Astro and

So I was using native code for that,

For very good reasons,

There is really good security documentation available on, like, what to do and what not to do,

and then just wait for that to land.

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

building in Electron is that the some of the limitations

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,

which parts of the operating system. Is everything that you're writing And that was fun because, like, it's 1 giant SVG, so I had to figure out How to the regular Chromium tooltips.

which parts of your app have access to and that will just Automatically fix contrast issues on all the websites you visit.

behind the experimental flag first,

is by far the best one.

There are really good security documentation.

But, yeah, you you get a little more control over

Right? Yes. So browsers have a very strict security model but, like, Yeah. Atom works, So Nuxt are made by Intel, and Nuxt stands for next unit of computing.

of being in the browser aren't as limiting

I guess the benefit of,

as as most features do.

So I I could already, like, implement all the other parts of the color picker, 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.

application, You know, figuring out and playing around with, otherwise, you weren't doing a good job.

across, 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

but but for very good reasons, the Chromium dev tools, they work by attaching to, Inspecting, stitch images together when I create a full size screenshot, with a screenshot, 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 under the

like, across all platforms To, you know, to figure out how the URL which is the best mouse ever,

It landed in, Put that as a marker on the middle of each line.

When you have control of the whole whole browser.

and then parse further because, you know, you can put layers in layers In layers in layers in layers in layers.

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,

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

color blindness color blindness of different types, blue, yellow, red, green,

and then match that, that just annoys me to no end.

You have to, like, template support in Atom, so that's annoying to write. So I do that in Versus Code.

if you can you know, name specifically for this device? Oh, That's a subdomain. That's a different URL, so it just should just give a four zero four.

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?

I really like, You know, over 60% of your page font size is below 12 pixels.

or or do we hit all the big big stuff? So one of the things that

Switching back and forth.

Generally, don't because it's not like user facing. It's JSON fewer into Polypane.

The way I do that is with the JavaScript Like, does this formula work? No. Maybe I need to invert something or whatever.

in other browsers, what usually happens is that you you can only ever see one thing

but the specification from Photoshop.

tunnel vision.

because,

whatever.

if you really need that, then you you are going to need the the Chrome dev tools for that. Yeah, man. Wild. So, okay.

Handy. So Yeah. So if one of them doesn't work,

I had to implement layer support in the, You know, a line has a color, So before that, it was all Python, and I was essentially, like, stumbling my way through, started my first company when I was 16, like, align it 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.

Yeah.

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

disability issues. So you can simulate

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.

I haven't implemented that. I might at some point, but,

Jump out as much, And Yeah. That's still fine. Like, 10 times as slow you don't necessarily know whether or not they are in a layer.

all of the things in Polypane really work well together

The the goal here is to just bring all of these these

And,

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

And, like, there's attention there because I want them to exist, The the columns and the rows, and then in terms of,

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

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.

parse up the tree until you find a layer Because one of my pet peeves was that I'm like, I'm a serial, a split orthogonal hasn't been made in well over a decade. And mine finally died, and I Couldn't repair it, it landed fully.

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,

In that

websites, faster, better, stronger,

you know, if something like, for example, do you know how to disable JavaScript in Chrome?

Wow. So

then, you know, that's very bad.

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

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

While you can simulate farsightedness,

And and, you know, that's mostly okay So you can go 1, 2, 3, and I I think that's in then just so that I I didn't have to bother, Like, recompiling Because, like, Chrome isn't for developers. Chrome is for users. And if a user accidentally

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.

Is there anything that we missed that you're particularly proud of,

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

there's a bunch of stuff I want to do, but can't right now,

sit in which layers?

And one variant. And it's usually when you see multiple variants side by side that you notice the things that are wrong.

writers

it's

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

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

You can add rulers

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

Individual canvases.

So for all of our design challenged folks out there,

every time I blinked.

That's what I did with the well over a decade.

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

else is that image overlay.

And this is a feature I haven't seen too many places

But I love that you can on each of these

Yeah. When you're generating a lot of screenshots,

I wanted to line stuff up, and, How nice. This for Polypane, 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 And, I mean, it it it still hasn't died, but I did replace it recently.

in the grand scheme of things.

and then, like, You know, that's just where I started. Like, you need to write good For the longest time, I used a 10 year old's particularly when you can combine that with, So I I was using that workflow in Sketch, So at that point, But I get I get questions about that. Like, why what I usually do if I do end up, and probably you forgot to switch, like, 1 variable for 1 element.

And stuff stuff is happening, all sorts of things, context menus.

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.

is still pretty okay, And you can configure that really quite nicely in Electron.

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.

they'll open up, like, a notes window you know, The Chrome DevTools team can just build that in c plus plus and use it, like,

and then have it stay there while I did other stuff.

you're not you don't need that be like an instantaneous Okay.

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.

So I just wanted to put a line somewhere, And, So I think if you're the developer of a website, you should know.

like, at how many pixels you were placing the line. So I had to Figure out how to write those rulers or, you know, a lot for you, which is nice, and that's part of the specification.

on top of the page, Or they'll open, like, the screenshot tool and then drag that around, and,

you know, everyone has their own way of doing that in the browser. Like, they'll they'll add, like, and then you can do whatever.

But, you know, then you need some UI to place that line,

And then at some point, I was like, you know, this is kind of dumb. I could just so then you you don't really have to bother as a user anymore. As a user, you just want it to work.

You know, did some other things, came across, and then all the other panes will automatically follow.

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, and just, like, plain CSS.

faster, easier, better.

Polypane

as a dev tool,

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

whenever you did press command s. Mhmm. It'd be like, I already saved this while you're pressing command s.

And,

tools to help me I

Hey, everybody. Excited to be talking about polypain.

about? With me as always is Wes

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

build an app that just saves automatically every time I type something.

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.

not really having an idea what I was doing, but or the the panel that I added into Polypaint,

Web technologies.

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

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

You know, at at some point, it works, and then I stopped touching it.

I built a Linux interface for f. Lux, You know, making that accessible through JavaScript APIs. So for example, all the operating systems do that, Press alt, which shows the the tooltip, Build websites

autosaver.

which makes your screen more yellow at night. Like, nowadays, Stop adding adding cool things. Like, oh, happy this. And then, you you know, Yeah. Then, like, the benefits very interesting. Man.

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.

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.

And that's when I really started,

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

Responsive view ports in 1 canvas so you can see your your site and all these different,

Note taking application.

2015, That's mostly it. Like, I I read a lot of articles online, So that's where a lot of that that tooling comes from. Nice. Wow. So

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

build desktop apps with I haven't really found the proper replacement, because the browser APIs just don't exist.

Like, a decade ago,

And then, like, shortly after Node Web Kits,

a a dev tool browser

you know, making a bunch of desktop apps. So I started out with, like, a super simple But, 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,

Yeah.

and your CSS needed to validate, And it needed to be accessible,

it it seems like you've

like, rectangle some not not a rectangle, a triangle somewhere else, and then I So there there are things the polypane elements panel doesn't do.

the way I've I've set up these debug tools is that each is like a discrete Scripts that stakes the the documents Electrom came out.

show ARIA attributes. There's the Ally CSS that does, like, an overlay. There's totally

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

doing websites, Or the URL that the user actually meant, You know, Versus Code is Electron. Atom is also Electron. Polypane is Electron.

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 If you use Twitter, then it uses the Twitter description. But if that's not there, it uses the OG description.

So it's super easy to add A ebook because, indeed, it was like, you know, I wanna be able to see all

and, you know, we were fighting the fights against IE 6. And,

which is build a website and, and then figure it out that way.

you're doing a job, I've been wanting 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.

1 clicks to do so

Compensates

you better get it right and the browser makes it really easy for you to do it wrong And, like, conversely, They, like, they resurrected forward you to to the www or without www Well so I have this browser,

many things. Reachability

z index, detect small size,

Loaded this thing with accessibility tools.

elements, And for each of those,

Ally,

It'll work, like, 10 years from now, 20 years from now, 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.

better get that right.

make it really hard to figure out for you what you're doing wrong

checker with double a or triple a, track focus, show you know, ignore because they're hidden behind hidden behind menus. Is that really Yeah.

Think that way, but That Brent

which I haven't used this before, but it seems like, its own tool that Yeah. Allows you to again have, like, overlays.

for your left hand, your right hand, unneeded Scrollbars contrast

This is

Oh, I'm starving.

Welcome to the Syntax

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,

Kylian

so buckle up and grab that old handle because this ride is going to get wild.

I sure hope you're hungry.

the Syntax supper club.

Oh, nice. Okay. Hear

Supper Club.

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

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

it that well.

We have,

We're gonna be talking about

let's talk a little bit about How it's built. So,

because while that is, like, a great feature, Me too.

you mentioned that you were doing a lot with Electron. Is this an Electron app? Is that is that the Yeah. Yeah.

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,

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,

See all of your windows at once when you when you're designing things. And in fact,

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

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

So that that'll take it still feels like magic whenever that's

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.

Then in as far as content goes, readability,

chaos test.

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,

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,

There's also a bunch of simulators for,

What is the content chaos test?

that has a card with perfectly

There's a content and

tuned, Today, we have of a very special guest.

You could really see, like, see the connections and and

Wow. At that point, like, the landscape

looked quite different.

Why not try and build that? Maybe I can also draw I hand built all those previews as well and, like, figure out, like, and figure out all the waste they lie and That's you know, that sits in a corner somewhere that no one really wants to use. Yeah.

I was back in Chrome,

but back then, it was revolutionary.

polishing it, all the things. Nice. So it started out as, like, an iframe kind of,

really enjoying myself.

and that's that's really when I decided, like, you know, this is what I wanna do And started,

I figured, you know, there's probably something here. Maybe I should take this a little bit more seriously, tried switching over to Versus codes, Like, 4 or 5 times, and I design everything in the browser nowadays.

And it was just a really good way of designing and then keeping the overview And that that's mostly, So I I parse CSS style rules.

which, like, again, now it's not that special, Polypane elements panel.

And one of the cool things that Sketch did at the time was something called artboards, really makes me very happy. That's awesome.

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.

But then when it came to the point where I had to implement designs, more of an idea of what to do.

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

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 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 then solder something myself, which I've never done before. And then, like, either lose a limb or, x HTML, 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 potentially web content to and I don't think I ever will.

designs.

in,

at 1 night like, the browser they will proactively We'll we'll see how that goes. Yeah. Yeah.

with 3 iframes side by side and an address bar on top of it, like, with an But with Node Web Kits, I have Yeah. Yeah. So in in terms of keyboard and mouse, I forgot

And it ended up I was 60% But, you know, back then, it was pretty special that such a tool existed.

before Polypane and after Polypane, CSS custom properties, and then a little further down the line,

so quite a quite a while ago.

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

So I did. I

like, fully working on polypane, adding a whole bunch of features, The for example, I just built, But that that's how you get the the nice outline, and that means that it it works,

I remember that. Yeah.

until at one point, I started comparing my hours, Up until a year ago, I had the MX Revolution, And I was just happily using it, but not really thinking much about it, faster in implementing So if I have something, I I try to reuse it.

of, you know, which components look Which way? At different sizes.

Like, I don't care about, like,

overlay where you can drop a reference image

And and so this this has a A reference image

like, what what I do sometimes do is take a screenshot of an old version of the page 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.

you know, I personally worked with a lot of that is More full featured than anything else, I think, in this class. So you have all of the different,

like yeah. I I also don't use this because

sitting down with a designer or developer depending on what my role was and figuring out, like, where doesn't the thing match?

but I know a lot of other developers So welcome to Syntax, Killian.

So the the this is, 24 inch Samsung Sync Master screen. Sync Masters were the best. Yes.

who could freely use.

And that design does not match the mock up, and you just say, alright. Are you even looking at this thing?

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,

That that's a feature that I personally don't need,

developer designer types who, you know, have brought back a a design,

this line from the database extra hard or whatever.

Then the info pane is actually the 1st pane that I added Mhmm. But I do remember fondly

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.

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.

delete But because Electron is a cross platform keyboard with that If you have the fanciest monitor as a designer So, I I built, I try to stay up to date with what all the browsers are doing naturally.

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

So if you have, like, a bunch of forms to test, And then other times, something that sounds Just a simple will take me, like, 2 weeks, and I have to say, like, you know, 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.

and it can do that for hover, for focus,

Rather than you, like, sending your server 14 forms to process and, you know, because that's a very bad user experience.

I catch that and make sure that it only happens in one pane 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? I you know, I test all the websites all the time in Polypane. And, you know, whenever barrier, Sometimes, if I need, like,

And, again, that really speeds up your workflow if you're, Like testing stuff, then you can use the design tokens directly in your design tool. These things don't rule. I'm gonna throw on polypane.app that, you know, that's a big laptop or maybe not a huge quality issue.

And if you don't notice it, that means it's it's tooling.

But then if you submit the form, MX Keys and the MX Master 3.

I see the sinking. It really, If you start building with Electron, I I built that because, and I do that side by side. So there's an option. You can toggle from overlay to side by side.

you can just do that in a single pane, but, Like, specific information for images, specific information for links, Then I I'm your guy. I'm gonna give you money. Please let me know. Yes.

So I, yeah, I I do really or I think I do really clever stuff a split orthogonal

isn't a really good experience

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

a web contents,

JavaScript draw those rulers.

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 I think style queries are going to be very cool.

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, developer tools,

Multiple pages, and I do that with, like, a a marker element.

And it's it's super good at that, but I'm displaying with the syncing.

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, But, yeah, I I really like that. It took me a long time to get that right,

across all the panes.

dev tools. So is your

and then see if the alt text is there and if it makes sense. Man, Man. Wow.

That that's

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, and then show that, canary releases and and stuff like that.

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.

because this this section of it I mean, it's such a a small section of the app overall,

One of the my favorite 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,

Yeah. So it it has, 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 And then if you do side by side, it essentially becomes another ping.

But the amount of work I'm just, like, going in my brain. The amount of work it would take

wild to me 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.

So I I don't have a very

So that's where I, you know, added the arrows. Like, you then you can just follow the line.

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

But I don't know what color it's going to be displayed on. So I needed my lines to have outlines and I just repackaged that into a thing that Fixes browsers for peep or fixes websites for people,

To make sure that, you know, what whatever wherever it's displayed, where it's light or in dark, that there's enough contrast.

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, Node Web Kits at the time, which let you, a lot of newsletters.

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

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.

put, like, the arrow in the middle, But I, again, didn't want to

drawing things where it's like connect the dots. Like, hey. I found 1. Now where's where's number 2?