But what do you do when your product is a complex web application? How do you best maintain your stylesheets when your app is constantly growing and evolving? It’s a lot more challenging than you might think, but there are several things you can do to keep your code optimized and maintainable.

In order to organize my thoughts, and perhaps throw some inspiration on the subject, I’m starting a series of posts each featuring a different thing you can do to best optimize and organize your css to face the challenges of a frequently evolving web application.

The first thing I’m going to talk about is the importance of an asset packager. It may not seem critical, but it really is, as it empowers you to create maintainable css documents.

For those who aren’t familiar, asset packagers allow you to combine different stylesheets into one big, compressed stylesheet. On smaller apps, it’s very common to include the entire site’s css into one file (or a very small number of files). This is good practice - performance rules state that you should minimize http requests. However, with a complex app, forcing all of your styles into one sheet can be a quick road to disaster. Once your css is above a certain number of lines (500+ in my eyes), it can become very verbose, unorganized, and difficult to maintain.

For bigger apps, it’s very helpful to piece apart your style rules into different files based on functionality. For instance, with Zenbe, we have many (many!) different stylesheets - we’ll have one for base styles and one for the different buttons we have. We’re not afraid to break up our css in the smallest chunks possible, because it helps our files have meaning. If there’s a style problem with a button, I know it’s in buttons.css. I don’t have to dig around for it in some obscure, 10,000+ line global stylesheet.

When you make the choice to break apart you css into small, manageable chunks, you’re breaking the optimization rule of minimizing http requests. Even if you use @import, each fetched stylesheet still requires an http request. So, this is bad, right?

Not at all, because this is where asset packages come in.

Originally built for Rails by Scott Becker, the asset packager we use for Zenbe actually compresses all of our different stylesheets into one file. It does this on the server level, so you can easily combine any number of stylesheets while only having one http request on the client level. An added benefit of the asset packager is it also strips all extra spacing, so you can use the ‘1 line per style’ css code style without feeling guilty about whitespace and file size.

Asset packager isn’t just for rails, either. There’s a PHP version out there as well, which was inspired by the one Becker wrote. If you use a different language - check around for one in whatever you program in. It’s definitely worth it.

So that’s basically it for asset packages. I can’t express how important it is to use some form of this on any complex applications - nothing kills app development like trying to keep some global stylesheet organized and maintained on a complex app that’s under constant revision.

In this issue we have two sides, deeply divided. On the one side, we have gays and their supporters, who want to be able to marry who they choose, as free, right-minded citizens. On the other side you have the ‘religious zealots’ who are prepared to fight to the death to protect what they call the sanctity of marriage, as defined in the bible.

At it’s core, the issue with gay marriage seems to stem from two things: the origins of word marriage itself, and a fundamental flaw which the US government made when it decreed marriage to be a legal process.

Marriage as a word has it’s roots in religion, and marriage itself has been around far longer than the US legal system has. So, I can’t really blame the religious when they say they don’t like the word being applied to gay couples. They have the right to believe in the Bible just as much as others have the right to ignore it, and the usage of the word in there gives them a right to defend it’s meaning as originally defined.

The real problem with this whole mess is the US government’s use of defining marriage as a legal contract. Somewhere along the line, we lost the ideal of the separation of church and state. By making marriage a legal process, we intermingled the legal benefits of the act (tax benefits, power of attorney, etc) with the religious aspect of the word marriage, which is the union between man and woman.

Joe Biden’s answer during the VP debate about granting legal rights to same-sex couples as if they were “married” (but not calling it marriage), in my eyes, is the bridge to the success of this argument, and I’m a little surprised it got picked on so much. Sure, it was a very ‘political’ answer to the question, but I think at it’s core he’s completely got the right idea. The fact that Sarah Palin agreed with his statements is testament to that.

So, my solution to this whole big mess would be for the US government to put more of a distinction in between the legal aspects of being in a committed relationship and the religious aspect of the term and religious ceremony of marriage. We’d do this for everyone, straight or gay. Everyone gets their legal partnership certificate (or whatever you’d call it), where the government recognizes the union between two conesnting adults (regardless of gender), and then the religious can be married by whomever they choose.

We need to realize that the word marriage is special and rooted in religion, and separate from any legal aspect of being a committed couple. If we can make that work, gays can gain all the legal benefits they desire, the religious can have the word marriage back, and for the most part, people should be content.

The big news with IE right now is it’s upcoming release, IE8. Slated to come out “4th quater 2008″ (so… any day now, right?), IE8 is supposed to have a lot going for it from a web developer standpoint. In fact, on paper it almost looks dreamy - the IE team has decided to include a full Firebug-esque debugger console, IE7 emulation, and more. When I was at the Ajax experience last week, the IE team showed off these features briefly in their presentation. From that, I was actually pretty excited about it all, and I couldn’t wait to get back to Zenbe to install it on our PC system and try it out. Even if there were bugs, I thought, it would be okay, because of this IE7 compatibility mode.

Right? Not a chance. It’s IE, after all.

I’ve been playing around with the browser for the better half of the day and I have some interesting results to report, and not really anything good. I made a series of mini-tests, which you can view for yourselves by checking out the simple sandbox site I set up at http://rauenzahner.com/ie8.html. Flipping back and forth from compatibility mode shows the differences, which I’ll detail now.

Test A: *+html is an IE7 thing
This is actually a good thing. Although I haven’t found an IE8-specific css filter yet (if anyone knows one, a comment on it would make you a hero), it’s a bit of a relief knowing we won’t have to rework our IE7 filter fixes into the new release. Or… this could be a bad thing. It depends on your code.

Test B: hover implementation is quite buggy
You know, this is somewhat worrysome. The test is the most simplistic use of the :hover pseudo-class on earth, yet it seems to be quite finicky in IE8. The element seems to require a click before the hover effect will ‘kick in’. It frustrates me when something that previously worked is well.. bunk. Especially when it’s something as simple as :hover.

Test C: transparency support died (much like my hopes and dreams for ie8)
It appears all forms of css transparency support are gone. Correct me if I’m missing something, but I couldn’t figure out how to make it work in IE8 (side note: I wasn’t aware IE7 had limitations where only divs could be rendered transparent… how odd and limiting).

That’s it for now, but there will most likely be additions to this IE8 testing page - I covered the main issues that I encountered today in testing out Zenbe. Also, keep in mind that this is just the html/css rendering… we’re encountering some javascript problems that I haven’t done much exploring into yet, and while there’s IE7 mode for html/css rendering, there doesn’t seem to be an “IE7″ mode for the JavaScript parsing. Oops.

All of this leaves me a bit worried about the upcoming release of this browser, and how it will affect the interweb. I hope the IE team is on top of these issues and can tighten up the release for the launch at the end of this year.

The conference kicked off this morning, and it’s been an interesting experience so far. I’ve been assigned to the Breakout 1 room, which this morning hosted the Prototype presenters, Christophe Porteneuve and Andrew Dupont. They were part of this morning’s “developer day” events, where the leaders of some of the main JavaScript libraries (Prototype, jQuery, and Dojo) had 5 hour sessions (side by side) where they introduced their library and explained how you can get the most out of them and contribute to the community.

The ‘hotness’ of jQuery was more prominent than ever this morning, as our room was very very sparsely filled, while the jQuery room, which was the same size, was packed to the brim.

The imbalance of the turnout was clearly noticed by the Prototype speakers, and this brought about some discussion on the differences between the libraries, and the cases for using each. Now, these guys are obviously biased towards Prototype, but what they mentioned was pretty accurate. Basically, they proposed that jQuery is better for simpler web applications, while Prototype is still more robust for creating custom classes and prototypes, and creating your own sub-library. I completely agree with this, as we use Prototype at Zenbe for our very complex, intricate js needs, and the library makes it completely easy and fun to write complex classes.

The bad thing here (at least for Prototype) is that most web developers are not looking to create super complex JavaScript applications. Most of the time, JavaScript is used to enhance the user experience, adding fancy bells and whistles to make a website faster, smoother, and more interactive.

However, I feel that the complexity issue is not the main reason behind the seemingly mass migration from Prototype to jQuery. A few years ago, jQuery was brand new, contending against the giant which was Prototype. Prototype was the original js library, and once upon a time had almost every front-end developer worth their weight using it. Then jQuery started to gain net buzz, building the strongest web community since Rails. And Prototype was left in the dust.

So, what are the reasons behind this?

The first difference between Prototype’s community and jQuery’s, which the most important and probably the most obvious, is the differences in documentation. jQuery’s documentation is completely brilliant. Their wiki is thorough, accurate, and every function has a series of examples showing how to use it. The documentation really does help ’sell’ the library, providing new users with a wide array of friendly, interactive solutions that are not only slick, but very minimalistic and they help make the developer feel empowered.

On the other hand, Prototype’s API is ‘ok’ at best. The biggest fault with Prototype is the lack of examples. This is a big turn off and frustration for new adopters trying to figure out the language - maybe it’s just me, but seeing sample code is the #1 most important thing I count on during the learning phase of programming. No examples adds ambiguity for novice developers (and sometimes even pro ones) and hinders adoption of a new library. You can’t even compare the two API’s - jQuery’s clearly won the cake.

Another reason people are flocking to jQuery has to do with the user community. I’ve heard that Prototype has a plugin community, but you would never know it by looking on the website. jQuery’s use of keeping the base code as minimalistic as possible, and allowing individual developers to release plugins not only fosters a strong community, but it provides the next selling point of jQuery over Prototype: file size.

By itself, jQuery (compressed to the max) is 15k. Keep in mind, this includes some powerful (yet simple) methods for creating animation. If you were to get the same functionality in Prototype, not only would you need Prototype itself, but you would need to use Scriptaculous as well. Combined and compressed to the max, they rank in at a relatively whopping 50k. Relatively speaking, that’s a massive difference, considering the two libraries do the same things.

One last point I am going to bring up is about the progress of the library development. During the Prototype presentation, the developers admitted that the progress on Prototype has been hindered by busier than normal ‘day jobs’. I can’t hold this against them, nor would I - life happens, I know this as well as anyone. However, it still affects the product. I have been completely frustrated by the lack of development that has been going on with Scriptaculous (moreso than prototype) - the animation library has obvious shortcomings (slideup/down needs a container div? blindup/down forces overflow: visible - which funks up ie), and when Tomas Fuchs Skyped into the conference today to talk about how little the library has been worked on in the last year - well that was a huge let down. jQuery has stomped all over this with rapid development, and it’s progress is clearly paying off, and the recent news of them being adoped by Nokia and Microsoft is only going to help make their development cycle faster and more accurate.

So, with all respect in the world towards Prototype, they need to step it up quite a bit if they want to stay competitive with jQuery in the long run. I’m afraid that if they don’t take some pretty big steps to rebuild the community and actually come out with new releases, they might turn into a thing of the past.

I figured I’d document the apps, libraries, and utilities that I install, partly for self-reference, and hopefully for informing others of some of the essentials for professional web development (on a mac). I aim to be very specific about what I install, and oddly minimalistic considering all the space I’ve gained.

So, lets start with the main apps. There are a few must-haves, including the super powerful text-editor TextMate, s/ftp dream Transmit, hacker must-have Quicksilver, and who could forget the only svn gui worth mentioning, Versions. Last but not least, the essential web browser, Firefox and it’s various plugins (such as Firebug and the web developer toolbar). On the big expensive software side, it’s never a bad idea to have Adobe CS3 at your side.

Essential programs taken care of, there’s a few other things to install for a dev system to be complete. MacPorts is the key to most of these, including ruby / rails and it’s various gems, svn, php, and other processes you might need. Git is the only missing piece, but it can be installed fairly easily from source.

Now that I have these installed, I really feel like I have everything at my fingertips to start working. There’s a handful of other apps I will probably end up installing as time goes on, but these are the only ones absolutely necessary for efficient, happy programming.

Just recently have I come to understand the full benefit of professional networking. Although I frequently have desired to go to conferences, in actuality I have only been able to go to one - Refresh 06, and that was only because it was a local event. I nearly made it to FOWD last year, but got horribly sick the morning of and was never able to make it out.

Since then, and quite recently actually, I have started to get back into the professional networking vibe. Thanks to people like Charlie O’Donnell, who runs NextNY, I have started to see the real benefits of professional networking. Just tonight I went to a NextNY ShakeShack event, and it was a lot more productive and fun than I had imagined. I’m sitting here now with a bunch of awesome business cards, all from smart, talented people in the industry. We shot ideas, talked technical, and a grand time was had by all.

So all of this brings me back to why I want to win the Golden Ticket. I want it because professional networking opens my eyes to ideas I never would have thought of otherwise. Hearing about new technologies and methods for creating innovative websites is one of the most important things in my career. It’s so refreshing to be around other people who work in the industry, who know the challenges we face as web professionals.

Right now in my career, I’m being very gung-ho about digging into this stuff as much as I can; learning all I can and making awesome sites that will hopefully help people be more productive and have access to a wider range of informaton. In order to be the best at what I do, I need to constantly learn about new technologies, and nothing helps better than going to conferences; for you get 2 in 1 - education and networking.

So please, leave your comments and help me win the ticket!

Vote for Barack Obama. Please, if you care about our country and you want to make it through the next 4 years, vote for Obama.

Don’t get me wrong, I have always loved John McCain - in 2000, I was seriously cheering for him to win the Republican primary against Bush (however, at the age of 15 I was below the voting threshold). There is no doubt in my mind that our country would be in a much better place if McCain had been elected eight years ago; however, now is not the time to make up for such things.

Our country is a mess. Bush’s do-nothing attitude towards much of the goings-on in our country has put us in the worst spot we’ve been in since the great depression. I’m not even going to talk about the war; we all have our opinions about that. I am, however, going to complain about how our government has turned a blind eye to the banking system for the last 8 years. As the child of a career mortgage underwriter (my mom’s been in the business since ‘86) I remember hearing a lot about these ‘BC’ loans back around 2002-03. The mortgage business was booming at the time; all you needed to qualify for a near 100% financed mortgage was proof that you’ve had a successful renting history and a job. Bad credit? No credit? No problem!

The banks suckered these people (who obviously had problems with credit/money management) into getting these adjustable-rate loans, glossing over the fact that in 5 years their mortgage payment would double. While my Libertarian beliefs don’t allow me to let these bad credit dumb-asses off the hook (don’t be a sucker - if you have shitty credit there’s always a catch, the sooner you learn this the better), however if we expect the government to insure what these banks do, we do need to regulate them. Because I’ll be damned if I’m paying the banks out for duping stupid people into buying shit they can’t afford (guess I’m damned, for this is happening).

But back to the election: anyone with eyes can see that the John McCain that the Republicans are pimping is not the John McCain we saw 8 years ago; or even 4 years ago when he was considering running with the Democrats against Bush. This McCain has been hounded and pressured and molded by the current GOP heavy-hitters, including that bastard Karl Rove, into being something he’s not. While I don’t believe McCain would be nearly as much of a mindless sucker that Bush is and let these guys run the show, he will be at the mercy of his party and the majority holders in the game.

What our country needs right now is Obama. We need someone not tied down in Washington with years of associations and lobbyist ties; we need someone with just that little bit of naivety to go in there and really believe that change can be made. Obama’s one of the smartest men in politics, a man whose background is diverse and stone-set in the American way of life, and even though he’s not the most experienced man in the world, we’ve learned over the last 8 years that even a dumb-ass can run the White House.

Now onto Sarah Palin. I have to give her some credit, she’s quite spunky. Her crazy beliefs about book banning and sex education aside, I do respect her dedication to her career and her rise as a woman in politics. But being governor of Alaska is one thing; being VP is another thing completely. Being VP means that if something happens to the president (hate to state the obvious but McCain is quite old… he could very well not make it the 4 years in office) the VP is in charge. So the question is not, “is Sarah Palin ready to be VP”, it’s, “is Sarah Palin ready to be President”.

The answer is no. Not a chance. Yikes.

In conclusion; I think the party platforms are saying a lot - while Obama focuses on giving power back to the people; he has real plans for college students (where was his ’service for scholarship’ plan when I was scrambling around for college financing?), our future in energy and global warming, and most importantly, our economy. All while the GOP is spouting lies and stretching truths about Obama (claiming he’ll raise our taxes). Where’s your energy plan, McCain? Where’s your plan for our economy; our future?

Oh right, you don’t have one.

However, my website is now truckin’ the noscript tag, and quite proudly at that.

It all started the other day when I was talking js effects at Zenbe - how to create seamless unobtrusive js animation without the typical ‘blips’ associated with unobtrusive use of JavaScript (ex: if js is shortening an element height to only show partially, as it does on my portfolio, you see a blip as that js loads). I didn’t have a solid answer - just a long lost thought of calling css through <noscript>.

To be honest, I wasn’t sure it would work. I can’t remember the last time I used noscript; pretty sure it was indeed back in the Netscape days. However, thanks to Jeremy Keith linking my site this evening, it kicked me into gear and I implemented noscript into my portfolio site with great success (I’ve been meaning to tighten it up for weeks).

In a way, it’s a total hack. I’m using noscript to cancel a css height I’m setting in my screen.css - a height which otherwise would break my ‘unobtrusiveness’ - because if js was not there, my height would be locked and the content only partially seen. The noscript loads in a call to reset the height to auto, letting non-js enabled devices to see the whole content as one page.

So, is noscript gone? Hell no! It actually seems to be pretty useful in creating solid, sexy websites styled and animated with unobtrusive javascript.

The ‘new’ Facebook? I wasn’t aware there was anything wrong with the old one. So, I clicked with an anticipated caution, and overall, I’m very pleased with what I’ve found.

Facebook’s always been a special site to me. Ever since my University was ‘allowed’ into the network in early 2005, I’ve been in love with the site - a clean, simple, and effective alternative to MySpace. As it’s grown, I’ve stood by it’s changes as clever and innovative, even when others haven’t (coughminifeedcough). Facebook has never been afraid to take risks, and tonight they are taking a huge one, as the changes to the platform are massive, and a bit genius.

The most obvious change to the site is they took the mini-feed, and they took the wall, and apparently made a baby with them. I call it Wall-eed. I just knew there was something up when they added comments to feed stories, and this explains it. I have to wonder what the main Facebook community is going to think of such a change, seeing as the mini-feed wasn’t very well recepted, and now it’s a main feature of the web application.

While it’s quite a shock to lose the wall as we knew it (I remember back when your wall was nothing more than a giant textarea field), it still does in exist in an alternative viewport. However, this cuts off any resemblance of a mini-feed, and I’d like to think the two can exist in haromy.

There’s a few other new pages to your Facebook profile now. Your basic info’s now thrown into an ‘Info’ page, and I have to say, they did a very nice job with the layouts. Facebook’s always had elegant UI, and they’ve stepped it up, going to a wider, 3 column layout. There are still a few kinks to work out… I’m a huge fan of Pages and Facebook really needs to tighten up the display to show more than 5 items - now there’s the room.

They’ve also put Photos onto it’s own page, which makes sense - Facebook’s mobile upload ability has made it one of the most popular photo-sharing websites on the Internet.

Lastly, it’s interesting that they put all the Facebook apps into a page called ‘Boxes’. How is this not a huge blow to Facebook apps as a whole? I mean, who’s gonna click on Boxes? Personally I’m already sick of the application puke that many of my friends have succumbed to, and I’m glad I’ll never have to see that crap again (if I could only get rid of the invite requests).

All in all, I like the new Facebook. Not love at first sight or anything, but it’s already growing on me.

It’s one of the more common ‘css design faux pas’ that I have encountered as a web developer, and to me just demonstrates a lack of understanding about how box model elements behave. 99% of the time heights should be left inherit - locking yourself into a height can quickly bring limitations to your site layout, provide a maintenance nightmare, and they’re almost never needed.

By default, an element will be as tall as the elements/content that are inside it. A few cases which might cause a container’s height to collapse are if your internal elements are floated, or if they are absolutely positioned. In both of these cases, the easy answer is to set a height on the collapsed element and forget about it. However, this isn’t really good practice, and you’re basically treating the symptoms and not the cause.

If you’re losing height because of floated elements - clear them, either by using an overflow property on the containing element or doing a good ol’ fashioned clear div.

Absolutely positioned elements can be a bit trickier, since the whole point of them is to not have layout space, so heights are acceptable, however I like to use padding whenever I can, just to avoid being locked into a set height.

Hopefully these tricks will be useful to someone, and make CSSing a bit more flexible and fun.