Preparation H

“CSS sucks! Can we please go back to intuitive tables?” – Anonymous developer

“Why does CSS make me want to kill myself? How do I make it OBEY me?” – Anonymous aspiring dictator

“I’m having a bad day. CSS ate my brains.” – Anonymous zombie

CSS may seem unreliable, but actually it’s just a bit dumb. We’ll take a look at the dumbest bits of CSS, and we’ll check out CSS’s optional, shiny new brain, SASS and Compass.

Notice, I am at the very bottom of the list. I highlighted my name in pink, as proof. Yes, it’s true, I am the foundation of this conference.

I’m not well known as a developer, so I wrote a little biography about myself.

§

Jeffrey is the lead front-end developer at Xero. His career began in the dirty bowels of America and like Andy Dufresne, he crawled his way to a cleaner and brighter future in New Zealand.

He adores JavaScript and CSS, just adores them both. When he lifts the skirts of web pages and peeks at their HTML, he’s in heaven. When he talks to his parents about development, they stare blankly and change the subject, usually towards his inability to find a girlfriend.

In an ideal world, he would be a front-end evangelist and write dozens of books and speak at conferences around the world but he’s too busy doing actual work. He’s a difficult person, and rarely shares his development secrets with anyone, but he’ll make an exception for you.

In his spare time he enjoys learning colloquialisms like “sweet ass [sic] bro” and teaching the finer points of pronouncing “ball, bull & bowl” to his colleagues.

§

I’m very excited and nervous. You should come to the conference. I promise it will be fun.

“Well, yeah,” I say.

“I mean, it’s just a string.”

“What’s a string?”

“No, it’s a string in chaos. That’s the logic, a string of chaos.”

“…”

“We speak different languages,” I said.

§

Why do developers refuse to learn CSS? Do they find it boring? Does it pale in comparison to other languages?

I think of it as the icing on a cake.¹

If you find CSS hard, chances are you haven’t implemented stuff to make it easy. Here are a few quick tips.

1. Use a reset stylesheet. These styles lay the foundation of your website.² Paste this CSS from Eric Meyer or this CSS from Yahoo at the top of your stylesheet
2. Use browser-specific styles. Use this bit of JavaScript to append the user’s browser to the body tag.³ If a visual bug is found in a browser, say IE6, create a targeted class to squash that bug. For example,  .ext-ie6 div.box  will only apply this class to IE6⁴
3. Use Firebug. Firebug is an excellent debugger for CSS and JavaScript. It makes fixing errors “easy as”

That’s all you need to make CSS easy.

<sub>1. Icing is the best part, too.
2. Some developers are against them. Ignore those guys. I think most of them play the devil’s advocate to get page hits.
3. This JS forms the foundation for Yahoo’s JS library, Ext. It’s very good, better than Prototype.
4. You do not need to use conditional stylesheets for Internet Explorer nowadays.</sub>

My team is awesome, and we’re going to win. The competition starts on Saturday. Here are some details:

Can I see the event online?
The two teams will be building their websites online, and you can watch the progress on the two websites in real time. The web addresses will be announced at 9.30am on Saturday at http://www.fullcodepress.com.

The New Zealand team

• Ali Green
• Jeffrey Wegesin
• Mark Rickerby
• Peter Johnston
• Steve Dennis
• Thomas Scovell
• Zef Fugaz

Photo and video action:

• YouTube action
• FullCodePress Picasa
• FullCodePress Flickr
• FullCodePress Flickr Group

Blog action:

• FullCodePress
• CodeBlacks (our team)
• WIPA
• Max Design

Who is running the event:

• Webstock
• WIPA

24 hours without sleep! I’m going to feel like a student. Wish us luck…

Each team (New Zealand and Australia) will build a website in one day for a non-profit organization.

“At the end of 24 hours, a team of judges will review both sites and select the winner. International pride, bragging rights and a trophy will follow for the winning team.”

Wish us luck!

Display CSS in IE 7:

1. *:first-child+html [class]
2. {
3. }

Display CSS in IE 7 and Firefox (not IE 6):

1. html>body [class]
2. {
3. }

Display CSS in Firefox:

1. html>/**/body [class]
2. {
3. }

I’m afraid I must declare myself a geek. I’m not that savvy, really.