5 ms·

They should really be in data-attributes instead of classes imo. And not having issues on Github is quite a weird, especially when the first rule for contributi

by Calvein 11y ago

They should really be in data-attributes instead of classes imo. And not having issues on Github is quite a weird, especially when the first rule for contributing is: > Create an issue

freshyill 11y ago
Why on earth would someone want to apply CSS via data attributes instead of classes? That's the kind of statement you need to justify.
- Nadya 11y ago
  Structural purposes. Personally, I hate moving/changing/adding classes with Javascript. classList is hacky. Stuff like this is exactly what data-attributes are for. [0] img.dataset.filter // "instagram filter type" The CSS would need slight changes, accordingly: img[data-filter="filter_type"] { /* styles */ } [0] https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Usin...
  - awhitty 11y ago
    Hm, this is an interesting case where stylesheet design principles and application logic aren't so loosely coupled. The data attributes almost seem to be a way to invoke CSS styles as functions themselves.
    - goldenkey 11y ago
      The main difference is that using classes, is misusing them. Because enum values as classes pollutes the namespace. Enum values should map to attribute values. It makes logical sense. Attribute values don't go into a namespace. They just exist as things to query by. It is possible many CSS engines optimize this fact. By not caching attribute values until there is a selector that uses them. Classes on the other hand are inherently saying 'I will query by this at a later time - I give no hints as to whether it is mutually exclusive with other class values. I merely have a list of class values which apply.'
  - gotchange 11y ago
    > classList is hacky How so? I don't think that it's in anyway hackier than its sister dataset.
    - nness 11y ago
      I don't understand that comment either, but it might be the lack of classList support in earlier IE versions without a polyfill.
  - untog 11y ago
    I hate moving/changing/adding classes with Javascript. classList is hacky. ...in what way?
  - jonahx 11y ago
    Interesting, thanks for pointing this out. I am still unclear, though, how you draw the line, in general, between things that belong in dataset and things that belong in standard classes?
    - Nadya 11y ago
      goldenkey explained this well in their response. https://news.ycombinator.com/item?id=10461988 https://news.ycombinator.com/item?id=10461988
      - jonahx 11y ago
        I read that but it still isn't clear to me. What is the namespace in question that we're polluting? Where do you draw the line? Eg, take something a simple as creating striped table rows. Is something like 'class="oddRow"' wrong, because technically that's an enum value -- the rows can be "odd" or "even". Should we instead write 'data-rowtype="odd"'? Basically, I need to see some more examples to understand the distinction better.
        Nadya 11y ago
        I've never understood separating by odd/even. Typically the people who do this only want to add styles to "alternate" rows. So I would use 'class="alternate"'. >Basically, I need to see some more examples to understand the distinction better. Personally I do it only for organizational purposes more than anything else. The "actual use cases" are a bit contrived if I'm being honest, at least for this example. Let's say you have 5 photos on a page, each with different filters applied on different locations of the page. You want to allow users to normalize the page by selecting a single filter to apply to every photo. I'm not a JS expert - but the first seems a lot easier to manipulate multiple images at once. A single check of img.dataset.filter instead of checking against an entire array of classes. (If there is a simpler way of checking the class example, I'm all ears.) <img src="/" data-filter="oldschool" class="medium"> //change to greyscale <img src="/" data-filter="fuchsia" class="large"> //change to greyscale <img src="/" class="large"> //not to be changed <img src="/" data-filter="1970" class="small"> //change to greyscale <img src="/" class="medium oldschool"> //change to greyscale <img src="/" class="large fuchsia"> //change to greyscale <img src="/" class="small"> //not to be changed <img src="/" class="small 1970"> //change to greyscale
  - lucideer 11y ago
    Why does everyone here seem to be assuming the primary use-case is some kind of interactive on/off filter? Surely the common setting for this to be applied is in a web page where the author/photographer/designer has already selected a fixed filter and the visitor is just looking at it applied. A UI allowing someone to toggle or select filters on an image is the exceptional case here.
    - Nadya 11y ago
      There are better ways to accomplish this if you just want a fixed filter... such as displaying the image with the filter already applied instead of relying on user's (non-IE) browser to do it. Unless you plan to not support IE users at all, which is a rather big "don't do this" for front-end dev. So a UI to select filters to apply in FF/Chrome as progressive enhancement seems to be the best use case I can see for this, if I can be frank.
      - lucideer 11y ago
        "Better" from an infrastructural perspective maybe, for performance reasons, etc. but for many people quickly dropping in a bit of frontend magic is very often opted for in practice over more performant server-side setups. As for not supporting IE users at all, it's a filter - you don't lose image display.
- goldenkey 11y ago
  The filters are a collection of the same type of things. Therefore its more akin to filterAttr = filterEnumVal[autumn,auburn,sunnydale,cheezit,etc..] Instead of polluting the CSS namespace, it's much more apt to use a data-instafilter="[val]" property.
  - Calvein 11y ago
    Well goldenkey answered perfectly for me here.
andrewliebchen 11y ago
I think Una turned issues off on her repos...she's getting issue spam: https://twitter.com/Una/status/659128221292605440 https://twitter.com/Una/status/659128221292605440
- krick 11y ago
  Woah. I wonder if you can notify github about such behavior and if something would be done about that. Because that's really not pretty.
laurent123456 11y ago
Apparently she (and all those watching the project) got spammed so she had to shut down issues - https://twitter.com/Una/status/659128221292605440 https://twitter.com/Una/status/659128221292605440

by Calvein 11y ago

They should really be in data-attributes instead of classes imo. And not having issues on Github is quite a weird, especially when the first rule for contributing is: > Create an issue

freshyill 11y ago

Why on earth would someone want to apply CSS via data attributes instead of classes? That's the kind of statement you need to justify.

Nadya 11y ago
Structural purposes. Personally, I hate moving/changing/adding classes with Javascript. classList is hacky. Stuff like this is exactly what data-attributes are for. [0] img.dataset.filter // "instagram filter type" The CSS would need slight changes, accordingly: img[data-filter="filter_type"] { /* styles */ } [0] https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Usin...
- awhitty 11y ago
  Hm, this is an interesting case where stylesheet design principles and application logic aren't so loosely coupled. The data attributes almost seem to be a way to invoke CSS styles as functions themselves.
  - goldenkey 11y ago
    The main difference is that using classes, is misusing them. Because enum values as classes pollutes the namespace. Enum values should map to attribute values. It makes logical sense. Attribute values don't go into a namespace. They just exist as things to query by. It is possible many CSS engines optimize this fact. By not caching attribute values until there is a selector that uses them. Classes on the other hand are inherently saying 'I will query by this at a later time - I give no hints as to whether it is mutually exclusive with other class values. I merely have a list of class values which apply.'
- gotchange 11y ago
  > classList is hacky How so? I don't think that it's in anyway hackier than its sister dataset.
  - nness 11y ago
    I don't understand that comment either, but it might be the lack of classList support in earlier IE versions without a polyfill.
- untog 11y ago
  I hate moving/changing/adding classes with Javascript. classList is hacky. ...in what way?
- jonahx 11y ago
  Interesting, thanks for pointing this out. I am still unclear, though, how you draw the line, in general, between things that belong in dataset and things that belong in standard classes?
  - Nadya 11y ago
    goldenkey explained this well in their response. https://news.ycombinator.com/item?id=10461988 https://news.ycombinator.com/item?id=10461988
    - jonahx 11y ago
      I read that but it still isn't clear to me. What is the namespace in question that we're polluting? Where do you draw the line? Eg, take something a simple as creating striped table rows. Is something like 'class="oddRow"' wrong, because technically that's an enum value -- the rows can be "odd" or "even". Should we instead write 'data-rowtype="odd"'? Basically, I need to see some more examples to understand the distinction better.
      - Nadya 11y ago
        I've never understood separating by odd/even. Typically the people who do this only want to add styles to "alternate" rows. So I would use 'class="alternate"'. >Basically, I need to see some more examples to understand the distinction better. Personally I do it only for organizational purposes more than anything else. The "actual use cases" are a bit contrived if I'm being honest, at least for this example. Let's say you have 5 photos on a page, each with different filters applied on different locations of the page. You want to allow users to normalize the page by selecting a single filter to apply to every photo. I'm not a JS expert - but the first seems a lot easier to manipulate multiple images at once. A single check of img.dataset.filter instead of checking against an entire array of classes. (If there is a simpler way of checking the class example, I'm all ears.) <img src="/" data-filter="oldschool" class="medium"> //change to greyscale <img src="/" data-filter="fuchsia" class="large"> //change to greyscale <img src="/" class="large"> //not to be changed <img src="/" data-filter="1970" class="small"> //change to greyscale <img src="/" class="medium oldschool"> //change to greyscale <img src="/" class="large fuchsia"> //change to greyscale <img src="/" class="small"> //not to be changed <img src="/" class="small 1970"> //change to greyscale
- lucideer 11y ago
  Why does everyone here seem to be assuming the primary use-case is some kind of interactive on/off filter? Surely the common setting for this to be applied is in a web page where the author/photographer/designer has already selected a fixed filter and the visitor is just looking at it applied. A UI allowing someone to toggle or select filters on an image is the exceptional case here.
  - Nadya 11y ago
    There are better ways to accomplish this if you just want a fixed filter... such as displaying the image with the filter already applied instead of relying on user's (non-IE) browser to do it. Unless you plan to not support IE users at all, which is a rather big "don't do this" for front-end dev. So a UI to select filters to apply in FF/Chrome as progressive enhancement seems to be the best use case I can see for this, if I can be frank.
    - lucideer 11y ago
      "Better" from an infrastructural perspective maybe, for performance reasons, etc. but for many people quickly dropping in a bit of frontend magic is very often opted for in practice over more performant server-side setups. As for not supporting IE users at all, it's a filter - you don't lose image display.
goldenkey 11y ago
The filters are a collection of the same type of things. Therefore its more akin to filterAttr = filterEnumVal[autumn,auburn,sunnydale,cheezit,etc..] Instead of polluting the CSS namespace, it's much more apt to use a data-instafilter="[val]" property.
- Calvein 11y ago
  Well goldenkey answered perfectly for me here.

andrewliebchen 11y ago

I think Una turned issues off on her repos...she's getting issue spam: https://twitter.com/Una/status/659128221292605440 https://twitter.com/Una/status/659128221292605440

krick 11y ago
Woah. I wonder if you can notify github about such behavior and if something would be done about that. Because that's really not pretty.

laurent123456 11y ago

Apparently she (and all those watching the project) got spammed so she had to shut down issues - https://twitter.com/Una/status/659128221292605440 https://twitter.com/Una/status/659128221292605440