Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Use spacer components instead of CSS margins (2020)

mxstbr.com

Post reply on HN
Print view View original

141–150 of 230 posts

Re: Use spacer components instead of CSS margins (2020)

#141

Post by roman-holovin »

rendall wrote: post #133

This article is but one example of why I think React is actively harmful to the web. Its practitioners generally speaking have little interest or incentive to understand what's going on under the hood, and it shows. Its compiled code, except with exceptional teams, has no semantics and baffling, sloppy css. The article's main point is a definitely worthy, arguable one: a React component perhaps should be entirely enc…

I don't think it is fair to blame the tool for the mistakes of the operator. I feel like the real issue is that demand for software developers and specifically web developers is higher than than supply. Which leads to a situation where anyone who can put pixels on the screen, with at least some degree of reliability, will be hired and will put pixels on the screen. And they will choose whatever tool there is.

Another issue is that if look through job postings carefully, you will see the pattern there where framework knoweledge is valued above everything else. It is "React Frontend Developer" or "Vue Frontend Developer", not just "Frontend developer who is capable to pickup whatever technology we use".

There are reasons for that, of course, but it is hard not to see that this approach will likely skew hiring into looking for a specific knowledge in candidates. And candidates are going along with a path of the least resistance and learning stuff they need to work with backwards.

Re: Use spacer components instead of CSS margins (2020)

#143

Post by thrower123 »

tristanperry wrote: post #89

I do agree generally, but it's funny that the suggested solution (spacers) are basically back to the old 1px transparent gif trick from the 90s/early 00s. Nothing wrong with the suggestion, but it's just ironic that we seem to be coming full circle again. Next we'll probably have posts extolling components for layouts ;)

Time is a flat circle, and we're just going to be rehashing the same ideas endlessly every five years until the heat death of the universe.

Re: Use spacer components instead of CSS margins (2020)

#145

Post by edoceo »

Kavelach wrote: post #115
goldenkey wrote: post #114

Earlier quoted context omitted.

I hadn't heard of the owl selector for selecting :not(:first-child). Thank you for teaching me something new!

Note that the owl selector is pretty slow when it comes to being processed by browsers. If you use it sparingly, it shouldn't be so bad, but leave it all over the place, and you'll see the impact

How can one even test the performance of these selector? I've been have a few pages that feel slow, and have some exotic selectors, but I've no clue what tools to uses. And searches for CSS performance tell me lame things like: minimize and use a CDN. I have the XY problem.

Re: Use spacer components instead of CSS margins (2020)

#146

Post by armandososa »

tristanperry wrote: post #89

I do agree generally, but it's funny that the suggested solution (spacers) are basically back to the old 1px transparent gif trick from the 90s/early 00s. Nothing wrong with the suggestion, but it's just ironic that we seem to be coming full circle again. Next we'll probably have posts extolling components for layouts ;)

> it's funny that the suggested solution (spacers) are basically back to the old 1px transparent gif trick

Not really. The Stack component he uses as an example is actually just a thin abstraction over some reusable css. In plain html, it could look like

    
        ...
        ...
        ...
There are no "spacer gifs" anywhere, it's only that you're lifting the margin responsibility to the parent. I may be wrong, but I think the whole stack concept is borrowed from SwiftUI.

That said, I've recently started using actual spacer divs that are more similar to the spacer gifs of yore, you mentioned. So I could do things like:

    
        
        ...
        
        ...
        
        ...
Having been alive during the whole semantic web era, that feels very wrong to me. But it works like a charm to keep your code consistent with a design system which seems like a more noble endeavor than to write html that makes more sense to machines (which was, if I remember correctly, the objective of the semantic web).

Re: Use spacer components instead of CSS margins (2020)

#147

Post by ratww »

thrower123 wrote: post #143
tristanperry wrote: post #89

I do agree generally, but it's funny that the suggested solution (spacers) are basically back to the old 1px transparent gif trick from the 90s/early 00s. Nothing wrong with the suggestion, but it's just ironic that we seem to be coming full circle again. Next we'll probably have posts extolling components for layouts ;)

Time is a flat circle, and we're just going to be rehashing the same ideas endlessly every five years until the heat death of the universe.

Spacer components and spacer elements are not the same idea, though, far from it.

Re: Use spacer components instead of CSS margins (2020)

#148

Post by rendall »

roman-holovin wrote: post #141
rendall wrote: post #133

This article is but one example of why I think React is actively harmful to the web. Its practitioners generally speaking have little interest or incentive to understand what's going on under the hood, and it shows. Its compiled code, except with exceptional teams, has no semantics and baffling, sloppy css. The article's main point is a definitely worthy, arguable one: a React component perhaps should be entirely enc…

I don't think it is fair to blame the tool for the mistakes of the operator. I feel like the real issue is that demand for software developers and specifically web developers is higher than than supply. Which leads to a situation where anyone who can put pixels on the screen, with at least some degree of reliability, will be hired and will put pixels on the screen. And they will choose whatever tool there is. Another…

> I don't think it is fair to blame the tool for the mistakes of the operator.

I would ordinarily agree with you. After all, there is nothing inherent about React that prevents responsible HTML and CSS. And there's nothing about vanilla HTML and CSS that particularly encourages good practice, either.

Except. In practice. React abstracts so much away, that what looks like excellent, well-constructed code (in React) can easily compile into a mess that no one will see unless they go looking for it. And, in practice, I've worked with otherwise excellent teams who find my focus on semantics and CSS honestly baffling and "old school".

I think the rest of your analysis is spot on, though

Re: Use spacer components instead of CSS margins (2020)

#150

Post by spicybright »

tambourine_man wrote: post #130
timeon wrote: post #126

Earlier quoted context omitted.

Tendency towards semantic web is unfortunately dead. Now you have simple blogs rendered by shadow DOM components. Even with templates separation of template and code was ideal - now you have 'reusable components' with templates all over the place. Functional programming has its place, but I'm not sure if everywhere. (You can separate code from templates even with FP and React - but often it is not the case).

>Tendency towards semantic web is unfortunately dead. Not dead, but under severe attack. We can and will fightback

Can you elaborate a bit why? I've don't think I've seen a time where most sites were generally semantic
Post reply on HN