972: These Things Make Your App Feel Like Crap on Mobile

Wes and Scott talk about why mobile web apps often feel “janky” compared to native—and how to fix it. They cover input zooming, accidental horizontal scroll, pointer/user-select quirks, frame rate consistency, full-page refreshes, and more. Show Notes 00:00 Welcome to Syntax! 01:11 Brought to you by Sentry.io 02:57 Zooming inputs 06:11 Horizontal scrolling 08:49 Proper use of pointer-events: none, and user-select: none 11:27 Allowing zoom on everything 16:37 Cleaning up the “jank” 19:48 Full page refresh 24:05 Slow loading times 29:50 Cumulative layout shift 32:47 Address bars and viewport units Dynamic Viewport Units 35:34 Full-width scroll traps Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Scott Tolinski?

  Your mobile apps might feel like crap. And we're going to tell you what are the main things that make a mobile app feel worse than a native mobile app. All of our pet peeves, all of the things that web developers could be doing better to improve their web apps on mobile. My name is Scott Tolinski. I'm a developer from Denver. With me as always is Wes Boss. What's up Wes?

• 0:27Wes Bos?

  Hey, I, I'm excited to talk about this because like, I was talking to some people from, actually from Google and they're just like, like, why are everyone is still so hung up on like native being better? And there's some clear things like access to APIs and, and whatnot. But I think like, there's a lot of the reason why people like a mobile app better is simply just because it doesn't feel janky. And I watch my kids use websites sometimes and it's just like, oh my gosh, what have we done? You know, they're clicking the wrong thing, they're 3D touching everything, they're, they're highlighting text by accident. It's just, it's a nightmare. And these things are all fixable if you, if you know what you're doing. So that's what we're going to talk about today.

• 1:11Scott Tolinski?

  That's right. And a lot of these things can be fixed with Sentry. This episode is presented by Sentry at sentry.io/sentex. Sign up and get two months for free. Use the coupon code TASTYTREAT, all lowercase, all one word. But Sentry is really cool for a lot of these things like rage click detection. Man, if you click a button a whole bunch of times, Sentry will alert you that, hey, your users are rage clicking this button. And that's usually for a number of reasons. Your app is not responsive, your app isn't showing the user what it's doing, it's not making the button disabled while it's doing something. There's a number of reasons.

• 1:45Wes Bos?

  Dead click as well. Do you know the difference between a dead click and a rage click, Scott?

• 1:49Scott Tolinski?

  Tell me.

• 1:49Wes Bos?

  A little trivia?

• 1:50Scott Tolinski?

  School me, speak on that.

• 1:51Wes Bos?

  So a rage click is what you just expect, explain, right? People. Clicking over and over and over again. And a dead click is when somebody clicks something and there is no, nothing happens after there's a certain threshold. I think it's like 250 milliseconds. So if there's no like UI that has, has updated, or there's no network detection that has, has been fired off. You know, there's, you can't tell that something happened. That's, that's called a dead click. So either literally nothing happened or you have like, like we're talking about today, your UI sucks and, and you need to know that something's going on. And, and maybe you don't have things wired up properly or your UI is, is lacking.

• 2:31Scott Tolinski?

  And the coolest part about all of this, you get access to a session replay, which shows the user trying to interact with your thing. So man, that is so handy. Instead of just getting an error saying, all right, uh, the user rage clicked or the user did this or that, you could see why or visually what's going on. And man, it's one of the most useful tools there is in debugging. So check it out, century.io. Let's get into it, Wes. You have the first one here, which is zooming inputs.

• 3:01Wes Bos?

  Yeah, this, this has been around for so long and it still drives me nuts on website. And that is if you have an input and you click on that input or you tap on that input to go ahead and type, what the browser will do is it will zoom it up for you. And then when you close the keyboard, cause you're done typing, it doesn't zoom it back. So now all of a sudden you're in this like slightly zoomed version of a website. You've got horizontal and vertical scroll and it just, things are cut off and it just doesn't feel good. It's a very easy problem to solve. All you need to do is set your inputs to 16 pixels or larger. And the browser simply will not scale those on up.

• 3:45Wes Bos?

  So please, please do this. A lot of people have this problem is because 16 pixels is too large on the desktop when they're designing it, right? They, they put it to like 12 or 13.

• 3:56Scott Tolinski?

  That's crazy.

• 3:57Wes Bos?

  Yeah. So what you can do is just, just throw a little media query in there that will detect, you know, you could do like, um, like a width and height media query, or you can look for a device pixel ratio, whatever media query you need to be able to detect that this is a mobile device. And then simply just select all of your inputs and say font size 16px.

• 4:22Scott Tolinski?

  16 pixels isn't too large. Man, 16 pixels is the base. No, that is the standard. No, that is it, man. I don't like.

• 4:30Wes Bos?

  16 pixels is the default, right?

• 4:32Scott Tolinski?

  Yeah, that's what I'm saying. That's the standard. Yeah, I mean, come on, come on. Who's setting it to 14 or 12? Like, no, thanks. I don't have bad vision. I can see things. But I've never, I don't even need, like, I usually have everything set to be pretty high pixel density and stuff like that on all my stuff. But text, text 16 pixels. That tracks.

• 4:55Wes Bos?

  Things should not move when I input it unless you're moving the input so that it's not hidden under the keyboard, which is another one of my pet peeves, you know, it just, that doesn't happen on mobile. And it's so frustrating when it, when it happens. Sorry, it doesn't happen on native very often. And it happens so often to me where you, you focus an input and now you have like, what, 30 pixels of screen? And you gotta like, you gotta scroll the, the website up so you can see what you're typing. Come on.

• 5:27Scott Tolinski?

  I gotta say, before we get into a lot of these, the best way to find a lot of these things is to just use your stupid app. On, on your phone. Use your app on your phone. Use your app on your mom's phone. Use your app on other people's phones. Just use it because so many of these things I think are just attention to detail that, that people just aren't, aren't, aren't trying.

• 5:51Wes Bos?

  Totally. People are just resizing the browser till it's small enough and then say it looks good, ship it. And they're not actually using it on a real device. And when you're building a native app, the only way to test that is on an actual, either a native device emulator or an actual device.

• 6:11Scott Tolinski?

  Totally. Next one here is horizontal scrolling. Now, let me tell you. Horizontal scrolling as a trackpad primarily user. I've been using just the trackpad on my desktop for a long time. I hate horizontal scroll bars in my sites, in my apps, mobile or otherwise. Like, when I develop things, I'm like, never. It's a blockage of mine because I know there's mouse users out there. I personally have just like gotten so used to swiping on everything that like I never want a horizontal scroll bar in anything.

• 6:50Scott Tolinski?

  So for me, having horizontal scrolling feel snappy, using scroll snap, these types of things. And not having a stinking scroll bar. Horizontal scrolling to me is so natural, especially on native apps. Every single app you use has native scrolling in some sort of way, horizontal scrolling.

• 7:12Wes Bos?

  And you can get that, like you said, scroll snap, overflow scroll, horizontal scrolling is not necessarily bad. It's great for things where you want to like hide, maybe like a list of tags. You want to see more, you can scroll them over. It's when you're causing the entire body element to have a horizontal scroll.

• 7:29Scott Tolinski?

  Oh, you're talking about like an overflow issue.

• 7:33Wes Bos?

  It's almost always accidental horizontal scroll. And then when you're scrolling the website up and down, you're accidentally going side to side. That drives me nuts. And I've had it on my own website many times. Cause it's like the most pain in the butt thing to debug, like what the hell is actually causing this horizontal scroll? Pardon?

• 7:54Scott Tolinski?

  Yeah, it's obnoxious.

• 7:55Wes Bos?

  It is.

• 7:56Scott Tolinski?

  To debug. And so as a solution to that, just to make an app window, like wrapper that fills the entire thing and puts overflow hidden on everything.

• 8:06Wes Bos?

  Overflow X hidden. Yeah, like you don't want to do that because there are use cases where you want to allow your user to scroll. And now you've, you've broken your website, right? But there's so many use cases where just some random thing, you know, a German name or whatever. We had it on the syntax website, maybe about a year ago, where just like we had long links that were causing horizontal scroll. And we had to apply some weird CSS thing to make the links break and wrap onto the next line. Pain in the butt, but. You gotta make sure, you gotta make sure there's no horizontal scroll on, on your websites. Cause it's

• 8:42Scott Tolinski?

  On the, on, yeah, don't let the site itself

• 8:45Wes Bos?

  It feels janky.

• 8:46Scott Tolinski?

  overflow the, the window. Yeah, for sure.

• 8:49Wes Bos?

  Proper use of pointer events, none and user select none. So this is, this is another one where on native apps, and this is probably a bit of a hot take because on native apps, they restrict you from doing things a lot more and to a point where it's very frustrating. You ever tried to copy text out of a comment on Facebook?

• 9:11Scott Tolinski?

  Oh, God.

• 9:11Wes Bos?

  It's impossible. You can't do it, you know?

• 9:13Scott Tolinski?

  Like it's just like That drives me nuts.

• 9:15Wes Bos?

  Drives me nuts. It's a little better now that you can just like screenshot and select it, but you shouldn't have to do that. But on the other side of things, if I watch my kids try to use a website, the amount of times they're accidentally double tapping things or, or accidentally selecting text or doing that 3D press or whatever, or like causing some horizontal scroll because they, they zoomed it in by accident. Native apps disable all of that stuff by default and users opt in. Whereas in browser land, that stuff's just all enabled by default and a lot of people don't spend the time to actually fix it. And that's why these websites feel kinda, kinda janky. So

• 10:00Wes Bos?

  turning it off, I understand that this is, this is a hot take and I think a lot of, there's a huge accessibility thing here as well as like you should be able to let everybody select text on it, but how the hell are all these mobile apps getting away with it? Disabling it all and, and their apps feel so much better than the browser app. So come on. You gotta be able to disable pointer events or disable selecting text on a case by case. Don't just blanket do that. Cause that's annoying on websites. So in a lot of cases you want to be able to do that, but think about.

• 10:34Scott Tolinski?

  There are some things that yeah, you certainly don't need to select. I, I was designing a little chips, UI chips. And there's never a situation where your users are going to want to select that text and copy it. There, it doesn't, doesn't make sense, right? It's not body text. It's nothing that like would be useful to get like a list of all that stuff. So yeah, you can throw a user select none on that. And then

• 11:00Scott Tolinski?

  That then you avoid that situation where that becomes selectable.

• 11:03Wes Bos?

  Mm hmm. If it has a link in it, I think that that's probably the case that drives me the most nuts is when you can't select a link and copy that link from an app. And I think a lot of that is intentional because they want you to click it and you open it in your in-app browser.

• 11:18Scott Tolinski?

  Hmm. Yeah, it's all a lot of these things like you've mentioned can absolutely be accessibility topics. Um, like this one, allowing zoom on everything. When you put this in here, I was like, let me go through my native apps list and see if I can pinch to zoom the UI on any of them. And not a single one of them, not a single one. And you know what? Nobody's crying about accessibility on those. So like, why? Because you have the ability to size up the UI from within the OS.

• 11:51Wes Bos?

  Yes.

• 11:51Scott Tolinski?

  Sizes up the UI. And guess what you can do on the web? You can do that on the web. If you can do it, yeah.

• 11:58Wes Bos?

  For the longest time, I probably have said this many times in my career is don't disable zooming. There's like a little meta tag that you can put user, you can set the min and max zoom size on the thing. And in a lot of cases, yeah, you want to be able to zoom in on a website, especially like there's like a photo and you want to zoom it up. However, there are like, if you're trying to give somebody an app-like interface and you zoom that up and you have like a fixed header and now everything is weird. And you have a map and you can't zoom out because now you're scrolling the map out. Pain in the butt. So

• 12:32Scott Tolinski?

  Yeah.

• 12:33Wes Bos?

  The one thing we don't have in CSS is like, wouldn't it be nice to simply just say like image zoom true or something like that? Or you could just allow zooming on things like, oh yeah, somebody would probably want to be able to zoom this image. Or somebody would like to do to zoom something here. And that would be be really nice. We don't really have that. If you want to like re-implement, if you disable zooming and you want to re-implement it like, oh, just on on images, you know, someone can pinch and zoom in. You got then you're in JavaScript and touch events and touch end and. That's a whole JavaScript heart world. I'm sure there's, there's utilities out there for it, but.

• 13:14Scott Tolinski?

  Maybe that's not that bad. Maybe that's not a, maybe that time, maybe, maybe that's not something you gotta worry about. I like, I, this is not one that I, I had on my radar as being a, a problem.

• 13:24Wes Bos?

  It's not a problem in native land. So why are we so concerned about it?

• 13:28Scott Tolinski?

  And then I went to every native app and I was like, yeah. And, and you know what? It doesn't bug me. I've never tried to zoom in on a native app, ever. Uh, the ones that you, you might like, that's like baked into the dang app. So.

• 13:41Wes Bos?

  Yeah. Like, like on images, I guess you, you click on an image and it, it opens it up in a modal and then you can.

• 13:47Scott Tolinski?

  Skybox or.

• 13:48Wes Bos?

  You can, you can zoom that, right? It's true. I'm trying to look at all of my apps now.

• 13:53Scott Tolinski?

  Lightbox.

• 13:54Wes Bos?

  None of them.

• 13:55Scott Tolinski?

  None of them.

• 13:55Wes Bos?

  None of them have zoom built in.

• 13:57Scott Tolinski?

  And I've never tried. Uh, the only time, yeah. So, man, I, yeah, I, I, I think that, that is such a thing. When you zoom in on a website and then now the UI you're, you're zooming out, you pinch and then it goes to the tab view.

• 14:09Wes Bos?

  Especially like, I, yeah, I can, I can handle it, but like I, I, I've learned so much about UI by simply just giving phones to my kids and to like, like older parents and, and things like that.

• 14:22Scott Tolinski?

  What's going on here? How did I get zoomed in? Now I'm all zoomed in. Yeah.

• 14:25Wes Bos?

  Oh, oh, what did I do? Oh, oh, oh, you know, just.

• 14:28Scott Tolinski?

  Doing stuff. Yeah.

• 14:30Wes Bos?

  Yeah. Oh, man, it drives me. Like I was building that sticker printer where the kids would press the button, speak into it and then let go. And my kids could not do it. They were just like double tapping it and then, and then when they double tapped it, it, it sent a request off. So then I had to like add a check to see if they, if it was shorter than two seconds. And like, I was just like, oh my gosh, it's so painful.

• 14:54Scott Tolinski?

  If you've ever been a, I don't know if you've been a part of you, uh, like a focus group or anything like that. We ran user testing and I've talked about this on the show before, uh, at Ford. And maybe it would have been better to give the UI to a bunch of kids. Cause the adults were not helpful at all. They were like, this UI doesn't have the Mustang. I would expect it to have the Mustang. And you're like, that's not what we're asking about. Like we're, we're wanting you to use it and tell us how it feels. But there's no Mustang. And this guy was like so hung up on it. He, he would like bogarted the entire conversation just to, to talk about the stupid Mustang not being in the demo. I'm sorry, sir. Uh, we would have liked to know if you could click the buttons better.

• 15:34Wes Bos?

  I'll often do that when I'm, I learned this from Ben as well. When he is checking out a new app, somebody's like, hey, can you check out my app? I get DMs all the time. I'll often throw on my screen recorder and like show myself interfacing with the app for the first time. And just like talking through it like, oh, what do I do now? Or do I click? Cause like that info is so key to somebody who's building a product and actually knows where all the pieces are.

• 16:00Scott Tolinski?

  Yeah, I, I think that's super helpful and sometimes people can get really dismissive about that. Like, okay, you're just not using it right, but like

• 16:09Wes Bos?

  You're holding it wrong. Yeah.

• 16:11Scott Tolinski?

  Yeah, that's, that's where all the, the stuff that there's, there's friction there for a reason. I consider myself to be the type of person who, uh, prides themselves on being able to identify those types of things easily. Like those like pain points, because I, I Mr. Magoo through life, just like stumbling over every pain point and then getting through it. And then being like, oh, okay, that's how you do it.

• 16:30Wes Bos?

  Yeah.

• 16:31Scott Tolinski?

  So I will, if there are sharp edges, physical or digital, I will run into them. That is for dang certain. Um, next one here is Jank. And Jank can feel like it's usually just a frame rate issue. You're scrolling and the thing just doesn't feel smooth. The number one comment you get about web apps is that they don't feel as smooth as native apps.

• 16:53Wes Bos?

  Butter yeah.

• 16:54Scott Tolinski?

  And there's nothing in the web platform that's making your app not smooth. It's, it's usually a number of things. It's, uh, sometimes bad CSS. Sometimes it's JavaScript. Sometimes you got watchers, you got memory that's, that's doing stuff. The browser has a built in FPS meter. You can see.

• 17:14Scott Tolinski?

  The FPS, you go to inspect element.

• 17:17Wes Bos?

  Yeah, if you open up Dev Tools and you hit Command Shift P, that will open up your command palette.

• 17:22Scott Tolinski?

  I never use the command palette.

• 17:23Wes Bos?

  Oh, man. And then just type FPS, show the frames per second meter. But then there's also like, like highlight rendering, like divs that render. And if you've got like a look at animation in the background of a layer, you'll see it. It's flashing red because it's updating often. And sometimes you can figure out how to put those in separate layers so that you're not getting, like, you're not re-rendering absolutely everything. You're just re-rendering what needs to be done.

• 17:50Scott Tolinski?

  And honestly, some, yeah, there's a number of things there that could be at issue. Sometimes it's a use effect that you didn't notice that was firing.

• 17:57Wes Bos?

  Silently bankrupting you.

• 17:59Scott Tolinski?

  Yeah, I mean, there's all kinds of things. For me, I had, I had a transition on a, man, what did I have a transition on? I had a transition on a background color, but I had enough of the elements that it was tanking my FPS. And that's like a technique that if you had it on one button, a transition on a background color, that's no big deal. You got a thousand buttons on the screen, a transition on a background color just tanks your FPS. And it took me a long time to figure that out. I shouldn't have, it shouldn't have taken me that long. And I just changed it to be an opacity thing. I did the color with a after pseudo element and did an opacity. That fixed the performance issue. But like a lot of the times, it's just not the care taken to dive into, all right, what is the FPS?

• 18:39Scott Tolinski?

  And I have 60 FPS here as the target. You don't have to have 60 FPS on everything, but like, you should be striving to get that number as high as possible. We have high refresh screens these days and they feel nice.

• 18:56Wes Bos?

  One thing I learned from Matthew Perry, he's the dev behind motion.dev. It used to be called Framer Motion. And one thing he said that really stuck with me is that it's not about having a high frames per second. It's about having consistent frames per second, meaning that like, it's fine if it's, if it's 20 frames a second. Just make sure that it's always 20, because, because what happens is people notice that on our video as well. Is if we've got 60 frames a second video and then we drop two or three frames, people notice it right away because it's, it's jarring to the eye to go up from one to another. But if we released it at 24 frames a second. Hollywood movies are released at that and it's, it's fine. Nobody's like, hmm, this is very low frame rate, you know?

• 19:39Scott Tolinski?

  Movies on the vaulted silver screen of Hollywood are at 24 frames per second.

• 19:48Wes Bos?

  Full page refresh. This is such a simple one. There are so many, I don't know, frameworks. There's nothing wrong with fast HTML, but if you've got pretty heavy pages, you're going from one to another, most frameworks will allow you. It's, in fact, it's very hard using a framework now like SvelteKit or any React framework that when you click a link, it doesn't actually change the page. It's usually just a push state.

• 20:13Scott Tolinski?

  Yeah. And you know what? Even like web purists who want to do everything on the server side and don't want any client side rendering and stuff like that. The, one of the big issues too is not having like the proper color scheme setup. And then so if you have like a dark screen and you change pages and it does a full page refresh, you would get like a white screen for like half a second if the color mode, color scheme isn't correct and things like that. Like those things are just gonna make it feel ugly. And then, and you know, I, I think for some reason, I think client side rendering gets, I don't know, poo-pooed for some reason, but client side rendering rules and it is one of the things that's going to make your app feel more native.

• 20:49Wes Bos?

  And I don't, that's not necessarily like a client versus server thing as well. Like my, my personal website, westboss.com, fast as heck. It's a hundred percent server, server rendered, but it's still using the client side.

• 21:01Scott Tolinski?

  Yeah, yeah. Go check it out. Changes? There's, there's no client side rendering on page changes?

• 21:07Wes Bos?

  No, that's, what happens is that you click a link, it goes to the server for that markup. Markup comes back and then the, the client side JavaScript simply just replaces the content that has changed on the page.

• 21:19Scott Tolinski?

  Hmm. It's not getting a full new HTML page.

• 21:23Wes Bos?

  It's not. No, it's just it's getting the React server components knows which pieces of that page need to need to be updated.

• 21:31Scott Tolinski?

  Yeah, I'm talking about like a full HTML page coming in.

• 21:35Wes Bos?

  Yeah, yeah, like, like if you're going from one page to another, likely your header, your nav and your footer are going to stay the same, right?

• 21:44Scott Tolinski?

  Yeah.

• 21:44Wes Bos?

  And you go to the next page. And even if even if it did have a full HTML page change, you can still get that nice experience. You just wait for the HTML to be returned from the server and then you transition that thing over. So you don't have that like weird blank screen in between while you're waiting for the request to come back.

• 22:05Scott Tolinski?

  Yeah. Well, then your your server response has to be very fast, which network dependent and all kinds of stuff.

• 22:11Wes Bos?

  Yeah. Well, like, what? You're you're either sending your data back, right? Like via JSON or you're sending rendered HTML back.

• 22:21Scott Tolinski?

  Or you're preloading, you're you're doing those types of things to to ease that pain.

• 22:26Wes Bos?

  I don't think it necessarily matters which format it's coming back in, whether it's coming back in JSON and you're you're throwing that in and client side rendering it, or you're just getting HTML from the server and replacing it. And weren't you like Mr. HTMLX for the longest time? You're you're head over heels for it.

• 22:42Scott Tolinski?

  I was Mr. HTMLX for, I would say about

• 22:46Wes Bos?

  Three days.

• 22:47Scott Tolinski?

  About three days. Yes. The reason why I because I got at the same time, and even before then, I was getting really into local data caching. And it's just like they're that they're so incompatible, those two approaches. But also you you could do in HTMLX, Wes, client side routing with it. And it's not client side routing, but you're hitting it and it's only replacing, it's like AppShell, right?

• 23:11Wes Bos?

  That's what I'm talking about here. That's exactly what I'm

• 23:13Scott Tolinski?

  What I'm saying is a problem is replacing the entire HTML document and not doing the AppShell stuff. That's fine. Even whether that data is coming from the server or the client doesn't matter.

• 23:23Wes Bos?

  Yeah.

• 23:23Scott Tolinski?

  Yeah.

• 23:24Wes Bos?

  Oh, good. Well, we're on the same page then.

• 23:27Scott Tolinski?

  Wes, did you see that comment? Someone was like, these two better resolve their differences or else I feel like they might split up in 2026.

• 23:36Scott Tolinski?

  We've never disagreed on anything ever. We have one little spat about, what was it even about?

• 23:43Wes Bos?

  Forms, Tanstack forms. Scott couldn't understand the use for Tanstack form and then Spellkit comes out with the same thing. And he's thinking, no, this is the best thing ever.

• 23:53Scott Tolinski?

  Okay, the podcast is over. I'm done because you're misrepresenting my point so severely. It's not even the same point. And you did a voice for me? That's not even what I sound like. I have a lower voice. I have a boomy voice. Let's talk about slow loading times. That's a big one. Loading screens. That is like, man, there's apps that are native apps that you can tell are so clearly like web apps wrapped, just based on the loading screens and the way you feel with that.

• 24:22Wes Bos?

  And the fact that they like arrest the entire UI. They'll throw a, you can't do anything while you're waiting, you know? Just sit here and let me show you this little plane that flies across while we load in your data. That's frustrating.

• 24:35Scott Tolinski?

  Who is it? OptumRx. I feel like OptumRx. Man, they, OptumRx is like a medication company. They had a fine app. It was just like a totally fine app. Whatever the hell they did. Holy cow, man. The app now is like, takes each request, like takes seconds. And if you go from one page, back to the same page, back to the same page, it does that full request with like no caching.

• 25:02Wes Bos?

  I just clicked the link. So go to OptumRx.com and just click on any link. And it does the like, it does like two or three redirects. Air Canada does this as well. And then the loader restarts every time. So it like jitters.

• 25:19Scott Tolinski?

  Whoever, they, and this app used to be totally fine. And the native app is the exact same way. And what's crazy is that they also screwed up their data platform because they like, they started like sending out medications incorrectly and stuff. Or like certain medications weren't showing up. So I went on their customer support. They're like, yeah, our new system is having some issues where it's like unsubscribing you from your medications and changing the dates. And it's like, I had an issue the other day with it where it was like, it was in December, it was currently December and it was like, you have one refill, next refill available, November 2025 or whatever, but it wouldn't let you do it because it was saying, your refill is not available like to be filled yet.

• 26:02Scott Tolinski?

  It's not available to be filled until, and it was a time in the past. I'm just like, oh, their engineering team is cooked. I don't like, don't know what, something must have happened where they're underpowered or

• 26:13Wes Bos?

  It's some sort of like CRM all the way down. You know, it's running on some Java Barracuda server in someone's basement and like, there's no possible way they can build a

• 26:24Scott Tolinski?

  Yeah.

• 26:25Wes Bos?

  A modern web app in that experience.

• 26:27Scott Tolinski?

  It was a redesign, redesigned so badly that I'm like, I would rather go to CVS, drive to the store and pick up my medication than keep any of my stuff on this any longer. It's infuriating. But either way, slow loading times, loading screens, all this stuff. One of the reasons why native apps feel really fast with some of this stuff is a lot of these local first, but not necessarily local first as a term, strategies, whether that is local data caching, having data stored, like a lot of native apps use SQLite databases stored on your device to do a lot of the stuff. And then they do processing in the background. So either they're downloading data in the background to populate that database. So when you click things, things load fast.

• 27:11Scott Tolinski?

  So local data caching is a big one. TanzDB is a good option for that. If you're, if you're in that ecosystem or even, even not, or it needs sort of local data, or even just like hard caching stuff in general. If, if the stuff is cached on your device, it's going to be so much faster. Like, like that OptimaRx thing where it's like fetching the same data and it's still doing a full hit like that, that's awful. Another one of these two is like non-instant data mutations. Like when I click something, I, I don't care. Like it should feel like something happened. Your app should respond to it. So optimistic UI is a strategy for that where your UI is responding as if it was successful and then you can backtrack if it wasn't.

• 27:53Scott Tolinski?

  But like having the thing happen when you click the button is one of the reasons why so many native apps feel so nice. Because typically they're just storing things in a SQLite database or doing a sync offline.

• 28:04Wes Bos?

  Even if you don't like the offline stuff, I tweeted something about how offline first and optimistic. is so good and a lot of people are like like local first is not it and I was like even if you don't like the local first stuff at least understand that you should optimistically render out some of your UI or at least show me a spinner something that's happening I'm just going through this Optum RX website see what it's built in it's a it's the funny thing is it's using the latest react it's using react router it's using the suspense

• 28:40Scott Tolinski?

  bro I could have told you that it was

• 28:41Wes Bos?

  so much

• 28:42Scott Tolinski?

  and this is not me being a hater on react I just know that whenever they launched the redesign it had it had react written all over it

• 28:50Wes Bos?

  you could just feel it sometimes I can feel what a website I can feel an angular website when and when a website you start typing in it and it validates immediately like while you're like you're typing your email address and you type W and it's like that's not a valid email address and like I'm not done yet I I can smell that for 100 miles away that's an angular website

• 29:09Scott Tolinski?

  oh yeah yeah it's it's crazy yeah dude I'm on a I'm on a page right now this is like this is almost comical how bad this site is now I just logged in in the normal login and it took me to a page that has no navigation and it says zero claims no claims found you have zero claims this year and then it has no other navigation on this page this is the main app login and then the the the page title is I kid you not forward slash secure forward slash turn claim history like they didn't even have a proper page title on this page I just logged into the app proper they don't even have a page title what's going on here often

• 29:51Wes Bos?

  all right this Scott this website that you you've gifted to us has provided so many examples I'm gonna share my screen right now because the next one we have here is what's called CLS cumulative layout shift and and this is when a page loads and then something loads and and causes the page to to move in some count and and very very commonly this is like an image loads and pushes your content down or the page loads and you realize this person hasn't bought something let's throw a banner over the top and it pushes it down you know like those are those are common things where the page loads and then something else happens or some CSS loads something is caused to cause a repaint that causes the the the content to be pushed down

• 30:36Wes Bos?

  or whatever in this website Because it is client-side rendered entirely as Scott's favorite way.

• 30:42Scott Tolinski?

  No, it's not. There's no way. There's something. Oh, my God.

• 30:45Wes Bos?

  This is doing double CLS.

• 30:47Scott Tolinski?

  It's the hydration is what it is. They have bad hydration.

• 30:51Wes Bos?

  When I click on a link, there's this home breadcrumb and then it says member resources. So what's happening is there's nothing there initially.

• 30:58Scott Tolinski?

  Oh, yeah.

• 30:58Wes Bos?

  And then the home pops up, probably because they check client-side what page they're on. And then the member resources pops up at some other point and you get this just little dance. And this makes websites feel like crap.

• 31:12Scott Tolinski?

  Oh.

• 31:14Wes Bos?

  I'm mad. This, this episode is making me mad.

• 31:18Scott Tolinski?

  This episode is making me mad. Let me tell you. Yeah. Optomarex, I'm glad I get to share this with you because I've, I've been so angry at this app and the website for so long now.

• 31:29Wes Bos?

  Look at this. Boom, boom.

• 31:31Scott Tolinski?

  Ah, for the login page, for the login page. What do you need on the login page? That like needs you to, oh.

• 31:38Wes Bos?

  All right, Ryan. Click it. One, two, three, four renders.

• 31:45Scott Tolinski?

  And, and let me tell you, the native app, the, the native app is clearly just the same thing, but put into a native app. And it didn't, used to be bad. It used to be fine. It used to be like totally usable. Like.

• 31:57Wes Bos?

  And it's, it's, all the stuff is fixable, right?

• 32:01Scott Tolinski?

  This, this site might not be fixable. You might need to, uh, you know, burn this. You might need to burn it to the ground.

• 32:09Wes Bos?

  Another little, another little treat I just saw is that the font of the, the word loading changes after a second. I don't know if you can see it or not, but those are the things that like I'm, if, if I can notice it, then it's really bad. But a lot of stuff, you just don't know why. There's a little je ne sais quoi and why do these websites feel so good? Um, and you might not even realize why it is.

• 32:34Scott Tolinski?

  I feel the worst for the people, the customer service people who work there who have to deal with all these people being like, "What the hell's going on with your website? It sucks." All right, off of Optimum. I'm gonna lose my mind if I keep talking about this site. The address bar on mobile, especially on like Safari, address bars have been like pushed to the bottom. There's like a weird like touch area where you can't click too close to it. You have to be cognizant of things towards the bottom of your site. We got viewport units a while ago and viewport units were like the ish. Everybody should be using viewport units. But we needed new ones because of how mobile browsers actually end up, end up being.

• 33:19Scott Tolinski?

  Because if you use 100 VH and the URL bar is visible, then that 100 VH isn't actually 100 VH. It actually like pushes down. It doesn't actually fill the entire viewport. So that's why we have the DVH, which is, I believe, dynamic. Is that what it's known for?

• 33:40Wes Bos?

  Yeah, yeah, there's, there's LVH, SVH, so large and small, meaning that like,

• 33:47Scott Tolinski?

  When it's available and when it's not.

• 33:48Wes Bos?

  Yeah, when it's available and when these, these address bars and like buttons pop up. And then DVH is, is just a, a fluid value that will adjust, given how much space is available, if the address bar and things are, are visible. And honestly, this is probably one of the biggest contributors to jank. Not DV, viewport units, but the fact that this address bar and the buttons pop in and out of the app as you're scrolling all the time, that doesn't happen on, on native apps. And it's so frustrating that does happen. If you add an app to your home screen as like a PWA, it feels 100 times better.

• 34:26Scott Tolinski?

  Yeah, this is definitely one that like, and I, I'll put this same thing in the category of if you have like a mobile navigation and it's too close to the bottom, when you have that bottom, the bottom toolbar, you won't be able to click on it. So you might get like people trying to click on it. So you need a little bit of padding there. So not necessarily tightly related, but like another thing that I've encountered where there's a button visible, you go to click it and nothing happens. So you have to scroll down and then click it. So just something to be cognizant about that again, could be solved just by using your thing.

• 34:58Wes Bos?

  Scott, I'm pleased to report that Optum RX disabled zooming on their website.

• 35:03Scott Tolinski?

  Oh, thank goodness.

• 35:04Wes Bos?

  They don't have the horizontal scroll issues and they don't have the accidental zooming in, which is good because there's probably a lot of elderly people using this app and they will accidentally zoom in with when they put, oh, I didn't realize I had two fingers on the screen. So we'll give them points for that.

• 35:22Scott Tolinski?

  Points, points issued. Uh, I'll take it. Yes, I'll take anything. Uh, although I am stoked that I I've moved all of my medications off of it. So I never have to open that app ever again. Yes.

• 35:34Wes Bos?

  Last one we have here is is full width scroll traps and probably one of the most frustrating things on the mobile web is using an embedded map. If you've ever tried to use a Google map that has been embedded into a website, it's extremely frustrating because you try to scroll down and then your your finger, this used to be where your finger would catch the map. And now all of a sudden you're scrolling the map and you're not scrolling the website. So they changed that now to you have to use two fingers to pan around a map on the web, which is not what anything else uses. And it's it's really frustrating to use that as well. Um, and then you try to zoom in the map, but if you do it too far, then you accidentally zoom in the page.

• 36:18Wes Bos?

  And it's just, you end up with this like weird space where you're zoomed into the map too much, but you're also zoomed into the the website and it's just very, very frustrating. So if you are embedding something that could possibly be a scroll trap, maps being the biggest one, certainly give a little bit more attention to whether or not, if it works, you know, try it. I think the the biggest thing we can say from this entire episode is like, try your websites, folks. I think some of you are not trying your websites.

• 36:47Scott Tolinski?

  Yeah, I know. Yeah, that is such a thing. I I remember this is, this is not a problem that you see as much anymore, but back in the day, we used to get like PSD comps. Uh, especially like me, I was working at an agency. So I'd get a lot of like PSD comps before we had Sketch and people weren't really using Illustrator for some reason. Uh, because you didn't have vector based websites anyways, but you'd get a PSD comp. And one developer would implement it exactly. And another developer, you'd look at their work and you'd be like, did you even open this thing up in a browser? Did you even compare the two? They used to call it like pixel perfect design. And like, I just never understood how you couldn't see the difference there.

• 37:32Scott Tolinski?

  And likewise, I don't understand how you're not using your stuff. I dog food everything that I'm making all the time. Now, that doesn't mean there aren't bugs. I'm sure people could find all kinds of stuff on the syntax site that are just bugs I haven't gotten to yet. But like, if I'm building something that I want to feel like an app, man, I'm using it 24/7. Like my habit path app is my habit tracker that I built for myself. And I'm using it all the time. And there's things about the UI that I hate that I want to change. But I am still understanding like what its pitfalls are. And just from using it, use your stuff. And use Sentry to help you fix some of these bugs and stuff that people might be encountering. You might learn something.

• 38:13Wes Bos?

  Let us know your frustrations. Leave them down in the comments below. I'd love to hear them. Peace.

• 38:18Scott Tolinski?

  Peace.