Some people think there is no ‘right’ or ‘wrong’ way to code. I agree and disagree. I’m not saying there is only one right way and all developers should live by this method. I’m saying that there is a wrong way for anything. People can go about the same thing in many ways and it would be considered right. Each developer has their own style and comfort zone in how they do things and as long as it is efficient, doesn’t bear on page performance and doesn’t fall into the ‘wrong’ category then it’s still considered good code.

Right

• Following the rules that the W3C has defined for creating websites
• Following Web Standards, Best Practice and the KISS principle
• All code validates and runs error free
• Separate content from presentation
• Semantically correct markup
• Fully minimized and clean
• Makes sense

Wrong

• Using things in a manner they were NOT meant for (ex. tables for layout)
• Hacks that are unneeded (hacks are normally only needed for bad code)
• Overly complex (adding in some code because it was too simple)
• Re-writing built in functions (re-inventing the wheel of php)
• Doesn’t make sense

Right

To fully explain things there is the W3C which is an organization that standardizes Web technologies. They are the people who define how the web works in terms of HTML. Following these rules will not only keep the need for hacks at bay but it will also keep your code valid because that is what you are validating against when it comes to HTML and CSS. Yes… you are validating your code against the rules they have outlined for you. So tell me again why we wouldn’t follow the rules?

As for fully minimized and clean I mean can I look at it and point out anything not being used? Did the old stuff get cleaned out? Are there unnecessary things? Are there too many unneeded wrapping divs? Is the programming of the code logical? Can it be done in a simpler way? Basically take the code and remove everything you can from it. Make it as small and compact as you can without losing any functionality. Once you’re done it is minimized and clean.

Overall when I say there is a ‘right’ way I mean when any knowledgeable developer can look at the code and figure it out almost instantly because it is done the way it was intended and follows Web Standards and common sense then it is good code.

Wrong

Ahhhh the ‘wrong’ way. Man oh man is there a definite wrong way of doing anything in life. Let’s take going to a grocery store that is half a mile down the road. What is the right way to get there? There are a few ways that would work I mean you could walk, take a bus, ride your bike or even drive your car. All these work and are logical. Well what about walking 1 mile the opposite direction to get on a bus that takes you to the airport where you fly round trip to the furthest destination and on return get a rental car and drive straight to the grocery store. This in my eyes is wrong.

It may seem dramatic to some but you have to admit that’s not the most efficient way to get to the grocery store. You might catch yourself thinking ‘Why would anyone do that?’… And that is a good indicator question that determines bad code.

On a less obvious side there are other things that make it the ‘wrong’ way including invalid, erroneous, weighted, hacked and non-logical code. When people use tables for layout it is actually wrong because it is invalid. If errors pop up or it takes triple the time to load due to controllable factors it is wrong. If you use JavaScript to apply CSS classes or inline styles when there is no JavaScript functionality on the page then it is wrong. If you are re-writing built in functions for any scripting language then it is wrong. These are just a few examples that there are wrong ways of coding things.

Conclusion

In conclusion I understand that some developers use floats and some use positioning this is their style and both methods work. There is a difference between that style factor and the just plain wrong or outdated factor.

I know I can’t make everyone a believer overnight, some will just always believe if it runs then it must be good code. However I encourage you to Google the ‘benefits of web standards and best practices‘ and after a few good reads go ahead and try to search for the ‘downfalls of web standards and best practices‘. Since I don’t know of any downfalls please comment below if you do find any.

Also stay tuned for more blog posts about this topic.

This checklist is not all-inclusive but it covers some major areas that need to be tested with any major development.

• Accessibility (SortSite http://www.powermapper.com/products/sortsite/)
• HTML Validation (W3C http://validator.w3.org/)
• JavaScript Validation (JSLint http://www.jslint.com/)
• CSS Validation (W3C http://jigsaw.w3.org/css-validator/)
• Performance  and speed (GTmetrix  http://gtmetrix.com)
• Design (PixelPerfect http://pixelperfectplugin.com/)
• Test in all browsers listed in the requirements
• Test without JavaScript, Flash and other plug-ins
• Print version

Lastly take a look at the logic and code itself to ensure that it follows Web Standards, Best Practice and the KISS principle (http://en.wikipedia.org/wiki/KISS_principle).

Over the past few days I’ve had the chance to do a lot of research and decided to take a stab at a more lightweight version of a jump menu or sometimes referred to as a quick menu. We often include these in the header area and place important ‘quick links’ inside for users to go directly to important areas of the site. Below I have listed the features and source code for this.

NOTE** Examples are in iFrames

Features

• W3C Valid
• 508 Compliant
• Easily styled with CSS
• No Script version (on hover)
• Supports absolute or relative links
• Supports target=”_blank” (new window)
• Browser Compatible, tested on:
  • Windows: IE 7+, Safari 3+, Firefox 2+, Chrome
  • Mac: Safari 5, Firefox 3

Click here to download source code. Or click here to go see it in jsfiddle.

URL Linter – http://developers.facebook.com/tools/lint

Facebook’s URL Linter is an extremely handy tool for testing an instance of the Facebook like button. It allows you to view how it will look in the Facebook feed. If you’ve ever tried to test a like button you know that Facebook caches the results for an unknown amount of time which can be very frustrating while trying to test.

It’s truly a priceless tool.

There are many add-ons to test a web pages load but for some reason I have grown attached to GTmetrix. GTmetrix is a website that offers page load analysis along with the methods to fix any existing issues. I like to run all my development through GTmetrix to ensure the most optimized code as well as a smooth user experience.

If you register for a free account you can then take advantage of additional features like Save & Compare or Monitoring.

Also don’t overlook the GTmetrix Bookmarklet to test any page easily. Just drag and drop it into your bookmarks and you can click it to test any page you visit.

“The web should be fast.” – Google, Inc.

Ever wonder about the icons some sites have that show in the tab or when you have a bookmarks bar?  Well here is a quick guide to how you can create your own.

Step 1. Generating the icon

There is not a specific generator that I stick to every time. I normally just Google ‘Favicon Gen’ to find an icon generator.  Here is a list of a few that I know work:

• http://www.favicon.co.uk/index.php
• http://www.genfavicon.com/
• http://favigen.com

IMPORTANT: You want to pick the 16×16 pixels version vs. any other sizes.  IE will not show favicons that are the 32 or 64.

Step 2. Placing it on the page

Update the following code with the path to the icon and place it in the head of your document.

<link href="/global/images/favicon.ico" rel="Shortcut Icon" type="image/x-icon"/>

NOTE: Browsers cache these icons so you may have to clear your cache to see a change.
Thats it!

Recently we ran across formatting an RSS feed pubDate in Cascade Server. We quickly realized are normal date format would not work in this situation given the date is formatted as ‘Thu, 06 Jan 2011 19:00:04 +0000′. The following is the XSL we used to convert the date to January 6, 2011.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output indent="yes" method="xml" omit-xml-declaration="yes"/>

 <xsl:template match="/">
  <xsl:variable name="date">Thu, 06 Jan 2011 19:00:04 +0000</xsl:variable>
  <xsl:call-template name="format-date">
   <xsl:with-param name="date" select="substring-before($date, ' +')"/>
  </xsl:call-template>
 </xsl:template>

 <xsl:template name="format-date">
  <xsl:param name="date"/>
  <xsl:variable name="day" select="substring-before(substring-after($date, ' '), ' ')"/>
  <xsl:variable name="day2" select="concat(translate(substring($day,1,1), '0', ''), substring($day,2,1))"/>
  <xsl:variable name="monthName" select="substring-before(substring-after(substring-after($date, ' '), ' '), ' ')"/>
  <xsl:variable name="year" select="substring-before(substring-after(substring-after(substring-after($date, ' '), ' '), ' '), ' ')"/>
  <xsl:variable name="month">
   <xsl:choose>
    <xsl:when test="$monthName = 'Jan'">January</xsl:when>
    <xsl:when test="$monthName = 'Feb'">February</xsl:when>
    <xsl:when test="$monthName = 'Mar'">March</xsl:when>
    <xsl:when test="$monthName = 'Apr'">April</xsl:when>
    <xsl:when test="$monthName = 'May'">May</xsl:when>
    <xsl:when test="$monthName = 'Jun'">June</xsl:when>
    <xsl:when test="$monthName = 'Jul'">July</xsl:when>
    <xsl:when test="$monthName = 'Aug'">August</xsl:when>
    <xsl:when test="$monthName = 'Sep'">September</xsl:when>
    <xsl:when test="$monthName = 'Oct'">October</xsl:when>
    <xsl:when test="$monthName = 'Nov'">November</xsl:when>
    <xsl:when test="$monthName = 'Dec'">December</xsl:when>
    <xsl:otherwise/>
   </xsl:choose>
  </xsl:variable>
  <xsl:value-of select="concat($month, ' ', $day2, ', ', $year)"/>
 </xsl:template>
</xsl:stylesheet>

I ran across an interesting issue recently. I could not remove the dotted border on a link in Firefox. I removed ALL dotted borders in ALL CSS files and it was still there! The solution was much simpler than I thought it would be. All you have to do is add the following to your CSS:

a:active {outline: none;}
a:focus {-moz-outline-style: none;}

Viola! The borders are gone :)

Around the office people call me the Add-on queen due to my robust selection of Firefox and some Chrome/Safari/IE Add-on’s. I think the nick name originated about the 5th time I said ‘oh! There’s an Add-on for that!’ :). Within the last month I have been informed about 3 Add-ons or Add-on functions that I wasn’t taking advantage of and feel my throne is slipping! So today I’d like to re-secure my throne by putting the spotlight on the Server Switcher Firefox Add On.

Server Switcher is a Firefox Add-on that allows you to define development/test and production URL’s. It allows you to switch between the two URL’s very easily. So if you are looking at a page in development and would like to know what it currently looks like in production you could just click the icon in the address bar and voilà!

Add-on Features Include:

• Icon in address bar
• You can create multiple projects
• Keyboard shortcut: Ctrl+Shift+X
• Open local/remote server in a new tab with middle click or Ctrl+leftclick
• Support for subdirectories, different ports and local files

It is a small but oh so handy Add-on that is just another way to not only make each day more enjoyable but also more efficient.

You can check out this Add-on at https://addons.mozilla.org/en-US/firefox/addon/2409/

Miral (a fellow developer) was asking for help on an issue involving the need to have 2 different blocks on one region. We needed a News Index Block but we also needed an Events Index Block for the same region. My first assumption was no and that you’ll need to do whatever needs to be done in order to make it 2 separate regions and add the separate blocks. Then he asked me if we couldn’t use the method listed under FAQ’s on a Hannon Hill page (http://www.hannonhill.com/kb/Block/).

The only thing I could say was wow I guess you could! I also said that he should probably hide it from the end user so that it cannot get changed. To do this you would use the Restrict to group’s field under ‘Advanced’ in the data definition.

The more I thought about it the more amazing of an idea it is to me. I know personally I’ve come across this issue before and simply added a region to accommodate the extra block but knowing this option is available now I might do things differently. Though both methods are equally useful I think this method could come in extremely handy when it’s a situation that you cannot add another region.