4 ms·

Maybe it's just the used example that irks me the wrong way a bit, but I do these things with pure CSS or even HTML. <img title='Jim Nielsen'/> anyone? For ma

Maybe it's just the used example that irks me the wrong way a bit, but I do these things with pure CSS or even HTML. <img title='Jim Nielsen'/> anyone? For making apps on the web, I abide to the request/response cycle that's inherent to HTTP. JS is only for cropping images, picking colors and other necessary functionality that adds to the otherwise serverside monolith. Of course there are use cases where one needs a JS framework, but I think it would surprise a lot of devs to see what's possible with just HTML, CSS and a little bit of JS on the client side. Although that seems to require a big mindshift nowadays...

trondeh80 3y ago
I have angered so many frontend devs by touting this for years. It amazes me how common sense like this is instantly attacked and belitteled. Unless you create a user-interface UI in a webpage (a complicated frontend state), I think its way more reasonable to just use html/css with small sprinkles of js to open/close menues and modals. It loads fast, its less code so its easier to maintain. It does not require a complicated build step that instantly becomes deprecated once its deployed. Heck, its even greener, it requires less CPU power to build and render.
- rahkiin 3y ago
  I’ve found it is quite doable to have open/close menus purely with html and css these days using selectors! The text you click on is a label for a hidden checkbox. The checkbox you put adjacent to the item you’re hiding/showing. Then put css on it that uses input[type=checkbox]:checked and the tilde operator
  - tonyedgecombe 3y ago
    I wonder why the HTML menu element was so half hearted. This is such a common requirement that it shouldn’t require hacks like that.
  - qingcharles 3y ago
    As CSS has developed over the last few years it is amazing how much you can now do on the front-end without JavaScript. I wish the browsers would enable their "behind-a-flag" support for masonry so many sites could then remove another chunk of JavaScript being used for layout.
    - Zardoz84 3y ago
      actually you can do a pseudo masonry style using pure CSS with display: grid . I done it
      - qingcharles 3y ago
        There's a ton of things that sorta work, I use an all-CSS solution as a fallback for browsers that don't have the CSS property enabled. The problem is that all the pure CSS solutions order the grid in a different order than would be expected by the user. All the JavaScript solutions fix this, but, you know, JavaScript...
cantSpellSober 3y ago
This is a safe opinion, web components are not designed to replace <img>. Perhaps the article could better explain why this approach is better than <img title='Jim Nielsen'/>.
no_wizard 3y ago
I want to add that using the title attribute should be very specific and narrow[0] as it has some very bad implications for accessibility. I know some devs might see this and think "Titles are builtin in tooltips!" and unfortunately, they are not. [0]: https://yoast.com/developer-blog/dont-rely-title-attribute/ https://yoast.com/developer-blog/dont-rely-title-attribute/
simonw 3y ago
The example here is clearly picked to be as simple as possible an illustration of the underlying concept. I recommend trying not to get distracted by the example and focus on the core idea.
riquito 3y ago
> <img title='Jim Nielsen'/> anyone? That's an accessibility gotcha, the title attribute tend to be neglected by screen readers and you should use aria attributes to communicate that information, and display it with other means

trondeh80 3y ago

I have angered so many frontend devs by touting this for years. It amazes me how common sense like this is instantly attacked and belitteled. Unless you create a user-interface UI in a webpage (a complicated frontend state), I think its way more reasonable to just use html/css with small sprinkles of js to open/close menues and modals. It loads fast, its less code so its easier to maintain. It does not require a complicated build step that instantly becomes deprecated once its deployed. Heck, its even greener, it requires less CPU power to build and render.

rahkiin 3y ago
I’ve found it is quite doable to have open/close menus purely with html and css these days using selectors! The text you click on is a label for a hidden checkbox. The checkbox you put adjacent to the item you’re hiding/showing. Then put css on it that uses input[type=checkbox]:checked and the tilde operator
- tonyedgecombe 3y ago
  I wonder why the HTML menu element was so half hearted. This is such a common requirement that it shouldn’t require hacks like that.
- qingcharles 3y ago
  As CSS has developed over the last few years it is amazing how much you can now do on the front-end without JavaScript. I wish the browsers would enable their "behind-a-flag" support for masonry so many sites could then remove another chunk of JavaScript being used for layout.
  - Zardoz84 3y ago
    actually you can do a pseudo masonry style using pure CSS with display: grid . I done it
    - qingcharles 3y ago
      There's a ton of things that sorta work, I use an all-CSS solution as a fallback for browsers that don't have the CSS property enabled. The problem is that all the pure CSS solutions order the grid in a different order than would be expected by the user. All the JavaScript solutions fix this, but, you know, JavaScript...

cantSpellSober 3y ago

This is a safe opinion, web components are not designed to replace <img>. Perhaps the article could better explain why this approach is better than <img title='Jim Nielsen'/>.

no_wizard 3y ago

I want to add that using the title attribute should be very specific and narrow[0] as it has some very bad implications for accessibility. I know some devs might see this and think "Titles are builtin in tooltips!" and unfortunately, they are not. [0]: https://yoast.com/developer-blog/dont-rely-title-attribute/ https://yoast.com/developer-blog/dont-rely-title-attribute/

simonw 3y ago

The example here is clearly picked to be as simple as possible an illustration of the underlying concept. I recommend trying not to get distracted by the example and focus on the core idea.

riquito 3y ago

> <img title='Jim Nielsen'/> anyone? That's an accessibility gotcha, the title attribute tend to be neglected by screen readers and you should use aria attributes to communicate that information, and display it with other means