I need a vacation

So this morning I was thinking about some basic things we can do to speed up the download of our pages, including combining and minifying our JS / CSS files. I decided to go look at YuiCompressor, which is a minifier from Yahoo.

I think to myself neat let me bookmark that and come back to it.



I guess I had this same thought the last time I thought about the subject. Ugh!!!

How not to use a user control

I am in the middle of a nice refactoring session, changing a setup dialog, which allowed you to edit 4 types of email templates. Since the data was the same I had a user control which was then placed on four different tabs.

We are going to tripple the number of types of emails that are going to be configured. So now my simple dialog of four tabs explodes into 12, and while I do not claim to be a UX expert by any means, and I am not able to design the latest slickest easiest to use interface; I can recognize a bad UI very easily.

I have decided to use a drop downlist paradigm where the user selects from the drop down the template they are going to work with, and then we present them this information.

During my refactoring I stripped out my tabs and added the drop down. I removed all but one instance of my user control. I have everything working except I'd like for drop down to line up better with the contents of the user control.

The html that gets rendered is like this:

    <div>

        Select a Template:

        <select>

            <option></option>

        </select>

        <!--This table comes my user control -->

        <table>

            <tbody>

                <tr>

                    <td>

                        Item 1:

                    </td>

                    <td>

                        <input>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

The problem is the select template doesn't line up with the rest of the labels. This lead me to the ahhahh moment that lead to this post. I do not recommend doing this in production code. I think it makes the code very unreadable.

Nothing says that the user control must render a valid html fragment. Using that to my advantage I modified the code so my aspx page looks like:

        <table>

            <tr>

                <td>

                    Select A Template:

                </td>

                <td>

                    <asp:DropDownList runat="server" ID="DropDownList1" AutoPostBack="true">

                    </asp:DropDownList>

                </td>

            </tr>

            <croixUser:emailConfig runat="server"  />

This is basically my entire, I never close the table in the page, I do that in the user control. While we shouldn't be able to do this it makes sense that Microsoft hasn't wasted any energy in blocking this. If you want to shoot your own foot off with convoluted code go ahead.

Now I must be off to refactor that user control to dev\null

Jquery 1.3.2 & Intellisense in Visual Studio 2008

After following the directions to get intellisense working with the latest version of jquery, I ran into some issues.

First I would get this error:

Error updating JScript IntelliSense: D:\Source\...\JS\jquery\jquery-1.3.2.js: Object doesn't support this property or method @ 18:9345

The first problem is that the file which has the enhanced comments for intellisense is named jquery-1.3.2-vsdoc2.js. Visual Studio is looking for a *vsdoc.js. Make sure you rename the file to jquery-1.3.2-vsdoc.js.

After renaming the file I was greated with this lovely error:

Error updating JScript IntelliSense: D:\Source\...\JS\jquery\jquery-1.3.2-vsdoc.js: 'div.childNodes' is null or not an object @ 1487:1

My understanding is that the code inside the methods doesn't really matter (Assuming it's not changing the object definitions of course). Since this code will never be ran, I simply removed line 1488 which looks like:

elem = jQuery.makeArray(div.childNodes);

And now we have intellisense working with jquery 1.3.2

---

Edit

---

I've noticed a lot of traffic recently on this post, if this post has helped resolve your issue (or not helped) leave a comment let others know.

Thank you and good luck

-jb

One more VSS bites the dust

I am happy to announce, that I have just my finished my second VSS to TFS migration, and I hope and pray that I will never be forced to open up VSS again. Yahooo!

Rendering ComponentArt's Splitter in Firefox

I've been working a little bit to add support for FireFox in my application which has only supported IE6 and better. I am trying to be proactive knowing one day my boss will ask for this, and it is actually helping to cleanup the markup we have quite a bit.

Along this journey, I noticed that we have a splitter bar, which has a tree view in one pane and a tree view in a second pane. It is a two pane vertical split. In IE6,7 and 8 (even in standards mode), the pane rendered correctly. When viewed in Firefox the first pane was shown; however, the second pane wasn't being rendered. It looked like the splitter container width was being set to the width of the first pane, which caused that pane to take up the entire container.

After working with Component Art's support team, it was noticed that when you resize the window, the pane would then render correctly. With their help, we found the following to force the splitters to render correctly in firefox.

function splitter_load() {

    if (jQuery.browser.mozilla) {

        splitter.element.style.width = 

              $("#divBidSummary").width() + "px";

        splitter.adjustSize(true);

    }

}

myContainer is a div which I have set to a width of 99% of it's parent. This allows the splitter to grow and shrink as the page is resized. This sample uses jquery, which is an excellant javascript library.

Note: Thanks goes out to Hwan to helping to track down and develop a work around for this solution.