cftopper.com

Another reason to hate IE

Like we need another reason to hate IE. But here it is.

I recently implemented rounded edges throughout Teamwork Project Manager and it's a painful process involving nested divs and workarounds for IE6 glitches.

Today I was procrastinating on Digg.com and I stopped to admire the rounded edges on their notification bar.

Digg.com - nice rounded edges

I decided to look at the page source to to see their nested divs - are they using 4 nested divs for maximum flexibility bar with rounded edges - 1 div for each corner, or, where they using just 2 divs - one for each side with a height limitation?

The answer perplexed me - They just had something like <div id="announce"><p>Check out...</p></div>.

I thought "they must be using the <P> tag as a container with a background image" so I download their CSS source code and was confounded to see this:

     -moz-border-radius: 1em;
border-radius: 1em;

What in the blazes is that? CSS supports rounded edges? My pain was for nought? Could I have just shoved these 2 lines of code in and saved myself hours of work?

In a perfect world, a world without Internet Explorer, then yes, I could. If you are using FireFox, this entire post will have rounded edges. If you are using IE, you'll just see a plain box.

Here you see the same announcement banner in IE - notice anything different?

Digg.com - no rounded edges in IE

Here is another example.

Rounded edges browser comparison
I hereby confirm, IE sucks.
Tags: CSS | Rant | WebDev

We have launched!

We have finally launched!!

And what a wild ride it has been getting everything ready.

Check out Teamwork Project Manager at www.teamworkpm.net

The Website - Final Days

About a 5 days ago we had this marketing website almost complete. We stood back and looked at what we had created... and we decided... it sucked. Against the pressure of the looming launch date chiseled in stone on the preview website, we started again. We threw away the old website and said to our designer, Adam, "Hey Buddy, um... we don't like the site. Can you cook us up something prettier?".

Lo and behold, he disappeared off the face of the Earth for 2 days and returned with the new website design. And we saw that it was good. We worked round the clock slicing and dicing, XHTMLizing and CSSing, content-managing, tweaking and testing.

A few hours behind the intended launch time, we made the critial change to the IIS web server and set the new site live, flying open the doors allowing all to sign up for the shiny new kid on the block - Teamwork Project Manager.

Here we are in my office seconds after putting the website live. We are tired, we are hungry, we have sore backs and aching asses... but we're happy. That's me, Topper, on the left and Dan on the right.
We are holding the camera in our out-stretched hands (attempt number 10 to take a photo with both of us in the frame. The bad quality reflects that this was taken on my trusty K750i camera phone.)



We still have a lot to work to do on this website of course but we are proud of what we have created.

Teamwork Project Manager - Final Days

We started making some important changes with just days left to launch.

For example, our testing had revealed that user were getting confused between project view and top-level/dashboard view. They would just blink wildly and we've have to explain that you have to click-into a project. Also in project view they wondered where all the other projects had gone.

We fixed this by redesigning the navigation system into two bands of tabs in stead of just one with and extra "Project View" tab at the top level to make it obvious that the user was now indeed, in project view. It's so much more intuitive this way.

What else - oh yes, Dan whinged on about the need for starring of projects for so long that I finally relented. I didn't plan on getting this done for launch but I'm very glad I did now. Now, when you are members of a whole host of projects and the dashboard is getting a little busy, the user can switch to custom view where he will only see the projects he has starred.

Also when there are loads of active projects such as here at Digital Crew, we now only list the projects that have been active in the last 14 days on the sidebar. Other projects can then be shown by clicking "All projects". It looks so simple but we had a good 10 minute discussion over the best way to present this to the user. We considered tabs for "Recent Projects" and "All Projects"  but in the end, I think the way we have it now is much better.

TeamworkPM is launched at last and Dan is a happy little camper

Après Launch

This morning I woke up and eagerly turned on the computer, anxious to see if we got any sign-ups or feedback. I was delighted to see a very positive email - " I have started playing with the app and am incredibly impressed with the ui and the streamlined approach to project management.". He then asked us to provide a roadmap and listed a few more features he would love to see.

This type of feedback just hours after launch is great motivation for me. I'm going to get busy cooking up the extra feature this guy wants and serve it hot! Stay tuned.

TeamworkPM Launched - Topper has his legs up! A job well done.

PS. I will be adding a roadmap page to the Teamwork site before the end of the day,
PSS. I just added a "Chat Now" link in the footer of this website so feel free to get in touch.

Check out Teamwork Project Manager at www.teamworkpm.net

Secret Project Revealed

I've been working on a secretish project for a while now. Featuring all the ajax stuff you know and love.

More at: www.teamworkpm.net
Tags: WebDev

Google Video: MySQL Performance Tuning Best Practices

I stumbled upon this last night and it's excellent.



If your too lazy to watch this, just take this one tip from me - use the MySQL Administrator tool to increase the Cache Size setting under the Performance tab. You will notice immediate speed-up on heavily-loaded servers where the 32Mb cache just wasn't enough.

Increase you MySQL Cache size
Tags: MySQL | Tips | WebDev

My Lastest Masterpiece: ProFlashDownload

Cue Drumroll... my latest ColdFusion component is complete!

ProFlashDownload allows developers to make a list of files available for download to a user. These files will download with a progress bar and the developer can have a page called in the background when a file has completed downloading.

ProFlashDownload - Click for real demo

I was specifically asked to develop this component based on my existing work on ProFlashUpload.

Just like ProFlashUpload, ProFlashDownload is highly customizable, easy-to-use and easy-to-program.

Sidenote: You would think that Flash programming is browser-independent, but with this sucker, I had a bunch of issues with Internet Explorer causing all sorts of strange behaviour that I had to tediously program around.

Sidenote 2: It has been suggested that I combine ProFlashDownload and ProFlashUpload to make the mother of all web based file management utilities... and i'm considering it.

I'll be making this tag available for purchase at $50 on www.cftagstore.com in the coming days.

GZip Encode your CFML

There is an excellent article in the latest ColdFusion Developers Journal on how to enable GZip compression on your ColdFusion pages for free.
First, HTTP Compression is a great way to speed up your Website and lower bandwidth utilization all at the same time. In this example, your ColdFusion server (6.1 and above) will encode CFML output using GZIP and have the browser decompress this data on the fly. In a corporate environment, Webmasters may choose to go with third-party software such as Port80 Software's httpZip, which can compress other files as well, including .js, .css, and your HTML files. In this example, we are only compressing the generated HTML output from a .cfm template execution.

I just implemented it on one of our servers in 2 minutes. It reduced a 7Kb page to only 2306 bytes.
Date: Wed, 28 Mar 2007 23:01:45 GMT
Server: Microsoft-IIS/6.0
Content-Type: text/html; charset=UTF-8
Content-Encoding: gzip
Content-Length: 2306

200 OK
Tags: ColdFusion | Tips | WebDev

Image Gallery in 30 Seconds

How long would it take you to create an image gallery on your client's website?

Even using off-the-shelve scripts or purchased components, your probably still looking at an hours work, minimum, right? Maybe even a half-day or days work when you take into consideration the development of the administration section for the gallery.

How about reducing that time to 30 seconds?

With the plug-in architecture we developed for our in-house content management system, TeamworkCMS, you can! See for yourself...




Complete with administration. The database tables are created for you automatically when you install your first gallery. All aspects of the gallery including image size, thumbnail size and the CSS can be easily tweaked to suit your client's website.

This is just one of a myriad of page add-ons that we have developed.
Plug-n-play web development = saved time = money.

We will be releasing TeamworkCMS to the ColdFusion community FOR FREE in the coming weeks. BETA Testers wanted. Comments, feedback and suggestions would be great.

Topper Contributes to Open Source

I *think* this is the first time I have ever actually contributed to an Open Source project. Sure, I've given out free code, but I've never actually contributed to a community based software project until today.

I didn't want to have to use a CFX tag for image resizing anymore (even If I did make CFX_Jimage) so I tracked down Rick Root's ImageCFC.

In the project I was working on, I needed to create thumbnails that were exactly 90x90 with no whitespace from any size of source image. The source image could be any size.

To do this correctly, you need to figure out whether to resize on the X or Y axis, do so, then and clip off the remaining bit.

Figuring out the Axis to Resize on


You have to get the scale of the destination width over the current width and compare it to the destination height over the current height:

if( deltaX/currX < deltaY/currY ) then Resize on X Axis
else Resize on Y Axis

Then you have to clip the center piece of the remaining image:

        <cfset cropOffsetX = max( Int( (imgInfo.width/2) - (newWidth/2) ), 0 )>
        <cfset cropOffsetY = max( Int( (imgInfo.height/2) - (newHeight/2) ), 0 )>

It was a little tricky to get right (mainly because my brain was refusing to cooperate yesterday), but eventually I cracked it and it work's perfectly.

I submitted my new resizeBestFit function to Rick. Within a few short hours, he has integrated it nicely into the existing resize function and added an extra option, cropToExact.

ImageCFC Version 2.14 is available now. Cudos Rick.
Tags: ColdFusion | Tools | WebDev

I feel like crying

So I go away and create a lovely new website for the client. I use class sub-selectors and relative positioning to achieve some of the complex dynamic layouts. The project is just about finished and I put a preview version online for the client. The website works perfectly in Firefox and IE7.

Inevitably, the client calls:

"Peter, why are all the links blue? That's not what we want!".

"No, the links (on page X, section Y) are white. What do you mean? Try refreshing.. Hit control-F5..."

"No, they are still blue... and another thing...".

At this point I realize that they are using IE 5.5... my heart sinks.

I fire up IE 5.5, which barely works now that I've got IE 7 installed, and am treated to a plethora of ugly.

I can't tell the client to upgrade. What to do? We need to wrap up this project asap.
I have to undo all my CSS-niceness, and create complex layouts using logic and tables instead of intelligent CSS. I have to redo CSS first element sub-selectors and painfully hack the stylesheet with IE only hacks.

This is the state of the web today and this is what makes web design such a difficult business to operate in. This is what sucks the joy out of being a web developer.

Update


I stopped Whining, got stuck in and got it all working with IE6. Painful, but it was easier than I thought it would be. Here's what I did:

  1. <cfif Find("MSIE 6",CGI.HTTP_USER_AGENT) OR Find("MSIE 5",CGI.HTTP_USER_AGENT)>
  2.         <cfabort>
  3. </cfif>


Only messing! Messing
Tags: WebDev

Teamwork CMS Demo Online!

This weekend I got the thumb out and put the documentation website we build for our own documentation portal up on CFTagStore.com as a full product complete with CMS. As part of putting the product online, I also setup a working demo of the Portal and CMS.

 This is the first time that we have put a complete working demo of the latest version of our Teamwork Content Management System online for the general public to play with.

I invite you to log in and mess around with TeamworkCMS and then to let us know what you think:

The TeamworkCMS Demo is available here:
http://demos.digital-crew.com/documentationportal/cms/

Login with "admin" and password "admin".

You can view the pages you add or edit on the Demo Website here:
http://demos.digital-crew.com/documentationportal/

The database and codebase will reset automatically every 2 days (or when we get complaints that some Ejit has messed it up too much).

I Propose an Extension to CSS

We all know that CSS is absolutely fantastic. But it is far from perfect. To achieve many effects, the programmer has to add divs around existing elements and layout the order of divs on the page in a format that will suit his intended design.

Wouldn't it be great if you could just write out loads of elements such as divs, UL/OL lists etc un-nested on the page, then the stylesheet would be responsible for the nesting and element order.

The would completely, separate the code and layout, for once and for all!

How to do this?


How about adding a elementOrder CSS attribute? Maybe there is a better way. Hell, maybe it's planned already for the next version of CSS.

It would be used to specify the order that elements should be considered to appear on the page and the nesting structure of elements.

It could also insert new div elements into the page.

For example:

body{
        elementOrder: h1, #search, #mainarea
}
#mainarea{
        elementOrder: #nav, #main
}

In this example, mainarea could be a new imaginary holder for the navigation and main body.


A More Practical Example


Instead of:
<div id="container">

    <div id="header">
        <h1><a href="index.cfm">My Site</a></h1>
        <div id="search">
            <div><h2>Search</h2></div>
            <div><form><input type="text" name="p"><input type="submit"></form></div>
        </div>
    </div>

    <div id="mainarea">

          <ul id="nav"><li>NAV HERE</li></ul>
          <div id="copy">Page content here</div>

    </div>

</div>

Use:

<h1 id="sitename"><a href="index.cfm">My Site</a></h1>
<div id="search">
    <div><h2>Search</h2></div>
    <div><form><input type="text" name="p"><input type="submit"></form></div>
</div>
<ul id="nav"><li>NAV HERE</li></ul>
<div id="copy">Page content here</div>

These 4 elements could be in any order.
This stylesheet would control the order and nesting:

#body{
    elementOrder: #container;
}
#container{
    elementOrder: #header, #mainarea;
}
#header{
    elementOrder: h1#sitename, #search;
}
#mainarea{
    elementOrder: #nav, #copy
}



What would all this mean?


Well, you could COMPLETELY change a site with no limits just by modifying the CSS. You would never have to worry about the actual code layout again.

Am I completely mad or is this a good idea?
Tags: Ideas | WebDev

Navicat - Top Dog MySQL Manager

Here at Digital Crew, we use MySQL for just about everything only using other database types when clients force us to... yeuck. MySQL Rocks. But you know that.

What you mightn't know is that there is an absolutely awesome program for managing MySQl called Navicat. I have just been saved hours of work of tedious syncronising data between two databases using one of Navicat's many excellent features.

Navicat

This program is simply excellent - it will pay for itself in no time and has my highest endorsement.
Tags: My Work | Tools | WebDev

How to Beat Form Spam-bots

...without resorting to an annoying CAPTCHA.

Those bloody form spam bots were driving our clients crazy with hundred of bs emails arriving every day. I came up with this simple but effective method to beat these form spam-bots.

Part 1 - Duping New Bots


Warning: This method assumes needs JavaScript enabled and is thus not blah-blah compliant.

  1. Change the action of your form to "about:blank". (Remember the real action for later.) Robots indexing this will now go to "about:blank" instead of your action handler page.
  2. If your form has a JavaScript validation function, add this line just before the form is OKed or submitted:

    document.[form name].action = "[path to form handler page]"

    Otherwise just stick in something like this in the form:

    onsubmit="this.action='[Path to handler page here]'"

It's pretty simple, but since implementing this at the crew, we haven't encountered any robots smart enough to figure out that we are duping them with the about:blank. If the robots evolve, then so will we.

Part 2 - Blocking Old Bots (they're using Form Caching!)


Part 1 will prevent robots indexing your form action URL; but what about the robots who have already indexed your form and are storing the form details in their database? Here's how to block them:

  1. Add this line to your form:

    <input type="hidden" name="formSecurity" value="<cfoutput>#Hash( DateFormat( now(), "dd/mm/yyyy" ) & "YOUR_SECRET_KEY" )#</cfoutput>"/>

  2. In your handler page insert the following at the start:

    <!--- FORM SECURITY --->
    <cfif NOT isdefined( "FORM.formSecurity" ) OR ( FORM.formSecurity IS NOT Hash( DateFormat( now(), "dd/mm/yyyy" ) & "YOUR_SECRET_KEY" ) )>
        <cfabort>
    </cfif>

Tada! Your done. Welcome to zero-spam.
Alternative method: Cut the internet cable running out of Nigeria.

The GoogleBot is retarded.

Stupid GoogleBot The Googlebot is retarded.

Why? Because it has absolutely no idea what a base href tag is for.

I use a base href on all my sites to make internal linking much easier - no matter what the URL for the page on the site looks like, the link to another page will remain the same.

For those who don't know a base href looks like this <base href="">. When you use a base href on your site, all relative links are from that URL. So a link to "index.cfm" from the URL "page/somesubfolder/" will go to "index.cfm" instead of "page/somesubfolder/index.cfm".

But Mr. G, I-control-the-world, A. Bottie chooses to plough right on throught my base href scoffing at my pityful attempt to direct it to the content.

This is why I am continually getting error reports from sites where I have something like <cfparam name="URL.id" type="numeric">

Instead of getting a normal link like index.cfm/page/viewproduct/id/34, the bot is interpreting URLs like index.cfm/page/viewcat/index.cfm/viewproduct/34 and this is generating an error report which is automatically emailed to me every time the Googlebot goes into action on one of our client sites.

For FS, how hard is it for the Google engineers to intrerpret that there is a standard base href on the page. Or is it that the Googlebot is hedging it bets and checking to see if the base href was a mistake and there IS a valid page at it's conjured link URL.

ps. I'll probably get a permanent thumbs down in the Google ranking for this - Mr G.Bot tie knows when hes being insulted and he doesn't like it. You don't fuck with the bot - he controls the Internet, he can break you like that Messing.
Tags: Rant | WebDev

Good Linking

Never use words like "here" as a link. The link should have context.

Links should be written is this format:


...instead of this format:

Download a copy of Details of Irish Windfarms in pdf format here.
Download a copy of Details of Irish Windfarms in excel format here. 

This is more than my opinion... W3C content authoring guide.
Tags: WebDev

IE7 Javascript Error Reporting Still Sucks

Don't get me wrong, I like Internet Explorer 7 and I applaud the effort made by the IE team but guys could you not have improved the shoddy error reporting.

Not long ago, I used Internet Explorer almost exclusively and one of the reasons Firefox has stolen my soul is down to it's developer-friendly error reporting and debugging.

What prompted this rant was an error I encountered first thing this morning on my current project. Internet Explorer simply said, "Hey dipship, you have an error, go figure". Also IE seems to displays the exact same error message, 'Object missing', for a myriad of different scenarios.

IE7 Error Message


In Contrast

Firefox on the other hand, says "Yo! Little problem on line 1. There's no init() method.". It tells me exactly what the problem is! No thinking involved. Time saved. And it also provides a link to bring up the code, be in in the current file or on some dynamically generated JavaScript file. Very handy.

Firefox Error Message


Appeal to the IE7 Team

IE Team, please help us developers. Is there some developer extension for IE7 I don't know about? I just searched and installed the developer toolbar for IE7; it's good but alas, it doesn't provide better debugging services.

Final IE Rant

One final rant: IE7 should lose the annoying Error on Page message in the bottom left of the browser.

IE7 - Error On Page

It only advertises how crummy some developers are (notice I didn't say we) and frightens little children Messing.

 

Tags: Rant | WebDev

Good coding style #1: Use Whitespace

Coding readability is important! But only to to a degree - when people get religious on this issue I just zone out.

IMHO, if you have decided that you are a professional programmer, why not be the best programmer you can be. Try to evolve everyday. Look for things to learn. Improve, improve, improve. Get faster, learn the shortcuts. Every little time saver adds up.

#1 Use Whitespace

Which is easier to read, the first SQL statement or the second. Also most editors will allow the use of control-left, control-right to skip keywords with spaces between them but without the spaces, it skips the entire line.

There are basic examples, and as-such probably bad examples, when more code is involved the readability gets much harder when spaces aren't used.

SELECT moduletitle,modulelongtitle,moduleStatus,modulelevel
FROM modules
WHERE moduleId=#moduleId#
or
SELECT moduletitle, modulelongtitle, moduleStatus, modulelevel
FROM modules
WHERE moduleId = #moduleId#
 
Example 2:
html+='<option value="'+this.freqOptionVals[i]+'">'+this.freqOptions[i];

or

html += '<option value="' + this.freqOptionVals[i] + '">' + this.freqOptions[i];

You decide.

Tags: ColdFusion | WebDev

HTML Lists have always pissed me off

HTML lists have always pissed me off in 'both' browsers. I figured out for myself that Mozilla uses padding for the default indentation and IE uses margin for this same indentation.

So padding:0; will do nothing to the indent in IE.
And margin:0; will do nothing in Mozilla.

To dump the excessive indent in all browsers and still keep the bullet, use:

    margin:0;
    padding:0 0 0 1em;

I found an article on A List Apart on this just now:

http://alistapart.com/articles/taminglists/
Tags: Tips | WebDev

MySQL error on rename 150

If you ever run into the error message "MySQL error on rename 150" when making changes to your MySQL table, the easiest thing to do to fix this is:

  1. Backup the database
  2. Delete it
  3. Recreate it
  4. Restore it

Basically MySQL has temporary files interfering with the ALTER TABLE process. I has done a load of googling and found comments but no solution - this is posted here to save others some stress.

Update

Be careful with the above advise - you could be getting this error just because you are doing something like trying to link an unsigned int to a signed int. Use the advise above only after you have carefully determined that MySQL is acting the maggot.

Tags: MySQL | Tips | WebDev

..Not the best 'Pages' Design in the World...

..oh no, this is just a tribute! This is the latest Digital Crew database design for storing website pages.

I have evolved this design over the years and I'm pretty happy with this result - this design supports multiple sites, page redirection, page short name (for navigation) and page long name, page HTML (for basic pages or intro text on complex pages), meta information, visibility, security, published status, alternative URLs, alternative files, making page for special (dynamic) processing and the ability to open the page in a new window.

Use it, if you like.

Design view of MySQL 'Pages' table

CREATE TABLE `pages` (
  `pageid` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `siteId` int(11) UNSIGNED NOT NULL DEFAULT '1',
  `pageparentid` int(10) UNSIGNED DEFAULT '0',
  `pageCode` varchar(50) character SET latin1 NOT NULL,
  `pageNavName` varchar(100) character SET latin1 NOT NULL DEFAULT '',
  `pageName` varchar(150) character SET latin1 NOT NULL DEFAULT '',
  `pageHTML` text character SET latin1 NOT NULL,
  `pageDisplayOrder` smallint(5) UNSIGNED NOT NULL DEFAULT '2000',
  `pageIsPublished` tinyint(1) NOT NULL DEFAULT '1',
  `pageDescription` varchar(255) character SET latin1 DEFAULT NULL,
  `pageKeywords` varchar(255) character SET latin1 DEFAULT NULL,
  `pageIsFolder` tinyint(1) UNSIGNED NOT NULL DEFAULT '0',
  `pageIsDynamic` tinyint(1) UNSIGNED NOT NULL DEFAULT '0',
  `pageIsVisible` tinyint(3) UNSIGNED NOT NULL DEFAULT '1',
  `pageIsLocked` tinyint(1) UNSIGNED NOT NULL DEFAULT '0',
  `pageAccess` enum('O','I','A') character SET latin1 NOT NULL DEFAULT 'A' COMMENT 'A=All, I=Logged In, O = Logged Out',
  `pageRedirectPage` varchar(50) character SET latin1 DEFAULT NULL,
  `pageAltFile` varchar(255) character SET latin1 DEFAULT NULL,
  `pageAltURL` varchar(255) character SET latin1 DEFAULT NULL,
  `pageOpenNewWin` tinyint(3) UNSIGNED DEFAULT '0',
  `pageShowOnInPageNav` tinyint(3) UNSIGNED DEFAULT '1'
  PRIMARY KEY  (`pageid`),
  KEY `pageparendId-pageId` (`pageparentid`),
  CONSTRAINT `pageparendId-pageId` FOREIGN KEY (`pageparentid`) REFERENCES `pages` (`pageid`) ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Source Control - 3 months later

For years we knew that we should be using source control. But we weren't. We didn't want the hassle of using source control.

But here's the thing: We make software components for ColdFusion. Some of these components are the cornerstones of our content management solutions which are in turn the cornerstone of our successful website and Intranet development business. In the past, when I made a change to UDI, a component for managing database content, I'd manually copy the code back to a central location. Then I would get the code again when starting a new project. The current version and change log were stored within the main.cfm file of each component. Painful.

What were we thinking?! About 3 months ago, I decided to take the bull by the horns and investigate the incredible complex, tedium world of source control. I got some manuals on Subversion and read a lot about CVS and source control systems. All pretty scary stuff to begin with.

But in truth, with the most excellent amazing fantastically brilliant TortoiseSNV extension for windows, source control is absolutely painless. Made changes? Just right click on the directory and select check-in, provide a short message and your done. Need the latest version, just right click and choose SVN Update. Wow, painless and simple.

And here is the thing I've come to notice, and it's a compelling reason to use source control - and not just because you should. You will be one hundred times more productive. How? You see, with the hassle of maintenance gone, I find myself making hundreds of little fixes and improvements all-the-time now.

If you make software and your not using some sort of proper source control, your officially living in the dark ages.

Tags: ColdFusion | Tips | Tools | WebDev

QueryWizard Version 1.1

Today I made a number of important improvements to the QueryWizard that I started yesterday. Already the QueryWizard is proving to be a useful tool for me. Just unzip this and execute <cf_queryWizard>.

The Query Wizard

I've tried to make the Query Wizard as intelligent as possible.

  • Matching Field Names
    It automatically links up any URL or FORM variables to matching fields. But database fields are often prefixed with the name of the table (at least at DCHQ they always are) so it matches the right hand side of the column name against the variables names.
  • Preview of Field Values
    As you see in the drop down for matching fields I now display a preview of the data that was held in the field when <cf_queryWizard> was executed.
  • Query Name Selection
    The wizard does it best to pick a suitable name for the generated query. If you are INSERTing into the "Monkeys" table, the query will be called "InsertMonkey".
  • Matching indentation level
    You can place <cf_queryWizard> anywhere in your CFM template and the query that is generated in its place will match your indentation keeping everything nice and neat.

Road-map

  • Ability to specify SORT ORDER when doing SELECT
  • Ability to SELECT from multiple tables and specify the join type and clause - this is going to be tricky Messing
  • General improvements to interface including have the generated query not scroll

And with that I'm out of ideas so please download the query wizard and hit me with your suggestions.

Tags: My Work | Tools | WebDev

Javascript: Date.getYear() Gotcha

Working with some older code using firefox whereas during development I would have used IE. It took me a while to track a problem down where a selected date was returning 106 instead of 2006 for the year.

Date.getYear() returns 2006 in IE and 106 in Firefox.

Thats sucks but just use Date.getFullYear() to get around this.

Tags: Tips | WebDev

Fixing the Min-Height Problem

If your a web developer, no doubt your ran into the height/min-height problem. The problem is basically that Internet Explorer treats the CSS height property like the min-height property and doesn't not support the min-height property.

So you can get the behaviour you want in IE, but it looks like shit in Firefox. Or vice-versa.

But Dustin Diaz came up with a solution:

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Tags: WebDev

CF_ProFlashUpload - Live at Last

I've finally released the flash upload component - the development of which I was blogging about here. Took a while for myself and Dan to come up with a good name. We were throwing all sorts of crazy ideas out there. Anyhow, please please go ahead and try it out. The demo is fully functional apart from a banner that asks you to purchase it.

I'm selling this baby for $50 per website - a fair price I think given the amount of work that went into this sucker.

What Is CF_ProFlashUpload? This widget creates a interface that allows your site user to easily upload multiple, even hundreds of files to your server. Each file has an individual progress bar and there is also an overall progress bar. The upload rate is also displayed.

 

The component allows you to use a multiple file upload component of any size as part of any ColdFusion application. It is extremely easy-to-use. You can call the component passing in just the upload directory and nothing else. Or you can use any of the advanced options to customise security options, file-type options and the look-and-feel of the component.

One of the nicest features of this component are per-file progress bars. The upload rate is also displayed along with the overall progress.

The demo is completely functional - just download it and you'll be up and running in minutes.

Accessibility Audit

I just got a professional accessibility audit report on a website I recently developed. I didn't fare too badly - an average score.

What really impressed me was the thoroughness of the report - wherever there was a red flag, there was a very good suggestion on how to fix this as well as notes on why this is an issue.

I've learnt a lot about how to make a website truly accessible and look forward to moving the websites score from average to excellent. It's important to keep learning and strive to be the best developer you can be.

Tags: My Work | WebDev

Heading to Boston

I'm at Dublin airport and I'm just after paying Eircom's extravagant fee of €5 for 1 hour of wireless Internet access - the thieving bastards. I'm on my way to Boston for 4 weeks. The flight leaves in 2 hours time.

One of the highlights of my trip to Boston will no doubt be attending the Boston CFUG meet tomorrow night. I've been in touch with Brian Rinaldi and he says I welcome. He might even be able to arrange 5 minutes for me to show off the multiple file upload component I recently developed.

Aside from all that, I'm wrecked after Ireland's biggest festival, Oxegen, at the weekend. The Red Hot Chilly Peppers rocked. I was also impressed by Feeder.

Saturday was a mud-ridden wash-out but Sunday was great. We were camping and it was hilarious to intermittently see tents take-off in the strong gale with 2 screaming girls jogging after them.

Update

Dan I KNOW you'll get a kick out of this. Some goth style Linux nerds just came up and said "here ya go" and gave me an Ubuntu Linux installation disk. Looks like there are walking through the airport giving them out to anybody with a laptop. I got a strange look from the cute girls across the way when I took the CD. Reminds me of the sandals - you'll know what I mean. Messing

Tags: Musings | My Trips | WebDev

New Digital Crew Showcase Site

At Digital Crew we are busy. So busy our own website is badly neglected. Hell, it's so old, it uses font tags! And it uses our original CMS solution so its pretty hard to manage also.

We've wanted to make the mother-of-all websites for over 2 years now and last year we couldn't settle on a mother-of-all design and so the project stagnated. And eventually was forgotten under our heavy workload.

Recently we made the decision to put up a simple showcase site in place of the current embarrassment. Anything is better that what's there now. Our top priority is to showcase our recent work which I think (somewhat biasedly of courseMessing) is pretty good.

Aside: I'm watching Portugal Vs France right now.... Portugal is losing 1-0 and they just missed a sitter.

Preview of New Digital Crew websiteAdam, our graphic designer has put together the temporary showcase website design for Digital Crew and its not too bad at all for a temporary site. I'm looking forward to putting it up. Here is a tiny preview.

Aside: Update: The match is over. Well done France for getting to the Final.

Aside: Can somebody tell me why Firefox is putting a load of whitespace at the end of the first blog post on this site?

Tags: My Work | WebDev

Google Checkout is US Only

Shit - It looks like we won't get a chance to use Google Checkout after-all. You must have a US Address and bank account. And apparently getting a US bank account is a difficult ordeal these days.
Tags: WebDev

Google Checkout is here!

Google Checkout is here! Google Checkout is here! Google Checkout is here!

For every $1 you spend on AdWords, you can process $10 in sales for free through Google Checkout. For example, if you spent $1,000 on AdWords last month, this month you can process $10,000 in sales at no cost. The more you spend to promote your business through AdWords, the more you save on transaction processing fees with Google Checkout.

If you exceed your free transaction processing for the month, or you don't advertise with AdWords at all, you'll only be charged 2% plus $.20 per transaction.

https://checkout.google.com/sell

Happy Days - they are only charging 2% + $.20 per transaction! I can't wait to change CFTagStore.com over to using this. At the moment we are using WorldPay and are simply being raped on the transaction costs.

Tags: Online | WebDev

InfinityCMS Button for Google Toolbar

I'm just finished another small website project and it should be launched within a matter of days:

WebWorks Cork

But that's not the reason I'm posting this. Yesterday, I was searching for something completely different when I came across some pages on Google's site describing how to add your own custom buttons to the new Google BETA toolbar.

My imagination was captured (=all real work ceased Messing). An hour later (OK to be honest, about 3 hours later) and I had my very own icon for our own InfinityCMS Content Management System. Check it out:

Simply click this icon and it launches InfinityCMS

Installation: I added a page to our CMS system where the user can click a link to install this button in his/her Google Toolbar.

What Happens? Once clicked, the button sends the current URL to infinitycms.digital-crew.com. A ColdFusion page there checks the URL and performs a test to see if InfinityCMS is installed on that website.

If it isn't, the user gets a quick message displayed and is returned to where he/she was with history.back().

But if InfinityCMS is detected, a new window launches InfinityCMS and in the old window the user is again returned to where he was with history.back().

The Cool Bit: InfinityCMS is passed the URL of the page you were on when you clicked the icon... There are a series of regular expressions in the database (which can easily be updated in InfinityCMS by an administrator) that handle the request in a smart way...

For example, if the user was on the home page and clicks the icon, a window will appear allowing the user to quickly edit just the home page without all the other elements of the CMS solution:

InfinityCMS Quick Eidt Mode

And if there are several corresponding 'Quick Edit' options for a page, then the user will get a list of options. For example, on the following Quick Edit of the "Contact Us" page, the user can choose to edit the page or review messages from the contact form which have been logged in the database:

InfinityCMS Quick Edit of Contact Page - Options

Now that I've been using it for a bit, I find this little icon invaluable for making quick changes here and there. Of course if the user isn't logged into the CMS system, the login page appears first. I must add on the ability for the user to switch from Quick Edit more to full edit mode which looks like this:

InfinityCMS for WebWorks in Full Mode

Would love to know what you think of this little hack?

Update

I was giving a demo of this to Cormac and his popup blocker (Google Toobar - haha - the irony) was preventing the Quick Edit window from opening.

I remembered when the other day, GMail popped up a message for me saying that a popup blocker was blocking a window from opening so I knew it was possible to detect this. I did a bit of googling and it turns out it's pretty easy to detect:

<script language='JavaScript'>
<!-- <![CDATA[
function userHasPopupBlocker() {
var oWin = window.open('','child','width=50,height=50,status=no,resizable=yes');
if( oWin==null || typeof(oWin)=="undefined" ) return true;
else oWin.close();
return false;
}
//    ]]> -->
</script>

So now my script displays a friendly message asking to user to disable the popup blocker for the redirect site and "click here to try again". All working as it should again.

Aardvark'd Review

This morning, Dan and I were planning, scheming and arguing about the forthcoming application we are planning to develop when Cormac marched into my office with a priority mail package from Fog Creek.

It had arrived! The long awaited package contained Aardvark'd - a documentary of the development of Co-Pilot by a group of interns at Fog Creek software last Summer.

We did a bit of rescheduling so that we could have our Geek Night in and thoroughly enjoy this movie at Dan's house later. We were looking forward to watching the code-monkeys plan, structure, project manage, make decisions, argue, debate and code their way to success.

Interlude

Well, I'm just back from Dan's house after watching the DVD and I have to say that I'm a little disappointed.

Certainly there were a few interesting bits and it was good to see inside the organisation, their environment and so on. But I had wanted to see software development at it's finest. I didn't. Instead I got 90 minutes of utter tedium.

Seriously! - I don't care about the ledge, your tomato plant, your birthday hat, your misfired party, your apartments, your bike or even the fucking cockroach (I could go on).

I had wanted to see the team work together, choosing the correct platform, the decision to go with VNC, the frustrations, the long hours, the code, the mistakes, the tools, the database design, the server setup... everything.

But alas, it seems that this wasn't aimed at developers. If not, then who was this aimed at? Certainly nobody other than developers would give a shit about something subtitled "12 weeks with Geeks". It could be that they were sick of discussing the development process they went through forums and such online and wanted to show the lighter side of software development. Or it could be that the production company behind the video just don't get it.

For me, it's a misfire, a wasted opportunity.

Tags: Musings | WebDev

Flash Security Wrecking My Head

FFS, all I want to do is ask the license server if this component is OK to run on this website. My code was working perfectly from localhost - cummunicating perfectly with the licensing server but when I put it out in the real world, it couldn't get a connection.

Turns out Flash's security model is preventing loading data from another domain.

There are three methods (I've found so far) to allow the communication, but all of these require that the license server know who the requesting server is, in advance. So not too good for my needs then.

I think the WebService API might be able to get around this restriction... It's 2.18am however and that's another days work. This article looks positive...

http://www.adobe.com/devnet/flash/articles/flmxpro_webservices_03.html

MultiUpload Demo - 171 Files

Interesting to see that, since yesterday, users of this site have uploaded 171 files messing around with the Multiple Upload Demo.

Among the files are a plethora of interesting MP3s, excel sheets, PSD files and of course some porno - thanks Guys.

Whomever uploaded "film_ze_mucha_nie_siada.mpg" - that's just weird.

Updated Demo

I've updated the demo with a few more options and started updating the descriptions. I haven't tested all these options yet, so please let me know if you find a bug.

IE users, you may want to reset you cache as I updated the flash control and IE is brutal for not updating the cached version flash movies.

Some Minor Updates

I changed the names of some attributes such as "color" which is now "statusTextColor".

I also re-jigged some of the internal Flash default parameter coding to make the flash control smaller and more robust in that it can handle color codes in any of the following formats, "0xFF4466", "#FF4466" or just "FF4466".

It's all these little things that are delaying the launch but will ultimately make this incredibly easy-to-use and dummy-proof.

Multiple Upload Demo Updated.

Last night, I added some options and fixed one of the last remaining bugs in the Multiple File Upload Widget Demo.

Tonight I'll add more options to the demo.

I was thinking of add a 'tic' sound as each file uploads. Also don't you think the default text for the select files button should be "Select Files" and not "Browse".

One of the last things we want to add to the Flash control is licence control. From the top of my head, here's an overview of how the licensing might work:

  1. The flash component will have a secret key and the licensing server will also have this same secret key.
  2. When the component is called on a commercial website, the component will ask the server if the current website has a licence registered using its secret key to build a hash of the domain and time-stamp. The server will respond yes or no.
  3. Once the flash gets the response, it will be able to authenticate that it was the real server it was talking to based on the hash.
  4. If the server responded 'no', the "unregistered version, click here to register" text will display.
  5. The website will be sent a unique license hash for the current website that it will store and pass into the flash control for instant authentication in the future without the need to communicate with the licensing server.
  6. It will also be possible for users to download licence files for their website that prevent the need to communicate with the licensing server.

Of course all the falls flat on it's face if somebody cracks open the SWF file and obtains the secret key; and understands the licensing mechanism; and goes to extreme lengths to replica the licensing server or rebuild the licence key. But it's going to sell for $50, so so I don't think anybody would be bothered going to those lengths.

Flash Upload Demo is Up

I know some of you are looking forward to checking out the demo of the flash file uploader component for ColdFusion so without further ado, here you go:

ps. I haven't got around to adding the licence management code yet so for security I've just slapped "demo" on it for now. This demo uses exactly the following code and also shows how javascript callbacks can be used. C&C very welcome.

<cf_dccom component="dcFlashUpload" folder="#folder#"

width="500"
height="400"

jsOnFileUpload="onFileUpload"
jsOnComplete="onComplete"

color="0xFFFFFF"

themeColor="haloGreen"

blockExtensions="cfm,cfml,exe,cgi,php,php3"

></cf_dccom>