Auto-Layout is the worst. I used to spend so much time trying to figure out why things didn't line up or behave like they are supposed to. Luckily pods like Masonry and Paper make things easier but still, it is frustrating. To have it in CSS sounds like an absolute nightmare.
Grid Style Sheets – Replace CSS with a Constraint-Solver
31–40 of 99 posts
Re: Grid Style Sheets – Replace CSS with a Constraint-Solver
#32Interestingly, @vjeux specifically preferred flexbox to a constraint solver (cassowary) for react native: https://twitter.com/nikitonsky/status/561941079038390273
His main points:
* you can't express text wrapping which is a huge issue. You've got to do workarounds in order to support it
* the api is very reference based. You need to say that the right of this element is left of this other one. whereas in react you don't want to assign every element you create to a local variable to get that reference the best api with react is one based on containers. ... This is what I started with in react native but then, i realized that this was so close to flexbox that I could just use it instead :) you could use cassowary as an implementation detail of flexbox but that doesn't give you much
* also, when i tested cassowary, the js version, it was extremely slow. The version that we have in react native barely appears in traces for real code that we have
Re: Grid Style Sheets – Replace CSS with a Constraint-Solver
#33Constraints are the right approach to layout. This should have happened years ago. The important concept here is defining layout like this: #elmA[top-left] == "area"[top-left]; #elmB[bottom-right] == "area"[top-right]; The trouble with this is that it's expressed as a programmer's approach; everything is about variables, not geometry. Constraints should be input from a GUI, like Dreamweaver. To see what this looks li…
This is coming. https://medium.com/@almonk/design-like-it-s-1999-48ce5f5be14 https://medium.com/bridge-collection/modern-design-tools-ada...
Version control for graphical objects is rare in the open source world, but it exists in the commercial world. Autodesk Drawing Compare, which is part of Autodesk Vault, is an example. For film and game work, there's Alienbrain. A game has many non-text assets - maps, motion capture data, 3D models - and they all get revised. The systems which can pull all that together can display, and difference, many graphical formats.
Re: Grid Style Sheets – Replace CSS with a Constraint-Solver
#34Earlier quoted context omitted.
Agreed completely. Constraint-based layout solvers are very appealing to programmers because they seem intuitively like the "right" solution -- but that intuition is based on the programmer's mental model of user interfaces. Constraints don't match the way designers think and work, so they're not good as a non-programmer's interface. As often happens with solutions that are abstractly "right", constraint-based layout…
> appealing to programmers because they seem intuitively like the "right" solution … Constraints don't match the way designers work Interesting, I'd say almost the opposite. These constraints capture almost exactly the same thing as the orange guide lines you see in Keynote (or Powerpoint, or whatever). This is inset from the top right by 10, this button is the same width as the one above, the distance between these…
Designers almost always work in grid systems, not in collections of arbitrary measurements between screen elements. I suspect one of the reasons that Bootstrap has become so popular is that its grid system makes it fairly easy to implement the grid-based layouts that designers typically employ. Things like Bootstrap and flexbox make implementing grids easy. Constraint systems are at entirely too low a level of abstraction for this.
Re: Grid Style Sheets – Replace CSS with a Constraint-Solver
#35Lol, I have a post from years and years ago where I rail against 960 gs and the like "grid style sheets" for not being semantic, and about a year ago one of the authors of this emailed me asking me to amend it specifying that I wasn't talking about this. I declined, and went on to comment how the use of JavaScript for layout was even worse, lol. I was a little irritated at the hubris of the guy and may have gone a li…
> I was a little irritated at the hubris of the guy and may have gone a little overboard.
Since you're asking, yeah, you went a little overboard.
The guy clearly didn't "expect" anything, he just made a simple request. He could have worded it a bit better, but it was reasonable enough - not something that deserved such a tongue-lashing.
> This is worse than the grid style sheets I was hating on. Much worse. They simply aren't semantic which was nitpicky whereas this is a literal crime against humanity namely accessibility.
Seriously, a literal crime against humanity? :-) I was impressed that Dan replied as cheerfully and graciously as he did.
Look, I've said nastier things to people myself - it can be so tempting - but it never worked out that well. It took me a long time to learn that it pays to try to get along.
It's great that you're passionate about technology, if you can temper that with keeping disagreements cheerful and sympathetic toward other situations and points of view.
One last thing... Dude! Did you get Dan's permission to publish his private emails to you? He seems like a level-headed guy and probably won't mind, but it's polite to ask first.
Re: Grid Style Sheets – Replace CSS with a Constraint-Solver
#36Constraints are the right approach to layout. This should have happened years ago. The important concept here is defining layout like this: #elmA[top-left] == "area"[top-left]; #elmB[bottom-right] == "area"[top-right]; The trouble with this is that it's expressed as a programmer's approach; everything is about variables, not geometry. Constraints should be input from a GUI, like Dreamweaver. To see what this looks li…
XCode does it this way - constraints, but expressed graphically in Interface Builder. It's still a pain in the ass. I'd much rather work with Flexbox than figure out why my iOS layout isn't resizing properly. Even if you get your mental model right perfectly, there's still a large mouse-twitching problem with auto-layout in XCode where it's hard to select exactly which element you're lining up with.
Re: Grid Style Sheets – Replace CSS with a Constraint-Solver
#37I'd love to use this. But in the back of my head I still think javascript should be optional if possible ... not that 99% of the rest of the world cares ...
> javascript should be optional if possible I got a blank page so I closed the tab. Any page that requires javascript and I don't need to use (at the level of do my taxes) or that I don't trust the owners of gets the same treatment. So yeah optional javascript is a thing unless 100% of your audience are absolutely required to use your site. EDIT given that sites today use google analytics instead of their own server…
You are a minority. Perhaps not here (HN) because "I disable Javascript" seems to be a pretty trendy thing to say (:P), but in the world at large you are.
It's bad enough we have to build websites that work on IE8. We have to worry about screen readers and other accessibility problems, but we also have to worry about a fraction of users that disable a fundamental browser feature literally every site uses? Nah. It'll break and you can expect it to break! Sorry. :)
Re: Grid Style Sheets – Replace CSS with a Constraint-Solver
#38Autolayout is great once you've spent the first three days pulling your hair in anger.
Yet, i would absolutely not use it without the wysiwyg tools xcode provide, such as warnings on conflicts or automatic preview after changing the uppermost container's frame.
Re: Grid Style Sheets – Replace CSS with a Constraint-Solver
#39One of the absolute worst things about iOS development is struggling with auto layout. Sure there are some things you can do with it that are hard to do in a box layout method but 95% of the time it's just a massive headache to achieve something you could do with flexbox or even Bootstrap in a much more transparent way. In fact, one of the most appealing things about React Native is that it lets you do iOS layout wit…
You don't need to use React Native to use flexbox with iOS apps:
https://github.com/robb/FLXView https://github.com/joshaber/SwiftBox
Re: Grid Style Sheets – Replace CSS with a Constraint-Solver
#40From their demo: structure.gss @h |-(#message)~-~(#follow)~-~(#following)-(#followers)-| in(#profile-card) gap($sgap) !strong { &[top] == &:next[top]; } } If you inject stuff like this into a project, make sure you're doing it solo. 'cause if you're on my team, i'll slap you. WTF is this voodoo? Less and Sass aren't complex enough? CSS isn't hard enough to work with as it is?
>'cause if you're on my team, i'll slap you
Because you're so macho, right? And anything you don't understand shouldn't be used.
[EDIT] I find the sample code quite readable -- as long as one understands that it does more than constraints in that example, and that you of course have to read on the symbols to get them, like you'd have to read on Ruby's @, C's * and &, on regular expressions, etc.
But this macho talk from "team leaders" I dislike.
What exactly does it try to prove, even "metaphorically"? That the leader is so arrogant that wont discuss but bully his team? How about we reverse it: who would want to work in a team with some slap happy lead? Who'd want to hire that team or acquire that "talent"?
(And would this talk help the IT industry attract more female programmers?)