4 ms·

I constantly wonder why so much work on CSS and absolutely zero work on implementing basic primitives like <input type="slider" min="0" max="1000" step="10"> an

by dheera 6y ago

I constantly wonder why so much work on CSS and absolutely zero work on implementing basic primitives like <input type="slider" min="0" max="1000" step="10"> and <input type="toggle"> and <tabviewpager><tab></tab><tab></tab></tabviewpager> and <input pinchzoom="true" src="foo.jpg"> and other utterly basic UI elements with full support for swipe gestures. It's 2021 and people still do div and javascript hell to implement these things.

city41 6y ago
There are primitives like that, such as https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in... There's even a color picker in native html now.
- dheera 6y ago
  Oh cool! maybe they are finally getting with the beat. What about spinners, pull to refresh and other things ... would be nice to standardize all of these such that they display with your system's native widgets. The code for those CSS spinners is horrifying spaghetti code whereas I should be able to just do <spinner> and get an Android native spinner on Android and an iOS native spinner on iOS.
  - sabellito 6y ago
    input types like range were introduced in 2014, here's a tutorial from then: https://css-tricks.com/datalists-different-input-types/ https://css-tricks.com/datalists-different-input-types/ I think I get the point you're trying to make, and I find it difficult that someone could make a list of all the things that "should be in by default" vs providing the building blocks.
    - dheera 6y ago
      Maybe they could just start by providing all the Android layout XML components as native in HTML6?
    - ozzmotik 6y ago
      your response suggests that you think that the list needs to be 100% consistent with the shape of reality at all times, but the reality of it is that standards are fluid things and they are developed and honed iteratively in response to the pressures that gave rise to their existence in the first place. it's less about trying to make sure to accommodate every last possibility, and more about making sure to provide a reasonably fundamental and useful set of resources that can be used in union to build the more complex ones. the map of absolute choices is not the terrain of contextual variation and nuance, and there's no reason to ever expect a 100% concordance because a 1:1 map is basically equivalent to directly experiencing noumena and seeing past qualia, and that's just not usually a thing that is, by definition, directly apprehended, but rather indirectly inferred from the phenomena that result from interpreting it. tl;dr they'll get it in the next patch
- Guest19023892 6y ago
  Most of these inputs are very limited though. For example, range only allows one handle, so it doesn't work in most instances. For example, you might want a slider for a range of prices ($10-20), sizes (TVs that are 32-40"), or dates (products released between 2010-2013). It doesn't work in these situations, which is disappointing because they seem like the most basic use cases.
  - city41 6y ago
    It's a start at least. And I also find hardly anyone ever uses them because they want their UI to match. I still like that I can quickly whip up form validation and some controls with just html.
spockz 6y ago
Have you seen lion[0]? It is a stylable/white label set of web components. It also has a switch/toggle. [0]https://lion-web.netlify.app/components/interaction/switch/overview/ https://lion-web.netlify.app/components/interaction/switch/o...
- dheera 6y ago
  Yeah, I mean there are lots of web components out there, but under the hood they are div hell and css hell. "npm i --save @lion/input-amount" This isn't directed at you, but I shouldn't have to use npm to build a webpage. Also, building web components out of css/div hell severely impacts performance when you have a long scrollable list of them. And most of these web components might look nice but they don't support native touch/swipe gestures in exactly the same way that the OS does. I tried the Lion tabs component on my phone and I can't swipe between tabs. Probably the most utterly basic UI gesture. Fail.
  - madeofpalk 6y ago
    > but under the hood they are div hell and css hell. And? That's what all the "native" web inputs are as well.
    - deleted 6y ago
      [deleted]
no_wizard 6y ago
It’s not, and hasn’t been since at least ES6 and the engine normalization’s that came with that leap (DOM APIs got normalized in that transition across browsers) Web components is one way to add re-usable functionality naked into modern browsers. There is also a slew of new elements nobody seems to use for no good reason like: picture, figure, section, article, main, header, footer, the new input types, details and I’m sure I’m missing more. Why does this industry think it’s okay to just be well educated with JS but doesn’t care that developers also know CSS and HTML just as well, I’ll never know
dmitriid 6y ago
There's now an attempt being made to start an exploration into this: https://open-ui.org https://open-ui.org I wouldn't hold my breath though.

by dheera 6y ago

city41 6y ago

There are primitives like that, such as https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in... There's even a color picker in native html now.

dheera 6y ago
Oh cool! maybe they are finally getting with the beat. What about spinners, pull to refresh and other things ... would be nice to standardize all of these such that they display with your system's native widgets. The code for those CSS spinners is horrifying spaghetti code whereas I should be able to just do <spinner> and get an Android native spinner on Android and an iOS native spinner on iOS.
- sabellito 6y ago
  input types like range were introduced in 2014, here's a tutorial from then: https://css-tricks.com/datalists-different-input-types/ https://css-tricks.com/datalists-different-input-types/ I think I get the point you're trying to make, and I find it difficult that someone could make a list of all the things that "should be in by default" vs providing the building blocks.
  - dheera 6y ago
    Maybe they could just start by providing all the Android layout XML components as native in HTML6?
  - ozzmotik 6y ago
    your response suggests that you think that the list needs to be 100% consistent with the shape of reality at all times, but the reality of it is that standards are fluid things and they are developed and honed iteratively in response to the pressures that gave rise to their existence in the first place. it's less about trying to make sure to accommodate every last possibility, and more about making sure to provide a reasonably fundamental and useful set of resources that can be used in union to build the more complex ones. the map of absolute choices is not the terrain of contextual variation and nuance, and there's no reason to ever expect a 100% concordance because a 1:1 map is basically equivalent to directly experiencing noumena and seeing past qualia, and that's just not usually a thing that is, by definition, directly apprehended, but rather indirectly inferred from the phenomena that result from interpreting it. tl;dr they'll get it in the next patch
Guest19023892 6y ago
Most of these inputs are very limited though. For example, range only allows one handle, so it doesn't work in most instances. For example, you might want a slider for a range of prices ($10-20), sizes (TVs that are 32-40"), or dates (products released between 2010-2013). It doesn't work in these situations, which is disappointing because they seem like the most basic use cases.
- city41 6y ago
  It's a start at least. And I also find hardly anyone ever uses them because they want their UI to match. I still like that I can quickly whip up form validation and some controls with just html.

spockz 6y ago

Have you seen lion[0]? It is a stylable/white label set of web components. It also has a switch/toggle. [0]https://lion-web.netlify.app/components/interaction/switch/overview/ https://lion-web.netlify.app/components/interaction/switch/o...

dheera 6y ago
Yeah, I mean there are lots of web components out there, but under the hood they are div hell and css hell. "npm i --save @lion/input-amount" This isn't directed at you, but I shouldn't have to use npm to build a webpage. Also, building web components out of css/div hell severely impacts performance when you have a long scrollable list of them. And most of these web components might look nice but they don't support native touch/swipe gestures in exactly the same way that the OS does. I tried the Lion tabs component on my phone and I can't swipe between tabs. Probably the most utterly basic UI gesture. Fail.
- madeofpalk 6y ago
  > but under the hood they are div hell and css hell. And? That's what all the "native" web inputs are as well.
  - deleted 6y ago
    [deleted]

no_wizard 6y ago

It’s not, and hasn’t been since at least ES6 and the engine normalization’s that came with that leap (DOM APIs got normalized in that transition across browsers) Web components is one way to add re-usable functionality naked into modern browsers. There is also a slew of new elements nobody seems to use for no good reason like: picture, figure, section, article, main, header, footer, the new input types, details and I’m sure I’m missing more. Why does this industry think it’s okay to just be well educated with JS but doesn’t care that developers also know CSS and HTML just as well, I’ll never know

dmitriid 6y ago

There's now an attempt being made to start an exploration into this: https://open-ui.org https://open-ui.org I wouldn't hold my breath though.