Home of the Spider

iPhone and Web Development

2009-08-23T08:59:07-07:00

So I bought an iPhone. After being tortured with a BlackBerry that I could never get to work right, I think I deserved it.

It definitely is a cute toy, but my real justification for buying it is business. Having recently gone into business for myself (developing websites - if you need somebody, I'm your guy :),) I needed a tool to stay in touch with clients as much as possible. I also wanted something that would allow me to deal with emergencies, without constantly dragging a laptop around. I hoped the iPhone would allow me to make minor edits and possibly restart a server.

So does it live up to expectations? It does. There are two amazing apps that make the iPhone an icredibly useful business tool. Every web developer and server admin must have them.

The first is ezShare (on iTunes here: link to app) This app can connect to an FTP server, download files to your iPhone, and edit ASCII files. For emergency fixes it's great. The support provided by the developers was excellent, my emails were replied to quickly and intelligently.

The second is Jaduu RDP (available on iTunes here: link to app) This app simply blew me away. You can login to your windows server and it does a very effective job of giving you a very usable UI on the tiny screen. Great if you are need to restart or diagnose issues.

I also use the iPhone to read (and write!) blogs, keep track of my finances, scan barcodes (with an app called RedLaser - very cool,) chat & IM, and follow my favorite teams. Overall, it's a great combination of business tool and fun toy.

Design & Development

2008-10-27T12:39:25-07:00

There's software design, and then there is design. I enjoy software design. It's challenging and fun, testing new ideas and theories, and creativity abounds. Past the design stage, you have to work within the framework of your design. Your creativity and ideas are bounded by that design.

Part of my love for software design, and software development, comes from my experiences as an artist. While I may not be much of an artist, there is nothing like taking a blank sheet of paper (or photoshop canvas) and turning it into something beautiful.

It's like watching your program grow from nothing into a complete program.

So when the opportunity arose to design a new website, I jumped at it. Oh, I'm sure that "professional" designers would find a million things wrong with it. And honestly, I can find plenty wrong with it as well. But I like it, and more importantly, so does my boss.

I spent years focusing on the development end of websites. Its been a great experience doing a little bit of design.

I'll post a link to the site, along with a brief overview of the site, when it goes live.

Item of the Day: QBIX-ART 12.253.151.006 - Bathroom Faucet by KWC

Auto-fixing and Firebug

2008-08-20T16:15:32-07:00

HTML is very forgiving. Its forgiveness is one of the main reasons the web became so successful, as the bar is set very low. You can just throw some text and HTML on the page, and something will display. This is very different than programming, where the bar is pretty high. You throw some text at a compiler, it'll give 954 fatal errors.

Of course, its not HTML itself that’s forgiving, it’s the browsers. The browser is fixing your crummy HTML behind the scenes. Forgot a </table>? No problem, the browser guesses where to add it. While it may guess wrong, its better to display the page wrong, than to not display it at all.

Most web pages on the internet take advantage of this. We don’t make our pages perfect, we just get them to display correctly. As soon as it looks correct, we're done, and we don’t worry about how much work the browser is doing to fix up our work.

This auto-fixing, as I call it because I don’t know the technical term, can lead to some quite subtle bugs. When the browser guesses wrong, its difficult to know how the browser fixed your HTML, making it difficult to know where you went wrong. Validation would work in many cases, but then I'd have to fix the other 954 validation errors, which I'm not really interested in doing.

Enter Firebug. Firebug can show you the HTML, after the browser fixes it! Nice. What wasn't so nice was what the browsers were doing to my HTML.

First, what I did wrong. The header and footer of my site is table based, but the page content I'm creating is styled Div's. I forgot to put the <tr><td> and </td></tr> to complete the table for the layout.

Here is the HTML:

<table>
<div class="page">
<h1>title</h1>
<div class="content">content</div>
<div class="morecontent">more content</div>
</div>
</table>

The problem I was having was that the CSS was not styling this page properly. The H1 tag and Div.content were style correctly, but not Div.morecontent.

Firebug to the rescue! Take a look at how the browser fixed my HTML:

<table><tr><td>
<div class="page">
<h1>title</h1>
<div class="content">content</div>
</div></td></tr>
<tr><td><div>
<div class="morecontent">more content</div>
</div>
</td></tr></table>

Huh?! It chopped my Div.page in half, and created 2 rows in my layout table, instead of one! Simply adding the <tr><td> and </td></tr> fixed it, but that is one unexpected fix.

Item of the Day: American Themes 117-V36 - Bathroom Vanity by Fairmont Designs

Query of Queries in Coldfusion MX

2008-07-30T12:46:13-07:00

I recently started working on converting my messy, legacy, procedural code to CFC's. Lets just say I love CFC's. It makes coding a joy, and maintenance a breeze.

I wrote one component for categories. When you load this component, it loads all information for this category, including a list all sub-categories and products in this category. The number of products in the category are used in various places throughout the site when I render a link to the category, so I pull the products when the category is loaded.

One of the features of the site is a price filter, allowing you to view products within a specific price range. Because I load all the products when the category is loaded, rather than going back to the database to get the products matching the filter, I use Query of Queries to get only the matching products from the original query.

However, a customer pointed out that the price filter returning incorrect results. Say you filtered the results to view products under $20, it would show all products where the price began with a 1. The customer, who is a web developer for a large accouting firm, suggested that the price was being stored as a text string, and this result was because it was doing a text comparison, not a numeric comparison. I know that the database is storing it as a decimal, but it got me thinking about my Query of Queries, and how Coldfusion is assigning data types to the columns.

A little research showed me a big issue. Coldfusion MX does not allow you to assign the data type of the columns in a query (later versions do allow you to, but I haven't tested it with Query of Queries.) There is also almost no documentation about which Coldfusion functions can be used in QoQ, aside from UPPER() and LOWER(). And for reasons I'm not quite sure about, possibly because the field had 4 numbers after the decimal??, Coldfusion decide my price was a text field, and there was nothing I could do about it.

To solve this, I have to something thats truly a last resort. I actually loop through all the products, build a list of matching products and the QoQ pulls only those products. I know thats not the "right" way to do things, but I really wanted to avoid having to run another query to pull the products from the database.

Item of the Day: Blancodiamond 511-709 - Blanco Sink Silgranit

Guided Navigation, the Wrong Way

2008-06-12T10:53:50-07:00

We sell sinks, kitchen sinks and bathroom sinks. Shopping for sinks is not easy, there are many choices and its sometimes hard to know if a sink matches your needs.

Guided navigation is the perfect answer for this. By specifying exactly what you need, we display to you only the matching results. This is how we do it on our bathroom vanity finder and air tubs & whirlpool finder.

However, the results returned by the finder are only as good as the data entered, and data entry can be a big job. Updating close to 900 kitchen sinks with the navigation data is a big job. Enter my big idea.

Our static navigation (thats what I call my previous navigation) was hierarchal, and forced you to choose category after category before showing you products. For kitchen sinks, you would first choose the material, e.g. Stainless Steel Sinks, then you'd choose a brand, e.g. Elkay, then you'd choose the mounting, e.g. Undermount, then you'd choose how many bowls you want, e.g. Single Bowl, and then you'd finally get a list of sinks to choose from.

Certainly a pain in the neck. But if you look closely, those categories give you alot of information about the product. My idea was to collapse all the categories into a set of combinable categories that act as a pseudo guided navigation. You can choose to view all Single Bowl Sinks, and you'll see all sinks in a category "Single Bowl", regardless of brand or any other sub or parent category that may exist. Or you can view Stainless Steel Single Bowl Sinks, and then change your view to Stainless Steel Double Bowl Sinks. And you're always seeing products that match your choices.

In a way, the categories became tags, giving information about the sinks, not forcing you to navigate with them.

How do I do this? Using my two favorite MySQL functions, GROUP_CONCAT and FIND_IN_SET. GROUP_CONCAT allows me to group the categories by name, and get a list of the CategoryID's for all the matching categories. For example, Double Bowl. There are say 15 categories named "Double Bowl" (remember there is one for each manufacturer,) GROUP_CONCAT will give me a comma delimited list of all of them.

FIND_IN_SET I use to pull the products in categories matching the ones currently selected. For example, say you want to see all Apron sinks. There are no products directly in the category Apron sinks, they are all in sub-categories (about 3 levels down.) Using FIND_IN_SET to match the selected category or categories to the category tree saved in each category, I can get all products that match.

Item of the Day: Hatbox 12 - Vessel Sink by Waterdecor

Coldfusion CFC Local Variables

2008-05-28T12:48:03-07:00

I'm embarrassed to admit that I haven't done much development with CFC's. Considering my background as a Java developer, there really is no excuse.

So I'm trying to make up for lost time. Almost all the development I'm doing these days involves CFC's. Many times I'm moving existing code in to new CFC's, but the benefits are great. Its the single most important feature in the language.

Of course, my CFC honeymoon came to a crash ending. I have a component that certain information on each link on the site. The data is stored in a database, but because there are many lookups for each page rendered, I didn't want to do a database lookup. Instead, I created a component that stores the data in a struct, keyed on the URL. The component is stored in the Application scope, so the data is pulled once, and the lookup happens in the component.

Each element in the struct is actually another struct with a bunch of information regarding that link. The function urlLookup first initializes the return variable called "info"

<cfset info = "">

then does the lookup

<cfif structKeyExists(urls, key)> <cfset info = urls["#key#"]> <cfset info.foundResult = true>  </cfif>

because I'm expecting a struct from this function, if no URL was found, I create a struct and set the foundResult to false

<cfif info is ""> <cfset info = StructNew()> <cfset info.foundResult = false> </cfif>

then return info

<cfreturn info>

Mysteriously, I kept getting errors "Element FOUNDRESULT is undefined in URLS". Can you spot the error? Remember, this object is in the application scope, so many requests are hitting it at once.

The problem is in this line

<cfset info = "">

the variable "info" is a global variable, not local to the function. If a second request enters the function before a previous request finishes, it re-initializes the global variable "info," which is then returned. FOUNDRESULT will not be found because the variable is an empty string!

The solution is a to add a little keyword "var," so the line of code looks like this

<cfset var info = "">

this makes the variable local to the function, so each call to the function creates a new variable local to that call. It is recommended that all variables, including query names, be initialized with the var keyword (referred to as "varing" your variables.)

Item of the Day: KWC Domo 10.061.033 - Kitchen Faucet from KWC

Generating CSS for Firefox

2008-05-27T11:27:17-07:00

There are many reasons why you want to keep the CSS in a separate file. The benefits are clear, easier to manage, easier to apply to multiple pages, cacheable, etc.

Recently, we redid our Hansgrohe page. See the left side column with all the categories? The width of that column changes depending on whether you're viewing the main Hansgrohe page, or a category page. Because the style is exactly the same and the only difference is the width, I didn't want to create another stylesheet just for the category page.

Instead, I made the CSS page a ColdFusion page, and I pass along a flag to indicate what the width should be. There is one <cfif> tag looking at that flag and setting the appropriate width. The resulting CSS is the exact same, just the URL now ends in ".cfm" instead of ".css".

In IE, everything is wonderful. It parses the file and applies the styles. In FireFox, not so good. No good at all. It refuses to look at the file as a stylesheet.

The solution is to tell FireFox that it's a CSS file. You do this by adding this line of code:

Thats all. You can translate that line to the language of your choice.

Item of the Day: Iperbole Monoblock 5131.101 - Bathroom Faucets by Porcher

Coldfusion CFC in Sub-folders

2008-05-21T10:33:41-07:00

Its one of those little things that can make the all the difference.

I manage a bunch of websites. By far the most confusing one is the one that has all the files stored in the root folder. Why is this so confusing? Because you cannot gain any understanding of the relationship between the files just by looking at the files and directory structure.

A properly structured directory structure can tell me so much about the files without reading them. I can guess what a file in "webroot/shopping-cart/google-checkout/callback" should do, even without opening the file. Finding and fixing bugs is so much easier in a properly structured directory.

As I began doing more and more of my new development in CFC's, this issue bothered me. I know how to instanciate an CFC in the root folder. Say you have a CFC "shoppingCart.cfc" in the root, you instanciate it like this: <cfset cart = CreateObject("component", "shoppingCart")>. But I didn't know how to instanciate a CFC in sub-folders.

As it turns out, its quite simple (that seems to be a ColdFusion mantra.) Say our shopping cart CFC is located in "webroot/siteComponents/cart/shoppingCart.cfc". To instanciate, you do this:
<cfset cart = CreateObject("component", "siteComponents.cart.shoppingCart")>

Item of the Day: Blancodiamond 511-708 - Silgranit Kitchen Sink by Blanco

Hansgrohe Showers & Faucets

2008-05-20T09:51:10-07:00

I always enjoyed a little bit of design. Being a programmer, design work stimulates a different part of my brain, one that I dont use on a daily basis. However, professional web design takes experience and practice and I had neither, so my meager design skills were relegated to my own websites. I'll show you 2, so you understand what I'm talking about:

1. MP3 Shiur: www.mp3shiur.com
2. XDS Tech: www.xdstech.com

As I said, not too impressive.

Luckily for me, I managed to convince my boss to let me try my hand at designing a page for Hansgrohe, a high-end faucet and shower company. Our standard brand page is pretty boring, so we wanted something more engaging.

This is our new Hansgrohe page.

I like to think that I was successful. Not that I think its the webs most beautiful page, but its a pleasant engaging page. Have any ideas on how I can improve the page? Let me know in the comments.

But the real question is, does it sell?

Item of the Day: Hansgrohe Axor Starck 10111 by Hansgrohe - Designed by Axor Starck

Managed Price Settings

2007-09-06T08:17:07-07:00

As our websites get more complex, our need for pricing rules grew as well. Simply displaying the price wouldn't cut it, as some manufacturers enforce a MAP - minimum advertised price. For some products, we do not display any price, only to call to purchase. And some brands need to be excluded from sales.

And some of these settings change depending on other settings. For example, we don't want to display "Call for Pricing" when there is nobody manning the phones.

Rather than changing these settings on a product by product basis, I built a system that applies rules based on brand and department. The appropriate rule is selected when the product is displayed, and the price is calculated in real-time off of the product list price.

Sounds good, but there was a problem. When exporting our entire product line for the Froogle feed, the rule selection was causing the script to run for way too long. Rule selection involves knowing the brand and department tree (e.g. bath » faucets » single hole,) then selecting the most specific rule.

I needed a way to retrieve the appropriate rule in the original database query result, not looking up the rules product by product. So I do something I dislike doing, I save the key of the appropriate rule on the product record. Why do I dislike doing that? Saving that key on the product record makes it difficult to debug when something goes wrong. You have no when of knowing when that key was saved, or why. Selecting the appropriate rule in real-time makes it much easier to fix problems with prices, as you can know exactly which rule was selected, why the system selected it, and what effect it had.

Item of the Day: Minimal Floor Mount Tub Filler 0475 - Bath Tub Filler by Lacava Design