6 ms·

When someone says HTML & CSS is terrible I ask them to design something better that lets you represent user interfaces that can adapt across multiple screen siz

by jasim 8y ago

When someone says HTML & CSS is terrible I ask them to design something better that lets you represent user interfaces that can adapt across multiple screen sizes, and allow complex layouts that Flexbox and CSS Grid makes possible. It is easy to criticize something if you don't have to worry how you would do it better. That said, HTML & CSS is just how the world currently is. It doesn't mean that it is the best possible way to do it. CSS could've been very different if not for many fortuitous events in history: https://eager.io/blog/the-languages-which-almost-were-css/ https://eager.io/blog/the-languages-which-almost-were-css/ The best possible way to represent user interfaces is to represent them visually. Having to learn code to build UI is just today's limitation. While many have tried and failed to do better, this is still an open question. Today maybe a designer must understand HTML & CSS to fully embrace the medium. But that means they have to get out of their visual thinking mode, and look at letters on a screen and interpret them in their mind's eye. As programmers we're used to it, but it doesn't mean it is the best nor the only way to do it. So I'm all for articles like this that questions the status quo instead of accepting defeat and asking people to just get on with the program.

ebg13 8y ago
> When someone says HTML & CSS is terrible I ask them to design something better that lets you represent user interfaces that can adapt across multiple screen sizes, and allow complex layouts that Flexbox and CSS Grid makes possible. Uh huh. And how many years did it take to actually get Flexbox and CSS Grid? I mean...They're both still "Candidate Recommendations" in 2019. That's not even the penultimate level of recommendation. You definitely can't use Grid if you want broad compatibility; it was only first implemented in 2017. "People should update their software to the latest versions! And they should switch browsers to use one that supports my nonstandard features!" Oh, yes? Well they don't. And let's not even talk about Grid Level 2 which is implemented nowhere. We've gone through generations of faking markup with javascript because the dogma behind CSS has always been a terrible mess. "No tables for layout!" Ok, what else are you supposed to use to arrange things in grids? "Uhhh....give us a couple decades to get back to you on that." When people say that CSS is terrible, they mean the actual standard parts, and they mean for the past 22 years.
- reaperducer 8y ago
  "People should update their software to the latest versions! And they should switch browsers to use one that supports my nonstandard features!" Oh, yes? Well they don't. And as long as Microsoft keeps shipping IE11, we're all doomed. Office drones aren't going to switch to something better until they're forced to. I can't believe Windows 10 still has IE11.
  - bshacklett 8y ago
    Windows 10 doesn't have IE 11 as the primary browser, and I'm not sure it ever has. IE is there for compatibility in enterprise environments. There are a lot of large organizations which still rely on older versions of SAP, Oracle and IBM applications, plus whatever ungodly niche vertical apps or in-house garbage was written back in the 90s. Microsoft has to cater to this environment because it's been the lifeblood of the company for ages. It's not all doom and gloom, though. I've had experience in some very large organizations, lately, which prefer Chrome. The landscape is beginning to change, but it will be a while, still, before evergreen browsers are the norm in the corporate world.
    - xeeeeeeeeeeenu 8y ago
      >Windows 10 doesn't have IE 11 as the primary browser, and I'm not sure it ever has. LTSC/LTSB (LTS) versions of Windows 10 don't ship with Edge and it's not possible to install it. The same goes for Windows Server 2016 and 2019. Microsoft made it impossible for enterprises to upgrade to Edge.
  - Aeolun 8y ago
    Office drones don’t have a choice either. What browser to use is fully based on inertia. If there are 20 products that work in IE11, you won’t switch to Chrome just for your 21 product.
- baddox 8y ago
  > "People should update their software to the latest versions! And they should switch browsers to use one that supports my nonstandard features!" Oh, yes? Well they don't. I mean, I agree that developers shouldn't feel entitled to have all potential visitors using the most up-to-date software, but it is also definitely true that there is almost never an excuse to be using a web browser that doesn't automatically update. Forget CSS features, it's a pretty big security concern.
jandrese 8y ago
Sure, can you whip up an easy 3 column layout for me using the parts of CSS that are fully standardized? CSS does a lot of things really well, but makes some common tasks way more difficult than they need to be.
- house9-2 8y ago
  <table> <tr> <td></td> <td></td> <td></td> </tr> </table> Sorry, I couldn't resist
  - deleted 8y ago
    [deleted]
  - dillondoyle 8y ago
    <style> table td {width:33.3333%;float:left;padding:10px;box-sizing:border-box;margin:0;display:block;border: none;border-collapse: inherit;border-spacing: 0;} table {width:100%} </style> lol
- davidjnelson 8y ago
  This is pretty contrived but it took less than 10 minutes and required 0 googling: https://jsbin.com/nedesuvozo/edit?html,output https://jsbin.com/nedesuvozo/edit?html,output The important two css classes: .Example--outer-container { display: flex; flex-direction: row; } .Example-three-column-inner-container { width: 33.333%; } Browser support: https://caniuse.com/#feat=flexbox https://caniuse.com/#feat=flexbox
paulddraper 8y ago
> allow complex layouts that Flexbox and CSS Grid makes possible What version of CSS do people complain about? By chance are you talking about bleeding edge unaccepted CSS proposals? In any case, the list of CSS improvements is long. Off the top of my head: * Remove min-height, max-height, vertical-align, text-align, etc. in favor of unified Flex model. * Rename color to font-color. * Default to box-sizing (or remove content-sizing) * Make <fieldset> stylable by CSS. * Make inline styles work with pseudo-selectors, or remove inline styles altogether * Reduce the number of units
- jimktrains2 8y ago
  I'd go further and bring in some of the nesting, inheritance/extend and variables that preprocessors like SCSS support as part of the standard.
  - paulddraper 8y ago
    Even just nested would be nice, and very simple.
threatofrain 8y ago
Have you checked out Flutter and their vision of cross-platform GUI development?
grey-area 8y ago
HTML was and is wonderful in its simplicity and flexibility. CSS was not fit for purpose until relatively recently, and is still pretty limited and broken. It’s telling that you mention features of CSS which were only recently usable. Problems with CSS - lack of a proper grid till recently, lack of variables, byzantine box model rules, a profusion of units (px,em,en,%), lack of simple computed widths etc. All these are fixable/being fixed but I would not be sorry if the whole mess was thrown out and a more considered styling language introduced.
- burgerboy 8y ago
  You obviously don't know css very well or you would know the things you are saying are wrong
zelon88 8y ago
I would never work with a design person who only knew how to click buttons to make UI's. They're just going to make more work for the real developers who have to constantly fill in the lack of understanding about how the back-end works. It isn't a limitation. It's a prerequisite. You wouldn't want a bus driver who's never driven a car before. And if design systems ever evolve to the point where you can just click/drag some buttons to design a UI then that's the day the value of that profession should rightfully drop to zero. Lowering the bar that low only leads to vulnerabilities by blurring the lines between amateur and professional. Honestly the design crowd gets too much credit as it is. Look at manual machinists. They have legitimate skills that only come with experience. They demand righteous salaries for those skills. BUT CNC machines have all but destroyed the need to employ manual machinists so instead you spend more on your machine up-front but you save forever because you can literally teach anybody with a pulse how to run it. The result is you have countless experienced and skilled machinists who are unemployable in today's market and a bunch of cheap amateurs churning out barely conforming products for $10/hour.
- jasim 8y ago
  On the reverse, let designers refuse to work with developers who have never observed users using their product (user research in formal terms), or don't understand color theory, or haven't designed a landing page that converts well, don't know how to use Sketch or Figma. I've been trying to learn how to do design well - struggling to get the onboarding UX for a complex workflow right. It is something very difficult for me to solve well, but a good designer can start iterating in a few days' time. Design is indeed a valuable and deep craft, and my lack of respect for it in the past stemmed from not knowing it and not having worked with masters in the field. Yes it would be wonderful if designers also understood HTML & CSS - it is quite adjacent to their area of expertise. But is it a deep enough skill if the market doesn't award salaries to people who specialize only in HTML & CSS as much as it does for application developers? The current designer-developer collaboration workflow is broken, and the dominant narrative blames designers for not learning HTML & CSS. I was also party to it till recently, but it is partly the fault of programmers who don't expend the effort to understand how design is done and what "good" looks like in that craft. It is also the fault of the current crop of tools - vector drawing tools that don't have abstractions nor supports responsive design, and HTML & CSS which is far removed from its visual rendering. It is a give and take, and it is so much more fun to work when people are eager to learn from each other.
holy_city 8y ago
>When someone says HTML & CSS is terrible I ask them to design something better that lets you represent user interfaces that can adapt across multiple screen sizes, and allow complex layouts that Flexbox and CSS Grid makes possible Short answer: layout and styling in one DSL with one syntax/grammar and not you know, two. But the problem isn't "how do I make something that's better" but "how do I make something that's better and supported on my target platforms." If browser engine support isn't a design concern there are plenty of alternatives, many of which are arguably superior to HTML + CSS.
- baddox 8y ago
  What are some good examples? I remember using Android's relative layout system several years ago, and it was quite powerful, but I wouldn't call it easier to grok than CSS flex or grid.
jimmaswell 8y ago
>When someone says HTML & CSS is terrible I ask them to design something better that lets you represent user interfaces that can adapt across multiple screen sizes, and allow complex layouts that Flexbox and CSS Grid makes possible. It is easy to criticize something if you don't have to worry how you would do it better. Easy, something like Winforms or one of its successors like whatever they make Win10 apps in. Even the new Unity3D UI stuff is better.
- learc83 8y ago
  >Even the new Unity3D UI stuff is better. Do you mean the new UI stuff that's based on CSS?
ken 8y ago
> When someone says HTML & CSS is terrible I ask them to design something better that lets you represent user interfaces that can adapt across multiple screen sizes, and allow complex layouts that Flexbox and CSS Grid makes possible. It is easy to criticize something if you don't have to worry how you would do it better. How about Cassowary, with size classes? I spend half my programming time working on Mac software and half on web software, and I find element layout in the former is infinitely more pleasant. No need to put elements in a specific place in the document structure to lay them out the way I want. No need to change how I'm working for vertical versus horizontal layout. Just pick the dimension/coordinate you want to set, pick the other dimension/coordinate you want it to maintain its proportion to, and you're done. Apple's implementation got a bad rap, I believe, because the first version of Xcode didn't support it well, the first version of the API was a terrible fit for Swift (which came a couple years after it), and pre-Sierra macOS had a lot of bugs in the implementation. Today, there's no layout system I'd rather use.
- jasim 8y ago
  Agree that it comes down to CSS (Box Model + Flex + Grid) vs Cassowary. I've never used it myself, so thanks for chiming in. My understanding of it mostly comes from this thread (https://news.ycombinator.com/item?id=13125093 https://news.ycombinator.com/item?id=13125093) where the ReactNative team first attempted using Cassowary as their layout engine, but deemed it too complex/verbose and decided to use a subset of CSS. But as someone with actual comparative experience with both, would appreciate if you can tell me your thoughts on their conclusions.
ScottFree 8y ago
> When someone says HTML & CSS is terrible I ask them to design something better that lets you represent user interfaces that can adapt across multiple screen sizes, and allow complex layouts that Flexbox and CSS Grid makes possible. How do mac devs do this? Mac apps are some of the best around and both designers and developers appear to really like designing and developing mac apps.

by jasim 8y ago

ebg13 8y ago

> When someone says HTML & CSS is terrible I ask them to design something better that lets you represent user interfaces that can adapt across multiple screen sizes, and allow complex layouts that Flexbox and CSS Grid makes possible. Uh huh. And how many years did it take to actually get Flexbox and CSS Grid? I mean...They're both still "Candidate Recommendations" in 2019. That's not even the penultimate level of recommendation. You definitely can't use Grid if you want broad compatibility; it was only first implemented in 2017. "People should update their software to the latest versions! And they should switch browsers to use one that supports my nonstandard features!" Oh, yes? Well they don't. And let's not even talk about Grid Level 2 which is implemented nowhere. We've gone through generations of faking markup with javascript because the dogma behind CSS has always been a terrible mess. "No tables for layout!" Ok, what else are you supposed to use to arrange things in grids? "Uhhh....give us a couple decades to get back to you on that." When people say that CSS is terrible, they mean the actual standard parts, and they mean for the past 22 years.

reaperducer 8y ago
"People should update their software to the latest versions! And they should switch browsers to use one that supports my nonstandard features!" Oh, yes? Well they don't. And as long as Microsoft keeps shipping IE11, we're all doomed. Office drones aren't going to switch to something better until they're forced to. I can't believe Windows 10 still has IE11.
- bshacklett 8y ago
  Windows 10 doesn't have IE 11 as the primary browser, and I'm not sure it ever has. IE is there for compatibility in enterprise environments. There are a lot of large organizations which still rely on older versions of SAP, Oracle and IBM applications, plus whatever ungodly niche vertical apps or in-house garbage was written back in the 90s. Microsoft has to cater to this environment because it's been the lifeblood of the company for ages. It's not all doom and gloom, though. I've had experience in some very large organizations, lately, which prefer Chrome. The landscape is beginning to change, but it will be a while, still, before evergreen browsers are the norm in the corporate world.
  - xeeeeeeeeeeenu 8y ago
    >Windows 10 doesn't have IE 11 as the primary browser, and I'm not sure it ever has. LTSC/LTSB (LTS) versions of Windows 10 don't ship with Edge and it's not possible to install it. The same goes for Windows Server 2016 and 2019. Microsoft made it impossible for enterprises to upgrade to Edge.
- Aeolun 8y ago
  Office drones don’t have a choice either. What browser to use is fully based on inertia. If there are 20 products that work in IE11, you won’t switch to Chrome just for your 21 product.
baddox 8y ago
> "People should update their software to the latest versions! And they should switch browsers to use one that supports my nonstandard features!" Oh, yes? Well they don't. I mean, I agree that developers shouldn't feel entitled to have all potential visitors using the most up-to-date software, but it is also definitely true that there is almost never an excuse to be using a web browser that doesn't automatically update. Forget CSS features, it's a pretty big security concern.

jandrese 8y ago

Sure, can you whip up an easy 3 column layout for me using the parts of CSS that are fully standardized? CSS does a lot of things really well, but makes some common tasks way more difficult than they need to be.

house9-2 8y ago
<table> <tr> <td></td> <td></td> <td></td> </tr> </table> Sorry, I couldn't resist
- deleted 8y ago
  [deleted]
- dillondoyle 8y ago
  <style> table td {width:33.3333%;float:left;padding:10px;box-sizing:border-box;margin:0;display:block;border: none;border-collapse: inherit;border-spacing: 0;} table {width:100%} </style> lol
davidjnelson 8y ago
This is pretty contrived but it took less than 10 minutes and required 0 googling: https://jsbin.com/nedesuvozo/edit?html,output https://jsbin.com/nedesuvozo/edit?html,output The important two css classes: .Example--outer-container { display: flex; flex-direction: row; } .Example-three-column-inner-container { width: 33.333%; } Browser support: https://caniuse.com/#feat=flexbox https://caniuse.com/#feat=flexbox

paulddraper 8y ago

> allow complex layouts that Flexbox and CSS Grid makes possible What version of CSS do people complain about? By chance are you talking about bleeding edge unaccepted CSS proposals? In any case, the list of CSS improvements is long. Off the top of my head: * Remove min-height, max-height, vertical-align, text-align, etc. in favor of unified Flex model. * Rename color to font-color. * Default to box-sizing (or remove content-sizing) * Make <fieldset> stylable by CSS. * Make inline styles work with pseudo-selectors, or remove inline styles altogether * Reduce the number of units

jimktrains2 8y ago
I'd go further and bring in some of the nesting, inheritance/extend and variables that preprocessors like SCSS support as part of the standard.
- paulddraper 8y ago
  Even just nested would be nice, and very simple.

threatofrain 8y ago

Have you checked out Flutter and their vision of cross-platform GUI development?

grey-area 8y ago

HTML was and is wonderful in its simplicity and flexibility. CSS was not fit for purpose until relatively recently, and is still pretty limited and broken. It’s telling that you mention features of CSS which were only recently usable. Problems with CSS - lack of a proper grid till recently, lack of variables, byzantine box model rules, a profusion of units (px,em,en,%), lack of simple computed widths etc. All these are fixable/being fixed but I would not be sorry if the whole mess was thrown out and a more considered styling language introduced.

burgerboy 8y ago
You obviously don't know css very well or you would know the things you are saying are wrong

zelon88 8y ago

I would never work with a design person who only knew how to click buttons to make UI's. They're just going to make more work for the real developers who have to constantly fill in the lack of understanding about how the back-end works. It isn't a limitation. It's a prerequisite. You wouldn't want a bus driver who's never driven a car before. And if design systems ever evolve to the point where you can just click/drag some buttons to design a UI then that's the day the value of that profession should rightfully drop to zero. Lowering the bar that low only leads to vulnerabilities by blurring the lines between amateur and professional. Honestly the design crowd gets too much credit as it is. Look at manual machinists. They have legitimate skills that only come with experience. They demand righteous salaries for those skills. BUT CNC machines have all but destroyed the need to employ manual machinists so instead you spend more on your machine up-front but you save forever because you can literally teach anybody with a pulse how to run it. The result is you have countless experienced and skilled machinists who are unemployable in today's market and a bunch of cheap amateurs churning out barely conforming products for $10/hour.

jasim 8y ago
On the reverse, let designers refuse to work with developers who have never observed users using their product (user research in formal terms), or don't understand color theory, or haven't designed a landing page that converts well, don't know how to use Sketch or Figma. I've been trying to learn how to do design well - struggling to get the onboarding UX for a complex workflow right. It is something very difficult for me to solve well, but a good designer can start iterating in a few days' time. Design is indeed a valuable and deep craft, and my lack of respect for it in the past stemmed from not knowing it and not having worked with masters in the field. Yes it would be wonderful if designers also understood HTML & CSS - it is quite adjacent to their area of expertise. But is it a deep enough skill if the market doesn't award salaries to people who specialize only in HTML & CSS as much as it does for application developers? The current designer-developer collaboration workflow is broken, and the dominant narrative blames designers for not learning HTML & CSS. I was also party to it till recently, but it is partly the fault of programmers who don't expend the effort to understand how design is done and what "good" looks like in that craft. It is also the fault of the current crop of tools - vector drawing tools that don't have abstractions nor supports responsive design, and HTML & CSS which is far removed from its visual rendering. It is a give and take, and it is so much more fun to work when people are eager to learn from each other.

holy_city 8y ago

>When someone says HTML & CSS is terrible I ask them to design something better that lets you represent user interfaces that can adapt across multiple screen sizes, and allow complex layouts that Flexbox and CSS Grid makes possible Short answer: layout and styling in one DSL with one syntax/grammar and not you know, two. But the problem isn't "how do I make something that's better" but "how do I make something that's better and supported on my target platforms." If browser engine support isn't a design concern there are plenty of alternatives, many of which are arguably superior to HTML + CSS.

baddox 8y ago
What are some good examples? I remember using Android's relative layout system several years ago, and it was quite powerful, but I wouldn't call it easier to grok than CSS flex or grid.

jimmaswell 8y ago

>When someone says HTML & CSS is terrible I ask them to design something better that lets you represent user interfaces that can adapt across multiple screen sizes, and allow complex layouts that Flexbox and CSS Grid makes possible. It is easy to criticize something if you don't have to worry how you would do it better. Easy, something like Winforms or one of its successors like whatever they make Win10 apps in. Even the new Unity3D UI stuff is better.

learc83 8y ago
>Even the new Unity3D UI stuff is better. Do you mean the new UI stuff that's based on CSS?

ken 8y ago

> When someone says HTML & CSS is terrible I ask them to design something better that lets you represent user interfaces that can adapt across multiple screen sizes, and allow complex layouts that Flexbox and CSS Grid makes possible. It is easy to criticize something if you don't have to worry how you would do it better. How about Cassowary, with size classes? I spend half my programming time working on Mac software and half on web software, and I find element layout in the former is infinitely more pleasant. No need to put elements in a specific place in the document structure to lay them out the way I want. No need to change how I'm working for vertical versus horizontal layout. Just pick the dimension/coordinate you want to set, pick the other dimension/coordinate you want it to maintain its proportion to, and you're done. Apple's implementation got a bad rap, I believe, because the first version of Xcode didn't support it well, the first version of the API was a terrible fit for Swift (which came a couple years after it), and pre-Sierra macOS had a lot of bugs in the implementation. Today, there's no layout system I'd rather use.

jasim 8y ago
Agree that it comes down to CSS (Box Model + Flex + Grid) vs Cassowary. I've never used it myself, so thanks for chiming in. My understanding of it mostly comes from this thread (https://news.ycombinator.com/item?id=13125093 https://news.ycombinator.com/item?id=13125093) where the ReactNative team first attempted using Cassowary as their layout engine, but deemed it too complex/verbose and decided to use a subset of CSS. But as someone with actual comparative experience with both, would appreciate if you can tell me your thoughts on their conclusions.

ScottFree 8y ago

> When someone says HTML & CSS is terrible I ask them to design something better that lets you represent user interfaces that can adapt across multiple screen sizes, and allow complex layouts that Flexbox and CSS Grid makes possible. How do mac devs do this? Mac apps are some of the best around and both designers and developers appear to really like designing and developing mac apps.