Tyler Gaw

View the slides

On Tuesday, the 25th I presented an introduction of CSS3 features to a great group of folks at Refresh NYC. The new features included in CSS3 are something that I’m really interested in and very excited about so it was a good opportunity to really dig in and learn a whole lot about them in a short amount of time. For my slides I decided to not take the Keynote route and instead decided to create the presentation as HTML, CSS, and Javascript. It turned out great, not only did I get to explore the sweetness of CSS3 for the sake of presenting the information, I also used a lot of the features I was talking about to build the presentation.

This was the first time I had put together a presentation like this and got up in front of a crowd to present it, and I loved every minute of it. You really gain a deeper knowledge of a topic when you are trying to explain it to someone else. I’m definitely going to do this again in the near future and if you’ve had any interest in doing so I would highly recommend it.

Stuff You’ll Most Likely Do Before Reading Any of This Post

View the demo Download the source code
You’ll need Safari or Chrome to view the demo

There have been a ton of new, really exciting things going on with CSS over the past couple years and I’ve had an itch for a while to work with them. I started out just wanting to do a small project to get familiar with some of the newer, more advanced CSS3 features, and it quickly grew into a two month immersion into CSS3 land.

Do they speak English in What?

A few years back Jarrat Moody, a super talented designer, created a kinetic type motion graphics piece based on a scene from the movie Pulp Fiction; that I am still floored by to this day. Since I saw that I have wanted to create a similar piece and even made a few attempts using After Effects, none of which ever really materialized.

Let’s Do This!

So I have my excitement over a new feature set, and inspiration from Mr. Moody, time to get to it. The Man From Hollywood is a kinetic type animation using only HTML, CSS and Javascript. All of the animation is done using Webkit CSS transition, transforms, as well as standard CSS properties. Javascript just acts as a helper to turn CSS classnames on and off at the appropriate times. All of the content you see on the demo is HTML and CSS, no images were used. The audio clip is scene from the movie Four Rooms

Is It Practical?

No, not really, but it’s not really supposed to be. My goals were to teach myself the ins and outs of a new feature set, make something fun to look at, and hopefully help and/or inspire others to work on their own CSS3 awesomeness.

If you enjoy it, you should Tweet it or share it on your blog or just whisper the URL into a co-worker’s ear. That last one would definitely be the best.

I am not a fan of the Die IE6 Campaigns, can’t get behind them. You will not see me sporting some goofy IE6 Must Die Twibbon any time soon. I take a pretty unpopular position on IE6; I do not mind developing for IE6, working with it over the past few years has made me a better, smarter developer and I am going to miss it a bit when It’s completely out of the picture. Whoa, look out, you’re probably thinking I’m bat-shit crazy by now, but hear me out. I have reasons.

1. It pushes you to write proper, lightweight HTML markup: IE6 has well-known issues with the box model, strange padding and margin issue, etc. One very good way to stop these potential CSS issues is to write good markup. Easy things like making sure you are writing semantic, valid markup and using <div> tags sparingly can knock out probably 95% of these issues that seem to be such a problem for so many. In my experience, most folks’ CSS issues aren’t CSS issues at all, they are HTML issues.

2. It gives you yet another chance to get creative: So what if IE6 doesn’t support transparent pngs. Find a way to make that image a transparent gif or a jpg. Doesn’t look as crisp as the png? So what, this is where progressive enhancement steps in, this is why we have conditional comments. Set up an IE6 stylesheet and dump all of the not so desirable CSS in there. Chances are most of your users are not on IE6 anyway, and if they are this can be a friendly little jab at them for using it. I took this route when building my site. I wanted to let anyone viewing my site with The 6 know that they are missing out so I created a completely stripped down version just for IE6, plus a nice reminder of why. It still works, you can access all the same content, it’s just not pretty.

3. It forces you to clean up sloppy code that other browsers ignore: I’ve seen this a number of times when writing Javascript. Take a look at this bit of JS:

var someCrud = ['item01', 'item02', 'item03',];
alert(someCrud.length);

What’s the length of the array? Firefox and Safari say 3. IE6 says 4. I’m siding with The 6 on this one, the comma at the end of the array is erroneous, it should not be there. IE6 sends the message that you should clean up your code by recognizing the extra item while the more advanced browsers ignore it and let you go on your sloppy way. This is just one example, I’ve come across a number of similar examples over the years, I’m sure others have too.

4. It keeps you on your toes: If you’re building websites you need to be flexible. Not all environments are going to be picture perfect, and knowing how to find solutions to problems that arise when working with a browser like The 6 is key. It’s easy to just say that a browser is the sole reason for not getting something to function well. Another look at it may reveal that the first approach taken was maybe not the best. You just have to put on that thinking cap a bit.

5. It’s good to have a nemesis: What good is Batman without the Joker? You have to have someone or something that challenges you and makes your job harder, and sometimes downright frustrating. Web development is hard, that’s why it’s fun. How good a feeling is it to confront a problem in development and find some interesting way around it? I got a whole crappy article out of doing just that.

This viewpoint is 100% from that of a developer. As a user, I agree using IE6 would just be a nightmare. The security issues, the lack of features that modern browsers have, etc., etc. That is one merit that the Die IE6 campaigns have. But every time I see some Johnny Developer complaining about how hard it is to build websites for IE6 and how much they hate it, I can’t help but think that that person is missing out on opportunities to use their noggin. And that they are a bit of a wimp. :)

After IE6 is gone some other browser will take it’s place as the whipping boy. IE7? So, instead of just joining a campaign of wishing death on an inanimate object, I say learn to take away as much knowledge as you can from a less-than-ideal situation. Like Kuato said, “Open your miiinddddd.”

I slapped a fresh coat on the old website. Well, new paint, siding, frame, foundation…who am I kidding? I just burned down the old one and built anew on its smoldering ashes.

This is the third incarnation of tylergaw.com and just like the past two versions, I’ve had a damn good time working on this one. I’ve been able to take the time to work with so much amazing code that I’ve never really dug into before. This is the first full site I’ve built using the Zend Framework which has just made me realize how completely rad it is working with a rock-solid framework. It also makes me kick myself a little for not picking it up a long time ago. I’m integrating with a number of different third party APIs, this is also the first time I’ve built a site doing that. How freaking cool is working with well-written, well-documented APIs?

With the visual design, I’ve really tried to push it in a direction that I think is, “me”. This was one of those designs that I could really see in my head before I opened Photoshop or even put one thing down on paper. The biggest inspiration came from the cover art for Charles Bukowski’s Women. The whole time I was reading the book, I was constantly looking back at the cover. I don’t know exactly what it is but it is just so damned cool. For this round, I started the design process the old fashioned way; I grabbed a six-pack, some colored pencils, a big-ass sketch book and then went to work.

I’m a big fan of organic textures and knew that I wanted to incorporate some into the design. When I sat down in Photoshop to start turning my sketch into a working design, I realized quickly that I was going to need some real-world help getting the organic look and feel that I was going for. When it’s time for real-world textures I just start grabbing anything, and I mean anything, and throw it on the scanner. You never know what you might use that scan of an old broken toothbrush for. Just to be sure, scan it!