David Walsh ported Jonathan Snook’s jQuery menu effects to MooTools. It a quick and easy tutorial which adds cool animation without having to use Flash.

While it doesn’t improve functionality of the menu, it does add a unique touch to the everyday CSS hovers we see in almost every website nowadays. I like to keep JavaScript at a minimum if possible, but this script seems pretty lightweight and fast loading.

Check it out here.

We’ve done form validation for quite a few sites through PHP, JavaScript, or both. It’s a pretty common thing in web development especially with all the spam bots around. Also it keeps things clean when capturing user input.

Woork has three JavaScript implementations for form validation. The first implementation with MooTools seems pretty clever. The other two seem pretty standard.

If you have any interesting links for us to review regarding form validation, we would be interested in viewing them and also sharing in the blog.

I usually only like implementing JavaScript if it will add functionality to a webpage. It keeps the application running its best and performing optimally. It’s one of the same principles that I suggest with regards to using Flash as well.

With that being said I’ve seen lots of great Flash graphics/animations and creative uses for JavaScript for styling a page. DevSnippets has a list of 20 plugins based on jQuery for adding style to design elements.

I would probably say implementing some of these into your next web application will give it a clean look, but don’t overdo it. If it’s something that could be handled in CSS I would make an attempt there first, then look into JavaScript.

While I consider myself proficient in a variety of JavaScript libraries like Prototype, jQuery, and YUI, my library platform of choice at the moment is MooTools. I’ll evaluate each project on a case by case basis and each trial will be different, but I’ve found MooTools to do an adequate job for the type of projects I work on.

Web Design Ledger posted a good collection of user interface enhancements using the MooTools library. It’s got a few good tutorials that could probably be implemented in your next project.

Facebook has just released their new layout to its users today.  Just login to the site and you will be directed to the new layout.  I think they did a good job on the redesign and improved quite a few things over the previous beta versions I have seen in the past.

Facebook seems to be the standard as far as usuability in social networking.  The layout seems to load very quickly and they use AJAX technology effectively.

If you get a minute, it’s worth checking out.

So today is the big Firefox 3 release and starting at 10AM PST they are trying to go for a Guiness Book of World Records title as the most downloaded piece of software in one day.  If you want to be part of the action head over to the download site.

Noupe had a recent post some websites you shouldn’t have missed in May 2008.  It’s a list of 54 things to review covering a range of design, coding, to just some good resources to bookmark and keep for future reference.  I’m going to go through and give my top 10 from the list.

1. Pastel color menu with dynamic submenu using CSS – While I haven’t necessarily made pastel color menus, I have used this technique many times to create menus and submenus using list elements.  It keeps the code pretty clean and of course you need to have the small piece of JavaScript to support browsers like IE6.  One thing to be aware of is if you have a large elaborate menu scheme, this creates a lot of HTML in the header of your page.  If you are supporting JavaScript it might be a good idea to AJAX the appropriate data when the user takes action.
2. Yahoo! Design Pattern Library – I’ve been posting a lot about Yahoo.  I’ve just been really happy with the work they’ve produced over the last year.  This is a very good reference piece if you are wondering how something should be implemented or if you have a client that insists on one thing, you can show them that it’s been tested and proven to be best this way.
3. Which CSS Grid Framework Should You Use for Web Design? – I’ve been using a few of the Grids frameworks listed in this article, mostly the YUI Grids CSS for my work.  For the most part it gets the majority of what I want to do done faster and I feel like I’m a step ahead when I’m creating a site.  Good clean CSS is what we strive to create and these libraries make it easier for us to do that.
4. Applying Divine Proportion To Your Web Designs – While I don’t do too much design work personally, there are times when I do and I think that’s one area in my work that I can learn more and improve.  It’s always been pretty difficult for me to design things.  I guess I just don’t have enough creativity.  This article describes the rule of thirds when designing and this fits in well if you are using a Grids library.  You can work together with your front end developers and designers to create great looking layouts and save some time in the process.
5. Free 278 Page PDF eBook- The Photoshop Anthology – I haven’t read the entire book yet, but it looks like a good read.  There’s only a limited amount of time left if you want to sign up and download.
6. Find Similar Users on del.icio.us – I’ve really gotten into del.icio.us lately and I think it’s kind of cool to see who has similar interests as you.  I’m not one of those social network stalkers though.
7. 45+ Free Premium WordPress Themes with Magazine or Grid Layouts – There are some great looking designs in this collection.  Just glancing over them has given me some inspiration on some future projects.
8. 36 Cool Business Cards You Should’ve Seen – I’ve been looking for some new business cards since I formed the LLC.  I’ll have to take some more time to come up with something cool.
9. 30 Websites to follow if you’re into Web Development – I saw this posted in Digg the other day.  I saved it to my bookmarks.  It’s a great resource for web development.
10. SEO Guide for Designers – While I don’t like to take on too many SEO projects anymore, this is a good resource for best practices.  I don’t like taking the projects on because there are no guarantees in that market and if someone says they can guarantee something they probably aren’t doing it white hat style.

So that’s my top 10 from Noupe’s post.  If you have any questions for me or any comments about the resource, let me know.

While I like to keep the software installs on my machines pretty vanilla, if there is a tool that helps my productivity I’m all for checking it out.  While I’ve moved primarily to WebKit for web development, I often find myself using Firefox as well.  I keep my Firefox install to the base plus three extensions.

Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug tends to be used the most by us. I can easily inspect the DOM and edit CSS inline. Those are key features for us. Also it immediately tells any JavaScript errors in the code. Another nice feature is you can print things out in the console. This helps quite a bit in debugging.
Web Developer Toolbar

Adds a menu and a toolbar with various web developer tools. Sometimes Firebug isn’t able to inspect the DOM so being able to view the generated source is nice. Also you are able to disable certain aspects of the page such as JavaScript or CSS or outline certain elements as well. It has a built in validator for checking your code.
YSlow

YSlow analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites. YSlow is a nice extension to Firebug. Yahoo did a nice job of collecting some tips for improving the speed of a website. While in some sites, I can’t always get an A rating I try to make sure if there is anything I can do, that I at least make an attempt to do it.

Other Notables
There are some other notable extensions, that I have used, but normally don’t use on an everyday basis.

Venkman

Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers. I used Venkman a lot before I knew of Firebug. In Firebug’s early stages I used them in tandem. While Venkman is a good project I’ve found Firebug gets me through most of my projects.

Greasemonkey

Allows you to customize the way a webpage displays using small bits of JavaScript. This helps a lot in automating certain tasks like forms. When developing things like registration forms, there’s always some fancy validation, but then data always needs to be filled out. Greasemonkey can automate this and make your life a little easier.

I know there are plenty of other extensions out there, but these are the ones I use the most. They seem to be the most helpful in everyday tasks. If you have a better setup feel free to let us know. We’re always interested in being more productive.

If you have ever been interested about the inner workings of JavaScript and haven’t already, you should take a look at several video lectures by Douglas Crockford. Douglas Crockford is a Senior JavaScript Architect at Yahoo! and has authored an O’Reilly Book: “JavaScript: The Good Parts“. The two I’d recommend starting off with are “The JavaScript Programming Language” that provides fundamental yet thorough information into the JS language such as objects and functions. Even if you have been using JS for an extended period of time, I’d recommend browsing through the lecture. The second video lecture is basically a continuation from the first, “Advanced JavaScript“.

These lectures do not delve into any of the current JS Libraries like YUI, mootools, or prototoype, but the lectures will help you extend those libraries as needed by project demands. The general Yahoo! UI (YUI) Library Theater page has many other video lectures available that get into utilizing the YUI JS library.