Really, my problem isn’t even with a game being made with CSS. It’s more with the fact that as I get more experienced in the web development world, the less I care about almost useless demos. They’re fun but I’ve come to agree with Ian and Seb over at the Creative Coding Podcast, that building cool but unpractical demos has it’s own group of developers. They make interesting stuff but how many particle emitters do we need? I’d include in this group the people that make demos that only work in one browser or even just in the Webkit nightly build. I’ve talked about this before, but really, what good is anything that only works in one browser?

I get it, some developers like the challenge of building something like this. But it reminds me of the trend that existed in web design for a while (and to a degree still does with Dribbble) where designers designed things to impress other designers. There was a lot of cool stuff being made but it was just there to impress people.

Back to my original statement in the post’s headline. I really can’t think of any reason why you’d what to build something that would take at the most a hundred lines of JavaScript with thousands of lines of CSS instead. The hacks needed to create the click events are enough for me to not want to ever build something like this. All the enemies are radio buttons! Maybe I’m missing something but I’d rather spend my time making a kick ass game using canvas and JS then trying to hack together something like this.

Eventually, I came across Komodo Edit, which replaced Dreamweaver for me as my main editor. I love that it’s pretty light weight, free and has code hinting for everything from HTML5 to jQuery. I can’t say that I have any real complaints. It’s open source and there’s a pretty good community around it.

But before I came across Komodo Edit, I gave a ton of editors a chance. Aptana is OK but it can really start to run slow after a while and anyone who’s been in a hardcore coding stretch, it really sucks when your editor starts to slow down. I did a couple of video tutorial series on JavaScript and the host was using Microsoft’s Visual Web Developer, which I tried out, but it just has the feeling that it’s made to work with Microsoft technologies like .Net and I could never just get comfortable with it. Microsoft came out with Web Matrix, which I gave a shot, and while it wasn’t bad, it just didn’t have some of the features I have become used to in a code editor.

I work on a computer running Windows, so I have to admit, when watching video tutorials where the host uses Textmate, sometimes I’d just a bit jealous because of some of the features it has that none of the editors I’ve used on Windows has. That was until I came across E, a text editor for Windows that has, as far as I can tell, all the same features as Textmate. I’ve been playing around with it for the last couple of days and so far I’ve enjoyed it. But there’s one problem, it doesn’t have code hinting.

Komodo Edit has plug-ins that add some of the Textmate features I want, like using tab to insert code snippets, but it doesn’t work quite how I’d like and because most of the snippets that are included aren’t set up the way I’d like and it changes some of the functionality in ways that I’m not a fan of. I’m going to give E a chance but I’m not sure if I’m going to able to live without code hinting, it just speeds everything up so much and I’ve gotten so used to it.

I still firmly believe that what you use to build with doesn’t really matter, what matters is the end product, whether it’s an app or a website. I’m just searching for the right one for me. In fact, I shouldn’t have been surprised, but it seems most developers are as passionate about what editor they use as they are about what languages they use.

I thought, “How is that done? It must be jQuery or something.” There’s jQuery being used on the site, but it’s simple stuff that is used for some hover animations and class changes, but nothing about positioning the background. So I decided to check out the CSS. And I was a bit surprised to see how simple the effect was to produce.

To create the effect, all you need to do is set the background’s x position to negative 50% and then when the browser is resized, it will move in the opposite direction. After I saw that, I realized, of course, that’s how you would do it, but I think because I’m so used to see effects done with jQuery or CSS3, that it didn’t cross my mind that it could be this simple.

I don’t know if it’s a bad thing that my first guess was jQuery, but I think that it’s reminded me, that while things like jQuery are great, sometimes there’s a simpler way to do it. If I can do it with CSS and not use JavaScript, then that’s been the way that I’ve tried to go. I’ve been really excited about CSS3 and what it lets me do, but I need to remember that we can still do cool things with the CSS that works in all browsers. And when it’s something as simple as that, it makes it even more interesting.

But I was wondering, if there was a difference in using jQuery for animation as opposed to the new CSS3 transitions. When you check out the test page I’ve made, you can see, there’s not really that much difference in the results, except putting in the same numbers in gets you slightly different end positions. And, since we still need to use JavaScript to trigger the CSS3 animation, we don’t really save any lines of code, we just move a couple of lines from JS to CSS.

Seeing that there’s really no difference in the results, I would eventually prefer to use CSS for things like this, when, of course, it’s supported in all browsers. Why? Well, for the most part, 99% of websites we build will have CSS for style and positioning, so creating the animation with a file that’s going to be loaded already means less requests and that’s a good thing. Less HTTP requests means less chance something might not be loaded.

Of course, with Firefox 4 still being in beta and Internet Explorer 9 not supporting CSS3 transitions at all, I think jQuery and JavaScript built animations are going to be around for a while at least. Personally, if I have the time when working on a project, I’d go the same route as Hardboiled Web Design did in his old design (before he went the copy Apple’s nav route so many, many sites go) where he used CSS3 animation to move a character if your browser supported it, if not, he used jQuery.

But I kept looking into JavaScript and got really excited about jQuery. jQuery is the perfect gateway drug to JS, I think. It allows you to get projects up and running quickly, and for me at least, it made me want to learn more straight JavaScript. Now I find myself trying to figure out a way to include some JavaScript effect into every site I work on.

I don’t think that JavaScript itself won me over, it’s the fact that the modern version of all the major browsers allow you to build things that would be nearly impossible without a plug-in a few years ago. But now, for a lot of effects like an animated drop down navigation, you just need to link to a JavaScript file and, bang, you’ve got the effect you’re after.

Plus, I think with JavaScript and ActionScript both being based on ECMAscript, learning one after being familiar with the other makes it really a situation of learning the differences between the languages than anything else. So switching my focus has been pretty easy for me but it has been without some frustration. Not strong typing variables took a bit of getting used to.

I still can’t believe that I get excited about JavaScript heavy projects but I think that the leaning of the web to move from plug-ins to browsers for dynamic website experiences has been a good thing. Plus, it’s taught me that as a web developer, you shouldn’t limit yourself to one or two technologies. Honestly, for the longest time, I was hoping that Flash would take over for HTML because of the crazy dynamic things you could build with it. But now, thanks to the innovations by Chrome and Firefox, it can be done with HTML/CSS/JS, which means you can build a great website experience with a text editor as simple as Notepad. Which is pretty cool when you think about it.

This isn’t a Flash vs HTML5 post, this is a “Remember, open web means everyone can see inside the machine” post. Most of Mr. Doob’s stuff is crazy complex and if you can figure out how it works, it’s going to take a while. But that’s the point, no matter who you are, you can take a look inside and see what’s going on. And even if you don’t understand it or how it works, most of this stuff can be copy and pasted and used by anyone. When I went to Chris McKenzie’s site, I’ll admit, I’d love to know how he made it but it would require some research that I don’t have the time or patience for right now. Yes, I know I could use a decompiler for Flash, but it’s kind of a pain, plus you have to pay for the good ones, which I don’t want to do.

I’m not in anyway saying developers shouldn’t be building their stuff with HTML5 and JS. I’m saying that if it’s something that you want to use to attract clients, something only you know how to build, if you build it in HTML5, it’s going to be pretty hard to stop other people from figuring out how it works. At the same time, I’ve built things and explained out to make things here on my blog because I want the web to be a better place and showing people a better way to make CSS3 buttons isn’t going to cost me anything and might make some other sites look better.

This is a wonderful time to be a web developer, with a great community sharing some amazing things and the web technologies allowing us to push what we can do. But I’ve read of situations where Flash/Flex developers have complained about other decompiling their work and using it without permission and I would hate to see something like that start to happen with the open web.

I’ve just been messing around with some transitions made a couple of examples of what you can do. You can check out the demo here.

The first example is pure CSS. The animation is triggered by the :active selector which unfortunately won’t let you just click on the div to tigger it. The second example uses jQuery to toggle the a class on and off to trigger the animation. Although I’m using jQuery here, it’s just to trigger the effect, the animation is still 100% CSS.

We are going to take the totally usefull plug-in we made last time and change it so we can pick the new background color and also so we can set a new width of the div. The HTML and CSS are the same:

Same as last time, nothing major here. Next we’ll modify our plug-in to allow us to pass in some variables:

Ok, so what’s going on here? Well, the first change from our early plug-in is in the second line:

We are passing in our variables from the HTML file through vars. With this we can pass through as many variables as we want to. This time we’re passing two plus the element in the HTML document that we want to affect, this will give us these three variables:

The first one, clicked, is the same as last time, but the other two look a lot different and might be a bit confusing to some one that’s not familiar with JavaScript shorthand. What we are doing here is setting the variable color to what we set color to in the HTML file or else to #0f0. This is the same as an if statement.

So we are saying if vars.color isn’t undefined, color equals vars.color or else color equals green. We do this so that if we don’t set a color then the plug-in will default to green. And we’re doing the same with width, if we don’t set it, then the default with is 400 pixels. We could also set this to null and then run an if statement later, but this is simpler. Next is the actual meat of the plug-in:

Here we’re saying when element is clicked then change the CSS properties for element. Now we have to set up how we call the plug-in in our HTML file:

We’re calling our plug-in for both the #blue and #red divs and we are setting the width for the #blue div to 100 pixels and the background color of the #red div is being changed to yellow. So now when the #blue div is clicked it changes to a width of 100 pixels and changes to a green background whereas the #red div will become 400 pixels wide and get a yellow background.

And that’s all there is to setting up a jQuery plug-in that has custom values. Building your plug-ins this way makes them even more useful and enables you to use them over and over without having to edit the actual JavaScript file.

Clients are starting to see a lot of JavaScript functionality on other sites and are expecting every web designer and front-end developer to be able to recreate that for them. It’s going to get harder and harder to get by with just HTML and CSS knowledge. Even Flash or Silverlight might not cut it as some of the Flash bashing has begun to reach clients ears. I’m a guy that enjoys working with Flash and I’ve talked clients out of using Flash for something that can just as easily be made with a jQuery plug-in.

And that’s the beauty of JavaScript becoming part of the basic building blocks of a website, almost anything you need has been already built and 99% of the time it’s there for you to use. Even if you don’t understand how to program in JavaScript, a bit of effort will enable you to use jQuery plug-ins and a little bit more will help you learn to write your own. And if you’re anything like me, all the jQuery work will lead you into writing things with pure JavaScript.

Really, this is all just falling under the “HTML5” branding that companies like Apple are throwing around. If you’ve ever checked out their HTML5 showcase, there’s only two actual HTML5 demos, the rest are all CSS and JavaScript. But the trend now is, HTML for structure, CSS for style and positioning, and JavaScript for functionality. You won’t need JavaScript for every site but it will make life a lot easier.

Here’s a demo of the effect.

Our HTML:

All we have here is a basic website nav, links to jQuery, jQuery UI and our jQuery code.

The CSS:

Here we’re setting the green_glow.png as the background to #glow. #glow also has a z-index of 1 and the links have a z-index of 2 to make sure that they appear on the top. Other than that, the CSS is just basic styling.

The JavaScript:

The main differences between this and Jeff’s original code is that we aren’t creating the background with the slider using CSS, we’re using an image. And the slider isn’t bigger than the regular <li> tags.

And here’s what we get.

This is a great effect that can be different every time and it’s pretty straight forward. And a nice bonus is that you can reuse the jQuery code every time because the main effects and styles are all set with CSS.