Web Design and Development

The other day I talked about the cool JQuery widget Thickbox. Today I would like to give praise and thanks to the creator of jCarousel, a jQuery plug in for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

The same project that I was utilizing the Thickbox technique, also called for a little section on the home page that would have album covers that the user could scroll right or left and click on the album for more information, a lot like this done for another project in flash. In the middle of the page you will see the area where you can scroll left to right and click on an album. Well I didn’t create that and wasn’t exactly sure how to go about it. Since I already was utilizing the jQuery library, I figured I would see if there was anything out there that mimics this functionality.

I found it in the form of jCarousel written by Jan Sorgalla. I got it working perfectly using the AJAX method to pull in the files from a text file on my server and write the list items. It also uses the Thickbox technique when a user clicks on an image to show a larger version. I didn’t want this though, I wanted to be able to click on an album and open an HTML page with the image of the album, a list of tracks, and other details. This wan’t possible with the way that jCarousel was written out of the box but I knew it had to be possible since Thickbox allows you to do this. I looked on the site and blog on the topic but didn’t see any answers to this.

I noticed that Jan stated in one of his comments that there was a discussion board about it and he said to go over to the JQuery to find more support. I went there and signed up for the mailing list and somehow found this Nabble forum. I went there and posted my problem and in a matter of hours he replied and asked for a bit more detail and so I did and by this morning he posted the solution. I never even thought that this would get answered let alone get the working solution within a day, and for that I owe Jan tons of thanks for helping me out and letting me get past this problem and finish the site.

if anyone is curious about how to switch it to make it possible to load an html file instead of the image once clicked this is what you do.

In the example_dynamic_ajax.txt where the plugin grabs the files for the images with ajax the images are listed as so

http://example.com/blah.jpg;Flower1|

you switch that to be

http://example.com/blah.jpg;Flower1;http://example.com/path/to/file|

Then change the getItemHTML() function to:


function getItemHTML(data)
{
var split = data.split(";");
var url = jQuery.trim(split[0]);
var title = jQuery.trim(split[1]);
var file = jQuery.trim(split[2]);
return '‘;
};


One of the biggest lessons that anyone studying to become or just beginning to work as a freelance front-end developer is the fact that no matter what your standards and passion are for the web, you can’t always expect that your product (the website) will launch the same way that you finished your part of the development, or will you always be able to produce the product with your standards and/or best practices. I think this could go with many aspects of the web development process and feel free to include any other experiences you guys have had in comments.

During my time as a student at the Internet Professional Program at Washtenaw Community College I had the chance to have some great teachers get me the start towards the right way to think as a web standards perfectionist developer. In our code everything had to be perfectly streamlined, totally accessible, and render the same in every browser. This turned me into a perfectionist in the real world environment and what has set me on my way to a successful career. It even seems to annoy my associates and my girlfriend because I wont finish something until I find that one pixel that is messing up in Opera or some other browser.

For the last three years I have been working as a freelance/contract front-end web developer. I mostly do jobs for local web firms that are swamped with work and need someone that they can count on to knock out a couple templates from the designers Photoshop files. In turn they will implement all the content integration. I have been lucky to get in good with these companies and don’t have the hassle of dealing with trying to find clients themselves. They choose me because they know I am a perfectionist and have a passion to create my templates using the most up to date web standards and semantic code. Well I’m not sure if the people of the firm outside of the web department know this, they just know that I produce quality work in a timely fashion.

About 80% of the time things don’t really work out the way that you would like, with the templates that you created. I’m not saying its web firms that contract you out. Many of the firms I deal with have people in the web departments with the same passion and knowledge as I do, if not more. It’s also not your fault, its just the way the business goes. A lot of times the budgets and deadlines are tight and of course you would like to always produce templates or websites that have the features of a great portfolio piece, but the companies are on such a deadline they just need your templates so they can quickly implement the content and get it live. By doing this they probably miss some of the comments in your files, explaining why you did things a certain way or to utilize certain techniques and styles on the remaining pages. You would love to include all of the functionality and techniques that make a fully accessible and web standards compliant site, but the company contracting you out aren’t going to pay you for the extra time it may take unless the site requires it inside of the scope of work.

Being able to include all the techniques that make a great web standards site isn’t my biggest concern. I usually can produce a pretty decent site or templates in the deadline I am given and even spend extra hours then what I invoice for because I am a perfectionist and want the site to be something that I can show people. The biggest disappointment is when you hand over your work and the finished product comes out totally different. A lot of this will happened when an engineering team gets a hold of your templates and start plugging it in to the back-end. A lot of times these engineers don’t really know much about web standards and clean coding and just care solely on the functionality of specific features of the site and not the aesthetics or quality of code that creates it.

I recently had one of my most exciting templates I got to create get torn apart from another contracted out engineering team. I spent about three weeks of my life after working an 8 hour day, working 2-4 hours a night on a site where I had to create about 9 templates. The design was really great and was pretty complex to pull off with a totally 100% CSS layout. After I got done with the templates of course the client had a lot of changes that were of course changes to the design and nothing to do with the code. This should have been done in the design process but of course like always the client is going to have lots of changes, once they see the site on the web. After about a week of changes from the client, they had me tear it apart into a bunch of SSL’s, which took another night or two. This was a long month for me as I was also working on the Ann Taylor redesign(not launched) all day at another firm that I was contracted to work at.

I couldn’t wait to see how this site was turning out from the back-end side and kept in contact with people from the firm (they weren’t the ones doing the back-end). They gave me the IP to the development site and I checked it out and I saw that the layout was all jacked up and certain design features that I spent hours trying to replicate were gone. I looked at the code and saw they had totally just turned this site into a table based layout and a crappy nested bloated one at that. I was totally devastated. This was probably the worst case scenario that could have happened. It makes you feel like that whole month was wasted and the company that contracted you out wasted their money (they were highly devastated also). I know I got paid but like the rest of you, I’m sure this is your passion and more then just the money.

That was the best example I have but there are others such as the web teams redoing your navigation menu, (which you spent hours to do) because of the way they pull in the content dynamically or they use tables to pull things off, which could of been CSS because their under a tight time line to integrate the content, or even some type of CMS that breaks your templates down and adds tons of code bloat and weird tags. Sometimes I think that maybe it’s something I did or my code isn’t that good and wasn’t rendering properly for them. I get past that and realize that my code is good, I’m just too hard on myself and this is just how it is in the business. In a perfect world everything would look the same as you leave it but it’s not.

One area of work where you might not be able to follow the standards you believe and practice would be when you work for a large firm and they have a set way and standard that they produce sites. I found this out working as a contract web developer at one of the largest firms in my area. They have their standards and have proven applications and don’t want to jump to fully web standards sites since they have been developing their way and it has worked for so long. I would also say that their main focus is on the functionality of the application and the engineers developing the product and not the front-end. The sites I worked on are of course going to be my most notable sites but also my least web standards and sloppy coded sites. You have to take it for what it is, at one end I had to work inside of table based layouts and use inline styles but I learned a lot more about what it is to work inside of large scale E-Commerce applications and how to work with a team of engineers, architects, graphic designers and project managers.

If I had got hired on maybe I could have helped them see the light, and showed them how important it is to bridge the gap between a quality web standards front-end application and a back-end that supports this, which many of the employees already did but if one person in team believes in certain standards they can’t force it upon the others unless the company demand that as their standard of work. You can only try and make the higher ups see the benefits and hope they try and make a change.

In conclusion, you can’t expect that every piece of work you do is going to be held to your standards or the standards of the people you want to represent yourself to. This is unless you code the whole site yourself, or if is your company and you make sure the client knows the scope of work and budget that it takes to provide what is necessary to hand them over the highest quality site. if your a perfectionist like me you are most likely going to end up with a product, which you have some regrets or disappointments with the outcome. Until everyone on all sides from the client to the presidents of the web firms realize that the future of the web counts on us to follow web standards this is just something we are going to have to settle with, and try our best to make others realize there is a need to change.

Any one thats been around on the web for the last year or two has had to of noticed all the sites implementing the Lightbox technique all over the web. Lightbox allows you to create functionality to overlay images with some cool effects without the use of flash.

There are some others out there such as Greybox to overlay HTML content. Thickbox utilizes both Lightbox and Greybox functionality, but allows you to overlay all of the following extensions .jpg .jpeg .png .gif .html .htm .cfm .php .asp .aspx .jsp .jst .rb .txt.

Thickbox was created by Codey Lindley who is doing some great things with the JQuery Javascript library. If you check out the cool examples on Codey’s site you will see the powers of this effect.

I decided I wanted to try this since a recent project called for me to have a cool new type of popup for displaying an album cover which list the tracks and links to mp3’s. I know I may be a bit late on recommending this but I don’t really play around with these things until I have a need to do so on a project, its not like its rocket science and I’m missing something if I don’t. With all of these libraries out there its so much easier to find scripts to do the effects you want.

I highly recommend this and all of the other cool tricks you can do with the light weight JQuery Library. I had to be different then the norm and not use the script.aculo.us or Prototype libraries.

If you havn’t yet worked with AJAX or even an a programmer using it all the time. Here is a great article “Seven Things Every Software Project Needs to Know About Ajax” written by Dion Hinchcliffe. He gives us his perspective on what we have learned in the last 18 months since the term has been so greatly popularized.

Well the other day IE 7 was finally released to the public and as everyone was going crazy because they don’t know how to code without hacks, and havn’t tested their sites throughout the year or so of Release Candidates. All my sites were just fine pretty much and I never had a version prior to the public release but did view them on BrowserCam so I wasn’t to worried. The only sites that were not fine that I have done (Including this one), were the ones that all use the great ClearFix hack, which clears the nested floats inside of a container div.

I just started using this during the summer, before then I either floated the container divs or used a clearing div, which of course to the coding snobs is bad because of extra markup.

Here is the updated hack for any of you that were unaware of this:

.clearfix:after {
content: "."
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Place this in your CSS and then put the class “clearfix” on the container div that is holding the nested floats and there you go, no more clearing divs.

That was the only thing that was “Broken” on the sites that I have worked on. For all the people that are so scared of IE 7 and bashing how bad it is, all I have to say is that it is 10 times better then IE 6 and hopefully this means soon IE 5.5 will get out of the picture and we won’t have to use the box model hack anymore.Boy oh Boy I can’t wait till we can start using ” Attribute Selectors“, That is going to change CSS a lot, but I will get more into that in another article.

Well for all the people that used others layouts, and cluttered their code full of hacks I hope you knew to start testing and fixing a while back because soon Microsoft will be forcing its users with a critical update that will install IE 7.