7 ms·
There's a huge separation between who designs the frontend and who implements the frontend. To date, none of the frontend editors are good enough to completely
by lj3 10y ago
There's a huge separation between who designs the frontend and who implements the frontend. To date, none of the frontend editors are good enough to completely replace the need for a programmer to wire up actions. Even back in the Flash days, you needed an ActionScript programmer to make your webapp do anything meaningful.
Since you need a programmer anyway, you might as well use a freeform design tool (Photoshop) to let the designer design whatever the hell he wants without the constraints that a more specialized app might impose. Then, let the programmer take that design and create whatever infrastructure he thinks is necessary without also constraining him to whatever a specialized app might impose.
I've been doing both design and programming a bit lately and I absolutely love apps like Subform, Webflow and Apple's interface builder. But, once I get past the fast iteration mockup phase, the structure of the app or webapp I'm making changes enough that the tools become unwieldy.
What I would really like are more robust layout APIs for both the browser and native apps. In Subform, you can define relative widths and positions both to other components and to the window itself. It's great for taking some of the tediousness out of design, but from a programming perspective, centering an object horizontally and vertically consistently is still a surprisingly difficult endeavor.
- mxuribe 10y ago"...centering an object horizontally and vertically consistently is still a surprisingly difficult endeavor..." This is so true - even today. Oh wait, someone might state, "but there are frameworks you can simply integrate and they handle that kind of stuff for you, or at least make it easier"...To which I reply, do i really have to include ~500K - 1MB of some framework for this!?! Just silly that centering is an annoying task nowadays.
- Animats 10y agoThat was so easy with tables.
- whostolemyhat 10y agoAt the cost of poor performance on the client [1], so you're just pushing any time saved in development onto your user. The only way around the poor performance of table layouts is to use table-layout: fixed, which then means you lose all responsive layout so you'd need to create a new version for every screen size you wanted to support (and implicitly, not be able to support every size of mobile screen since percentages don't play well with fixed layout. In this case, you haven't saved any time and in fact have created more work for yourself along with a worse version of your site since fewer people will be able to view it properly. [1] http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/#tables http://www.stubbornella.org/content/2009/03/27/reflows-repai...
- nip 10y agoIf you can afford not to support IE9 [1], you don't need a 500K - 1MB framework to center vertically and horizontally by using flexbox (align-items: center; justify-content: center) on the parent container. [1] http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
- andrei_says_ 10y agoI am looking forward to the day when I don't have to support ie9
- amenod 10y agoFortunately this is not much of an issue because IE is on its well deserved way of dinosaurs and Dodo the bird (my sympathies to those who can't get rid of it because of some dated corporate standards) and Edge doesn't seem to have much impact either. It would fill me with endless joy years back had I known its fate and the success MS will have in next computing platform (mobile). Good riddance!
- 91bananas 10y agoOr you can support it but not give them vertically centered content. Screw em. If they want it to be 5 years ago, let them be 5 years ago. FIVE!
- salmo 10y agoI like to call this degrading gracefully :)
- TylerE 10y agoOr you can use a table and get on with your life.
- leepowers 10y agoOr `display: table` and `display: table-cell` so you can use a `<div>` instead of the dreaded `<table>` tag.
- namuol 10y ago> To which I reply, do i really have to include ~500K - 1MB of some framework for this!?! What framework? .center-the-stuff { display: flex; align-items: center; justify-content: center; }
- deleted 10y ago[deleted]
- fiveseven_ 10y agohere's a non-flexbox solution, but the parent element has to have a set height: .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
- alkonaut 10y agoIt's like a magic spell that makes very little sense and is impossible to guess. If I fire up a reasonable layout system (Xaml for example) which is completely foreign, it's trivial to do there. I can't understand why html/CSS makes it so hard.
- lj3 10y agoBecause html/css was never intended to be used for layout. It's primarily a content styling system for static documents.
- news_to_me 10y ago> What I would really like are more robust layout APIs for both the browser and native apps. This is what I love about CSS flexbox and grid. Flexbox completely changed how I approach layouts, and I'm excited for grid to hit the big time as well. The only thing I wish flexbox could do is allow custom spacing functions, so I could write my own alternative to "justify-content: space-around".
- jasondc 10y agoHere is the best visual approach ive seen to designing flexbox layouts: http://flexboxgame.com http://flexboxgame.com
- briantmaurer 10y agoThis is great. Until now, I have been using the "flex box froggy" game for reference. It has been faster for me to recall flex-box CSs rules by scrolling through levels in that game than reading any "real" documentation. The link you shared above is a big upgrade.
- fiveseven_ 10y agoFlexbox Game doesn't support Firefox 53 yet, but I can vouch for Flexbox Froggy as well as Flexbox Defense http://www.flexboxdefense.com/ http://www.flexboxdefense.com/
- nojvek 10y agoI really like what safari has done with its devtools for the style editor. Right-click inspect element selects the element you want to modify. Then change CSS properties in a GUI editor. Only problem is persistence. I love designing and tweaking with devtools iteratively. A lot of things are done in editors because it gives you a lot of control of logic. Designing assets in visual language like flash makes a lot of sense. Unity has the same idea. Create your assets visually and assign behaviors to it via code. Their GUI/code fusion is pretty cool. Writing a public var in a class exposes it in GUI and makes it bindable to other things via click and drag.
- seanp2k2 10y agoSketch is pretty good these days and easier for developers to take the output of vs. Photoshop: https://www.sketchapp.com/ https://www.sketchapp.com/
- Jach 10y agoI wish more tools let me define constraints. Flexbox helps to brute force the layout you want, but it's still pretty annoying. Something like http://gridstylesheets.org/ http://gridstylesheets.org/ is a good example of what I want to use more of the time.
- deleted 10y ago[deleted]