Devit!

Whenever your browsing the web I’m sure you’ve run into many websites that have horrible loading times. If your sites are slow this can impact your customers and your business.

Here’s some helpful hints to get you headed in the right direction:

1) Host any dynamic website on apache whenever possible – it will run fast and handle heavy loads with ease
2) Use tools like YSlow from Yahoo! to get suggested speed fixes on all your sites.
3) Build caching into your custom web sites and utilize caching in any existing frameworks when provided.
4) Take the time and energy to go through both your apache httpd.conf and your php.ini (if applicable) and verify you only have necessary features enabled. Adding extra bloat to your server will slow it down – and make handling heavy amounts of traffic more difficult.
5) Monitor your log files for software bugs and when you’re content with a running site – disable all non-critical logging as the server error logging can cause some delays.
6) Use the built in apache benchmarking tool called ab – you can’t go wrong with this tool.
7) Get in touch with a Professional for some additional tweaks, testing and benchmarking. Typically a small investment can leverage large gains in performance.

Starting with the suggestions above you should be well on your way to reducing your page response times by at least 50%.

Converting data from one format to another is no easy job. Character sets, data types, collations and proprietary commands complicate things to no end.

But what I wanted to do was simple. I had a simple 2 column list of IDs with a text value. Seemed simple enough, export as CSV and import into MySQL. My first choice was to try and use phpMyAdmin for the import. phpMyAdmin provides a fairly simple import procedure which allows the import of a CSV file into an existing table. You can select the delimiter, record separator, escape character and field enclosure character. Excel exports with no field enclosure character (usually double quotes) so I figured I would just blank it out and the import would be flawless. But phpMyAdmin didn’t like having no field enclosure character and threw an error. Seemed like a simple problem to fix, just modify the Excel CSV output and we’re good.

And that is when I arrived in hell. Excel gives no (not 2, not 1, none!) options for CSV export. What they give you is all you get. I guess they figure you will only output number based spreadsheets to CSV but the lack of field enclosure wreaks havoc on anyone trying to output data with a comma in it. How are you supposed to know if the comma is part of the field or the field separator? My simple export from Excel to MySQL suddenly became something that was virtually impossible.

I’m not sure if Microsoft is trying to dissuade use of the CSV file format but it sure seems that they are not making it easy. I know we live in a world of XML but CSV is still used as a workhorse for those simple import and export tasks. It seems far more baffling when Excel’s CSV import features are actually quite robust.

In searching high and low, I found a truck load of small utilities that claimed to convert every format under the sun to MySQL. Each one costing at least $30 with no real track record or history. I’m not balking at the $30 but if I’m going to pay some money I want to be sure the tool is going to do what I need it to.

Being a PHP developer I knew how easy CSV files were to manipulate in PHP so I decided to see if anyone had come upon the same problem. At last some answers! I found PHP CSV Importer 3 on HotScripts. This small php script makes the process of importing a CSV file into MySQL simple as ever. It steps you through selecting the CSV file, entering the MySQL database information, select the table to import to, seeing a preview of the data before import. It even allows you to map the various CSV columns to MySQL table columns.

I’m relieved to finally find a worthy solution to the simple task of importing a CSV file into MySQL.

There are many ways to do rollover menus. Some people would fight to the death over their favourite way to do things. I’m not going to argue this is the best way but the simplest when using the CMS package Joomla.

This tutorial requires the Extended Menu module (which I recommend by itself as essential for any Joomla install).

Menu Images as sprites

Sprites are becoming a preferred method for storing small graphics to be displayed on a web page. It is basically taking several graphics and merging them into the same file, then extracting them by referring to specific pixel co-ordinates. In terms of the web it can help to reduce image file sizes and more importantly http requests. For more info check out this article about CSS Sprites.

I’ve decided to use this technique to store the different states of a menu image. In-active, rollover and active. As you can see I’ve put each menu state in the same file as exactly the same size, one on top of the other. The measurement that will be important later will be our height which is 44 pixels.

Once you have created your images, upload them into the /images/stories directory of your Joomla install. This is where you can select images for you menu items.

Setup menu

In the Joomla administrator, go to the menu you have created for this effect. Open up the first menu item. On the right hand side you have the option of selecting a menu image. From the drop down list, select the menu image you saved previously and then click save.

Repeat for each menu item you want to be represented by an image.

Extended Menu Module

Next is to configure your Extended Menu module in Joomla. The settings we need to take note of are the following:

1. Change “Menu Name” to the name of the menu you have setup.
2. Menu style should be “Flat List“.
3. Set “Show Menu Icons” to “Image Only (Linked)“.

Click save to save your changes.

At this point if you view the page with your menu, you will see all 3 button states of each menu item. In order to only see the current menu state we need to apply some CSS styles.

CSS Menu Styles

Open up the CSS file for the specific Joomla template you are using and add the following (because my menu is in the header I’m preceding styles with the header ID):

#header ul li {
overflow: hidden;
height: 44px;
float: left;
}


First style here is setting the height of our button. This is essential so that we’re only seeing one state at a time. Then we set the overflow to be hidden. This ensures the non active button states are hidden from view. Floating each item allows us to create a horizontal menu.


#header ul li a {
display: block;
}


Setting the anchor to block ensures that the entire surface area of the link will be clickable. It also makes sure our button fills up the entire space we’re allotted it in the previous declaration.


#header ul li a:hover {
margin-top: -44px;
}


This is the magic part. We’re setting our anchor hover state to slide the image up revealing our next portion of the sprite. We have to do this on the anchor tag as IE6 only works when the hover state is on the anchor tag.


#active_menu {
margin-top: -88px;
}


The Extended Menu module adds an id tag to whichever menu item is active. This allows us to specify a different offset to show the active image state.

And that’s it! With a few simple lines of CSS and our Extended Menu module we’re able to create effective rollover menus with ease.