Javascript Effects

I've been busy this month, but I found a lost blog post from 11/2007. I think it's still relevant. At least the links are still alive. And Javascript is still really handy to know well:

Well, I've been doing web page mock-ups at work, and I've gotten some pretty cool effects down. It always amuses me how important the appearance is to a project. It makes sense, since rock solid systems can't really be demo'ed, but one cool transparency effect can knock an audience off their feet in a couple seconds. Not just anyone can comment when you describe how you brought your algorithm from O(n!) to O(log n), but everyone can say "Wow, that dragging and dropping is pretty nifty." So don't ever neglect the appearance of your project if you want normal people to use it. Luckily, effects are usually pretty easy to do on a web page, since someone else has probably done it before. I wanted to take this post to share some links that I had found really useful.

First of all, just in case you don't know css, read this. CSS is really important to making a web page. I'd suggest reading everything at that link for anyone who isn't an expert.

For transparency effects, this webpage was my guide: http://www.mandarindesign.com/opacity.html. It described everything needed to have mouseover transparency working in all the major browsers, using css and javascript. Very helpful.

For drag and drop, I referred to this website: http://www.walterzorn.com/dragdrop/dragdrop_e.htm. He did a really good job providing tons of examples and his own implementation. From simple dragging and dropping to resizing images and sliding bars, this was a great reference to me. He even provides javascript if you want to use his code directly.

By the way, if you're one of those people who puts javascript programming on the same level as html/css programming, then read Rediscovering Javascript. Hopefully, you'll change your mind. If you are new to programming, a great Javascript guide is "Eloquent Javascript." It has a nice interpreter, which means you can test javascript code quickly.