Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

Re:Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout by The_Colonel on Tuesday April 23, 2024 @01:45PM (#40134798)

My favorite is this comparison for checking whether an element is hidden:

    $(el).is(':hidden')

vs.

    !(el.offsetWidth || el.offsetHeight || el.getClientRects().length)

DOM API has other problems like lack of chaining which forces you into a very imperative style of programming, e.g.:

    $(".alert").hide();

vs.

    for (const el of document.querySelectorAll(".alert")) {
         el.style.display = 'none';
    }

[ Parent | on HN ]

Re:Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout by recursive on Tuesday April 23, 2024 @02:00PM (#40134994)

I've never had a case where I didn't know the reason or mechanism by which an element would be hidden. In my code, I use the `hidden` property. In that case it simplifies from

    $(el).is(':hidden')

    el.hidden

It's not quite as succint as your jquery, but you also could have written this.

    document.querySelectorAll(".alert").forEach(el => el.hidden = false);

Is it less imperative? I mean I guess it doesn't have an explicit loop, but I don't really see why that's good or bad.

[ Parent | on HN ]

Re:Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout by The_Colonel on Tuesday April 23, 2024 @02:29PM (#40135412)

> I've never had a case where I didn't know the reason or mechanism by which an element would be hidden.

Unfortunately, I usually don't keep the whole codebase in my head (including libraries), so I often don't know the reason.

The more general point is that I don't want to have to know, because the mechanism of how it is hidden is not what I care about.

> It's not quite as succint as your jquery, but you also could have written this.

Yes, it's more than three times as long as the jQuery variant.

[ Parent | on HN ]

Re:Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout by recursive on Tuesday April 23, 2024 @03:11PM (#40135947)

Ok, I get it. Fair points. I'm not a jquery hater. In a lot of cases, I'd rather write jquery than react for instance.

[ Parent | on HN ]