2008 December | Web Development Blog of Chris Nizzardini

Archive for December, 2008

Template Monster = Fails

Posted by chris on December 31st, 2008 Comments(0)

I recently had an idea for a side project. Not wanting to spend the 20 or so hours it would take to create a fresh website from scratch I decided to try out Template Monster. Template Monster has some pretty sweet looking templates, so I forked out the $60 for the design and was promptly provided with a download link and a password for the ZIP file. That’s where the easy part ended…

First the way this particular Template Monster web designer (I can’t speak for all of them) designed the site forced you to use Photo Shop. The entire site was sliced up using Photo Shop which means its one big image. Whats wrong with one big image for your website? Well for one its very SEO unfriendly. Google will not index an image site like it will a text site, thus you won’t rank high in Google search results.

Next the website was no where near XHTML compliant. The entire thing is done in HTML tables, that’s just what Photo Shop does when you choose to save an image for the web. Each slice becomes a table TD, TR, etc… It took a considerable amount of work to replace image content with textual content. I’m still not there and I’m going to end up spending the same amount of time fixing the template as I would have just designing the site from scratch. Even though it won’t be up to my standards, so eventually I will have to go back and redesign the entire site. Yikes!

Personally, I won’t ever buy a template again. I’m not advising you not to do so, but perhaps do a little more research than I did. I was expecting a fully XHTML compliant (or at least close enough) CSS based site. Next time I have an idea for a site and don’t have the time to design it I’ll just hire a web designer or not do the site at all. Based on this experience Template Monster seems like a place where web designers, who really do have a good eye for design, work in a web design farm and are told to pump out templates as fast as possible. I’m a firm believer in taking the time to do the job right. If I had paid $300 for the template and it met my standards I would definitely be a returning customer, but I guess they sell more templates this way. Well not to me they don’t.

Anyways thats my experience with Template Monster. Have you had a different or similar experience?

In Rant (template monster)

MooTools Framework Javascript Key Listener

Posted by chris on December 12th, 2008 Comment(1)

Expanding off this article on JavaScript key listeners I’ll be showing you how to create a key listener in mootools 1.2 today. You will need to use mootools event functionality for this.

window.addEvent('domready', function() {
 
	MochaUI.Modal = new MochaUI.Modal(); 
 
    $('last_name').addEvent('keydown',function(event){
    	if(event.key=='enter'){
			searchCustomer();
    	}
    });
 
});

In this example we add an event to the $(‘last_name’) element and tell mootools we want the framework too look for all keydown events on this element. If a keydown event occurs using the enter key we execute the searchCustomer function. Be sure to iniate this on dom ready or whenever the element you are adding the event to is loaded. On DOM ready simply means when the page is completed loading much like body onload. Key press events are a great way to minimize the amount of clicks in your user interface. Many studies show that using the keyboard is up to three times faster than using a mouse!

In JavaScript and Ajax (event, key, keydown, keypress, keyup, listener, mootools)

adding events to elements on and after load in mootools

Posted by chris on December 10th, 2008 Comments(0)

Advantages of using MooTools addEvent functionality over native JavaScript events
So why use MooTools (or other frameworks) addEvent functionality over an onclick or onblur? For one you are leveraging a framework which has been tested and is widely used so you are minimizing bugs. It also helps separate code from layout much like moving CSS into a stylesheet separates layout and style from the content. Using a frameworks addEvent also looks a lot cleaner than having a bunch of onclicks in the body of your HTML.

Example of adding events to elements on page load using MooTools :

window.addEvent('domready', function() { 
	if($('element_id'))
	{
		$('element').addEvent('click',function(event){
			executeSearchFunction();
		});
	}
});

In this example we tell MooTools we want to add an event to the window when the Document Object Model (DOM) is ready, meaning once it is done loading. This ensure that every element defined in your HTML files has loaded before applying events to them. Next we check to see that element_id exists. If it does, which it should, then we specify that we want to add an event of the click type. Then we tell MooTools what code to execute when this event occurs. In this case we want to call a function named executeSearchFunction. This process is very similar for frameworks such as JQuery.

Adding events to elements that do not exist yet:
As of this writing I am not aware of a way to do this without throwing a javascript error, and no, putting the code into a try catch statement is not a solution. Instead when the element is loaded, typically through an XHR aka Ajax request, call a function that adds the events to the newly created elements:

function loadTableEvents()
{
	$('dgth_name').addEvent('click',function(event){
		alert(1);
	});
}

In JavaScript and Ajax ()

Planning and Analysis for your Next Web Development Project

Posted by chris on December 4th, 2008 Comments(0)

Some minimal planning and analysis of your project will help prevent gray hairs and watching the sun come up when you go to deploy that web application your client has been waiting for. Here are some simple things all web developers should know:

Get full access to the clients code and database
Seems like a no-brainer, but some clients are iffy about giving consultants access. It’s your job to explain to them why you need access to their backend and how it will be difficult to complete the project without it.

Review the clients code and database structure
You don’t want to ever go into a project expecting the clients existing code to be well-commented object oriented code with a well-designed rational database with 100% referential integrity. This is often not the case. Lots of developers out there just hammer out the code and don’t use classes. I’ve seen a lot of sub-par code out there and bad database design. If this is the case you will either need to charge the client more for the project or talk the client into rewriting the system. Going into a project and getting blindsided by bad code will make your hair go gray.

Don’t give a time and cost estimate until you’ve reviewed the code, database, and done some flow charting
You’ll end up going over your time and cost estimate which means your client will be angry or you’ll end up working for free towards the end.

Mockups and examples
Create some simple html/css mockups of the layout and how the data will be arranged and access. A lot of times requirements change or better ways of implementing a feature come up when the client see’s an example of how the end product will look.

In Programming (project management)

mysql removing characters from end of value

Posted by chris on December 4th, 2008 Comments(0)

Here’s a quick MySQL trick a co-worker helped me figure out today. This roughly equates to PHPs substr($var,0,-2) functionality.

1	SUBSTRING(field, 1, (LENGTH(field) - 2))

So if the fields value was 12345xx this would change the returned value to 12345.

In SQL ()

enhancing the user interface using javascript focus and select

Posted by chris on December 2nd, 2008 Comments(0)

I’ll be doing a series on enhancing the user experience with JavaScript. Today I want to write about two simple methods that you can implement to enhance the user interface and save the end-user time by reducing the total mouse movements and key strokes to accomplish a task.

As a web developer I’ve written more point of sale and CRM phone order type applications then any developer should have too. My pain is your gain. My favorite use of the javascript focus and select methods is for product searches done via XHR ajax requests. This involves the user typing in a text box, pressing the return key, and product list being loaded via XHR ajax into a div element on the page.

You can enhance the user experience by immediately refocusing the text cursor to that search box and highlighting the text within that box. Here’s how…

MooTools example

1 2	$('search').focus(); $('search').select();

JavaScript example

1 2	document.getElementById('search').focus(); document.getElementById('search').select();

Should the user have typed in an incorrect search phrase or decided that the list of products returned is not what they are looking for, rather than having to backspace through the entire string, they can just start typing again. The use of focus and select will automatically delete what ever was in the search box. The focus and select methods are well known by most web developers, but are under used. This is an easy solution to implement and one that, when used correctly, will save the user a few seconds per operation. Hopefully the use of focus and select will make your next web application flow intuitively while enhancing the user interface and experience.

In JavaScript and Ajax ()

Getting Technical Details From Clients

Posted by chris on December 2nd, 2008 Comments(0)

Without knowing the details about your clients current web application, database layer, and server configurations you may quickly find yourself scratching your head when deploying that slick web 2.0 app using the latest and greatest onto your clients circa 1998 clunker running PHP 3 and MySQL 3. Here are some useful tips all web developers and web designers should know.

Who is your web host?
You can get most the information you need just by asking who the clients web host is. See below if they are running their own server. Also remember you lose certain functionality through certain hosts. Some hosts disable unlink forcing you to use a work around.

What version of PHP and MySQL are you running?
They may not know this. That’s fine, phpinfo is your friend. This will tell you if you can use those sweet OOP features of PHP 5.x, whether you can use native JSON support, if they have MySQLi setup, and lots more. You’ll want to mirror your clients production environment as closely as possible in your development environment.

What platform is your website running on?
Windows, Linux, BSD, Solaris? It could be any of these and several others. If you’ve worked on several platforms before you know that you lose functionality when switching between them. Don’t expect to be able to run exec on a Windows server.

Does your client have specific browser requirements?
As of this writing I develop websites to be compatible with Internet Explorer 7, Internet Explorer 6, Fire Fox 3, and the latest version of Safari. I’m not wasting my time on Google Chrome, Opera, or any of the Linux browsers. Your client may have specific requirements and come deployment you don’t want them screaming about the website not working on some niche browser.

Does your client have specific screen resolution requirements?
If the web applications target audience is people with bad eyes you just might need to support 800×600. Generally 1024×768 is just fine, but be sure to ask.

Load time requirements
Is the client willing to sacrifice an extra second or two for some nice PNG-24 images or do they want it to load faster than that? Sometimes GIFs carry a smaller footprint then JPGs and vice-versa. It depends on the type of graphic.