00:00.22 James Welcome back everyone to Merge Conflict, your weekly developer podcast talking about all things, the world of software development. I'm one of your hosts. I guess I was going to think of something ah for myself, for a name of myself, but maybe Frank can't, but I'm one of your hosts James Watson Magno and always the most elegant, elegant co-host. 00:23.42 Frank Person. Thank you, Jay. 00:25.56 James I wouldn't say person, but co-host at least. Elegant person. Mr. Frank Kruger, how's it going, buddy? 00:32.67 Frank Oh, very good. ah So I was going to go with narrator for you, but with that opening, we'll just go with ringleader. You are the ringleader tonight. 00:39.19 James oh 00:41.13 Frank Or what do you call the guy at the box boxing match? one One or the other. 00:44.28 James No, you know, the ah Hugh Jackman, that Hugh Jackman movie. 00:45.30 Frank You're either in a circuits or a boxing match. 00:50.02 Frank Showman. 00:50.14 James Showman, the showman. Ooh, ooh, ooh, ooh. We just watched Frank Krueger. We watched a Hugh Jackman movie. It's called The Sheep Detective. It's an Amazon movie. It is absolutely spectacular. Look it up. Sheep Detective, Hugh Jackman. Also, by the way, in this movie specifically, he extremely reminds me of our good friend, Craig Dunn. 01:13.70 Frank Oh, that's funny. 01:14.45 James yeah Because he always has. 01:14.86 Frank Who's always looked like Hugh Jackman. But yes. 01:18.10 James Always has. 01:18.26 Frank ah There's like a whole genre of animal detective movies lately. 01:18.63 James Yeah. 01:22.74 Frank ah the Yeah. 01:22.90 James What? 01:24.34 Frank i but maybe i'm Maybe I'm hallucinating. But like I thought there was another like sheep detective movie. But maybe he's just into sheep. like Did the sheep talk? Or is he a sheep? 01:32.76 James They do. 01:33.78 Frank Okay. 01:34.36 James Okay, so no, no, no, no. So something happens to you, but the humans can't hear the sheeps talking, right? 01:38.90 Frank ah Spoilers. Hmm. Classic. 01:43.17 James It's like bay pig in the city. 01:44.18 Frank He needs a princess to kiss him. Yeah, gotcha. 01:46.55 James Accurate. That is correct. Yeah. So it's very, very good. I'd recommend it if you can find it. It's on the Amazon Prime and or anywhere else you can stream without an Amazon Prime. 01:57.77 Frank I'm too busy watching Clarkson's farm and real sheep doing sheepy things, so you know, that's what I do on my Amazon. 02:05.03 James Dude, one time we were driving through Northern Ireland and Northern Ireland, where I think Martin, my boss, Woodward lives, is exactly how you would picture it. 02:17.78 James It is just absolutely stunning, beautiful, rolling hills with sheep. They're just all there just doing sheep things. Have you been to Northern Ireland? 02:28.51 James Have like up to the 02:29.69 Frank Yeah, yeah, we we kind of did a rampage rampage. we We went through the country pretty quickly. I mean, as fast as you can on half wide streets, but um it's i thought it's all a little bit of a blur. 02:36.42 James Yeah. 02:41.57 Frank I can't remember what was the north, the south, the middle. But um yeah, technically um gorgeous country, obviously. 02:48.12 James We were in Dublin and were like, okay, we're in Dublin. We've been here and I've been there before for work. We should do something else. And we saw this big green bus go through the city and it was called the paddy wagon. 03:03.54 James And i said, we should We should do that. And we looked at the paddy wagon and it was like 50 bucks a person. 03:09.13 Frank Oh boy. 03:10.31 James it was an it was a eight hour, you went up, no, you went up all the way up through um Northern Ireland and you went all the way to the Giant's Causeway, which is like way up on the Northern coast. 03:10.63 Frank Tourist. 03:22.51 James And then you also stopped in Velfast and you also stopped at ah where Game of Thrones, like there's an intro part where Game of Thrones, I don't know, never seen Game of Thrones, but some iconic thing 03:30.84 Frank Sure. Oh, okay. 03:33.82 James thing. It was it was spectacular. 03:35.19 Frank Okay. 03:35.62 James and our and The thing that makes those tours, makes or break it, Frank Kruger, is your guide. 03:42.53 Frank The ringleader. Yeah, the the showman. 03:43.63 James It's the ringleader. The showman, either that driver is going to be on it or not. and Our driver legitimately was amazing. and That made the day. 03:56.44 Frank think those jobs are pretty cutthroat. So if you are not a witty, funny Irish person, um I don't think you're going to make it in that job. So I believe you and I believe most Irish people are witty and funny. So sure. 04:09.40 James Well, let's get into our topic tonight. um A few weekends ago or weeks ago or yeah last week, whatever day, we talked about polish of... 04:21.02 James you know the things that we're building, which I think is really important. 04:23.33 Frank wow 04:23.58 James i think that the the user flow, the the tiny details, the craft, if you will, the craft, the showmanship of our our boutique software, if you will, we really pull it back to Hugh, is really important. 04:32.10 Frank yes 04:35.45 Frank yes 04:38.36 James And Frank, you've released something into, i believe you might have, I don't know if this website is available, but I believe that you may have released into the the world the next iteration of polish when it comes to working with these agents. 04:55.12 Frank I'm not even sure I would go with this with polish. These are more like the rough cuts, sir, which is kind of funny, but I have to continue your analogy. I shall, but, um, to be honest, I was, um, so a little background story. 05:07.66 Frank I get frustrated with AI, especially around user interface work. I think I complain about it. 05:11.45 James Wait, wait, wait, wait, wait. You get frustrated with artificial intelligence? let me Let me just remember the first word, artificial, the second word, intelligence. Put those two things together, artificial intelligence. 05:24.51 James It's not real intelligence, it's artificial. 05:24.76 Frank And I believe, yeah, in real artificial taste, let me tell you. um That's what it's AT. I think if you go back to episode 100, when James first let me talk about AI, I was using like GPT-2 to generate XAML. And I'm like, I went straight to UI because that's like all I really care about. Like anyone can write an algorithm to do anything. a monkey can do it, but it takes a real developer to write a user interface, in my opinion. 05:52.15 Frank um Anyway, um I was getting a little frustrated with the AIs and someone a little flippantly on Twitter once said, why don't you just write a markdown file with all the rules you've learned over, you know, 25 years of writing software professionally into a simple little markdown file that you can just throw into it an AI. 06:05.34 James Duh. 06:08.03 Frank And I'm like, well, that's impossible. ah But I decided to finally take up the challenge because I was getting super annoyed. And so ah with the help of an AI, I wrote out a little markdown file. It is ingeniously called UI.MD. In other words, it's some markdown. You should throw it in an AI. anytime you're you doing any kind of UI work. 06:32.66 Frank And it's it's the most basic rules, in my opinion, for how UI should function, basically guardrails around how to build UIs, what's important, what's not important. And it all comes from a frustration. You had mentioned design.md from Google earlier. But the more I looked into DesignMD, it was all about like colors, like spacing, like the stuff that matters. That's the polish. That's the lipstick. But I'm talking about the pig. I want to work on the pig. i want the whole hog here. I want to say like, should it have four legs? Should i have one tail or two tails? I'm a one tail person. 07:11.70 Frank um So it's it's those basic guardrails. And i just found AIs making tons of what I considered common sense mistakes. Like, if you're building an interface for humans, these are the things you should consider. And it's a set of those rules. 07:24.63 James My opinions are this, is that I think that AI likes to take shortcuts. It's like a contractor. 07:29.00 Frank Yeah. 07:29.39 James It's like, oh, I hired an electrician or like a HVAC. Electricians are okay. h I hired an HVAC person. And they're like, you know what we're gonna do? 07:36.15 Frank Mm-hmm. 07:36.78 James Oh, we have to run this pipe, but you know, we just have to drop your ceiling by four inches. like But like, that's going to have like this weird notch for the rest of my life in this thing. Yeah, but like, that's where it needs to go. 07:46.16 Frank Yeah. 07:47.18 James But like, yeah, but maybe have you considered maybe not doing that? 07:47.64 Frank Yeah. 07:51.46 James And then they're like oh, I never considered not doing that. well Let's talk through some others. and So interestingly enough, Frank Kruger. My favorite part about working with AI is the stuff that maybe you've solved because I have fun working with the AI to finesse the user interface to exactly my specs but my specifications because I still feel like there's a craft A lot of people think, you know, AI, AI just does a code, right? You give it a thing, it does a thing. It can, but the thing is this polish that we've been talking about. And the thing that I believe to my core, obviously still being a developer is not only prompting and the the systems around it, but also like reviewing the code and understanding what's going in the architecture and like giving it the guardrails. But also like those small details are so important for me that I personally, 08:40.63 James like to it's like I'm coaching my coworker and or myself on how I want to improve the the user interface. 08:45.21 Frank Yeah. 08:49.21 James Now, that being said, i do get frustrated when I've already created a user interface in a beautiful way that I want. 08:54.81 Frank Yes. 08:55.80 James And then I'm like, oh, can you also create this page? And it messes it up. So what is this thing? is this goingnna Is this from the jump? Is this something that I iterate on? And I tell it my thing. You got 17 stars and in in three hours. 09:07.94 James so that seems important impressive. So like how am I going to integrate this? And like how are you integrating it into your workflow today? 09:15.19 Frank I am literally just dumping it into my agents MD because like that is the most surefire way to like make sure that AI is actually pay attention to this stuff. 09:18.65 James Not 09:22.20 James like a scale, like a scale. 09:22.47 Frank I mean, no, no skill, not, not a skill because a skill is a function. 09:24.91 James No. 09:27.67 Frank A skill is an action that you invoke when you want to invoke it. 09:29.39 James Hmm. 09:31.35 Frank This, I, this is like, I'm making up for a poorly trained model in my opinion, because no one trains. They, if you look at all like the coding benchmarks, none of them are user interface. 09:42.17 Frank Like they're just not. 09:42.53 James Hmm. 09:43.90 Frank A lot of them are um style. You know, they'll they'll create a gradient background and a cute font with a nice pastel color and a vaguely modern looking thing from two years ago. 09:55.37 Frank But they don't know anything about human flow, like basic rules of clickable things should look clickable. 09:55.83 James Yeah. Yeah. Yeah. 10:02.57 Frank Non-clickable things should not look clickable. Yeah. Hit targets should be large. You should prefer native controls and native layout over custom layout and that kind of stuff. 10:14.03 Frank The user interface model should be pretty close to the data model so that there's not this like constant battling between the UI and the actual object model that you're like writing in code. 10:26.46 Frank Those should actually kind of be in sync. And here, here this is a crazy thought. If they're not in sync, change the data model. to make sure the data model actually follows the UI model, because that's the easiest way to create bug-free software and good UIs around stuff. 10:34.63 James Yeah. 10:42.36 Frank So it's a lot of those. I hope people will just go to it. It's at github.com slash preclarum slash UI.md and read through them Like, you might have your own opinions, but they're very strictly, I think the kids would now call it UX, not UI, but I'm old, so I call it UI. It's not design. There's almost no design stuff in it. 11:02.54 Frank it's It's all the common sense things of like... 11:05.23 James No, I mean, i no, no, you say it in the first sentence, prime directive. 11:05.69 Frank It said... 11:09.24 James A UI is good when the program behaves the way the user expects it to behave. 11:09.53 Frank Hmm. Hmm. 11:14.24 James i don't know I don't know if you wrote that or the AI wrote it, but I don't know if it could be said better because when you expect a button to click in a certain way and a UI to react in a certain way and a picker to perform in a certain way, 11:20.98 Frank Hmm. 11:30.23 James it is natural. You don't, your your mind doesn't have to think about it because it is just as I expected when I clicked on that button, it is doing the exact thing that I expected it to do. 11:42.94 James And I agree. i often see a lot of these UIs and we'll talk about canvases later. so've been building a lot of canvases, which are web UIs where links and hyperlink things are doing things that I don't expect. So for example, 11:56.63 James Often ah in these scenarios, the AI might say, well, here's ah a link to do a thing. but it's like a more of a hyperlink looking thing in the web instead of a button, which is an action. 12:08.71 James I expect ah a link to navigate somewhere, whereas a button to do a thing, right? 12:10.30 Frank Right. 12:14.01 Frank Yeah. 12:14.11 James So I'll say, oh, click on, I want to create something that when I click on it, it opens a flyout navigation. Well, that should clearly be a button, not a hyperlink, which would be navigation, but it doesn't know the difference because it's just like, I'm going to do the thing. 12:22.33 Frank from 12:26.74 Frank Yeah. o This one's not a rule in there, but you're making me think I should add it, but like a button mutate state. Like that's why actually it's not just taking action. It's mutate a piece of data out there. 12:38.70 Frank That's what a button does. 12:39.93 James Ah, a hundred percent, because even in the flow where it is, it is, it is navigating, it is doing something, the state of the application is fundamentally shifting in so many ways. 12:50.26 Frank Mm-hmm. 12:50.45 James You're adding, you're deleting, you're done, you did the whole thing. And also, Like words and colors and placement matter. 13:01.14 James And this is like, I don't know if you if you figure this out in your UI.md, but you know when I'm thinking about save, save as, delete, done, like, 13:15.83 James All of these, all of the word selection, i don't think you I don't think I've thought about it as much as I have in like the last year, but they all really matter. Like, you know, like in and every programming language and every UI framework and every operating system, there's basically a yeah primary button, secondary button, primary button. 13:34.27 Frank Yeah, sure. 13:35.32 James Like there's a... 13:36.07 Frank Well, primaries hit enter. There should be a button mapped to escape. You know, you can think of it as simple as that. It's keyboard mappings, yeah. The primary button, you just whack the 13:43.13 James Exactly. and And that's really an important thing. The AI is not going to know what's the, problem unless you tell it what the thing is, it's going to guess. And it's always probably going be wrong. And what I've noticed is when I'm crafting these dialogues, it's almost always not how I want it to be. 14:00.79 Frank Yeah. Well, and it's's it's tricky too, because like, if you're a web developer, you're in a really sticky spot. um Because like, and I'm probably going to say this backwards, so I apologize. But um like, Macintosh would have the primary button on the right hand side, and Windows would have the primary button on the left hand side, right? 14:17.93 Frank So just basic fundamental layout differences between the two operating systems. 14:18.04 James Yeah. Hmm. 14:23.77 Frank So if you're a web developer, you kind of got to choose which side you're going to go with. And that's why the web is all over the place, because honestly, the operating systems are all over the place. So no one ever knows what to do with that stuff. 14:34.81 Frank The other thing I'll, this is more design than UI, but I would argue color is not important. What's important is contrast. um So design your UI as if it was always in black and white and make things distinctive in a black and white world. 14:51.74 Frank um You want to use contrast. Color is good to distinguish things. Color should never be used to identify things. Sorry, I keep coming up with more rules. 15:01.80 Frank I got to add to this stupid thing. 15:03.17 James No, it's good. 15:04.16 Frank But yeah, this is this is the problem with trying to summarize you know years and years of UI experience into a markdown file. But I decided like ah enough complaining about it. 15:14.28 Frank I just got to write it all down. 15:15.38 James Yeah. 15:15.48 Frank like there's There's nothing to do but just start writing it down. 15:18.74 James i like I like your principles. You got match the user's mentor model. That makes sense to me, right? Prefer behaviors from existing apps, platforms, controls. Design around activities, not feature lists. 15:28.82 James I like that, right? I'm managing a to-do list. 15:30.26 Frank Mm-hmm. 15:31.46 James i'm not just check I'm not just marking it as done. Think about the end-to-end scenario. Reduce decisions. That's really nice, right? Like you got a thousand button clicks. 15:42.07 Frank Yeah, we used to have funny saying in UI design, like, assume the user is drunk and in a rush. Both. 15:47.97 James Yeah. 15:49.23 Frank No one, everyone designs their UIs, like the the user is completely concentrating on their app. 15:50.13 James Yeah. 15:54.79 Frank No one's concentrating on your app. They're in a hurry trying to get something done and they're browsing through it as quickly as possible. assume Assume the worst case. 16:04.70 James ah Be consistent. This is probably the most important thing is like, you know, be consistent in the app. Make actions visually obvious is what we were just talking about. 16:09.77 Frank Yeah. 16:12.52 James Actions should be, it should be clear. You should, your eye should navigate to the, and then the primary action too, not just even all the actions. 16:20.18 Frank Yeah. 16:21.11 James um Respect limited attention. What does that mean? 16:23.95 Frank that's it Well, that's what I was just saying about drunkenness, basically. 16:25.46 James Ah, yeah. 16:27.54 Frank like the yeah don't Don't put a giant delete the entire database button next to the okay, I'm done button. like Just assume that like someone's only half paying attention to your UI. 16:35.93 James Yeah. 16:39.22 James Yeah. 16:39.57 Frank we used that In the old days, we used to say they're drunk, but now the nice way of saying it is they don't have a lot of attention. 16:42.90 James Yeah. ah They have respect imperfect motor control. This is the use large click targets allow clicking the whole control, not just tiny arrows. 16:52.73 Frank Yeah. 16:53.24 James It does. I've had this situation. especially in tiny clips where I'm like, okay, like I want to have like the, this, the screenshot editor where it has like an arrow and a line and squares and rectangles, and it will inherently make the click target just the icon, but not the entire box. 17:09.86 Frank Oh, yeah. 17:10.33 James And I'm just like, dude, what do? 17:11.00 Frank Oh, it drives me nuts. 17:11.37 James you do What are you doing? 17:12.42 Frank It drives me absolutely batty. I mean, the the old joke with that one was um checkboxes or radio buttons where clicking on the label didn't do the checkbox. But the same thing applies for buttons or rows in a list. 17:21.88 James Yeah. 17:26.62 Frank You know, don't force people to click on a 20 pixel tall strip if visually the row is 44 pixels. 17:31.35 James Yeah. 17:33.70 Frank Let them click anywhere on that row. 17:35.50 James Yep. 17:36.02 Frank That's the hit target. Make those as big as possible. 17:38.61 James Last one, do not make users remember what the computer can show. 17:44.50 Frank this one this one's tricky because there's a balance to be struck of um the ui should be self-educating like if there's a piece of information someone needs to know critically at this moment like um like the easiest example is when you press the delete key and you say are you sure you want to delete this you're like well what is this what what was selected say like are you sure you want to delete the person james like oh no no cancel cancel escape i wasn't paying attention so it's it's just it's that even short-term memory like it's part of it is preventing mistakes but other parts are like don't assume because they selected something two steps ago that they remember that they selected something two steps ago just tell them just its it doesn't cost you anything just reiterate it 18:12.06 James Yeah, yeah, yeah. 18:25.41 James Yeah. 18:28.45 James That's true. 18:32.44 James And a lot of these are really good. I've been working on the Copilot app, like I've actually been contributing code and it's usually a lot of like tiny fixes ah to the the things that kind of bother me. And I was really thinking about this polish. So I had one fix that was the app icon that it didn't look really good in dark mode compared to light mode. in Windows because it just doesn't change the icon automatically, it kind of like Mac does. So I like just fixed it. And I fixed it in two ways. First, I fixed it where would change from light to dark. And then I realized that actually looping into that event wasn't very good. So I just made it a 19:04.41 James a normal icon that was good in both contrasts and it wasn't a big deal. But then I also realized that when there's like a question, a little dot, you know how like, you know, there's dots like on on Mac, like right now there's like like a thing that might come up. 19:17.68 Frank Yeah. 19:18.23 James And usually we've complained about color on Mac, like oh it shouldn't be green, it be black or white. So it's black and and on Mac it obviously changes the contrast automatically. But on Windows it would be this like black dot on a black background on a black icon. 19:32.12 James And i was like, i can't see this. So I like changed the contrast to yellow on windows. Like these small fixes, right? 19:36.69 Frank Right. 19:37.64 James Really, you know, really, really neat. I've, I've, I've contributed some bigger things, not as big as like what the team does, but, um, these little tiny fixes, cause it's the polish. 19:43.47 Frank Mm-hmm. 19:45.64 James I was thinking about our podcast and was like, what if I had the ability, which I do to contribute to one of the most kind of glorious apps that I've like used in a long time, and make some of these little quality life UX UI tweaks. And it makes me so happy because it seems silly. Like to change that dot from black to this yellow, which is a yellow, the same yellow in the app, which is the question yellow, 20:11.00 James It was two lines of code changes. It was if on Windows change to this color and that color was a constant so you could easily change it. It wasn't like, you know, just in a bunch of places. 20:18.46 Frank Yeah. 20:19.86 James And it made me so happy that that got merged. 20:22.33 Frank yeah 20:23.09 James And then like when I see the yellow dot, I'm like, oh, I did that. Because it feels, it feels good. It's got a good mouthfeel. It's got good, you know, taste. 20:30.94 Frank Yeah. 20:31.57 James It's a tastemaker. 20:33.14 Frank And honestly, when when you have a lot of developers working on something, those those little things can get missed. I have this funny story. I think it's funny from um when I was working on Windows at Microsoft. 20:44.02 Frank I was, I forgot where I read it It might have been an old new thing. It might have been something else. But they were talking about how the close button on a window, but it's more like the Windows 95 kind of UI, visually, that button does not go up to the full corner of the window. 21:04.11 Frank There's a little bit of a border padding on it. 21:04.34 James i'nna There is. 21:06.55 Frank and There's a margin or a padding, whatever you want to say. There's there's a gap between that button and the corner of the window. But what do a lot of people do when the window's full screen? You just kind of throw your mouse to the, i forgot, the upper left or upper right at the time. That button keeps moving, sadly, on Windows. um You would just throw your mouse up to the corner of the screen and click because, 21:27.77 Frank a very thoughtful UI person made sure that the close button hit target went all the way to the corner of the window, even though visually the button doesn't go anywhere near those pixels. 21:36.55 James Yep. 21:39.06 Frank And it was funny, I was working on Vista at the time, it was called Longhorn at the moment, but um on on some version of it that came out, I tested that because I'm anal retentive and I care about these things. And I noticed they had just changed a bunch of the Chrome on the Windows. And I noticed that it no longer did that. it You had to throw the mouse to the upper right and then backtrack it a little to get on top of the X button. So i filed a bug against Windows and I got the weirdest reactions from people. Some people are like, you are insane. And then like out of... 22:13.02 Frank the ether came all these old school people like, oh, we can't believe we messed that up. That's one of the most important features of the windowing system. 22:19.55 James Wow. 22:21.38 Frank And it was so cool. Like it became like a big to do about how did this there were like incident reports and investigations, like how did we lose this ability? This is a critical feature of the OS. 22:33.29 Frank And I thought it was so interesting that like even in a large org like Windows, that knowledge is there. 22:33.95 James Yeah. 22:39.48 Frank But sometimes a new person's working on it. They never received that institutional knowledge. And then it takes just a weirdo who's obsessing about that stuff to come back and be like, hey, go fix this again. 22:52.13 James I love it. 22:52.47 Frank So that's really my favorite Windows story. 22:52.79 James Well, on that note, let's take a quick commercial break. Let's talk to our sponsor this week, Sabrent. Sabrent? Sabrent. You know them. They make storage, charging, docks, hubs, adapters. You've probably seen them on Amazon. They sent me this Voltaic 252-watt 8-port USB PD 3.0 charger. Frank, this is absolutely as astonishing. It's like $60, $70, whatever it is. It can do everything. 23:17.51 James 252 watts total charge across four USB-C and four USB-A. And we're talking 100 watt per port max output. 23:28.94 Frank I don't 23:29.02 James It gives you a little display. It tells you your current, voltage, wattage, everything on the display. You can rotate it. You can mount it. You can do all the things. Check it out. Sabrent.com. 23:39.74 James and or amazon i'll put a link in the show notes thanks to sabran for sending me 60 dollars worth good and i have it i have it plugged in i'm plugging all of my laptops in and it is absolutely fantastic you can mount it it's got a little lock kit on it all the things it is it's not plugged in right now if you're watching on youtube but it's glorious you've probably seen it because they send it to all the influencers on the internet and thanks to sabran for sponsoring this week's pod frank 23:44.60 Frank know. 24:04.75 Frank I hope someday I'm an influencer so I can try awesome 100 watt ports. 24:09.16 James I'm sure I could email George and then have George send you one too. So hey. Yeah. um Anyways, I figured I'd, I told him I'd do a shout out on the podcast. So there it is. 24:17.10 Frank That's great. 24:18.10 James It's pretty, it's actually really cool. Like what the nice thing is too, they thought about this. 24:19.96 Frank Yeah. 24:21.22 James So, you know, the charging ports on the bottom down you plug into the wall, but you might want to mount it or you might want it to be this way. If you triple click this, it'll rotate the screen 180 degrees. The little display. 24:32.73 James Smart. 24:33.46 Frank Yes. 24:34.08 James Yep. Anyways, it's pretty nice. um This is really super fascinating because I agree with you because, you know, actually on Mac, you actually do have to get onto that red little block there. But I think all this stuff is really, to me, really, really important. We're talking about impeccable and we're talking about like the UI designs, all these little things. 24:54.39 James This is cool. I'm going to drop this into my my apps as you continue to build it up. Maybe I'll give you a week to kind of flesh it out. 25:00.47 Frank keep refining it. I do want to give one past closing shout out to it. 25:01.83 James Oh, 25:04.79 Frank It was funny when I was reviewing it, I forgot how much Joel Spolsky had influenced all my thoughts on user interface. And I went back to a very famous article. 25:15.19 Frank I think it's called um user interface design for programmers. I believe it was written in like 2001. one um i i highly recommend everyone go reread it it's like 10 000 words but you can do it i have faith um i think a book was even published at some point that's how good of a blog entry it was but it was so funny when i'm trying to remember all the rules of user interface that i follow i forgot how many i basically just stole from joel spolsky so shout out to joel yeah 25:46.62 James Nice. Yeah, I think that that's kind of the interesting part about these designs. and know there's like skills, there's all these other design and impeccable, blah, blah, blah. But I think always when you you respect someone and like the things that they've created, you get a lot of inspiration. 25:55.64 Frank Mm-hmm. 26:02.16 James So, you know, I think what's kind of cool about this is like, as I was reading through those bucket list items, I'm like, yeah, those are things that ah that actually resonate with me. The things that I do want to instill in my applications that I'm going through. 26:15.22 James And ah you know, as good as the AI is, I'm testing some like crazy new AI models. ah As good as they are, they're still, you know, they're not me and they don't have my design taste. 26:27.82 Frank Yeah. 26:29.56 James And, you know i worked at Xamarin. i always loved working with the designers. I always like to say I had an eye for design, but I'm not a designer. So I always loved to being in the reviews and giving my input onto it, even if it wasn't like, you know, implemented or taken, 26:44.92 James um maybe was always taken as always well received and well taken, but I went into it, understand like, Hey, listen, I'm not a designer. I'm not you. i'm not a designer that has like, you are a designer, but I have an eye for design, which I think are things that resonate for me from a, um a user interface, user experience flow. So I'd always give feedback. And I always loved when the designers like took me serious and I could jam with them. 27:09.53 James Um, Antonio was always my favorite. 27:10.08 Frank Yeah. 27:11.17 James And, uh, I always have loved i've loved design. I've just loved it to my core. And I don't say I'm i'm not a good designer, but I know when things are wrong. 27:22.62 James And that's almost as important of knowing when things are right. 27:27.30 Frank Yeah, and it's it's harder because, you know, in algorithm design, algorithms are very close to math. You know, you can prove whether an algorithm is correct or not. That's why we have a good a lot of good benchmarks. 27:39.86 Frank We have a lot of so-so benchmarks for AIs. But um human factors are much harder to codify, and they're culture-inspired, they're background-inspired. So, 27:54.01 Frank I don't want to say it's it's easy to criticize because it is easy to criticize because you know your taste. You know what makes you happy. You know what frustrates you. You have your own set of pet peeves. 28:04.76 Frank um So good designers are able to take criticism because they know that... human stuff is hard. it's really It's really hard because everyone has slightly different opinions. We don't have powerful axioms of good UI or anything like that. I'm trying to write out a bunch of these little, at least lemmas, if not axioms. 28:25.53 Frank um of these good UI things. But in the end, it's it's human preference inspired by a shared culture, inspired by differences in culture, inspired by shared experience and differences in the experience, all of that. 28:42.52 James Well, and you know we're what I've always said in my career personally when it comes to design, especially like mobile app development, which is like what I do to this day, you know, to my core, that's what I really enjoy doing the most, I would say, is there are a lot of smarter people that did a lot more user research and spent a lot more money on like actual designers to figure out the correct flow. So who am I to be like, you know what, your tabs are wrong. You know, my tabs are better than yours. And think could they could be, 29:14.81 James but 29:15.06 Frank yeah 29:15.77 James I'm not going to have this unlimited Apple or Google resources or Microsoft resources that put into this user design. And additionally, to one of your points, which is like, do what the user expects. There's nothing worse than going into an application or a website where the the UI isn't as expected and is fundamentally different because our minds... 29:38.07 James can only comprehend like so many different flows and user interactions. And when 90% of them are the same of a button does this thing and then your button does something different, it actually throws you off. 29:48.70 Frank and 29:51.73 James have to think about it, like, is that right? Am I doing something wrong? 29:53.59 Frank Yeah. 29:54.45 James You don't want to stop the user's flow. So I've always put myself in that mindset of adapting to the naturalness of the platform, which is when Google brings a lot of their applications from Android to iOS, their applications look more like Android applications. 30:04.62 Frank Right. 30:13.91 James And I actually think that's fundamentally wrong. I wish that they would maybe a adopt iOS isms even better because if you're not an Android user and I've never been an Android user, even though i have been, coming over, it's jarring. 30:17.24 Frank Yeah. 30:28.97 James Like it's jarring for you going from this. 30:29.61 Frank Yeah. Yeah. 30:31.01 James And I would say even this being an Android user to being an iOS user, it is actually jarring to go from one idiom to another. And that's kind of important. 30:44.34 Frank And it's hard. I was responding to an app review comment today. So in iCircuit, there's like an element library and there's a lot of elements in the app. So it has to be a scrollable library, but it's also a drag and drop library as in you can drag an element out of it onto the circuit. 30:56.15 James Yeah. 31:02.71 James yeah 31:03.58 Frank These two operations, scrolling with your meat fingers and dragging an object with your meat fingers, they look a lot the same to code. And there are conventions on Apple like you know give it a half second pause before you start dragging. 31:18.66 Frank And that's the difference between a drag operation and a scroll. If you just flick, it's a scroll. If you stop on it for just a half second, just a half second, sir, and then move, it'll drag just fine. 31:30.47 Frank But i there was an a review comment like, I can't drag any elements onto the circuit. The thing just scrolls all the time. And that is purely me not meeting user expectations. 31:37.78 James Yeah. 31:41.80 Frank They have an expectation that they should be able to scroll and they should be able to flick things onto the circuit, no problem. I can give them a million technical reasons why that's not possible or why they're not exactly following the Apple way of how to get these controls to behave. 31:58.81 Frank But I completely sympathize with them because I am breaking my own rule. This this is an obvious action to them. i want it to be an obvious action, but there is a fundamental contradiction between what your finger flicking there does. And so I i can't but... 32:15.38 Frank apologize basically in the app review. like, just just a half second. Just rest your finger there for a half second before you move and it'll be fine. But you know what? Half second is a long time because every user is drunk and in a hurry. 32:28.33 James Yep. No, that's a good point. Yeah, it's super fascinating. That's why i love UI design and I love user experience design so much because i think it's so fascinating. 32:39.32 James Especially when you use your own product. It's the little tiny details. Like I've been working MyCadence recently. MyCadence, you know, it's this little app that shows a number on a screen, but it connects to a sensor and it like disconnects from a sensor. 32:53.88 James And I'm struggling with this paradigm, which is auto connect, auto disconnect, start, stop. Like what's the flow? Like if you stop or you have auto reconnect on, does it do this thing? 33:04.59 James But should you stop? Like, do you want to stay connected to the Bluetooth? What are you pausing? Are you stopping? It only says stop. 33:10.00 Frank Right. 33:10.55 James Like, should you disconnect? I've been battling, I've been using. 33:12.31 Frank Right. 33:13.39 James So as a user of my own app, I've been doing these tiny micro, I mean, they are fundamentally microscopic tweaks to the wording, to the phrasing, to the action, to the thing, right? 33:23.90 Frank right 33:25.02 James A good example is I told the AI, I said, listen, I think we should get rid of auto reconnect because fundamentally it's a bad design. 33:31.19 Frank Oh. 33:32.43 James I don't think you should open the app and you should start reconnecting automatically. 33:32.93 Frank Hmm. 33:36.23 James This causes problems when you stop, when you pause and just the series. I think actually auto disconnecting is better because um one of the issues with Bluetooth, these little sensors, is that often if you background the app, the Bluetooth doesn't automatically disconnect. 33:51.59 James So you can like drain battery and you actually have to swipe out. 33:52.32 Frank Hmm. 33:54.60 James So I'm I really want to encourage the people to disconnect from the sensor. But I was thinking to myself, well, I said, how many users are actually pausing a ride and then restarting a ride? And what's that experience? So I was talking to the AI and I said, here's what we need to do. So the AI inherently says, okay, when I stop a ride, I'm going to disconnect, which means I'm not connected, which means the start button is disabled. 34:18.26 Frank oh Oh, right. 34:19.13 James And I go, well, that's a weird, that's a that's a weird, I can understand if I launched the app for the first time, I'm not connected ever. 34:20.31 Frank If, no, yeah. 34:26.61 James So the button's disabled until I connect. So that makes sense. But I go, but I was just connected and I'm stopped. 34:32.21 Frank Yeah. 34:33.46 James But like, how do I resume? Oh, I got to click another button to reconnect and then I got to do a thing. 34:37.19 Frank Right. 34:38.76 James That feels incorrect. So I had to work with it. I said, okay, no, no, no, no. Like if you had already started a ride and you're in between a ride, leave it connected. But then if they click it, 34:49.08 James tell them they got to reconnect and then say auto reconnect and then reconnect and then start the ride. 34:50.62 Frank Yeah. 34:54.71 James So it's like these little, ah the flows, I think in your first thing is like, it's the flow. 34:55.99 Frank Yeah. It's important though. Yeah. 35:00.10 James And if you don't use your own app and you don't tweak it so much, I think that's where you can run through these little itty bitty things. And heaven forbid you're writing cross platform application, then you have to worry about it in every single operating system. 35:13.97 James And that's, That's the real, I mean, we know, right? But that's the real grind, man. I'm doing tiny clips on, on, on windows and on Mac. And I'm fighting because I really like, like this one design that they really like did on, on windows. 35:28.99 James And then I'm like, i don't know if it's better on Mac. and like the, I know I'm, I'm using the native Mac paradigm, but like, and don't know if I love it. 35:32.41 Frank Yeah. Mm-hmm. 35:36.06 James I'm doing this. I don't know. And so I'm fighting with myself. back and forth. um But Frank, I'll tell you this much. One thing I did find out talking about UI is if you have a great UI and you're doing something, ah you know you can register your app as like a ah open with provider, you know open with like open with this app. 35:56.92 James So tiny clips, my favorite part of tiny clips that I have is not that I can like create a screen, like get a screenshot or do a video. 36:04.82 Frank Okay, yeah. 36:05.64 James My favorite part is that I've really created a fantastic um editor. 36:06.00 Frank Yeah. 36:11.90 James So when you take a screenshot, it opens like the editor and you can do like cropping and so it's like super fast circles and fills and strokes and numbers and and blah, blah, blah, all this stuff. 36:12.25 Frank Yeah. 36:22.78 James And I was like, dude, what if I could just take any PNG, right-click open with tiny clips? 36:28.66 Frank Yeah. 36:29.27 James You can just register your app to like open a file format. 36:32.34 Frank Sure. 36:33.05 James And I did that. 36:33.56 Frank I mean, that's the 90s. 36:33.81 James like Now I can open any PNG. g it as like so and it takes You know what it does? It takes like four lines of code. 36:40.38 Frank Yeah. 36:40.57 James It's crazy. And i was like, whoa, that's so good. Anyways, so if you haven't, it's cross-former. 36:44.18 Frank Is that cross-platform? Did you do it on both? 36:46.15 James Yeah, yeah, yeah. 36:46.74 Frank Okay. 36:47.35 James it's even easy It's even easier on Windows. 36:47.70 Frank but 36:49.07 James It's like you just have a a schema or whatever. It's like super super simple. 36:51.99 Frank Yeah. Okay. 36:53.66 James And it just takes in data and it just like displays. it So now I can just right click anywhere. I'm like, give it to me. But yeah, so user interfaces are so interesting. 36:59.18 Frank Yeah. 37:03.74 James You should use Tiny Clips and really critique it. Really tell me how much you hate it or love it. 37:07.29 Frank yeah. 37:09.50 Frank I think we did an episode where you tore apart one of my UIs. So I think that ah we we could do at least an hour of me critiquing every screen and tiny clips. 37:12.69 James Oh, God. 37:18.66 Frank But I do have to compliment you. I am happy that you put in, i always call them annotation editors, but yeah, where you can just add arrows and stuff to the thing. 37:29.22 Frank Because like it's funny, um Apple's own preview app does annotations, but somehow i they made them really hard to use. really 37:37.78 James Yeah, it's the same on Windows. It's the same on Snipping Tool. I use Snipping Tool all the time. Annotation's so complicated. 37:43.42 Frank Yeah, I don't know why. 37:44.21 James And like, i don't know just like give me the options, always available, do a thing, let me make a rectangle, let me move the rectangle, easy peasy, and go from there. 37:50.04 Frank Yeah. 37:54.87 Frank Yeah. 37:55.32 James So yeah, I'm not saying my annotations are perfect, but it did a pretty decent job. 38:00.65 Frank For the kind of stuff we do and for the kind of stuff the internet does where basically you just need arrows most of the time and a few text things like. 38:07.06 James Red arrows, red arrows. 38:08.89 Frank Yeah. 38:09.02 James I did recently add arrows with curves, which I'm really proud of. 38:13.43 Frank Yeah. 38:13.50 James So you can you can curve an arrow. um And an upcoming update, you'll be able to not only just move any item, but then also afterwards resize any of them in real time. 38:16.44 Frank yeah 38:23.45 James That was a good one ah that I'm doing. 38:24.73 Frank excuse 38:25.38 James Yeah, I would say, I mean, TinyGlips is fine. It's like a free app, right? But ah that's what I love about the internet. And I love about development today is if you can dream it, you can ship it. 38:40.60 James I, Frank, I kid you not. I've been battling, we're just off tangent now. I've been battling with caption files, like SRT files, VTT files. 38:50.65 Frank Oh, m 38:53.52 James Oh, 38:54.53 Frank I'm a little bit with you. These have been a constant. I finally learned how YouTube chapter marks work. They're so primitive. 39:01.27 James nice. 39:02.10 Frank But it's roughly the same idea of putting some text in certain time codes. And yeah, it's it's funny to like finally deep dive in. I was like, this must be so complicated. 39:12.69 Frank Like I'm i'm looking at how to embed it in the MP4 format, like which metadata isn't supported. No, in the description, you put a bunch of words, hyphen, and then a time code. I'm like, oh, that's actually simple. 39:24.50 James Well, if you were to download the podcast metadata generator, which does all it does it for any transcription, it would go ahead and give you all the YouTube things in the correct format. 39:35.70 Frank yeah 39:36.12 James I created something today um called caption stack CaptionStack, It's actually a really nice looking website. You can critique it. 39:44.06 Frank you own every domain under the sun no wonder i can never get a domain you already own it it's like nope james got this one 39:50.36 James Yeah, so this is like the origin. So I went today before I went on a walk at lunch, I said, here's what I need. I need a beautiful website that allows me to like give you any caption file and I need you to convert it to any other caption file format. 40:02.94 James Give it to me. It's actually like a really good website. I'm pretty impressed. It has even samples, has previews, it's got bunch things I'm going to do all in the browser static website, doesn't leave anything. 40:06.34 Frank Love 40:11.24 Frank it. 40:12.06 James because i was having these VTT files and I needed to convert them to SRT files, which is subrip. And i had to go to sketchy websites. And you know, when I got to go to sketchy websites, I don't want to do that. 40:23.51 James So I built this and this was a 10 minute prompt to deployment ah app. and it's great And this is the beginning. 40:31.00 Frank of it 40:31.65 James I'm gonna add a crap ton of cap. It's a stack. So it's not just a caption app, it's a caption stack. 40:35.54 Frank Which model? got Which harness? 40:38.36 James This is an... 40:38.75 Frank Which model? 40:39.73 James this is This is in the Copilot app. the copillot app This is an unreleased model that I can't talk about. 40:44.13 Frank GUI? 40:47.54 Frank oh fast Oh, look at you, because I've been burning all my credits on Fable. just I almost went through a whole month in a couple of days. 40:52.09 James um it's it's It's not Fable, but it's it's up it's up there. 40:58.01 Frank I'm not pressuring you. I'm just making the joke. 41:00.18 James This app ah was 600 credits, so $6. 41:00.22 Frank It's so fun. 41:03.42 James six six hundred credits so six dollars 41:06.13 Frank Okay. Yeah. 41:07.26 James yeah Not bad. I mean, $6 in 10 minutes. 41:10.47 Frank Cup of coffee. Yeah. 41:12.09 James This website is going to save me tons of time. Anyways, and I was like really impressed. It did some formatting. I love the colors. The little pink, it's my favorite color. It's like so good. 41:24.12 James um But I love the world that we live in, in which... I have this idea, I have this problem, i could just build it, right? ah We'll talk about canvases next week. We don't have time this week. 41:35.70 James But I have really been... thinking about you i on demand. And this is why I think your application and your UI.md is so important because I am generating more UIs than ever, but none of them look the same. 41:42.01 Frank Yeah. 41:49.56 Frank Yeah. 41:50.53 James None of them are consistent and none of them are probably how I want them to be out of the jump. 41:52.01 Frank It 41:54.62 James So I'm really intrigued by the UI.md. So I'm going to put this into my apps. going to give it a go, but I've been, 42:00.15 Frank sounds like you need the design MD also though, because if you want consistent styling, you probably want the design MD also, but mine mine's going to give you that UX experience. 42:11.00 James Well, i don't want consistent colors and design on every single website to be the same. 42:13.62 Frank Okay. 42:15.38 James i do want them to be unique. 42:16.14 Frank Right. 42:16.70 James So I'd almost need to design the design.md from the jump. 42:17.34 Frank Okay. 42:22.12 Frank That's going new website. I can see it coming. 42:24.89 James Probably. Yeah. Yeah. I like this idea. So anyways, so this is why that all these things have me really thinking about, um, the world we live in. 42:35.35 James And i was just telling our neighbor, i was just like, yeah i was just like vibed. I vibed out this website. And like like I didn't look at the code. But in this instance, I don't care. I'm not like shipping. I'm shipping to production, but I'm not like running a billion dollar business off of this or a thousand dollar business. 42:44.88 Frank Mm-hmm. 42:48.95 James I'm running a zero dollar business off of this in which I need to convert one file format 42:50.54 Frank Mm-hmm. 42:54.68 James to another file format, which I've done this with local morph, which is another website that I own, which I might take down. 42:54.89 Frank Yeah. Yeah. All right. 43:00.04 James because that i Actually, I might, and maybe not. That one I need to integrate with FFM pay because it'd be way better. But ah in general, have this idea, I can just like build it. And then the fun part, which is now is I have it and it's now finessing. 43:15.40 James It is now the little, the tweaking, the tuning. Cause I've honestly, Frank, always had fun with that. I've always, when I developed my own applications, artisanal code by hand, 43:22.59 Frank Yeah. 43:28.31 James The most fun I have is not generating the code. It's making a wonderful, delightful user experience from the UI, which I'm so happy that you've dug deeper into this because it is the thing that makes me the most happy is making my users happy. 43:46.36 Frank And it's the hardest part, but it's the most rewarding part. Because, I mean, in the end, why do you build a user interface? We could all just develop our own programming language and make the users type in a programming language. 43:57.48 Frank Or we could throw them on the command line and be like, here, just memorize these 50 different command line arguments and get them right and format it and, you know, pipe it through a few different commands. 44:03.74 James Obviously, yeah. 44:07.56 Frank You probably need to do some piping. No, we build UIs because we know people just want to get the job done. And so the more efficiently you can allow them to get that job done, the happier it makes us. 44:18.28 Frank I mean, in the end, that's why we build UIs so that people's lives are better. So when you improve someone's life, you become happier. Go figure. 44:26.87 James Yeah. Exactly. Yeah. Wild. All right. I'll put a link to everything in the show notes. And thanks to our sponsor, Sabrent, Sabrent, Sabrent, for sponsoring this week's pod. 44:39.38 James And then actually sponsor. I'm just saying that they're sponsored it because they sent me this thing. You can buy my sponsorship with a $60 device. ah There you go. 44:46.39 Frank comes cheap, people. 44:48.30 James I'm at bottom of the barrel over here. i will you know I get so many emails, Frank, because I have my add my email address on my YouTube. I get so many emails. 44:56.87 Frank Yeah. 44:59.05 James I archive and delete so many emails. It's like so much stuff. 45:01.73 Frank Aw. 45:02.13 James But when I got Sabra, i'm like, I've purchased your, I've purchased, I have, I have their dongle right in front of me. 45:05.15 Frank Yeah. 45:07.78 James And I was like, kind of want that. 45:10.80 Frank Yeah. 45:11.00 James And that doesn't happen often. So when I said that, I reached out to George i said, George, I kind of want that. Well, actually I actually asked George, ah Hey, do you got a Thunderbolt five? Like doc? Cause that's what I'm, I'm really, that's what I'm, 45:20.51 Frank i'll Stop it. Yeah. Do you have a $500 device in addition to that? 45:23.75 James That's what I, that's, and and they're like, no, we don't, we don't, we don't make that. But maybe one day i was like, okay, I'll tell, I'll take, I'll take this, you know, and do this. 45:30.64 Frank Yeah. 45:30.67 James anyway Anyways, uh, give it a look in the show notes. 45:31.14 Frank Go figure. 45:32.79 James If you're looking for, uh, uh, uh, charging dock port thingy, it's got, it's got data on it. 45:38.05 Frank Yeah. 45:39.79 James And then, you know, you could just have a, you could just have a dock, but this stock's got a screen on it. And it gives you data. 45:45.19 Frank I 45:45.95 James It tells you the wattage, the voltage, the amperage, all the shenanigans. 45:48.66 Frank do like that. 45:49.72 James It's got the data. It's got the data. And as electrical engineer, Frank approves it. what we're going to do for this week's Merge Conflict. So until next time, James with the Magno. 45:56.89 Frank And I'm Brian Krueger. Thanks for watching and listening. 46:00.41 James Peace.