I want to point out a great article by Scot Hacker, about his experiences migrating to a Django & Python based platform. My company is in the process of a similar migration itself for similar reasons, if not quite the same background. Our new website is now written completely in Python using the Django web framework, and we are now in the process of adding some new features and content. We are also working on some new projects written using Django, which will be launched in the next month or two.

Recently I have started using Michael J. I. Jackson’s Shadowbox.js on some of my client’s sites. On site in particular had an image gallery where you could click on a thumbnail to view a larger version of the image, and some had associated videos as well.

The goal there was to have a single link that would be updated to point to the correct flash video depending on the thumbnail being clicked (the link being hidden if no video was associated with that thumbnail). After a few frustrated minutes, I discovered that Shadowbox.setup() needs to be called after changing the link’s href attribute so that the link will trigger the correct video. Since the initially the link didn’t point to a video at all, I also passed {skipSetup: true} to Shadowbox.init().

If you are working on a project with someone else, whether it’s doing web development or something else, using a revision control system, such as subversion or CVS, will save you time. I have worked on project where there were only two developers, and we still had problems coordinating who was changing which files. A revision control system will allow you focus on the code, instead of worrying about overwriting someone else’s changes.

Hack Attack: How to set up a personal home Subversion server

Team System: Setting up a Subversion Server under Windows

OnLAMP: Version Control with Subversion: Introduction

As the saying goes, “Work smarter, not harder.” Here’s how I saved quite a bit of tedious HTML form work on one of my recent database-driven website projects.

For one of my recent projects, the Jamaica Football Database, I needed to create many forms for different types of records for players, staff, referees, teams, parishes, and so on. Each type of record has a corresponding database table within the MySQL database. Instead of writing all of that HTML by hand, I created two PHP classes to handle the generation of the forms and the processing of their submission. I used code generated by the PHP Object Generator for this project, which was the glue between these two classes and the database.

The first class, which I named ‘Form’, reads the field types from the selected table in the database and outputted HTML input, select, or textarea elements based on the field type. The class constructor accepts several other optional parameters. This class could also handle file uploads for fields with the VARCHAR type and a specific suffix in the field name.

• A primary key value, to identify the record to retrieve default values from.
• An array of the fields wanted from the table. This was added so that I could arrange different parts of the form separately.
• An array of fields from the table that should be hidden fields in the form.
• An array of text descriptions for the form fields.
• An array of fields that should be ignored (so I could get all fields except for specific ones).

The second class, which was named ‘FormSubmit’, handles adding or editing records within the database. It reads the field list from the selected table and retrieves POST parameters that match the field names. It’s constructor also accepted an optional array of required fields, and an array of field descriptions (for error message purposes).

Writing these classes instead of writing the forms and form handing code by hand ended up saving quite a bit of time and was simpler that I initially thought it would be.

I thought that today I would show how to create a shadow beneath a div.

First create an image of the shadow effect, and slice it into three pieces. The two corners should be the same size and should only be as wide as the curve of the corner necessitates. The third image will be a 1 pixel wide gradient that is as tall as the shadow effect you want is. This is the image that I used for the sample above, and for the dimensions in the CSS below.

The following HTML should be at the bottom and within the div that you want the shadow effect for:

<div class="shadow-middle">
  <div class="shadow-left"></div>
</div>
<div class="shadow-right"></div>

Then you will need the following CSS:

.shadow-middle {
  width: 100%;
  height: 21px;
  background: transparent url(middle.gif) repeat-x;
  position: absolute;
  bottom: -21px;
  left: 0px;
}
.shadow-left {
  width: 36px;
  height: 21px;
  background: transparent url(left.gif) no-repeat;
}
.shadow-right {
  position: absolute;
  background: transparent url(right.gif) no-repeat;
  width: 36px;
  height: 21px;
  bottom: -21px;
  right: 0px;
}

Also make sure that the enclosing div has a relative position, so that the above CSS forces the shadow just below the bottom of it. If you have a border around your enclosing div, make sure you adjust the bottom positioning to move the shadow below it too. Enjoy!

Update: I’m so glad you don’t have to do this sort of thing any more.