I’ve seen some amazing things done with Flash and while I would love to know how they did it, you need a decompiler to take a look at the code and all the assets. Some decompilers will rename library items and variables so it’s a lot harder to figure out what does what. Plus, in some ways, I’ve always felt there was an ethical question when it comes to decompling .swf files.

I love going to a site, like Mr. Doob’s, and being able to see the code so easily. It might be one of the reason’s that I’ve spent so much time lately messing around with HTML5, CSS3 and JavaScript.

I recently reader Hackers: Heroes of the Computer Revolution and one of the main themes throughout the book was the Hacker Ethic, something that said make your hardware or software open source so that others could see what you’ve done and improve it which will make things better for everyone. If HTML5 takes off like it has the potential too, this idea will come back whether developers want it to or not.

Hopefully, developers out there take advantage of this and learn from what others have done. One of the things that gave Flash some bad press was developers making bloated and slow running programs. If a developer has the ability to look at someone else’s organized and efficent code, it might make them a better programmer and users will get better and smoother running programs.

Now if we can just get rid of the phases like “Runs best in Webkit” the future of the web is going to be wide open.

Also, take a look under the hood of some of these games. I’m amazed by the amount of JavaScript needed just to make something like Pong. I’ve said this before, but right not making HTML5 games is something that very experienced programmers are able to do. One of the things that made Flash great for making games is the actual Flash IDE. It’s pretty easy to get started with making a simple game because it only takes about 20 lines of code to create an object that you can control with the keyboard. Some of the examples I’ve seen take multiple JS files with a hundred lines of code each. The learning curve for HTML5 games is pretty high and I still think it’s going to take some kind of really kick ass IDE to allow beginners to start learning comfortably.

And I know there are developers out there that don’t want people to be able to take a look at their code and it’s as easy as right-click/view source to see how HTML5 games are made. And if you’ve spent weeks building a game for a company and then once you release it, anyone can come along and copy your code, it might be a reason for not wanting to make it using HTML5 and JavaScript. I realize this is all open source, but imagine how easy it would be to just copy and paste all the code and change the graphics a little bit.

I know this might come across as a “Flash guy” ranting but I’ve been spending a lot of time working with JavaScript and jQuery. I’ve never been a big fan of JavaScript but libraries like jQuery make it a lot easier to use. But I think for things like HTML5 games to take off, we’re going to need all the browsers to run JavaScript at the same speed and either an improved version of JS or an IDE that makes it easier to build them.

1. Notepadd++

This was the editor that I felt comfortable enough with to drop Dreamweaver. It’s open source and 100% free, which is something everyone likes. It’s lightweight and customizable. Plus, it’s got one little feature that I need in my editors, it lets me move the tabs around. It doesn’t feature code hinting not does it close tags for you but I’ve found that has actually made me a better code.

2. Intype

Intype is my editor of choice right now. So why isn’t it at the top? Well, it’s an alpha version, 0.3. So it’s got some bugs but I’ve found it’s a pretty good Windows alternative to Textmate. My main pet peeve with it is small and probably won’t matter to anyone else, but I can’t drag the tabs to reorganize them. If it’s the editor I use right now, why isn’t it the number one on the list? Well, it is an alpha version and when they release the finished version, it won’t be free.

3. Aptana

Aptana is a great editor and features things like code assist and is can be considered an open source version of Dreamweaver. I found it easy to use because it’s Eclipse based and I’ve found it comfortable because I’ve used Flex/Flash Builder. But, unlike the previous two, it’s not lightweight and, while it’s highly customizable, it’s not as easy as Notepad++. It’s the editor I use when I’m working with PHP.

4. Dreamweaver

For the first couple of years, this was my editor of choice. And like most Adobe products, they’ve added more and more features with every new release. But with every feature, the program gets bigger and bigger and a lot it, I don’t use. Waiting a minute or two for the program to load up when I just want to make a couple of text changes can get a little annoying, plus I don’t have any use for the design view or the new Live view.

5. Microsoft WebMatrix

Surprisingly, Microsoft has actually made a lightweight and pretty nice editor and it’s free. It’s not all that customizable but it’s got a few interesting features, such as being able to log into databases and even has a SEO report function. I’m really surprised at Microsoft for putting this out and if it was more customizable, I think it would be higher on this list. I want to be able to change the tag colors and font which WebMatrix won’t let me do that, but it’s a beta so they might add some features.

I remember years ago, back during the browser wars, which were explained to me by my more nerdier friends, I was told Netscape was better and that’s what I used. Until, of course, a few years later when I was using IE6 because that’s what came on my computer and I was like a vast majority of people at the time and didn’t know there was other browsers or that there was any difference between them. And then, somehow, I discovered Firefox 1.5 and everything changed.

When I started web design in school, the IE7 beta was out and my teachers were excited for it because it was going to be so much better than IE6 but, of course, it wasn’t really that much better. And IE8 came out and was a little bit better, but now we just have to spend more time making sure that a website works in more than one version of IE (I stopped caring about IE6 over 6 months ago with the full support of my boss).

But, if Windows 7 is going to take over for XP next year in the corporate world, we might just be entering a world where Internet Explorer actually displays a website the same as the other major browsers. Think about that. I’m not talking about CSS3 transitions or animations, but just basic positioning. I don’t think I’ve ever made a site that didn’t require me to at least fix some minor issues with IE7.

IE9 won’t be the best browser out there, but it will, guaranteed, be the most used because the most people use Windows and most of them use IE. But at least it’s not going to suck and be a generation behind. We don’t need IE to innovate, we just need it to work, that’s what Webkit and Firefox are for.

Speaking of Firefox, Firefox 4 beta 3 has won me back. For a while now, I’d started using Chrome more and more but with this latest beta, I’ve gone back to FF. It’s just as faster and it’s just as powerful under the hood. Plus, I’m sure every browser will have something like Tab Candy, which is coming with the fourth beta I think.

We’ve got a gradient on the background and a box-shadow to give the button some depth. I’ve also added some padding so you can use this on an anchor tag and it will look good no matter what text you have. But what’s with the position:relative? That comes into play on the active state for the button.

What happens here is that the when the button is clicked, it moves down and left one pixel and the shadow is decrease by one pixel to give it the effect of going down when it’s clicked on.

Now these look like hovering buttons but the same effect can be had on buttons you want to look like they’re going down into the background.

Pretty much the same thing, but you’ll notice there’s no box-shadow. Now for the active state.

Now we add the box-shadow and set it to inset and it looks like the button is being pressed into the background. There’s one unexpected bug I came across with this one, the inset box-shadow doesn’t display right in Chrome on Windows, but it looks great in Firefox and in Safari. Why it doesn’t work in Chrome, I don’t know but hopefully, they’ll fix this bug quick, because I think this is a great looking effect that web designers have a real use for.

We had a client talk to us about building them a new site and one of their questions was whether or not we knew how to build things using HTML5. It took me a minute, but I realized they didn’t mean HTML5 they way I thought about, they meant it the way Apple had been talking about it, as an all encompassing term that included CSS3 and JavaScript. And over the last six months this has pretty much become the norm, HTML5 means everything that you’d find in something like Apple’s HTML5 showcase or Google’s HTML5Rocks. Maybe it’s just me, but I don’t remember CSS3 transitions being a part of the HTML5 spec.

So it seems that HTML5 has become a term like Ajax, which stands for Asynchronous JavaScript and XML, even though it doesn’t have to include XML. Somebody just thought it sounded cool and started using it to reference a group of technologies that the name didn’t necessarily apply to. In the case of HTML5, it seems like it’s companies like Apple and Google that have spread the use of it as a name for a group of technologies that aren’t really under it’s umbrella.

But it seems that the web design and development community have accept this use and things like HTML5 apps, which use more than just HTML5 to work, are becoming widespread. I don’t have a problem with this but I just find it interesting that HTML5 has become an accepted buzz word so quickly and it’s acceptance is so widespread. And the next time a client brings up the term HTML5, I’ll know what they mean.

I’m not going to go through the whole thing because it’s just the next step from an earlier <canvas> post I did. But I’ll go over the changes and the great thing is, there isn’t too many. Plus, if you’ve ever made something similar in Flash, this will seem pretty familiar.

The HTML:

Just setting the <canvas> height and width and setting the init() function to fire after the page loads.

The CSS:

Nothing interesting here, a dashed border so we can see the edges of the <canvas> and the margin: auto to center it.

The JavaScript:

So the first thing we do here is find the <canvas> using jQuery and get the height and width:

And instead of drawing a ball and animating it bouncing, we use the arrow keys to move it around

If you’ve ever made a game with Flash or something similar, you should be able to see what’s going on here, we’re just saying, if the this key is pressed then move it this direction. Also, it checks to see if the block is at the edge, then don’t let it go any farther in that direction.

With these two functions, we’re just checking if the one of the arrow keys has been pressed, then we change the corresponding variable to true and it will move. Likewise, we then check to see if it’s been released and then the variable will become false and it will stop moving.

Finally, we use the jQuery events keydown() and keyup() to simplify the process of checking if one of the arrow keys are being pressed.

And here’s a demo of what we get.

It’s nothing amazing right now, but this is the first step towards developing a game using <canvas>. Hopefully, as the technology evolves, we get events and methods like AS3’s hitTest to make game development a lot easier. As I’ve said before, right now the <canvas> is fun to fool around with, but I think we’re still a few years and an pretty good IDE away from it being something the average developer can really work with.

Why not? Over time I’ve just made my own. It’s pretty simple and lean and made for the way I build websites. I’m sure I could take someone else’s more comprehensive template and alter it to fit my needs, but I think that would be more work. I’d rather start from zero and build my way up than to edit one down to fit my needs.

This works for me because I’ve been doing this for a while and when it comes to coding HTML/CSS and even JavaScript or ActionScript, I’m fast and I think a template like HTML5 Boilerplate is just going to slow me down. Maybe if I put in the time to sit down and start using one of these on the next few sites I build, I’d get used to it and it might end up working for me. But I know that the way I do it now works and I’m comfortable with it.

I think every web designer/developer should build their own template. If you want to modify one that’s out there, but change it to fit your style. I’m a huge believer that everything should be about making coding comfortable, from the languages you use to the editor you work in and setting up a template is no different.

To start off, here’s the HTML:

You have to assign the height and width of the <canvas> tag in the HTML because the default height is 150 pixels and the width is 300 and if you set the dimensions with CSS, the dimensions of the content inside the <canvas> will skew to the ratio of the CSS dimensions. For example, if you set the width to 600 pixels in the CSS and make a rectangle that’s 100 pixels wide, it will display at 200 pixels wide because you’ve double the width of the <canvas> with CSS. We also need to give the <canvas> an id of “canvas” so we can reference it with our JavaScript.

So for CSS, all I’ve included is this:

It’s just there so that I can see the edges of the <canvas>.

JavaScript is what powers the <canvas> and to make this work, it takes about 35 lines of JS, not that much.

So what are we doing here? Well, the first thing we do is define our variables:

Ball_x and ball_y are our ball’s initial position and ball_dx and ball_dy are the speed our ball will be travelling.

In our init() function, we use the getElementById to find our <canvas> and then we set the context to 2D because right now that’s all you can do, although, one day we’re supposed to be able to set the <canvas> to 3D. Next, setInterval is what we use to actually make the animation fire. It will called the function draw() and it will fire every 24 milliseconds.

What we’re doing in the draw() function is redrawing the ball every time the function is fired. In the if statements, we see if the ball has reached the edge of the <canvas> and if it has, we reverse it’s direction. To redraw the ball, we call the ball() function by passing in 3 values, the ball’s x and y positions and the ball’s radius.

So when we pass in the new values, the ball() function will redraw the ball in it’s new position. The fillStyle sets the color to red and arc() sets the position, the radius, the starting point, Math.PI * 2 sets the arc to a full circle and then true or false sets clockwise or counter-clockwise.

In the draw() function, you might have noticed a function called clearCanvas() being called. One of the big differences between the <canvas> and the stage for Flash is that the <canvas> is actually redrawing itself every time the setInterval fires and it won’t remove the old ball position. So, in order to get the effect we’re looking for, we need to clear the <canvas> every time the ball moves.

To do this, we call the clearRect() function where we set the position to 0,0 and set the width and height to width and height of the <canvas>. This way, we will clear the <canvas> every time we redraw the ball which will make it look like the ball is bouncing around. If we don’t do this, then the ball won’t be removed and eventually the entire <canvas> will fill up.

Finally to make the JavaScript run, we need to add this to the body tag:

Now, after the page loads, it will run the init() function. You can also attact this to a button or a link if you want to start the animation that way.

Check out the demo.

So far, all the most complicated <canvas> examples I’ve seen have been done by hardcore programmers and are too complex to be something that people can realistically build for clients or even for fun. I think for <canvas> to really take off someone like Adobe is going to need to come out with an IDE that will do most of the heavy lifting for us. But for now, we can get started with things like this.

Batman is the one superhero that people can look to for inspiration because he’s one of the few that’s just a man. But in order to become Batman, he worked and worked until he became the best at all the things he needed to master to accomplish what he set out to. It’s been changed a bit over the years, but Batman became an expert at martial arts, an escape artist, a detective and a scientist. And, over the years, it’s become apparent that Batman will always be the last guy standing.

So what does this have to do with web design? Well, from what I’ve learned over the years, no one just shows up and is great at everything that it takes to be a great web designer. There are no Supermen out there, there are only people that have worked their way to becoming Batman. To be a web design Batman, you need to know design, HTML/CSS, JavaScript and technologies like Flash or PHP. And you need to be good at all of them.

Of course, not everyone can be Batman but trying to get there will make you better at what you do. Although, you could be like the Flash and be really, really good at one thing but I don’t think anyone is going to say the Flash is cooler than Batman.