151–160 of 230 posts
False, the Stack/Grid style component has been a maintstay of XAML based layouts for over a decade now, and at least generally speaking two decades old. Also, many web frameworks have had this for a while. Braid was not the first one. It's still a very well made framework though but the technical inaccuracy masks a whole load of history.
Earlier quoted context omitted.
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.
(this semi helpful advice brought to you by mst's complete lack of front-end chops meaning concrete help will have to come from somebody else ;)
Agreed with avoiding margins, especially on reusable components, as they remove a degree of freedom for how they can be laid out by users. But these days, instead of margins or spacer components, I would recommend just using flex gap and grid gap across the board. The difference being spacer components (and margins for that matter) don't wrap well, which is important for building fluid layouts that don't depend on ha…
That's very reductionist approach. Sure, margin is a sharp tool and you need to use it responsibly. I avoid putting margins on "first"-level selector. So instead of .button { margin-left: 16px } I do .parent > .button { margin-left: 16px } Difference is that I can reuse '.button' elsewhere without modifications. Another point to consider is that margin is not the only CSS property that affects layout. Both grid, flex…
I hadn't heard of the owl selector for selecting :not(:first-child). Thank you for teaching me something new!
[0] https://alistapart.com/article/axiomatic-css-and-lobotomized...
Earlier quoted context omitted.
or may be we should continue looking for gotchas when it comes to clickbait misleading titles and finally get the message of "clickbait is wrong" across to at least some part of tech blogging community?
Thing is, clickbait works, so people will continue doing it. All your "gotcha" showed was that it works. Look at all the people in this thread engaging with this post, not because of its content but because of its title. If a clickbait title will lead to higher engagement, why would an author not use it? The best way to combat clickbait is to not fall for it, not play into it, to either ignore the article, or to read…
All I see is a discussion that’s been massively derailed by a shitty title. If it had a sensible title, perhaps people would be talking about the actual concept that the article was trying to tackle instead of threads like this where people keep having to explain that the title doesn’t match the article.
“Engagement” for the sake of engagement is worthless unless you are optimising for noise instead of signal.
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 ;)
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).
It is not very popular. React, Vue, etc., do not use the Custom Element spec.
Earlier quoted context omitted.
The "block context" for which setting margins is a good layout abstraction is not the technical "block", "inline-block" etc. of CSS, but the general situation of measuring the empty space between homogeneous rectangular blocks. If you want to place a slider between two text paragraphs, the slider isn't a good match for them (even if rectangular, it's far smaller) and you'll have to give it small or even negative marg…
If you want to place a slider between two text paragraphs I don’t, I want to put a slider between A and B. I don’t know what’s there from the bottom-up rule. A or B may even have a loadable content, so I know nothing until it’s rendered. If A and B are paragraphs, that’s usually a coincidence irrelevant to the container’s purpose. So what is the correct way to put a slider between beforehand unknown type A and type B…
The components around the slider are not "unknown": it's enough to be sure that, for example, their margins are between 20 and 30 px so the slider is allowed to claim -5px off a collapsed margin without collisions.
"Banning margin" is excessive and clickbait-y. The Spacer components idea is fine. Using Grid or flex layout in spacers is very sensible. But you could also use margins. ``` .spacer-stack * + * { margin-top: 1em; } ```
I fully agree with the solution. Spacer components are a sound concept if you consider that a component should have no awareness of the larger context it is placed in. A next step to make components even more robust is for them to respond to available space in the parent container (container queries). A spacer component is easy to understand and makes consistent spacing easy. There's nothing dirty or impure about it.…