I recently read a forum thread about designers and developers, and the hourly rates they charge. One commenter made a great point, saying that you can start to charge more per hour, if you are more efficient, and faster at producing quality work, as long as quality is not compromised for speed. Apart from practice, how can you actually speed up your coding you may be thinking. Well there are plenty options out there to aid you in doing so.

1. Snippets

The first of these is having snippets at your finger tips. Programmers of high-end applications commonly make use of something called a module library; basically a library of pre-written, pre-tested code that can be inserted into their software. The benefits of this isn’t only faster coding, but faster error checking as well, as you know it is already tested to work. Why shouldn’t we, as web developers, also be making use of our own version of a module library?

There are pretty much 3 ways snippets can be organised, and used. The first is online, commonly via a website that will store your snippets as a database for everyone to share and use. Here are a few you might want to check out, while I’m sure there are plenty more quality options out there.

• http://snipt.net/
• http://www.smipple.net/
• http://snipplr.com/
• http://www.bytemycode.com/
• http://snippetsmania.com/

The second way is to have your own local database of useful snippets at your fingertips, instead of them being out there online, and everyone else’s being there too. There are plenty applications and so on to cover this, with this short round-up covering just a few.

• Snippely
• Snippet
• mySnippets
• jCodeCollector
• Snippetsapp

2. Text expanders

The third and possibly best way to make use of your snippets is via a text expander. Think of them as a snippets library application on steroids. Basically, you set up your snippets so that you type a few characters, and then without leaving the keyboard, expand it into your full snippet. It will seriously revolutionise, and drastically increase the way, and speed that you code.

This article, and screen cast by Jeffrey Way gives you a visual view of the power a text expander puts at your finger tips, and is well worth a read. Having seen what you can achieve, here are several text expander applications that you may want to try out.

• Texter
• Fastfox
• TextExpander
• Snippetmonkey
• Typinator

Editor’s Note: I highly suggest you to use Phrase Express instead of Texter. A far better option than its competitor.

3. Integrated Development Enviroment (IDE)

An Integrated Development Environment, or IDE as they are commonly refered to as, is basically like a well-developed environment to code your websites in. They often comes with great perks, which help you improve your coding, such as auto closing tags, code hints, and much more.  Lets take Aptana Studios – my favourite IDE – as an example by looking at what features it has to offer.

• HTML, CSS, and JavaScript Code Assist – Code Assist helps you author HTML, CSS and JavaScript code more quickly. It supports all HTML elements and properties and generates suggestions and hints for CSS.
• JavaScript Debugging – Aptana Studio integrates with Firebug for Firefox and Internet Explorer, offering multiple debugging options including breakpoints, stepping through code, DOM inspection, and more.
• JavaScript Libraries – Support for popular JavaScript libraries and frameworks such as jQuery, prototype, scriptaculous, Ext JS and more. For each you get code assist, importable sample projects, and doc links at your fingertips.

• DOM Outline View – View and navigate the DOM in this hierarchical outline of your HTML page. Select nodes to jump to that location in the editor. Filter nodes to see collections that match patterns.
• File Transfer & Synchronization – Support for one-shot as well as keep-synchronized setups. Multiple protocols including FTP, SFTP and FTPS. Ability to automatically publish your websites to selected ISPs and hosting services.
• Live Preview – Quickly switch between a view of your source code and the rendered HTML page in popular web browsers.

Compared to your code editors such as Notepad++ and so on, a web IDE such as this makes coding so much easier, as well as testing and so on. You rarely have to leave your coding environment for anything else! Check out these options below, or ask around to find out about many more, there are plenty out there.

• Komodo IDE
• Aptana
• Coda
• Textmate
• Netbeans

4. Zen Coding

Zen Coding is a text editor plugin for many IDE’s and text editors out there that will seriously change the way you code. Think of it like a text expander, but for any code you want to write. Basically, you write out your blocks of code as css selectors, and then expand them. Zen coding will then swiftly turn this into proper html code! Take this for example.

 div#page>div.logo+ul#navigation>li*5>a 

This code would be turned into a fully fledged logo and navigation html structure for you to work from. Think of the typing, and tabbing time that can be saved across multiple html documents with this!

 <div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> 

Check out Zen Coding v0.5 from Sergey Chikuyonok on Vimeo to see live action of Zen Coding.

Zen Coding, as I’ve already mentioned is available for plenty different applications, including Aptana, Textmate, Coda, Expresso, Komodo Edit, Notepad++ and PSPad, with unofficial support in plenty others. Go get it here!

5. Frameworks

The final way you may want to improve your coding efficiency is via the use of a framework. There are plenty frameworks out there, for a variety of different things, but some of the main usages are for css layouts and a basic set up for you to start coding with. Think of all those things you type up, and repeat every time yo start a new project, or even a new html or css document. What about grid’s and class’s you set up in almost every project you code. Well what if they were already there every-time you started a project, saving you having to type them out again. That’s what so-called frameworks hope to solve. Some aim at css grids, some aim at having a html base, and so on. Check out some of these below to get an idea.

• Easy Framework
• Blueprint Css
• 960 Grid System
• Less Framework
• Html5 Boilerplate

Further Discussion

Know of further ways to improve coding efficiency and speed? Get them down in the comments as always. It’s always great to get some further insight and thought’s on subjects such as these.

In this article I will be covering the basic installation and functionality of ZenCart eCommerce shopping cart. I have been using ZenCart on clients eCommerce websites for a while and found the most common questions about installing, and modifying along with the most edited files to get you up and running with ZenCart. I will also cover some basic theme creation for ZenCart as well. This should be an excellent starting point for everyone looking to setup an online store and create a custom look and feel.

When I first started with ZenCart I found myself searching the web trying to find where the most simple things were located. Even for me on the ZenCart website itself I found it hard sometimes to find the simple answers I was looking for. I was looking for basic things like changing the page title, and editing the meta information. These small things seemed so hard to find at first. The more I found myself using ZenCart over the past year I have found out easy ways to change and modify it for each website I have it on. I learned that it actually wasn’t as hard as I was making it to begin with. Even though you can find most of the information online and different sources, I wanted to make an article that was a central location for doing the main things to install and setup ZenCart.

First things First

Now go grab a copy of ZenCart to install on your server. You can download the latest release by visiting here:
ZenCart Download
This will come with everything you need. The install is pretty straight forward. If there are any technical questions for those of you that have not installed a script of any kind before, then please see the help file documentation or visit the ZenCart website for installation help. I am going to assume that most of us here have installed a script before so I can move on to the good stuff.

Right After The Installation

Right after the installation you will now have your script up and running for the first time. You will notice that by visiting your site that you installed it on, there is a lot that seems to need changing. First off the ZenCart logo is in place, and all of the text on the page is aimed at ZenCart with links back to ZenCart. Considering that it’s free, I don’t mind seeing it all at first – But let’s get started. We will need to select a theme to use, as well as change the front page text, and add our meta information.

Let’s Get Started

To Start, I want to take a look at the file structure. There are a few main files that can be easily edited to modify many different things on our ZenCart powered website. To make it easier on myself I have found that downloading these files and saving them locally allow me to make changes on my desktop, then upload the modified files to my server via FTP to make the changes to my website.

Let’s start by downloading the following files using your ftp software and logging into your website:

 /includes/languages/english/index.php  /includes/languages/english/header.php  /includes/languages/english/meta_tags.php 

We will do more with these files later one, so be sure to save them where you can access them later on. These files will do most of the setup for your ZenCart installation. I will cover these each in more detail after we choose our theme and get the basic site setup to use.

Get that Template!

Now we will choose a theme. I have found one theme that I like the best. It is somewhat of a “framework” theme that is very easy to work with, and has always allowed me to make a custom site for every client I have used it for. The theme is called “Bare Bones” – This theme is basic, very easy to modify, and a perfect starting point for a custom ZenCart template. You can download the Bare Bones template by clicking [HERE]

Logging In To your ZenCart Installation

Now it is time to log in to your admin account of your ZenCart Install. To do this you will visit your website domain name then add the forward slash and “admin” – You can then use your login name and password that you set during the install of ZenCart to access the backend of your store.

This is where most of your business end will take place. From the Admin panel you can setup the “Boxes” or “Layout” of your site, as well as add / remove products for your store. We will start with a basic overview of the menu functions and screens to give you an idea of how it all works. First off let’s go change our template.

To Change your template in ZenCart use the menu and select “Tools” then select “Template Selection”

Now you can see the installed templates located on the right hand side of the screen. Selecting “Edit” on the right side of the admin panel will allow you to select and change templates within your ZenCart Install. Let’s select the Bare Bones template we have uploaded and activate it now by selecting “Update” below the drop down box.

Layout of the Site

Now to choose some layout options. Again at the top of the admin panel menu select “Tools” then select “Layout Boxes Controller”

Using this you can add change and remove different options that will be set for your ZenCart powered site. These are some basic functions that include the search option, as well as displaying newly added products. Make sure when you choose to turn the boxes on, you are also editing the options that appear on the right side of the admin panel. This allows you to choose options like where to place the box, and additional options for each individual box being placed on the site.

Getting Rid of those Banners

Now to remove the banners that are default with the ZenCart install. Again go to “Tools” Then “Banner Manager” – You can then click on each one displayed to de-activate them. You can add your own later if you want, but we will remove these to better help see our website and how to set it up for now.

Store Configuration

For this part you may want to spend some time viewing the options yourself. On the menu in the admin panel you can select “Configuration” and see the self explanitory options that are all below it. This will be the main area you can setup your store name, and store info. There are many other options that you will want to set under the configuration area. This will ensure your website is personalized to what you need.

Where are we now?

Ok, you should have a basic starting point now where your store looks really empty, and you have the files ready to start making it your own. Let’s go back to the files we downloaded earlier and take a quick look at each one and what they do. This step is important for making your ZenCart powered store SEO friendly, as well as making it custom to suit your needs. First we will look at the index.php file:

index.php

 php /**  * @package languageDefines  * @copyright Copyright 2003-2006 Zen Cart Development Team  * @copyright Portions Copyright 2003 osCommerce  * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0  * @version $Id: index.php 6550 2007-07-05 03:54:54Z drbyte $  */  define('TEXT_MAIN','This is the main define statement for the page for english when no template defined file exists. It is located in: <strong>/includes/languages/english/index.php</strong>');  // Showcase vs Store if (STORE_STATUS == '0') {   define('TEXT_GREETING_GUEST', 'Welcome <span class="greetUser">Guest!</span> Would you like to <a href="%s">log yourself in</a>?'); } else {   define('TEXT_GREETING_GUEST', 'Welcome, please enjoy our online showcase.'); }  define('TEXT_GREETING_PERSONAL', 'Hello <span class="greetUser">%s</span>! Would you like to see our <a href="%s">newest additions</a>?');  define('TEXT_INFORMATION', 'Define your main Index page copy here.');  //moved to english //define('TABLE_HEADING_FEATURED_PRODUCTS','Featured Products');  //define('TABLE_HEADING_NEW_PRODUCTS', 'New Products For %s'); //define('TABLE_HEADING_UPCOMING_PRODUCTS', 'Upcoming Products'); //define('TABLE_HEADING_DATE_EXPECTED', 'Date Expected');  if ( ($category_depth == 'products') || (zen_check_url_get_terms()) ) {   // This section deals with product-listing page contents   define('HEADING_TITLE', 'Available Products');   define('TABLE_HEADING_IMAGE', 'Product Image');   define('TABLE_HEADING_MODEL', 'Model');   define('TABLE_HEADING_PRODUCTS', 'Product Name');   define('TABLE_HEADING_MANUFACTURER', 'Manufacturer');   define('TABLE_HEADING_QUANTITY', 'Quantity');   define('TABLE_HEADING_PRICE', 'Price');   define('TABLE_HEADING_WEIGHT', 'Weight');   define('TABLE_HEADING_BUY_NOW', 'Buy Now');   define('TEXT_NO_PRODUCTS', 'There are no products to list in this category.');   define('TEXT_NO_PRODUCTS2', 'There is no product available from this manufacturer.');   define('TEXT_NUMBER_OF_PRODUCTS', 'Number of Products: ');   define('TEXT_SHOW', 'Filter Results by:');   define('TEXT_BUY', 'Buy 1 \'');   define('TEXT_NOW', '\' now');   define('TEXT_ALL_CATEGORIES', 'All Categories');   define('TEXT_ALL_MANUFACTURERS', 'All Manufacturers'); } elseif ($category_depth == 'top') {   // This section deals with the "home" page at the top level with no options/products selected   /*Replace this text with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/   define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart&trade; E-Commerce Solution.'); } elseif ($category_depth == 'nested') {   // This section deals with displaying a subcategory   /*Replace this line with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/   define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart&trade; E-Commerce Solution.'); } ?> 

It is easy with this file to remember one golden rule: If it starts with the word “DEFINE” then you can change the value for it. Make sure when editing these .php files you keep everything within the single quotes and don’t overwrite something by accident. It is good practice to back up files and keep local copies as well.

Let’s check out some of the most basic areas of the index.php file that we will want to change to start personalizing the ZenCart powered site:

index.php

 define('TEXT_MAIN','This is the main define statement for the page for english when no template defined file exists. It is located in: <strong>/includes/languages/english/index.php</strong>');  // Showcase vs Store if (STORE_STATUS == '0') {   define('TEXT_GREETING_GUEST', 'Welcome <span class="greetUser">Guest!</span> Would you like to <a href="%s">log yourself in</a>?'); } else {   define('TEXT_GREETING_GUEST', 'Welcome, please enjoy our online showcase.'); }  define('TEXT_GREETING_PERSONAL', 'Hello <span class="greetUser">%s</span>! Would you like to see our <a href="%s">newest additions</a>?');  define('TEXT_INFORMATION', 'Define your main Index page copy here.'); 

This is the main page information. You can change it to make it your own to fit your website as you need to. Some of the main page content can also be edited using the “Page Editor” from the admin panel – but for now we will stick to doing it this way. You will notice some of the text that is located in the above code, also displays within your website on the homepage.

The lower portion of this file contains more areas you can define. Some of these are more detailed. Let’s take a look at it:

index.php

 if ( ($category_depth == 'products') || (zen_check_url_get_terms()) ) {   // This section deals with product-listing page contents   define('HEADING_TITLE', 'Available Products');   define('TABLE_HEADING_IMAGE', 'Product Image');   define('TABLE_HEADING_MODEL', 'Model');   define('TABLE_HEADING_PRODUCTS', 'Product Name');   define('TABLE_HEADING_MANUFACTURER', 'Manufacturer');   define('TABLE_HEADING_QUANTITY', 'Quantity');   define('TABLE_HEADING_PRICE', 'Price');   define('TABLE_HEADING_WEIGHT', 'Weight');   define('TABLE_HEADING_BUY_NOW', 'Buy Now');   define('TEXT_NO_PRODUCTS', 'There are no products to list in this category.');   define('TEXT_NO_PRODUCTS2', 'There is no product available from this manufacturer.');   define('TEXT_NUMBER_OF_PRODUCTS', 'Number of Products: ');   define('TEXT_SHOW', 'Filter Results by:');   define('TEXT_BUY', 'Buy 1 \'');   define('TEXT_NOW', '\' now');   define('TEXT_ALL_CATEGORIES', 'All Categories');   define('TEXT_ALL_MANUFACTURERS', 'All Manufacturers'); } elseif ($category_depth == 'top') {   // This section deals with the "home" page at the top level with no options/products selected   /*Replace this text with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/   define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.'); } elseif ($category_depth == 'nested') {   // This section deals with displaying a subcategory   /*Replace this line with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/   define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.'); } ?> 

These defined objects will allow you to change the terms used on the website such as “weight” – “product name” – “price” and etc. If you wanted them to display differently you could simply change the name within the single quotes and it will display that way on your website.

Below this list of defined objects you will see where there are two titles available to change. Both are located on your website homepage.

index.php

 } elseif ($category_depth == 'top') {   // This section deals with the "home" page at the top level with no options/products selected   /*Replace this text with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/   define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.'); } elseif ($category_depth == 'nested') {   // This section deals with displaying a subcategory   /*Replace this line with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/   define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.'); 

Changing the values for these will change more information on your homepage. Setting these to give custom welcome messages are a good start to customizing your ZenCart install. This is all a good starting point to setting up your online store.

Moving On

Next we will take a look at the header.php file we downloaded.

header.php

 <?php /**  * @package languageDefines  * @copyright Copyright 2003-2006 Zen Cart Development Team  * @copyright Portions Copyright 2003 osCommerce  * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0  * @version $Id: header.php 2940 2006-02-02 04:29:05Z drbyte $  */  // header text in includes/header.php   define('HEADER_TITLE_CREATE_ACCOUNT', 'Create Account');   define('HEADER_TITLE_MY_ACCOUNT', 'My Account');   define('HEADER_TITLE_CART_CONTENTS', 'Shopping Cart');   define('HEADER_TITLE_CHECKOUT', 'Checkout');   define('HEADER_TITLE_TOP', 'Top');   define('HEADER_TITLE_CATALOG', 'Home');   define('HEADER_TITLE_LOGOFF', 'Log Out');   define('HEADER_TITLE_LOGIN', 'Log In');  // added defines for header alt and text   define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');   define('HEADER_SALES_TEXT', 'TagLine Here');   define('HEADER_LOGO_WIDTH', '192px');   define('HEADER_LOGO_HEIGHT', '64px');   define('HEADER_LOGO_IMAGE', 'logo.gif');  // header Search Button/Box Search Button   define('HEADER_SEARCH_BUTTON','Search');   define('HEADER_SEARCH_DEFAULT_TEXT', 'Enter search keywords here');  ?> 

Using this file we can change our header text, our search field text as well as the search button itself, and the logo for our website. Titles are defined in this file for use across the store. We will get more into changing the logo and customizing the header later on. Let’s look at the other files we have downloaded:

Meta_Tags.php

 <?php /**  * @package languageDefines  * @copyright Copyright 2003-2008 Zen Cart Development Team  * @copyright Portions Copyright 2003 osCommerce  * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0  * @version $Id: meta_tags.php 10330 2008-10-10 20:14:32Z drbyte $  */  // page title define('TITLE', 'Zen Cart!');  // Site Tagline define('SITE_TAGLINE', 'The Art of E-commerce');  // Custom Keywords define('CUSTOM_KEYWORDS', 'ecommerce, open source, shop, online shopping');  // Home Page Only:   define('HOME_PAGE_META_DESCRIPTION', '');   define('HOME_PAGE_META_KEYWORDS', '');    // NOTE: If HOME_PAGE_TITLE is left blank (default) then TITLE and SITE_TAGLINE will be used instead.   define('HOME_PAGE_TITLE', ''); // usually best left blank  // EZ-Pages meta-tags.  Follow this pattern for all ez-pages for which you desire custom metatags. Replace the # with ezpage id. // If you wish to use defaults for any of the 3 items for a given page, simply do not define it. // (ie: the Title tag is best not set, so that site-wide defaults can be used.) // repeat pattern as necessary   define('META_TAG_DESCRIPTION_EZPAGE_#','');   define('META_TAG_KEYWORDS_EZPAGE_#','');   define('META_TAG_TITLE_EZPAGE_#', '');  // Per-Page meta-tags. Follow this pattern for individual pages you wish to override. This is useful mainly for additional pages. // replace "page_name" with the UPPERCASE name of your main_page= value, such as ABOUT_US or SHIPPINGINFO etc. // repeat pattern as necessary   define('META_TAG_DESCRIPTION_page_name','');   define('META_TAG_KEYWORDS_page_name','');   define('META_TAG_TITLE_page_name', '');  // Review Page can have a lead in:   define('META_TAGS_REVIEW', 'Reviews: ');  // separators for meta tag definitions // Define Primary Section Output   define('PRIMARY_SECTION', ' : ');  // Define Secondary Section Output   define('SECONDARY_SECTION', ' - ');  // Define Tertiary Section Output   define('TERTIARY_SECTION', ', ');  // Define divider ... usually just a space or a comma plus a space   define('METATAGS_DIVIDER', ' ');  // Define which pages to tell robots/spiders not to index // This is generally used for account-management pages or typical SSL pages, and usually doesn't need to be touched.   define('ROBOTS_PAGES_TO_SKIP','login,logoff,create_account,account,account_edit,account_history,account_history_info,account_newsletters,account_notifications,account_password,address_book,advanced_search,advanced_search_result,checkout_success,checkout_process,checkout_shipping,checkout_payment,checkout_confirmation,cookie_usage,create_account_success,contact_us,download,download_timeout,customers_authorization,down_for_maintenance,password_forgotten,time_out,unsubscribe,info_shopping_cart,popup_image,popup_image_additional,product_reviews_write,ssl_check');  // favicon setting // There is usually NO need to enable this unless you need to specify a path and/or a different filename //  define('FAVICON','favicon.ico');  ?> 

There are a few main things we will change in the meta_tags.php file.

 // page title define('TITLE', 'Zen Cart!');  // Site Tagline define('SITE_TAGLINE', 'The Art of E-commerce');  // Custom Keywords define('CUSTOM_KEYWORDS', 'ecommerce, open source, shop, online shopping'); 

The above code is what will help with SEO for your ZenCart powered site. Changing the page title, tagline, and adding keywords is very important. This will help your site be seen later by search engines and also to display to visitors what your website is and has to offer.

The other thing I want to point out within the meta_tags.php file is the favicon. The favicon image is the tiny icon that appears on your toolbar next to where you type your http://www -

This area at the bottom of the meta_tags.php defines that for us, so we can easily add a favicon.ico image to be displayed on our site:

Meta_Tags.php

 // favicon setting // There is usually NO need to enable this unless you need to specify a path and/or a different filename //  define('FAVICON','favicon.ico'); 

So What is Next?

Next in part two I will cover the following items:

1. Adding a custom logo to your ZenCart powered website.

2. The catalog menu for adding products to your website.

3. Extra addon modules available and how to edit them.

4. Define Pages Editor for custom pages

5. Custom Templates and File Structure of templates

Stay tuned for the second part of this tutorial. If there is something else you would like to see or if you have any questions then feel free to comment below. I will respond and help out as much as I can. I hope everyone enjoys!