Let’s face it. Form validation is about as much fun as playing tic-tac-toe against yourself. It is a dull task that has to be done but really isn’t that much fun. Mostly it’s just a thousand “if” statements. Of course, the bigger the form the bigger the pain.

jQuery to the rescue.

While there are lots of great jQuery plugins for form validation, you can do it simply without any of them. If form validation is complex, a plugin might be useful, but for things like “contact us” forms or forms with lots of text inputs but no complexity then this method works great.

First let’s do some HTML.

<form action="/the/target/file.php" method="post" id="form1" onsubmit="return checkForm();">
    <label for="field1" class="reqtext">Form Label 1</label>
    <input type="text" name="field1" class="req" />
    <label for="field2" class="reqtext">Form Label 2</label>
    <input type="text" name="field2" class="req" />
</form>

Notice the two CSS classes placed within the tags. These two classes, “reqtext” and “req” are the jQuery identifiers we will use to discover and then check each input field. Also notice that we put in an “onsubmit” element in the form tag. I like to use these instead of the jQuery.submit(). You can work either way. I’m just more comfortable with this format. Here’s the jQuery statements.

function checkForm() {
    // Initialize our error flag
    var error = false;
    // Cycle through the tags with the CSS class "req" in them.
    $('.req').each(function() {
        if($(this).val==()) {
            error = true;
        }
    });
    // If the error flag is set, set the titles for all required fields to a
    // nice shade of red to let them know which fields are required.
    if(error) {
        $('.reqtext').css("color","#922");
        return false; // don't submit the form
    } else {
        return true;
    }
}

Let’s work through the “checkForm()” function. First we set a flag to record if we have errors. Second we iterate through all the form fields with the CSS class “req”. If they don’t have any text in them, it sets the “error” flag. Lastly, after we finish checking things we provide the user with whatever visual feedback we think is required. In this case we set the text color for all the elements with the CSS class “reqtext” to red. You can take the last step as far as you want.

So there you go. A quick and simple validation that can be used for small forms and large forms alike. It allows you to validate what you want and leave the rest alone. Happy validating.

Simple rules and concepts that will improve the efficiency of your software and save you headaches

One great obstacle software development companies must overcome when setting their company standards and practices is the design of their programming architecture. Usually companies will initiate this process by accepting a set of programming standards specific to their needs, and then amend them as they find faults in their implementation. This revision process represents a top-down approach to architecture design.
At lifeBLUE we recently performed a major overhaul of our existing standards architecture from a bottom-up perspective with an emphasis on basic programming and software engineering principles. We reviewed all of our previous work and identified the needs and difficulties of our development team, and then associated these needs and difficulties with concepts that helped describe and associate them amongst one another. By doing this we were better able to define simpler and more robust solutions.

In order to assist others who are thinking of creating their own company specific architecture design, I have taken a collection of the notes we used during the research phase of revising our practices and summarized them for more general use. The following shows some of the most important concepts that we identified when designing architecture and popular methods of improving such concepts.

• Accessibility
  • Describes the degree to which a service or property is available for global use. Thiscan be as minimal as defining read/write access of a property, or can be as pivotal as confining database accesses to a small collection of database classes.
  • Improving accessibility does not necessarily mean making components more accessible,but instead applying proper access permissions to a component or module.
  • Examples
    • Separation of Responsibility
      • Database Tools
      • Logic Implementation Tools
      • Presentation Tools
      • Model View Controller
    • Accessor Methods
      • Get methods provide read permissions
      • Set methods provide write permissions and define writelogic
• Adaptability
  • Describes the ability of a system to incorporate new or different system componentswithout requiring the software architecture to be redesigned.
  • Increasing adaptability requires loose coupling of system components.
• Auditability
  • Describes the extent and measure of ease to which a system can be tested forperformance issues and programming errors.
  • Ease of debugging.
  • Ability of clients to easily identify problem areas.
• Compatibility
  • Describes the degree to which a new system component is functional with existing ornew components.
  • Examples of compatibility
    • Backward Compatibility
    • Forward Compatibility
• Composability refers to the ability of a system and system components to be assembledin various combinations to satisfy different requirements. The attributes that make components composable are:
  • Modularity refers to independence of a component from other system components.
  • Statelessness refers to the individuality of each use of such a component.
• Configurability
  • Refers to the measure that a component with system-relative constants can beconfigured.
  • Examples of sections that require configurability
    • Global Project Settings such as database connection strings.
    • Class Settings such as the number of allowed login failures before locking out a user.
• Correctness is measured by the accuracy of algorithms on a domain of inputs and theirknown outputs.
• Dependability is a measure of the reliability of a system component. It is measuredby the following attributes:
  • Auditability (see above)
  • Means are ways to increase the dependability of a system.
  • Threats are things that can affect the dependability of a system.
• Deployability is the measure of ease that a system can be deployed. It is measured bythe following:
  • Flexibility to changing deployment environments (Portability).
  • Minimizes costs of implementing predeployment features required to deploy a system orfeature.
• Efficiency
  • There are numerous ways and tools to measure the efficiency of a system or systemcomponent, and numerous areas that should be monitored for efficiency.
  • Examples
    • Runtime efficiency
    • Resource efficiency
      • Speed
      • Memory
    • Database efficiency
      • Spurious Tuples
      • Memory allocation
• Evolvability is a measure of the ability of a component to evolve and improve withoutbreaking existing functionality.
• Extensibility is measured by the ability of existing component features to be reusedin extending new components.
• Interoperability is the ability of components in a diverse system to interact witheach other without need of helper or translation methods.
• Learnability measures the difficulty of learning how to utilize and implement a systemcomponent.
• Manageability
  • Refers to the ability of a system or system component to manage data instances
  • Examples
    • Adding new instances
    • Editing existing instances
    • Removing or disabling existing instances
• Modularity
  • Programming concept that describes the extent to which software is composed ofseparate parts, called modules.
  • Modules represent a separation of concerns and enforce logical boundaries betweencomponents.
  • See modules section for more information.
• Operability
  • Ability to keep a system in an operating, safe, and reliable state
  • Examples
    • System requirements
    • Client specified operational requirements
• Portability is the ability of a system to be ported from one environment to another.
• Recoverability
  • Refers to the ability of a system to revert to a stable state when recovery is deemednecessary.
  • Examples of recovery methods
    • Database query reversal
    • Commenting out class modifications
• Relevance is the measure of how pertinent or applicable a component is with itsintended implementation and internal contents.
• Repeatability is determined by a one-to-one mapping of inputs to outputs.
• Scalability is the ability of a system or component to handle larger volumes ofrequests without increasing implementation costs.
• Seamlessness is the quality of being able to implement a system or system componentwithin other technologies without need of helper or translation methods.
• Security
  • Measures the protection of sensitive information from being accessed by intruders ornonrelated users
  • Examples of security
    • Encryption of identifier values and login credentials.
    • Hiding user information deemed sensitive from other users.
• Standardization is the process of defining a set technical standard to be implementedacross different system components.

One final important note: Make your developers aware of your new standards and practices otherwise this whole process is for naught. Giving developers a strong understanding of how things happen at your place of work will empower them and give them the confidence they need to perform at 100%. A poorly informed developer can be the pitfall of an entire project. Your lead developer or project managers (or both) should be provided adequate time to do routine checkups on project code segments as an audit of developer efficiency and pertinence.

Evaluation of practices should be performed regularly. Whenever a lifeBLUE project is completed we take time out to identify the strengths and weaknesses of the project from the perspective of every individual who has worked on the project. By resolving these weaknesses and implementing these strengths into future version of our software core, we slowly but surely eliminate reoccurring development issues. This allows us to focus on the most important piece of work: making a website that strongly and positively represents our client.

When working with a website, you’ll sometimes need to store data in order to use it later or do manipulation on it. Beginners with jQuery might store data in the “title”, “alt”, or “rel” attributes of an link, or use hidden varaibles, like

<input type="hidden" name="color" id="color" value="">

and then use jQuery to store a value to that hidden variable:

$('#color').val('red');

But jQuery gives us a more advanced method  called “data(),” and it lets us store a whole slew of data on any element in your page. For my projects, I’ll pick one element to store all my data to–my preference is a big element, like an outer div or something, but you can make it any DOM element you want. You can even create an element just for the purpose of storing data:

<div id="data"></div>

Now, to add data to your element, you can use the following method:

$('#data').data('color','red');
$('#data').data('size','large');
$('#data').data('weight','20');

As you can see, you can store more than one value to your data holder. To retrieve it, you can use the data() method again,

<script type="text/javascript">
alert('The color is: ' + $('#data').data('color'));
alert('The size is: ' + $('#data').data('size'));
alert('The weight is: ' + $('#data').data('weight'));
</script>

jQuery data() is an under-used fuction, I hope you find it useful and see that it brings a certain level of elegance to developing your applications.

Magento is great for e-commerce sites, but it can be difficult to learn. Here are a few Magento links I’ve found useful in my Magento development:

• Richard Castera’s Magento snippets Great, simple code for doing things like running an SQL query against the database, getting the current category, and one my most- used ones, adding a product to the cart via querystring.
• Explore Magento Another piece of code I regularly use is gives me the ability to run my own custom code outside of Magento. This can be extremely useful if you have a specialized page not within the main Magento framework. You can find detailed instructions here.
• Magento Database Diagram - Although it’s for version 1.16, this diagram is very useful if you want to run your own SQL queries in Magento. It saved me a lot of headache when trying to figure out how to join products, images, and prices for a custom query.
• LoonyBlurb - Custom Layout Templates
  If you work with Magento for very long, you’ll find yourself needing to create custom layout templates. This blog makes that easy to do.
• Finally, my favorite site for Magento snippets: Snippi.net. Unfortunately, it’s been down for the past two days–let’s hope it’s only a temporary setback. If the link works for you, it is the best repository for short, one-line snippets–from doing everything like removing an item from the cart, grabbing a product thumbnail image, or getting session data about a logged-in user.

Got more? Let us know!

This is a hot topic, at least among nerds lurking about various tech forums around the ‘net. Every nerd has their favorite distro, 72 reasons why, and are willing to stake their reputation on it. Basically, they are distro fan-boys. They argue, fight, start flame wars, and spread more confusion than actual fact in their attempt to support what they believe to be the best of all server distributions.

Really what it comes down to is preference. For the most part, all Linux distributions are built on the same foundation with the same software. Each distribution modifies the software somewhat, which is where the controversy comes in. So it is with some fear and trepidation I throw my hat into the ring.

I’ve picked three that I like and explored each. In the spirit of Open Source Software, I’ve only selected distributions that are free of charge and conform to current Open Standards. Each has it’s ups and downs. Each fits one niche better than the other.

CentOS

Description:
CentOS is a fully open source version of Red Hat’s Enterprise Linux. It takes out all the proprietary modifications and software and leaves the Open Source core intact.

Pros:
STABLE, STABLE, STABLE! CentOS is rock solid stable. It only uses packages that are time tested and fully checked for security leaks. It comes with a fairly air tight SELinux configuration (OS level security) and has a good firewall set up from the get-go. CentOS also comes with some good graphical tools for administering your system.

Cons:
The stability comes with a price. CentOS uses packages that are much older compared to other distributions. That means that new cutting edge features are not there. A prime example is PHP, the current release of CentOS defaults to the 5.1 versions. Magento, a lifeBLUE favorite, as well as many other great PHP applications require 5.2 to run properly. CentOS is also a pain to configure at times.

Conclusion:
CentOS is the way to go if you need stability. Not so much if you need the latest packages and want to step quite a ways away from the default configurations.

Ubuntu Server Edition

Description:
An up to date, customized distribution based on Debian (yet another distribution). It features easy installation of packages and many great tools to help you administer and configure your system.

Pros:
Ubuntu is easy. It is built to be a user-oriented distribution that makes configuring and administering a Linux server less painful. It features an easily customizable version of the Apache 2 web server, extensive selection of commonly used third party applications like phpMyAdmin, and a powerful tool to keep your system up to date. It also now features AppArmor, which is touted to be a new and improved version of SELinux. All of these features work together surprisingly well considering how cutting edge the packages are.

Cons:
Ubuntu has a VERY short support cycle for most of it’s versions. They do have a version marked as “Long Term Support” which is also kept up to date, so this can be avoided. Also, since Ubuntu uses cutting edge packages, a sys admin has to be very diligent in keeping the server up to date to avoid security gaps.

Conclusion:
Ubuntu is probably the best version for someone who is going to spend a lot of time administering and manipulating their server. Configuration is easy and it is simple to roll back changes if things don’t go right. Ubuntu is a bad choice for “install it and leave it” servers (which isn’t really a good idea, but people do it all the time).

Gentoo

Description:
Most sys admins are probably shaking their heads at this one. Gentoo is hard to learn, often complex, and takes a great deal of time to configure. However, it allows an unparalleled ability to configure, change, and manipulate the software on your server.

Pros:
Because of how the package system in Gentoo works, you can do nearly anything you need to do to the software and still use the package management to keep things up to date. With most distributions, Ubuntu and CentOS included, once you step away from standard packages and put in some of your own custom versions you cannot use the package manager for those packages. Not so with Gentoo. The package manager allows you to create and maintain your own customized versions of software. That means if you need a tweaked out web server with lots of custom hacks to support your web application, you can integrate it into the package manager and more easily manage new versions of the customized software you are using. Another great aspect is that Gentoo can have a very lean install. If you just want a file server, you can install Gentoo with the base system and the file server. Most other distributions you would have to uninstall many, many packages to get the same result.

Cons:
Gentoo is HARD. It has a steep learning curve. It also takes a really long time to get a working system (it usually takes me at least a day to get one server up and running). Also, since it allows so much configurability you can break things very badly and have to start over. Lastly, if you don’t know how to make Linux secure, your Gentoo won’t be secure. You are responsible to install and configure the available tools to make Gentoo hardened enough to be an outward facing server.

Conclusion:
If you need to customize, go with Gentoo. If you want to control every aspect of the server in detail, go with Gentoo. If you want easy, go somewhere else.

Overall Thoughts

You have about a billion choices when it comes to distributions for your Linux server. It is worth the time to ask the following questions:

1. What is most important for the server? Is it stability, cutting edge features, or configurability?
2. How complex is the server configuration going to be?
3. How much time are you willing to spend keeping my server up to date and healthy?

If I was to go so far as to give some advice on choosing a server distribution, I’d say this: research your options and don’t get dragged into the hype. Figure out what your needs are first then find a distribution that best meets those needs.

Oh…and ignore the distro fan-boys.

Benefitting from Virtual Development Communities

Are you lonely? Tired of looking for solutions to particular programming issues without having any reliable sources? Sure you’ve got the latest version of “Your-Programming-Language-Here for Dummies”, but manuals and APIs tend to lack substance and examples. For nerds like us it’s like high school prom all over again. Fortunately, there are others like you longing to rid themselves of the indecipherable semantic garble that has bottlenecked open-member solution sources.

Utilizing technical forums and blogs to learn about development questions used to be a painstakingly difficult process that first required hours of intensive searching before even finding relevant posts. Of course, there was always the 50/50 chance of there being no solution, advice, or response at all! Finding a reputable open-discussion source has become easier with time as developers began to realize the necessity for such resources and started integrating more and more functionality into their web-based newsletters and virtual communities. A few examples of such communities are stackOverflow, a free language-independent developer discussion forum, and Experts Exchange, a subscription based discussion forum with extended services and assistance.

These rich communities can be seen as archives of wizardly knowledge, endowing us with otherwise non-existent knowledge and providing tried and tested methodology. These grandfathers of discrete mathematics and algorithmic analysis (with their punch cards and pocket protectors) are met with the modern day programmer in one environment, blending knowledge with youthful ingenuity and energy. It is no wonder that software companies have made such communities a staple to their processes as it provides immediate feedback, user testing, and allows for announcements concerning their products. For the individual user these communities can have limitless potential. Developers are exposed to new technologies, collaborate on ideas with like-minded developers, and collectively contribute to a rich and diverse technology base.

Getting involved in these communities not only provides developers with an additional resource to turn to when confronting programming obstacles, but also extends their capacity to understand other programming styles. While at first this may seem to pose a threat to the unification of programming styles and semantics, it actually has the opposite effect. The need for a concise terminology when dealing with programming and development is critical in being able to discuss and work with others. As people become more involved with these communities they begin to pick up on the lingo frequently used by other users and start integrating it into their own questions and solutions to better describe their problems or answers. In this manner users are not only learning coding solutions but are also adapting more widely used terms and concepts, which, in turn, increases their potential as developers.

For several developers pride and skepticism are grand deterrents to participating in such community-based solution sources. To those who fall under this category I challenge you to really flex your programming muscle by solving the convoluted and complex issues of others (and in return showing off that hubris of yours). One great addition to these emerging discussion forums and blogs is the integration of social-networking components such as instant messaging, friend/relation managers, and (for those prideful people) ranking systems based on your activity and the accuracy of your responses/posts. Personally, my favorite example of such integrated functionality is on the ASP.Net site which provides tutorials, videos, discussion forums, a relation manager, software toolkits, and a reflective ranking system (but then again the .Net framework is my niche).

So whether you are looking for a simple solution to a required introductory programming course, writing your dissertation on Quantum Computing Theory, or just an ASP.Net developer for a small company building web-applications in a flour mill, there is much to learn from these grand archives of information. You never know when you will meet that certain someone that lights up your life…or at least knows one method call that simplifies your program by a couple hundred lines.

Building Simple Javascript Classes

Three cheers for jQuery, Prototype, YUI, and other javascript libraries that have made the web developer’s life simpler. These libraries make doing what needs done straight forward and clean cut.

However, these little gems do not solve some of the basic “no-no’s” of javascript development.

1. They simplify the namespaces issue, but they don’t make it go away.
2. They often don’t do much to promote good programming patterns.
3. They usually promote a procedural approach to solving problems, rather than a object oriented approach.

On that last note, the object oriented aspect of javascript is almost completely ignored by many developers. Most developers who user these libraries assume that the libraries have removed the need to learn this aspect of the language. Why learn it if you don’t have to?

Simply put, learning javascript as an object oriented language means the same thing as it does for every other language. Your code is generally cleaner, more reusable, and solves the horrors of namespaces (or lack thereof).

Since I’m nice, here’s a quick primer on how to create a javascript “class”.

First, create a variable that equals a function like this.

jsclass = function() {
    // Code goes here!
}

Next let’s create a few properties. Properties are variables that live inside the class and belong to it.

jsclass = function() {
    this.variable1 = "This is our first variable.";
    this.variable2 = "This is our second.";
}

Now we are going to add a few methods. Methods are functions that live inside the class and belong to it. We are going to allow the script that calls this little method to pass it an argument.

jsclass = function() {

    this.variable1 = "This is our first variable.";
    this.variable2 = "This is our second.";

    this.method1 = function(anArgument) {
        alert(anArgument);
    }

}

Wahoo! We now have a fully functional javascript class! It may not do much, but it works. Let’s test it. Create an HTML file and put this script in its head.

Next, throw this little bit of code into the same script block to create an object from our class.

newObject = new jsclass();

Next, in the body of your HTML document, create a button and add an onclick event as follows.

<input type="button" value="A Button" onclick="newObject.method1('Hello world.');" />

Now load your page and press the button. Prepare yourself as you are underwhelmed by a nice little alert box containing the industry standard and massively overused “Hello world”.

Now let’s do just one more thing to round out the basics of using javascript classes. Let’s use member functions and variables inside our class. We are going to change up our class just a bit so make sure to note the changes.

jsclass = function(ourMessage) {

    this.userMessage = ourMessage;
    this.errorMessage = "No message sent.";

    this.method1 = function(anArgument) {
        alert(anArgument);
    }

    this.method2 = function() {
        if(this.userMessage=="") {
            this.method1(this.errorMessage);
        } else {
            this.method2(this.userMessage);
        }
    }

}

newObject1 = new jsclass("Hello world.");
newObject2 = new jsclass("");

Now add a second button to your HTML document.

<input type="button" value="Message" onclick="newObject1.method2();" />
<input type="button" value="Nothing" onclick="newObject2.method2();" />

Clicking the buttons will give you either the message you sent, or the error message contained within the class.

Before you say it, I know that this function is basically useless and could be easily done in other ways. However, when it comes to things like roll-overs, javascript classes can be a life saver. You can have multiple roll-overs on a page that use the same code for their functionality. You can then take that same class and use it on the next project you do easier than with a procedural approach.

So take the OO dive into javascript. You may find that some of the problems (like roll-overs, menus, etc.) that took a lot of convoluted javascript functions to get working become clean and easy when created as a class. Happy experimenting!

In part one of this blog we discussed predevelopment documents and the value such diligence adds to the overall product. Developing this documentation will improve every aspect of the project, including customer satisfaction, code stability, time management, and overall quality of work. With a clear project direction, developing a technical roadmap becomes a much more possible and manageable task.

The traditional processes and frameworks of building websites differs little from any software development. In both cases, the project needs to be divided first into layers and then into units. These are units of work which need to be built. Units have dependencies upon each other and varying levels of difficulty or complexity. Both of these factors are considered when writing an action plan. The standard of software logical layers is the classic model, view and controller. MVC refers to the data store, interface code and application code. Typically a team would begin at the database layer.

Armed with the pre-development documents discussed above, it is important get the database schema on paper. Getting your design onto paper opens up communication between developers, expresses problematic areas and at the very least adds to a team’s growing collection of site documentation. This is a great example of measure twice, cut once. The database schema is literally the brain of the website.

Application code is at the minimum the adaptor sitting on top of the database retrieving from and updating it. Application layer is where business logic gets enforced. Server resource consideration and effectiveness are factors at this layer. Designing this layer is defining the technical architecture of the project. The level of documentation sophistication varies greatly here. There is a coding syntax, called UML, which can be employed to define this layer. In practice, UML is little more than diagramming. Typical diagrams are simply boxes and arrows with brief description of what’s happening on those little arrows. An example might be: user clicks order button, check is user, check stock level, verify no holds, add order to queue, update stock, etc. No detail is too small to document. Next, the development team overlay these diagrams with the literal class names or functions required to accomplish the actions laid out.

As this process is continued, the mosaic of the software finally begins to emerge. In a sense, this step is taking the user case flows made earlier and upgrading them to a new level of complexity and relevance. Just as the user case flow allows a team to discover issues with features or usability, this analysis will expose issues in programming that are better dealt with here than later in the thick of coding with the danger of dark side of the moon syndrome. That is to say, once a programmer has gone so far in programming only to discover a problem. They might be tempted to add more code to mask the problem rather than delete existing code. If the same developer has gone into programming mode with a clear strategy, such issues would have all ready been circumvented typically resulting in more concise and effective code.

Even once programming has begun documentation should continue, now in the form of logging. Proper logging is basically making notes. Each time a unit is completed the developer would log a note stating so and any complications encountered. These logs will become invaluable in the final development stages. Project managers can review the logs and check items off their feature list. Reviewing the amount of time each unit required will aid immensely when assessing future project risk. Often, documentation produced at this stage is kept internal to be reused in future projects. However, if the client is large and technical enough, the application design too might be a welcome addition to the overall site documentation.

Interface development has changed incredibly in the last ten years. A decade ago, interface consisted of simply laying out tables and graphics while applying styles and page properties. We simply plugged in variables produced from the application code and called it done. Contemporary web technology has taken interface to a whole new level as the market demands a rich user experience. We can use our previously created wire frames as a jumping off point for developing the interface strategy. As before we list all external libraries and justify their inclusion. Some type of scripting language will likely be employed on the front-end. Whether Javascript, VBScript, or Actionscript, it is critical to get down on paper what functionality each is going to provide. What functionality is required while assessing each unit’s difficulty level? This is a technical list that should refer to specific function or class names. A complete list would be such that once completed so is the interface

In any successfully managed project should be an abundance of documentation. Some of these documents will be highly sophisticated polished products unto themselves while others might not be much more than rough notes. Regardless, they are evidence of professional diligence. At each iteration along the way we stated on paper what we intended to do, discussed the strategy with the contributors, and then did exactly what we stated. The secret to creating a quality strategy and unlocking its value is communication.