Webmasters Gallery

Developers tend to tease MySpace for its look, but the insiders are incredibly impressed by some of the engineering behind the scenes (e.g. their internal monitoring tools are said to be second to none).

They have surprised us again with their new tool MSFast which is "a browser plugin that help developers to improve their code performance by capturing and measuring possible bottlenecks on their web pages."

The IE 8 tools are getting better, but in general no one has been able to touch Firebug (and the new WebKit Inspector improvements) but this tool is actually plugin for IE! It captures a lot:

• Measure the CPU hit and memory footprint of your pages as they render on the client’s browser
• Review screen shots of the page while it renders
• Review the rendered HTML on each point of the page’s lifecycle
• Measure and show estimates of the time it takes to render each section of the page in different connection speeds
• Validate the content of your page against a set of proven “best practice” rules of web development
  Review downloaded files and show download time estimation on different bandwidths

That is some impressive data, and great to be able to test on IE where it has been SO hard to do so in the past.

jQuery Tools is a collection of the most important user-interface components for today’s websites. This single JavaScript file weighs only 5.8 Kb. This library contains some useful JavaScript tools like tabs, tooltips, accordions, overlays, smooth navigation, great visual effects and all those “web 2.0? goodies that you have seen on your favourite websites.

You don’t need to be a programmer to use these tools. They have lots of Demos you can explore and you can copy their source code to your site and things will work. Each tool is used in a similar manner and by learning one tool you can easily learn the other tools.

And above all, the library is constantly maintained and updated. Expect to see new releases coming out on a regular basis. This library is dual licensed under MIT and GPL 2+ licenses.

Spell Check Rex is an Open Source Spell Checker Application. It’s a Free spell checking program, written in PHP and MySQL, that can be installed on your website to regularly monitor and report on spelling mistakes. This should be particularly important for e-commerce sites, sites with dynamic content, and generally for people who want their sites to present positively.

It supports frame-enabled websites & directories, pages can be excluded. This Free Application spiders the  site it is installed on and generate reports. These reports are then provided both on-screen and via a download-able report.

Spell Checker Features

• Free Application as most spell checking services charge money
• Fully built-in to your website meaning you have control. No 3rd-party required.
• Open source (GPL/GNU). You can see and modify the code.
• Schedule regular reports to be emailed to you
• Highly configurable: exclude directories, customize data, set crawl limits/behaviour
• Comprehensive word list (approximately 115,000 words)
• Locale-aware spellings
• Multi-language admin panel
• Free support available
• Only 2.5mb download

Admin panel has multilingual support but Spell Check Rex can only spell check English written websites.

Lighter.js is a free syntax highlighting class developed with MooTools. It was created with the MooTools developer in mind and takes advantage of many of the Framework’s features. Using it can be as simple as adding a single script to your webpage, selecting the elements you wish to highlight, and Lighter.js takes care of the rest. Lighter.js has been tested on Safari 2+, Internet Explorer 6+, Firefox 2+ and Opera 9+.

BySlideMenu is a plugin for Mootools which allow you to easily create a beautiful accordion menu (sliding menu) on any element you want using images and/or text. It works horizontally or vertically. Menu can be pinned or not, by mouseover or click. It’s totally free. You can download it, modify it and use it in any commercial project as long as you respect the license. It’s Open Source!

If you like this plugin, you should take a look at Phatfusion Image Menu as well.

It is a good news to web application developers. Google Analytics Data Export API beta is now publicly available to all Analytics users. The Data Export API is easy to use and provides read-only access to all your Analytics data. Any data that’s available through the standard Analytics web interface is available through the API.

Developers can integrate Google Analytics into their existing products and create standalone applications that they sell. Users could see snapshots of their Analytics data in developer created dashboards and gadgets. Individuals and business owners will have opportunities to access their Google Analytics information in a variety of new ways with Google Analytics Data Export API.

For example, you can accessing Analytics from your desktop with Polaris from now on. Polaris is a cross-platform desktop widget for Google Analytics. With 8 standard reports it’s the easiest way keep your data always instantly available. The rich interface and swift navigation make it a pleasure to use.

Over the last few years Rails has helped Ruby’s popularity explode. One of the biggest reasons for this is the time that Rails can save you. By working within a well defined framework a lot of development decisions are simplified and it is easier to be more organized. Throw in some great tools like ORM, Unit Testing, Mocking, and more and you have a powerhouse of developer efficiency and quality.

There has always been and probably always will be feuds over what is the best platform but what I want to show you is that those arguments are mostly irrelevant. Regardless of what platform you choose to develop on there are most of the same tools available in one form or another. The common components, for me anyway, that help me produce high quality code faster and is easier to maintain are a good IDE, easy to use unit testing and mocking frameworks, an ORM, a MVC framework, and a good JavaScript library.

I am a .Net developer by trade and a PHP developer sometimes by choice. I enjoy both environments for different reasons. I am going to talk about each of these components in a bit of detail and explain why I think they are important and then at the end of the article I will provide a list of each of these components for various languages (.Net, Java, PHP, Python, and Ruby). I have decided to only list free or open source tools because they are easy for someone to try out and we all like to save a few bucks.
The Integrated Development Environment (IDE)

To me this is the prime essential. Sure you can program in Notepad and compile with the command line but it will likely take longer and it will require more discipline to stay organized. With a good IDE you have easy project management (all you files grouped together with tabbed browsing), syntax highlighting, compilation (if applicable), and auto complete.

IDE are continuously getting more and more sophisticated and plugins allow for lots more functionality like svn and git management in the IDE.

For me my favorite IDE is Visual Studio. There are some other great programs out there like NetBeans and Eclipse but for whatever reason I have become partial to Visual Studio.
Unit Testing And Mocking

These two items go hand in hand. No application is complete without proper testing. There are plenty of people on both sides of the fence when it comes to testing. I know, I was a skeptic for a along time. It just felt weird to spend time writing code to test the real code I was going to write. Finally I just decided to give it a try and it has changed the way I program. When you are focusing on how to test your code you just write cleaner code and it’s nice to have a quick way to know if the change you just made broke anything.
Object Relational Mapper

If you have ever used an ORM you know that it can save you a huge amount of time. One of the concerns I had before jumping to an ORM was performance. I wanted to know if using an ORM would make my application slower but I was asking the wrong question. I should have been asking whether or not the small performance hit was worth the huge time savings. The answer to that is a definite YES! Rarely in an application will the ORM be the source of poor performance and if it is it can be refactored to improve or you can use straight SQL if need be.

It all comes down to not worrying about performance issues before you have any. Yes it is important to keep performance in mind but using an ORM shouldn’t be anything to worry about.
MVC Framework

MVC has become very popular thanks in part to Rails and it’s revolution in the way we do Web Development. The key component to it’s popularity is that it separates the different concerns of your application into seperate pieces. This separation allows easier testing, better design, and makes your application more maintainable overall.
JavaScript Library

It seems there is a JavaScript library for just about everything these days. I remember not too long ago there were that many and JavaScript use hadn’t exploded yet. A JavaScript library is important to your productivity. The library shouldn’t compensate for poor JavaScript skills, you need a solid foundation, but should compliment a good understanding of it. The library will take care of browser compatibility issues and low level operations letting you focus on getting the job done.

ASP.Net
IDE: Visual Studio 2008 Express
Unit Testing: NUnit
Mocking: Rhino Mocks
ORM: NHibernate
MVC: ASP.NET MVC
JavaScript: jQuery

Java
IDE: NetBeans
Unit Testing: JUnit
Mocking: EasyMock
ORM: Hibernate
MVC: Struts
JavaScript: jQuery

PHP
IDE: PHPEclipse
Unit Testing: PHPUnit
Mocking: PHPMock
ORM: Propel
MVC: Symfony
JavaScript: jQuery

Python
IDE: PyDev
Unit Testing: PyUnit
Mocking: PythonMock
ORM: SQLObject
MVC: Django
JavaScript: jQuery

Ruby
IDE: RadRails
Unit Testing: Test::Unit
Mocking: Mocha
ORM: Sequel
MVC: Rails
JavaScript: jQuery

Be sure to grab the RSS feed, get updates by email, or follow me on Twitter to stay up to date and not miss any posts.

UvumiTools Odometer is an odometer style Javascript counter, where you can actually see the numbers spining. It is a Mootools plugin requires no Flash, it’s all CSS and Javascript. It can serve multiple purposes, like a live visit counter or a cashier style counter on a shopping website. It can be anything that involves updating a numeric value dynamically.

UvumiTools Odometer can be be updated manually or you can set it so it periodically calls a server script via an AJAX request and uses the returned value as a new target. This is also easy, you just need to specify the URL to that script when you initialize the counter. If the difference between two values is too big and the counter is spinning for several minutes. You can directly jump to the targeted value by simply double-clicking on the counter.

About the Show

6 months ago we had an epiphany. We had no idea that this idea would get us so far within the community of designers and developers.

In this episode we pop a bottle of champers and show an outtake or two of the last 100 episodes.

After publishing Mootools ContextMenu few days ago, our reader, Temuri has suggested another really nice looking context Menu using Mootools which is called Mif.Menu. There are ART style and shadow style context menu for you to choose from. It supports multi-level and key navigation as well. Mif.Menu is released under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.