cftopper.com

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.

• Poor Man's HTTP Compression with ColdFusion

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

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.

Stop fucking around Morris, just set the overflow to auto on container divs to get them to expand their height to fit all elements. Simple. Store that to memory, never cry over floats messing up your layouts again.

There are other methods, but this is the best one. If I catch you, using <div class="clear"> again you will be beaten... badly; yes I mean you!

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.

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:



Only messing!

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 followed a link from Digg.
Appantly my programmer personality type is:

   DLSB

You're a Doer.
You are very quick at getting tasks done. You believe the outcome is the most important part of a task and the faster you can reach that outcome the better. After all, time is money.


You like coding at a Low level.
You're from the old school of programming and believe that you should have an intimate relationship with the computer. You don't mind juggling registers around and spending hours getting a 5% performance increase in an algorithm.


You work best in a Solo situation.
The best way to program is by yourself. There's no communication problems, you know every part of the code allowing you to write the best programs possible.


You are a liBeral programmer.
Programming is a complex task and you should use white space and comments as freely as possible to help simplify the task. We're not writing on paper anymore so we can take up as much room as we need.

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?