6 ms·

Is this UI so simple that it’s meant to break on mobile?

by dstick 5y ago

rexelhoff 5y ago
ReactCut
Varriount 5y ago
Idiosyncratically, the website looks better on mobile if you view the page in desktop mode. That is, the content actually fits to the screen size, and the code examples aren't cut off mid-line.
- chrismorgan 5y ago
  That’s half of the point of giving a desktop mode switch, that it makes the browser ignore the “no really, I support mobile” <meta name="viewport" content="width=device-width"> tag.
tobr 5y ago
It’s a good illustration of the need for a simpler layout model than the three-dozen-piled-layers-of-cruft model CSS is based on.
- dahart 5y ago
  OTOH, CSS can handle a vastly wider array of styles and use cases. I agree it’s crufty, but there are many historical / legacy reasons for it that are still in use today. If used in practice for anything substantial, RectCut will start to acquire cruft too. First thing to get added would be resizeable / dynamic layouts. Next would be something akin to the CSS grid layout, which is already the successor to flexbox (closest CSS layout mode to RectCut).
  - chrismorgan 5y ago
    Grid is not the successor to flexbox. They’re different layout techniques that were invented at much the same time (though grid took longer to mature) for different situations. Flexbox is one-dimensional plus wrapping, while grid is two-dimensional. Now in practice, most applications of grid could be rewritten to use flexbox, but there are plenty of layouts that can be achieved with one but not with the other, both ways.
    - dahart 5y ago
      > Grid is not the successor to flexbox. Yes, it literally is. Grid came after flexbox in W3C drafts, in W3C recommendations, in broad browser support, and in widespread use. Several years ago, flexbox was being used widely while grid support was nonexistent, and today grid is still lagging behind flexbox a little. https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-grid-1/ https://www.w3.org/TR/css-grid-1/ https://caniuse.com/?search=grid https://caniuse.com/?search=grid https://caniuse.com/?search=flexbox https://caniuse.com/?search=flexbox
      - chrismorgan 5y ago
        Successor indicates that it’s designed to replace it. That’s not the case and never was. They have different purposes. (For the rest, my recollection was definitely off on the timing, and most significantly I forgot the proto-flexbox stuff that Gecko and WebKit had long before grid was proposed. Beyond that, grid certainly took longer to mature, as I remarked, being more complex and needing to interact with more features to be optimally useful. Incidentally, IE got both flexbox and grid (earlier drafts) at the same time, in IE10, Microsoft leading the way on grid by several years, five by the most common way of reckoning.)
        deleted 5y ago
        [deleted]
- chrismorgan 5y ago
  It’s a hopelessly bad illustration of that. The web does a singularly excellent job of supporting varying viewport sizes out of the box, but this page actively sabotaged that by claiming to support mobile: <meta name="viewport" content="width=device-width, initial-scale=1.0" /> While applying CSS rules that ruin it: .article-card, article h1, article ul, article p, article ol { width: 600px; } pre { overflow-x: hidden; } These rules are obviously bad. width should be max-width, and, well, what would you expect to happen if you tell it to hide the overflow? (It would have been OK even with these rules if the page hadn’t claimed to support mobile sizes, as the mobile browser would have rendered the page on a larger viewport and scaled it down, more or less.)
  - tobr 5y ago
    Yes, and this is exactly the type of problem you run into when your layout model is based on three-dozen-piled-layers-of-cruft.
    - chrismorgan 5y ago
      Show me a layout system that doesn’t let you break things in this sort of way, and I’ll show you a useless layout system.
fouric 5y ago
The code examples are in C and make no mention of any webtech or mobile. I'm pretty sure that this is meant for desktop interfaces.

Is this UI so simple that it’s meant to break on mobile?

by dstick 5y ago

Is this UI so simple that it’s meant to break on mobile?

rexelhoff 5y ago

ReactCut

Varriount 5y ago

Idiosyncratically, the website looks better on mobile if you view the page in desktop mode. That is, the content actually fits to the screen size, and the code examples aren't cut off mid-line.

chrismorgan 5y ago
That’s half of the point of giving a desktop mode switch, that it makes the browser ignore the “no really, I support mobile” <meta name="viewport" content="width=device-width"> tag.

tobr 5y ago

It’s a good illustration of the need for a simpler layout model than the three-dozen-piled-layers-of-cruft model CSS is based on.

dahart 5y ago
OTOH, CSS can handle a vastly wider array of styles and use cases. I agree it’s crufty, but there are many historical / legacy reasons for it that are still in use today. If used in practice for anything substantial, RectCut will start to acquire cruft too. First thing to get added would be resizeable / dynamic layouts. Next would be something akin to the CSS grid layout, which is already the successor to flexbox (closest CSS layout mode to RectCut).
- chrismorgan 5y ago
  Grid is not the successor to flexbox. They’re different layout techniques that were invented at much the same time (though grid took longer to mature) for different situations. Flexbox is one-dimensional plus wrapping, while grid is two-dimensional. Now in practice, most applications of grid could be rewritten to use flexbox, but there are plenty of layouts that can be achieved with one but not with the other, both ways.
  - dahart 5y ago
    > Grid is not the successor to flexbox. Yes, it literally is. Grid came after flexbox in W3C drafts, in W3C recommendations, in broad browser support, and in widespread use. Several years ago, flexbox was being used widely while grid support was nonexistent, and today grid is still lagging behind flexbox a little. https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-grid-1/ https://www.w3.org/TR/css-grid-1/ https://caniuse.com/?search=grid https://caniuse.com/?search=grid https://caniuse.com/?search=flexbox https://caniuse.com/?search=flexbox
    - chrismorgan 5y ago
      Successor indicates that it’s designed to replace it. That’s not the case and never was. They have different purposes. (For the rest, my recollection was definitely off on the timing, and most significantly I forgot the proto-flexbox stuff that Gecko and WebKit had long before grid was proposed. Beyond that, grid certainly took longer to mature, as I remarked, being more complex and needing to interact with more features to be optimally useful. Incidentally, IE got both flexbox and grid (earlier drafts) at the same time, in IE10, Microsoft leading the way on grid by several years, five by the most common way of reckoning.)
      - deleted 5y ago
        [deleted]
chrismorgan 5y ago
It’s a hopelessly bad illustration of that. The web does a singularly excellent job of supporting varying viewport sizes out of the box, but this page actively sabotaged that by claiming to support mobile: <meta name="viewport" content="width=device-width, initial-scale=1.0" /> While applying CSS rules that ruin it: .article-card, article h1, article ul, article p, article ol { width: 600px; } pre { overflow-x: hidden; } These rules are obviously bad. width should be max-width, and, well, what would you expect to happen if you tell it to hide the overflow? (It would have been OK even with these rules if the page hadn’t claimed to support mobile sizes, as the mobile browser would have rendered the page on a larger viewport and scaled it down, more or less.)
- tobr 5y ago
  Yes, and this is exactly the type of problem you run into when your layout model is based on three-dozen-piled-layers-of-cruft.
  - chrismorgan 5y ago
    Show me a layout system that doesn’t let you break things in this sort of way, and I’ll show you a useless layout system.

fouric 5y ago

The code examples are in C and make no mention of any webtech or mobile. I'm pretty sure that this is meant for desktop interfaces.