He sounds frustrated because he's not a master of CSS. Like most things, this takes a lot of time and practice, and whining about how UI DESIGN IN HTML IS IMPOSSIBLE really doesn't help. After years of working with CSS I tend to go straight from pencil sketches to HTML/CSS mockups, and find it a fairly straightforward and pleasurable way to work.
I also can't help but give a CSS tip to the author. Please don't exploit browser bugs to trick IE in to doing things; use conditional comments instead which will let you cleanly put all of the IE junk in a separate stylesheet.
I've only recently got into web development after being into backend C++ development through college. I pretty much see where he's getting to, and solo web development can really be a pain, especially if you're new to it (like I am). But I have to say, even while getting frustrated with the smallest of PHP/CSS/JS errors, I'm really enjoying the learning curve of web development. Learning these lessons early on is quite important IMHO.
Sure, in theory, separating content from presentation is a
good idea. In practice, using CSS for layout is confusing,
error-prone, and brittle, and that's before you even take
browser bugs and incompatibilities into account.
In practice it is even greater idea. Sure you can go ahead and have all your layout in tables, then go ahead and create several different versions of your site just to take care of phones, tablets and like. Or you can employ css media queries.
Sure, learning CSS (and, alas, browser quirks) takes time, but it pays off. And frankly it it much easier today than it was back when IE5 was still relevant.
The other funny thing is that some native applications are using HTML and CSS for UI :)
Point 4 WEB BROWSERS SUCK (OR: UI DESIGN IN HTML IS IMPOSSIBLE) made my day:
If you have good front-end web programmer/designers, you probably aren't paying them enough.
Imagine being a highly educated garbage man, except about one third of the smelly garbage
cans you encounter abruptly try to kill you, and can only be defeated by frantically (but precisely!)
shouting garbage-can-dependent arcane incantations like:
.quux {
width: 500px;
padding: 50px;
voice-family: "\"}\"";
voice-family: inherit;
width: 400px;
}
html>body .quux{
width: 400px;
}
Ia! Ia! Tantek Fhtagn!
Consensus these days is pretty much that CSS hacks should be completely avoided in favour of conditional comments. Take a look at how we handle IE-specific styles on http://lanyrd.com/ (based on a trick discovered by Paul Hammond: http://www.paulhammond.org/2008/10/conditional/ )
I got a great laugh from this. I think anyone that has experienced the full life cycle of an enterprise level web app can relate to this article.
The good news for the author is it gets better. The bad news is this takes time, a lot of time.
Disclaimer: It was a long article, so I skimmed it instead of reading in its entirety, but here is some general advice none the less.
Advice (from a front end guy):
1) Stick to what you know, and sprinkle in new stuff as you go. (Just get something working)
* If your a backend programmer, go balls out on this part of the app. For the front end, keep the code entry level. Use tables, embedded CSS, and case specific JavaScript (for example a jQuery light box) when needed.
2) Start using jQuery or MooTools pronto (solves that pesky browser compatibility issue)
* If you haven't started this yet, do so as soon as possible. Don't worry about creating an entire JS framework until you are very comfortable with jQuery or MooTools. This will save you many hours of bug fixes on code that you are going to have to rewrite anyways.
* I prefer MooTools because of the way the code is structured. They have a function called Class() which gives you the ability to Extend or Implement (to a certain degree) other MooTools classes that you create.
3) CSS oh no, I feel bad for you.
* CSS is a complete shit show when you are just starting out. Keep it entry level with fonts, colors, images, backgrounds, borders. If you get stuck, solve it with JS or embedded styles and fix it later when you have a better understanding of CSS.
* Also, avoid padding where possible and stick to using margins. This will save you box model complications.
4) CSS floats warning, if you must
* If you end up using floats, don't forget your lil buddy, the div.clear hack. This kind of works like a line break.
* div.clear {
clear: both;
}
* <div class="floatLeft">stuff</div>
<div class="floatLeft">more stuff</div>
<div class="clear"></div> <-- (I know it feels dirty introducing a seemingly unnecessary element to the DOM, but hey, it WORKS!!)
5) Be ready for a long UI/UX journey
* It takes time to get cozy with this stuff, but when you do you will feel like a geeky rock star. It is a lot of fun when you get to the more advanced UI/UX stuff. Enjoy every little UI/UX mile stone along the way, they are fun. You will feel like you are programming at a turtle's pace, but a few months from now you will look back and think "Look at all the cool stuff I can do!"
> (2) Think very hard about whether you really want to design any reasonably complex user interface in HTML, CSS, and JavaScript instead of either (A) programming a native application or (B) using some other browser-based user interface framework like Flash (or perhaps coding the entire interface in an HTML 5 canvas if you're some sort of "standards" fetishist). Not that I've actually tried doing anything in Flash or HTML 5 canvases, but seriously [cue: Famous Last Words], how could anything possibly be more painful than designing user interfaces in HTML, CSS, and JavaScript?
WTF? Look at couchapp's.
Of course, it is no fun when code of whole application is written in one large HTML page.
I use Evently widgets with CouchDB, PHP and java. I use my own little framework on top of that. I use MVC, my own libraries, and database abstraction layer. I have no problems with coding of whole application HTML/JavaScript.
