15 ms·

Grid Style Sheets – Replace CSS with a Constraint-Solver

199 points by aeontech 11y ago

dyarosla 11y ago
I don't trust a layout engine whose webpage advertising the engine has centering issues... iPhone 5s in portrait does not center the section starting with 'Polyfills' but does so in landscape mode; I'm pretty sure this was not the expected design.
- enkitosh 11y ago
  The bottom is cut off as well. Where it says e-mail address and then something else but you cannot see it. Like this idea but this looks a bit bad for someone offering a solution to css bad parts :/
robogimp 11y ago
I just watched this GSS intro talk from last year: https://vimeo.com/91393694 https://vimeo.com/91393694 It looks interesting, but obviously from this and the demo page it needs alot of work to be ready for the mass market. One piece of advice for Dan if you are reading HN, you have a nice relaxed speaking style but please stop using the word "crazy" or "it gets pretty crazy" which for me at least parses as: "too complex to work with".
usaphp 11y ago
None of the demos work correctly on safari iOS
- x0054 11y ago
  Just tried a few demos on iPad 3 running iOS8, works fine for me.
  - TazeTSchnitzel 11y ago
    Yes, because the iPad has a large screen. It doesn't work well on iPhone-sized screens.
- TazeTSchnitzel 11y ago
  Yep: http://i.imgur.com/flVGSe4.jpg http://i.imgur.com/flVGSe4.jpg http://i.imgur.com/IemE3cm.jpg http://i.imgur.com/IemE3cm.jpg
Qantourisc 11y ago
I'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 ...
- thrownaway122 11y ago
  > 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 logs I wonder if non-javascript users just don't even get logged by the javascript-for-everything brigade?
  - sdoering 11y ago
    Actually there is oftentimes a static "non js" tracking-image embedded within a <no script>-tag. Oftentimes this totally gets forgotten btw. And it is not only GA - it is Adobe Analytics, Heap, every conversion-tracker by Facebook and Adsense and the likes. SO yeah - we (so called) web analysts know that and even have ideas/means to track the number of people that disable js by default or that block every form of (browser based) tracking. tl;dr You get locked (most of the time), but you can block this (most of the time) as well.
    - donatj 11y ago
      A company I worked for years ago actually had an analytics tool they sold that just used a transparent tracking gif. We managed to sell pretty expensive subscriptions way after Google analytics completely pwned its capabilities thanks to industrial companies being strangely un-web-savvy.
    - thrownaway122 11y ago
      How would one block this?
donatj 11y ago
Lol, 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 little overboard. You can't choose such an incredibly generic name though and then expect all existing references to update, that's simply illogical. Update: http://jdon.at/1cgIw http://jdon.at/1cgIw the emails in question
- liviu 11y ago
  Your response delighted me. It was a good lesson you give him about accessibility and UI.
  - HelloThereHuman 11y ago
    Could you post it on pastebin?
- cowls 11y ago
  Its funny that you post that, he comes off a lot better than you in that thread.
  - deleted 11y ago
    [deleted]
- Stratoscope 11y ago
  > 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.
weego 11y ago
Demos were all slightly wrong on Android chrome until I rotated screen at which point they completely broke. Using js to augment layouts with useful functionality is a great idea, but relying on it for core styling is a terrible choice.
SchizoDuckie 11y ago
From 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?
- comrh 11y ago
  Sass might make it more complex, but after learning it you save an extraordinary amount of time. I also don't find CSS that hard to work with anyway though.
- baddox 11y ago
  I can't tell if you're complainin about inherent difficulty in this stylesheet language, or just about introducing a new stylesheet language with a learning curve. If the former, I would disagree—it seems easier and much more useful than CSS to me. If the latter, well, any new language or technology has a learning curve, and it's rarely easy to know whether it will be worth learning.
- coldtea 11y ago
  >'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?)
  - vidarh 11y ago
    > Because you're so macho, right? And anything you don't understand shouldn't be used. Or because he finds it so objectionable that he wanted to express strongly how much so it is. You read way too much into it. > But this macho talk from "team leaders" I dislike. Why do you assume he's only talking about situations where he'd be the team lead? > That the leader is so arrogant that wont discuss but bully his team? How about that other team members should consider the impact of technology choices and discuss them with the team before putting potentially controversial choices like this into use? (and no, not in order to avoid physical retribution, but because some choices are just awful). > How about we reverse it: who would want to work in a team with some slap happy lead? How about you don't read way too much into it? Most places I've worked, slapping someone would lead to a minimum a written warning, but more likely would get you fired, and it would not be impossible the victim would call the police to report the assault. As a result, absent other information, it is quite reasonable to assume that the comment did not imply he would actually slap anyone.
Animats 11y ago
Constraints 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 like done right, try sketch mode in Autodesk Inventor, where you can draw lines, circles, and arcs and constrain them to each other in various ways. Designers would love it if they could do layout that way, and we could lay off a few thousand Javascript programmers.
- ambrop7 11y ago
  As a non-designer, I disagree. I played around with FreeCAD a bit, and I was constantly wishing "just let me enter the damn formula" while messing with those graphical constraints. Or could be it's just implemented badly there...
  - M4v3R 11y ago
    Newest XCode does this in the right way I think. It lets you do most of the stuff from the GUI (and detects conflicts), but you also have the power to enter constraints manually in the code.
- jongold 11y ago
  This is coming. https://medium.com/@almonk/design-like-it-s-1999-48ce5f5be14 https://medium.com/@almonk/design-like-it-s-1999-48ce5f5be14 https://medium.com/bridge-collection/modern-design-tools-adaptive-layouts-e236070856e3 https://medium.com/bridge-collection/modern-design-tools-ada...
  - Animats 11y ago
    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.
avodonosov 11y ago
Kudos! I've been thinking about constraint satisfaction solver for layout, and keep it in mind as a possible project for a future. Great to see someone shares this view and went on to implement it. I haven't studied this concrete project deeply, but the idea in general seems appealing, because CSS is hell. (The site says this constraint language is used in Apple products - I didn't know that).
- kagamine 11y ago
  Not sure what you mean that "css is hell", although I understand from working with a lot of programmers (I do front end they do back end) that CSS is seen as something you might also want to learn but not really because it isn't proper programming. CSS as it is now is incredibly powerful and works almost as it should (almost int he way all languages/technology are works in progress). I can see this (GSS) as having its place amongst a developers list of tools, but ultimately I can't see how it is better than Flexbox, or why I would want to a javascript library to do layout, or who in their right mind would want to pass a project using this on to someone else.
cageface 11y ago
One 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 with flexbox. So I'll pass on similar constraint-based approaches to HTML layout, thanks!
- pavlov 11y ago
  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 engines do a great job of fixing complex theoretical non-problems that nobody was asking to have fixed, while at the same time failing to address real-world issues that impede users' everyday workflows.
  - kenferry 11y ago
    > 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 two buttons is eight. That's almost exactly what designers' specs look like in my experience – screenshots annotated with lines with numbers on 'em.
    - paulojreis 11y ago
      > That's almost exactly what designers' specs look like in my experience – screenshots annotated with lines with numbers on 'em. Yes, but that's because those designers were asked to specify the layout in engineer terms. :) That doesn't mean that that's the way they think and conceive the UI.
Otik 11y ago
If your layout system's site looks like complete arse on a major browser like IE, your layout system deserves to be ignored.
- AdamTReineke 11y ago
  +1. Unusable on IE. Screenshot for those not on Windows: http://i.imgur.com/oFoAbAS.png http://i.imgur.com/oFoAbAS.png
  - Saming 11y ago
    Looked even worse on my tablet http://i.imgur.com/tP5YSTu.png http://i.imgur.com/tP5YSTu.png
- amatera 11y ago
  Same on Windows Phone. So i guess its not usable for production?
freyr 11y ago
I go to the demo, resize the browser window, and the layout falls apart. Not a good advertisement. http://i.imgur.com/KkxICEw.png http://i.imgur.com/KkxICEw.png
electic 11y ago
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.
masklinn 11y ago
Interestingly, @vjeux specifically preferred flexbox to a constraint solver (cassowary) for react native: https://twitter.com/nikitonsky/status/561941079038390273 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. <HorizontalLayout>... 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
bsaul 11y ago
Autolayout 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.
jjar 11y ago
> http://puu.sh/igQ03/9d6f0ffcb5.jpg http://puu.sh/igQ03/9d6f0ffcb5.jpg I'm opposed to most CSS grid styles as I feel they trade accessibility for a faster production speed. This seems to have neither of those benefits.
hamstergene 11y ago
As GUI dev who worked with Apple's AutoLayout extensively I can confidently say constraint-based layout is a trap. It looks like more intuitive way to go on simple examples, but complexity spikes quickly as number of controls goes up. It's more complicated, more resilient to changes (harder to maintain), easy to get wrong, hard to understand and debug, bugs generally look uglier (what would be minor misplacement in CSS often becomes overlapping or clipping). It does not support word wrapping without hacks and restrictive assumptions about width. It is a real mess to insert/remove controls dynamically. Compared to previous experience with Qt, I don't see any advantage of constraint-based layout over box-based layout.
- thewarrior 11y ago
  I saw the headline , didn't even read the article and came here to say this and saw your comment. I've been struggling with auto-layout for about six months now. I finally get it but there's a certain impedance mismatch between how you want your elements to be laid out and what constraints are required to achieve the same result. Humans beings aren't wired to intuitively think like a constraint solver. I'm not an experienced developer but my thinking on this issue is that the platform should provide some functionality to achieve the most common boiler-plate layouts and anything more complex should be written in code. Usually constraints are simple and so are the layouts. But to achieve more complex layouts you need constraints which are at cross purposes to each other but have different priorities. It's not intuitive to work through this stuff. Here's an example : http://stackoverflow.com/questions/25766747/emulating-aspect-fit-behaviour-using-autolayout-constraints-in-xcode-6 http://stackoverflow.com/questions/25766747/emulating-aspect... The answer there is great but tell me , you could have aspect fitted the view to it's parent in just four lines of code instead of going through this confusing series of constraints. I was making a tic tac toe game and I decided to try and draw the boxes and lines using auto layout. The constraints were making me tear my hair out and finally I wrote 5 lines of custom layout code and it took me only ten minutes and this was after futzing about with the constraints for half an hour and it did what I wanted to on an iPhone , iPad and for any height or width. I personally believe in a simplified version of FlexBox for common cases (yes I think it needs to be even simpler) and custom code for anything more complex. Bringing in all the baggage of a constraint solver to do your layout is like trying to use an Abrams Tank to kill a mouse.
TazeTSchnitzel 11y ago
That profile card demo completely breaks if you reduce the browser height a bit: http://i.imgur.com/MLhaheD.png http://i.imgur.com/MLhaheD.png Perhaps this is why the web uses box-based rather than constraint-based layout.
CodexArcanum 11y ago
I must admit a certain trepidation anytime I hear the phrase, "and replace it with a constraint solver!" Not that they aren't useful and powerful tools. That's exactly the problem, they're very powerful tools. I'm not entirely convinced that doing website layout should require so much computing power. Also, ironically, the site looks pretty bad on mobile and the entire left side of the page is chopped off. I don't take any "new ideas in style" page seriously if the mobile (or desktop, or whatever I'm using) experience on that page is bad.
ColinDabritz 11y ago
I found the picture at the top to be a funny reflection of the problems of layout. The bird (I believe that's a cassowary as on the book cover) in a spacesuit is an interesting juxtaposition artistically, but the helmet face plate won't be able to rotate down over the birds beak and seal the helmet. A 'layout' case that the image didn't consider. Layout is hard.
msie 11y ago
Heh, I'm looking at React Native with Flex Box precisely because of difficulties I've had with AutoLayout.
JabavuAdams 11y ago
What is up with that logo? That's a terrifying chimeric space thing that I don't want on my machine.

199 points by aeontech 11y ago

I don't trust a layout engine whose webpage advertising the engine has centering issues... iPhone 5s in portrait does not center the section starting with 'Polyfills' but does so in landscape mode; I'm pretty sure this was not the expected design.

enkitosh 11y ago
The bottom is cut off as well. Where it says e-mail address and then something else but you cannot see it. Like this idea but this looks a bit bad for someone offering a solution to css bad parts :/

robogimp 11y ago

I just watched this GSS intro talk from last year: https://vimeo.com/91393694 https://vimeo.com/91393694 It looks interesting, but obviously from this and the demo page it needs alot of work to be ready for the mass market. One piece of advice for Dan if you are reading HN, you have a nice relaxed speaking style but please stop using the word "crazy" or "it gets pretty crazy" which for me at least parses as: "too complex to work with".

usaphp 11y ago

None of the demos work correctly on safari iOS

x0054 11y ago
Just tried a few demos on iPad 3 running iOS8, works fine for me.
- TazeTSchnitzel 11y ago
  Yes, because the iPad has a large screen. It doesn't work well on iPhone-sized screens.
TazeTSchnitzel 11y ago
Yep: http://i.imgur.com/flVGSe4.jpg http://i.imgur.com/flVGSe4.jpg http://i.imgur.com/IemE3cm.jpg http://i.imgur.com/IemE3cm.jpg

Qantourisc 11y ago

I'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 ...

thrownaway122 11y ago
> 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 logs I wonder if non-javascript users just don't even get logged by the javascript-for-everything brigade?
- sdoering 11y ago
  Actually there is oftentimes a static "non js" tracking-image embedded within a <no script>-tag. Oftentimes this totally gets forgotten btw. And it is not only GA - it is Adobe Analytics, Heap, every conversion-tracker by Facebook and Adsense and the likes. SO yeah - we (so called) web analysts know that and even have ideas/means to track the number of people that disable js by default or that block every form of (browser based) tracking. tl;dr You get locked (most of the time), but you can block this (most of the time) as well.
  - donatj 11y ago
    A company I worked for years ago actually had an analytics tool they sold that just used a transparent tracking gif. We managed to sell pretty expensive subscriptions way after Google analytics completely pwned its capabilities thanks to industrial companies being strangely un-web-savvy.
  - thrownaway122 11y ago
    How would one block this?

donatj 11y ago

Lol, 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 little overboard. You can't choose such an incredibly generic name though and then expect all existing references to update, that's simply illogical. Update: http://jdon.at/1cgIw http://jdon.at/1cgIw the emails in question

liviu 11y ago
Your response delighted me. It was a good lesson you give him about accessibility and UI.
- HelloThereHuman 11y ago
  Could you post it on pastebin?
cowls 11y ago
Its funny that you post that, he comes off a lot better than you in that thread.
- deleted 11y ago
  [deleted]
Stratoscope 11y ago
> 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.

weego 11y ago

Demos were all slightly wrong on Android chrome until I rotated screen at which point they completely broke. Using js to augment layouts with useful functionality is a great idea, but relying on it for core styling is a terrible choice.

SchizoDuckie 11y ago

From 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?

comrh 11y ago
Sass might make it more complex, but after learning it you save an extraordinary amount of time. I also don't find CSS that hard to work with anyway though.
baddox 11y ago
I can't tell if you're complainin about inherent difficulty in this stylesheet language, or just about introducing a new stylesheet language with a learning curve. If the former, I would disagree—it seems easier and much more useful than CSS to me. If the latter, well, any new language or technology has a learning curve, and it's rarely easy to know whether it will be worth learning.
coldtea 11y ago
>'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?)
- vidarh 11y ago
  > Because you're so macho, right? And anything you don't understand shouldn't be used. Or because he finds it so objectionable that he wanted to express strongly how much so it is. You read way too much into it. > But this macho talk from "team leaders" I dislike. Why do you assume he's only talking about situations where he'd be the team lead? > That the leader is so arrogant that wont discuss but bully his team? How about that other team members should consider the impact of technology choices and discuss them with the team before putting potentially controversial choices like this into use? (and no, not in order to avoid physical retribution, but because some choices are just awful). > How about we reverse it: who would want to work in a team with some slap happy lead? How about you don't read way too much into it? Most places I've worked, slapping someone would lead to a minimum a written warning, but more likely would get you fired, and it would not be impossible the victim would call the police to report the assault. As a result, absent other information, it is quite reasonable to assume that the comment did not imply he would actually slap anyone.

Animats 11y ago

Constraints 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 like done right, try sketch mode in Autodesk Inventor, where you can draw lines, circles, and arcs and constrain them to each other in various ways. Designers would love it if they could do layout that way, and we could lay off a few thousand Javascript programmers.

ambrop7 11y ago
As a non-designer, I disagree. I played around with FreeCAD a bit, and I was constantly wishing "just let me enter the damn formula" while messing with those graphical constraints. Or could be it's just implemented badly there...
- M4v3R 11y ago
  Newest XCode does this in the right way I think. It lets you do most of the stuff from the GUI (and detects conflicts), but you also have the power to enter constraints manually in the code.
jongold 11y ago
This is coming. https://medium.com/@almonk/design-like-it-s-1999-48ce5f5be14 https://medium.com/@almonk/design-like-it-s-1999-48ce5f5be14 https://medium.com/bridge-collection/modern-design-tools-adaptive-layouts-e236070856e3 https://medium.com/bridge-collection/modern-design-tools-ada...
- Animats 11y ago
  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.

avodonosov 11y ago

Kudos! I've been thinking about constraint satisfaction solver for layout, and keep it in mind as a possible project for a future. Great to see someone shares this view and went on to implement it. I haven't studied this concrete project deeply, but the idea in general seems appealing, because CSS is hell. (The site says this constraint language is used in Apple products - I didn't know that).

kagamine 11y ago
Not sure what you mean that "css is hell", although I understand from working with a lot of programmers (I do front end they do back end) that CSS is seen as something you might also want to learn but not really because it isn't proper programming. CSS as it is now is incredibly powerful and works almost as it should (almost int he way all languages/technology are works in progress). I can see this (GSS) as having its place amongst a developers list of tools, but ultimately I can't see how it is better than Flexbox, or why I would want to a javascript library to do layout, or who in their right mind would want to pass a project using this on to someone else.

cageface 11y ago

One 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 with flexbox. So I'll pass on similar constraint-based approaches to HTML layout, thanks!

pavlov 11y ago
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 engines do a great job of fixing complex theoretical non-problems that nobody was asking to have fixed, while at the same time failing to address real-world issues that impede users' everyday workflows.
- kenferry 11y ago
  > 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 two buttons is eight. That's almost exactly what designers' specs look like in my experience – screenshots annotated with lines with numbers on 'em.
  - paulojreis 11y ago
    > That's almost exactly what designers' specs look like in my experience – screenshots annotated with lines with numbers on 'em. Yes, but that's because those designers were asked to specify the layout in engineer terms. :) That doesn't mean that that's the way they think and conceive the UI.

Otik 11y ago

If your layout system's site looks like complete arse on a major browser like IE, your layout system deserves to be ignored.

AdamTReineke 11y ago
+1. Unusable on IE. Screenshot for those not on Windows: http://i.imgur.com/oFoAbAS.png http://i.imgur.com/oFoAbAS.png
- Saming 11y ago
  Looked even worse on my tablet http://i.imgur.com/tP5YSTu.png http://i.imgur.com/tP5YSTu.png
amatera 11y ago
Same on Windows Phone. So i guess its not usable for production?

freyr 11y ago

I go to the demo, resize the browser window, and the layout falls apart. Not a good advertisement. http://i.imgur.com/KkxICEw.png http://i.imgur.com/KkxICEw.png

electic 11y ago

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.

masklinn 11y ago

Interestingly, @vjeux specifically preferred flexbox to a constraint solver (cassowary) for react native: https://twitter.com/nikitonsky/status/561941079038390273 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. <HorizontalLayout>... 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

bsaul 11y ago

Autolayout 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.

jjar 11y ago

> http://puu.sh/igQ03/9d6f0ffcb5.jpg http://puu.sh/igQ03/9d6f0ffcb5.jpg I'm opposed to most CSS grid styles as I feel they trade accessibility for a faster production speed. This seems to have neither of those benefits.

hamstergene 11y ago

As GUI dev who worked with Apple's AutoLayout extensively I can confidently say constraint-based layout is a trap. It looks like more intuitive way to go on simple examples, but complexity spikes quickly as number of controls goes up. It's more complicated, more resilient to changes (harder to maintain), easy to get wrong, hard to understand and debug, bugs generally look uglier (what would be minor misplacement in CSS often becomes overlapping or clipping). It does not support word wrapping without hacks and restrictive assumptions about width. It is a real mess to insert/remove controls dynamically. Compared to previous experience with Qt, I don't see any advantage of constraint-based layout over box-based layout.

thewarrior 11y ago
I saw the headline , didn't even read the article and came here to say this and saw your comment. I've been struggling with auto-layout for about six months now. I finally get it but there's a certain impedance mismatch between how you want your elements to be laid out and what constraints are required to achieve the same result. Humans beings aren't wired to intuitively think like a constraint solver. I'm not an experienced developer but my thinking on this issue is that the platform should provide some functionality to achieve the most common boiler-plate layouts and anything more complex should be written in code. Usually constraints are simple and so are the layouts. But to achieve more complex layouts you need constraints which are at cross purposes to each other but have different priorities. It's not intuitive to work through this stuff. Here's an example : http://stackoverflow.com/questions/25766747/emulating-aspect-fit-behaviour-using-autolayout-constraints-in-xcode-6 http://stackoverflow.com/questions/25766747/emulating-aspect... The answer there is great but tell me , you could have aspect fitted the view to it's parent in just four lines of code instead of going through this confusing series of constraints. I was making a tic tac toe game and I decided to try and draw the boxes and lines using auto layout. The constraints were making me tear my hair out and finally I wrote 5 lines of custom layout code and it took me only ten minutes and this was after futzing about with the constraints for half an hour and it did what I wanted to on an iPhone , iPad and for any height or width. I personally believe in a simplified version of FlexBox for common cases (yes I think it needs to be even simpler) and custom code for anything more complex. Bringing in all the baggage of a constraint solver to do your layout is like trying to use an Abrams Tank to kill a mouse.

TazeTSchnitzel 11y ago

That profile card demo completely breaks if you reduce the browser height a bit: http://i.imgur.com/MLhaheD.png http://i.imgur.com/MLhaheD.png Perhaps this is why the web uses box-based rather than constraint-based layout.

CodexArcanum 11y ago

I must admit a certain trepidation anytime I hear the phrase, "and replace it with a constraint solver!" Not that they aren't useful and powerful tools. That's exactly the problem, they're very powerful tools. I'm not entirely convinced that doing website layout should require so much computing power. Also, ironically, the site looks pretty bad on mobile and the entire left side of the page is chopped off. I don't take any "new ideas in style" page seriously if the mobile (or desktop, or whatever I'm using) experience on that page is bad.

ColinDabritz 11y ago

I found the picture at the top to be a funny reflection of the problems of layout. The bird (I believe that's a cassowary as on the book cover) in a spacesuit is an interesting juxtaposition artistically, but the helmet face plate won't be able to rotate down over the birds beak and seal the helmet. A 'layout' case that the image didn't consider. Layout is hard.

msie 11y ago

Heh, I'm looking at React Native with Flex Box precisely because of difficulties I've had with AutoLayout.

JabavuAdams 11y ago

What is up with that logo? That's a terrifying chimeric space thing that I don't want on my machine.