3 ms·

> Have you ever tried to play an old game on a widescreen monitor? Even a lot of modern, triple-A games have weird HUD layouts on ultrawide monitors because the

> Have you ever tried to play an old game on a widescreen monitor? Even a lot of modern, triple-A games have weird HUD layouts on ultrawide monitors because they have to be re-hard-coded for that aspect ratio. So if they haven't, you just get the layout they're hardcoded to for widescreen monitors. Have you ever seen any UI on the web that approaches the complexity of game UIs? I haven't [1]. Anywhere there's such complexity on the web, you get lots and lots of hardcoded values: from hardcoded media breakpoints to entirely different layouts for different resolutions and screen sizes. > I don't have time to read more than the first part of your reply right now; maybe I will later. Now worries, I got carried away a bit. As Stephen King calls it, "diarrhoea of the word processor" :) [1] https://twitter.com/dmitriid/status/1309777901483634689 https://twitter.com/dmitriid/status/1309777901483634689

brundolf 6y ago
> Have you ever seen any UI on the web that approaches the complexity of game UIs? I have personally built tools on the web more complex than the game UIs in your link. > Anywhere there's such complexity on the web, you get lots and lots of hardcoded values: from hardcoded media breakpoints to entirely different layouts for different resolutions and screen sizes. ...and I didn't use a single media breakpoint in any of them, and very rarely hardcoded any positions or sizes. The only time I've ever needed an explicit device-size breakpoint, it was for a site that needed to toggle from a laid-out navigation menu to a hamburger menu when the user was on a phone-sized device (or had their window narrowed to that size! the web doesn't care what device you're actually on, just how much space is available). There was a single breakpoint for "phone-ish" sizes, and that was that. It was necessary in this case because, unlike most values in CSS/the DOM, it was a discrete change and not a continuum. In most cases media-queries are a code smell.
- Santosh83 6y ago
  Sorry for butting in on this interesting conversation but regarding media queries being code smell, I currently see no other portable way to deliver multi-resolution background images. :-( Without JS libs that is...
  - brundolf 6y ago
    "Code smell" doesn't mean "never justified", it just means "you should look at it with a skeptical eye" Your usecase sounds legitimate to me. Given that you're talking about different image files, you're fundamentally talking about discrete cases, for which media queries are appropriate. The problems come up when people take something that doesn't need to consist of discrete cases - like element sizing, or whatever - and turn it into a set of discrete cases using media queries. This makes the page fragile against unexpected new sizes, instead of interpolating cleanly. Good CSS derives as many of its values as possible by channeling the continuous inputs of content size, viewport size, etc into other continuous values like the size and positioning of individual elements. The browser already does this by default; you just have to implement your vision while preserving as much of that intrinsic property as possible :)
- dmitriid 6y ago
  > I have personally built tools on the web more complex than the game UIs in your link. Then you are a far better developer than I am, and I dare say than the vast majority of developers out there. It will take most developers no time to come up with UI of any complexity in any of the non-web toolkits. Whereas on the web even small tasks like placing a badge on an avatar reliably is a thankless gargantuan task. Can't speak for the game UIs (they are undoubtedly hard) but considering the sheer diversity in them that the web hasn't seen since the flash era...

brundolf 6y ago

> Have you ever seen any UI on the web that approaches the complexity of game UIs? I have personally built tools on the web more complex than the game UIs in your link. > Anywhere there's such complexity on the web, you get lots and lots of hardcoded values: from hardcoded media breakpoints to entirely different layouts for different resolutions and screen sizes. ...and I didn't use a single media breakpoint in any of them, and very rarely hardcoded any positions or sizes. The only time I've ever needed an explicit device-size breakpoint, it was for a site that needed to toggle from a laid-out navigation menu to a hamburger menu when the user was on a phone-sized device (or had their window narrowed to that size! the web doesn't care what device you're actually on, just how much space is available). There was a single breakpoint for "phone-ish" sizes, and that was that. It was necessary in this case because, unlike most values in CSS/the DOM, it was a discrete change and not a continuum. In most cases media-queries are a code smell.

Santosh83 6y ago
Sorry for butting in on this interesting conversation but regarding media queries being code smell, I currently see no other portable way to deliver multi-resolution background images. :-( Without JS libs that is...
- brundolf 6y ago
  "Code smell" doesn't mean "never justified", it just means "you should look at it with a skeptical eye" Your usecase sounds legitimate to me. Given that you're talking about different image files, you're fundamentally talking about discrete cases, for which media queries are appropriate. The problems come up when people take something that doesn't need to consist of discrete cases - like element sizing, or whatever - and turn it into a set of discrete cases using media queries. This makes the page fragile against unexpected new sizes, instead of interpolating cleanly. Good CSS derives as many of its values as possible by channeling the continuous inputs of content size, viewport size, etc into other continuous values like the size and positioning of individual elements. The browser already does this by default; you just have to implement your vision while preserving as much of that intrinsic property as possible :)
dmitriid 6y ago
> I have personally built tools on the web more complex than the game UIs in your link. Then you are a far better developer than I am, and I dare say than the vast majority of developers out there. It will take most developers no time to come up with UI of any complexity in any of the non-web toolkits. Whereas on the web even small tasks like placing a badge on an avatar reliably is a thankless gargantuan task. Can't speak for the game UIs (they are undoubtedly hard) but considering the sheer diversity in them that the web hasn't seen since the flash era...