Coffee and Code

Do you want real, ultimate, client-side debugging power? Get Firebug today.

This week I tackled some performance issues with my new weblog. I had noticed that the weblog took an awfully long time to load. So, I navigated to my weblog and launched Firebug. Firebug's network monitor quickly informed me that:

• The request to the weblog page itself was averaging over 1 second in duration.
• The size of the HTML response for the page was in excess of 50 Kb.
• AJAX resources and Script.aculo.us libraries were unneccessarily loaded on every request - these are only needed in an authenticated context.

Damn, I loves me some Firebug!

Using this information, I determined that the ViewState (A hidden form tag on the page) content was sometimes as large as 23 Kb! In other words, the ViewState information accounted for almost 50% of the markup on the page.

Some minor code changes resulted in a HUGE reduction in the ViewState size. For one particular weblog entry, the viewstate was reduced from 23552 bytes to 236 bytes - a 98.99% difference!

In addition to the viewstate optimizations, I also did the following:

• Reduced the total number of items that are fetched for each request to the page - From 17 to 5, on average.
• Implemented caching where I could to reduce round-trips to the database (From 7 round-trips to 1 round-trip per request).
• Replaced the Archive TreeView with a simple repeater. The TreeView is expensive to initialize and populate server side, and emits tables which are a Web 2.0 no-no in most cases.

If you're a web developer, Firebug will make your life easier. For ASP.Net developers, I also recommend Binary Fortress's ViewState Helper for Internet Explorer - This tool will decode viewstate for you so you can examine the contents, as well as giving you the ViewState size and percentage of the page's content that the ViewState consumes.

I turn 31 tomorrow! Another year gone by - and I'm still just a big kid. When will I finally grow up? Never, hopefully. I took the day off and the party begins TONIGHT.

In Need of Variety

My current job consists almost entirely of programming. I actually picked this job specifically because it would allow me to focus on development - whereas in my previous job, my duties included graphic design, web design, ASP coding, Flash and ActionScript, server administration and database administration a sh**load of stuff.

I primarily design web applications for our intranet, which allows me to play with UI design a bit, but let's face it: you have to rein in your creative instincts quite a bit in the context of a corporate intranet. While this focused environment has allowed me to improve my development skills, I find myself jonesing once again for creative web design.

For the past two weeks or so, I've been dedicating some time to trolling the various CSS / web design galleries and web designer sites; I needed to crawl out of my digital coffin, put my ear to the ground, and get back in touch with the design community. Mind you, I am NOT a professional web designer. My designs don't come close to those produced by artists with real talent and skills to back it up. Even so, the process of web design is a lot of fun for me, and it's a great way to shift gears after writing volumes of code at work. I also like to promote CSS-based design and the use of W3C standards - two concepts that have the potential to make life easier for web designers and developers alike.

One of the first questions I had as I ventured into the wild was: What new and exciting things are designers doing these days?

Some answers:

• http://www.clickfire.com/internet-trends/ - A somewhat humorous list of what people are - and aren't - doing.
• http://www.webdesignfromscratch.com/current-style.cfm - Good info on what constitutes "Web 2.0 Style"; you just have to scroll past the annoying e-book ads.
• http://blog-well.com/2008/03/04/100-resources-for-web-developers/
  A virtual smorgasbord of links to design tips/tricks/tools, plus a photo of some buxom chick wearing a "Talk Nerdy to Me" T-shirt. As if.

Misdirected Energy

My biggest flash of inspiration came from this article at A List Apart (WTF!?!?!? There's a Web 3.0?? I'm not used to Web 2.0 yet!!!) Zeldman makes mention of Pareto's 80/20 principle in relation to web design; specifically remarking on the success of developers who, eschewing complex development methodologies and overblown, complex application designs, instead focused on creating elegant, easy-to-use, feature-rich applications that people find fun and enjoyable to use. There is much wisdom is this...

In the process of designing the current incarnation of my weblog utility for this site, I put way too much focus on the architecure, the "under the hood" stuff that users never see. I've got pluggable data sources, via the Provider model. I'm using XML serialization to generate RSS feeds. I'm patching in to the HTTP pipline to rewrite URLs. I've got a litany of business objects that my application uses. Abstract this, interface that. Ad nauseum.

I ended up with a weblogger that is useable, even over-powered, but it's feature-poor and doesn't encourage community involvement. I focused my energy on the 80% of the work that didn't matter as much. (Is this starting to sound like a future re-write project? I think it is.) A case of not seeing the forest through the trees, perhaps.

Scriptaculous is an uber-cool set of javascript libraries geared toward rich, interactive user interface design. It's built on top of Prototype, another fantastic javascript framework,  and delivers a ton of easy-to-use, cross-browser effects, transitions, and other user interface tools.

I don't know why it took me so long to get into scriptaculous... maybe it's the do-it-yourself punker in me that avoids such conveniences (But why rewrite all of that code, when scriptaculous is well-written, robust, and free??) At any rate, I finally downloaded the libraries a few days ago while out searching for a good drag 'n drop script. Now, I feel like kicking my own ass for not downloading scriptaculous sooner!

The scriptaculous website has many usage examples, but I thought it was a little difficult to find specific usage examples; there were a couple of instances where I resorted to viewing the source code on the demo pages. All that aside, in many cases you can enable the scriptacular fanciness with one line of javascript (such as registering a draggable element on a page):

Not bad! And here's a quickie function that toggles between SlideUp and SlideDown:

function doSlide(id)
{
    var elem = document.getElementById(id);
    if (elem.style.display == "none")
        new Effect.SlideDown(id);
    else
        new Effect.SlideUp(id);
}

Wow, I've gone a whole month without posting anything to this blog. I am LAZY.

I'm currently well-caffeinated and happy, other than having to deal with some minor gastrointestinal misery for the past couple of days. Oh, our telephone line is on the blink (again). This tends to happen when we get a lot of snow; last winter we went through 5 or 6 days without a phone line. Oddly enough, my internet connection still works sometimes. Time to call the landlady!

So I've been [helping] a friend out with an ASP.Net knowledge base application for the past few days. A couple of nights ago I was working on a module that uploads Flash-format tutorials to the application. Anyway, at one point when I was testing the module, I did an upload and waited for the response.... After about 10 seconds I figured something was screwed up; No page was coming back and I had to Ctrl+Alt+Delete out of Firefox.

I fixed the problem that night, but didn't find out until the next day what had actually happened: due to some hasty coding and inadvertent recursion, my application had created 6,608 copies of an uploaded SWF, nearly filling up my hard drive...

I am a danger to myself and to my computer.

Well, first I'll have to say that my new weblogger is much closer to completion now, with mad props to the folks over at Interface Technical Training (Phoenix, AZ). I attended their ASP.Net class here in Santa Fe last week. Aside from the normal course materials (which were excellent), both instructors helped me out with some architectural issues I had with the weblogger application.

Anyway, the class got me totally pumped to code, so I've been up late all week doing that stuff. I's tired today...

Peace out to anonymousrobot (congrats on the new machine!) and impoverishedcook (Congrats on the new job!)

So this teenage kid and his mammy were standin' in front of me in line at Walgr**ns. He says to his mom, 'I gotta start shaving. Clean-shaven men get all the best jobs.'

And here I am, lookin' all haggard with 3 days worth of stubble and camo pants on.... wild-ass hair... so I say to the mammy: 'Well, I guess I'm outta luck!' And the mom says - I love this part - 'Oh, you see, my son means a STRAIGHT job.'

Ho ho.

Anyway, I found this link at leftslipper's website while searching for how to bind an ObjectDataSource to an object factory. The article not only told me what I needed to keep my new weblogger project rolling, but offers an alternative way to handle objects: namely acquiring them rather than constantly creating and destroying them.

Here are a couple of ASP.Net databinding / formatting tricks I've picked up recently:

1. I recently had to bind to a telephone number in a GridView that was stored in the database as a 10-character string. I ran into problems trying to use a DataFormatString property to format the output as (555) 555.5555. Turns out that format strings generally work better with numbers than strings.... duh.

C# Solution: Convert.ToInt64(string).ToString('(000) 000.0000') did the trick. I can't remember where I found the solution, but it's really useful! Sure beats writing a custom method to re-format the number.

2. When using a BoundField to display a DateTime, the DataFormatString property will only work when the HtmlEncode property is set to false.

Because of the relative popularity of my Flash-based I-Ching @ SanctumVoid, I've decided to spend some quality time between now and 2007 re-tooling the Oracle. (And popular in this case means that I've noticed some hits on the page that WEREN'T search-bots!)

I-Ching @ SanctumVoid started as a javascript project 2-3 years ago... I then converted the app to Flash. (I personally think the Flash version is, like, waaaay cooler.) Now, it's once again time to re-vamp the Oracle. Here's my half-assed plan:

1. Move the I-Ching nuts 'n bolts logic out of the Flash frontend and into a set of web services. This will accomplish a couple of things: It will prevent me from having to stare at too much ActionScript inside the buggy, crappy ActionScript editor, and it will allow me to create front-ends for the Oracle in different formats, for example, webpage and blog plug-ins.

2. Conversion of the hexagram descriptions to Pinyin transliteration (e.g. Ch'ien becomes Qian).

3. User membership features will allow people to have profiles in which past readings could be saved.

4. A new, flashier Flash user interface.

These are a few of my ideas. If you have any requests for functionality on the new Oracle, drop me a line!

In the meantime, for this Sunday: doing laundry, reading Hardcore Zen, call Andy to gloat about my new 18-inch Iron Maiden: Somewhere in Time Action Figure.

Wow. It's been some time since I updated this blog (and the rest of the website... well, I won't go there!)

Lately, I've been working on a small app for the PIO's office at work: basically it's an upload/metadata utility for Window Media files. We're running Windows Media Services at work, and we have a collection of videos available for on-demand streaming. So basically, this application I'm building is to manage and categorize the available media files.

In the process of building the application, I've learned a couple of useful tricks:

1: The WM Plug-in has an extensive Javascript API. Covers everything from playback controls to management/creation of playlists.

2: It's possible (and cool) to create dynamic WM playlists using ASP.Net (they're basically XML files, so....)

The next thing I'm going to try to do (today) is manipulate a .WMV file server-side to extract a thumnail image of the video. Should be fun - but then, I'm a glutton for punishment!

Another vacation day that I spent working instead of slacking off! (Slaps self) Being that it's a holiday and all, I'm getting ready to sign off the computer for the evening.

I've been developing a template for a Joomla! website lately. (Joomla! is an open-source Content Management System written with PHP and MySQL. I think I am in love with it.)

I decided to go table-less (i.e. semantic code, CSS layout and positioning) on the Joomla! template, and as a result, I am struggling with all manner of IE-specific CSS bugs. Again.

I'm going to have to write a punk rock song about working too much, I think.

Either that, or organize a class-action lawsuit against Microsoft for making mine and other web developers' lives hell trying to write W3C standards-compliant websites that work in IE.

Shit. I need a beer.

Later folks, and remember: Patriotism != Nationalism. The greatest patriots of this country were first dissidents.

Help!

I've noticed a lot of IE 5.5 visitors in my logs lately. So, I'm really curious as to how my site actually looks with IE 5.5 (I didn't test the site with that version). I also haven't seen how it looks in Safari or Opera...

So if you're using IE 5.5 (or Safari or Opera), drop me a comment, and let me know how things look... PLEASE!!

What else is new? My new Flash Portfolio is almost done.... I'll put the finishing touches on it this weekend (either that, or I'll trash it completely and do something entirely different... one never knows).

New code sample: Sortable AJAX Grid

I saw on the news today that the Enron Top Dawgs were convicted. Hell yeah! Whether or not they get appropriate sentences... well, that's another matter entirely. The cynic in me believes that if they get any prison time at all, it will be at one of those exclusive country-club prisons you hear about... Personally I think they should go up to Chino and have Big Bubbas as cell mates... But it doesn't really matter, because Karma's a bitch and these two will get what they deserve, one way or another!

In other news... I found a really cool XML tutorial. I like it when tech tutorials are a bit cheeky...

Dammit, I always get that one wrong! Hehehe...

I got bored with tweaking my messed-up sitemap this morning and decided to write a code sample: ASP XML Proxy. This script retrieves an XML feed server-side from another website, and displays the feed as if it were coming from your own website.

My reason for using something like this is because client-side javascript will not let you consume a feed from a website other than the one your javascript lives on... so this is a handy way to get past that obstacle. Pretty cool, and pretty easy too.

Update!

I am finished with the Sortable AJAX Grid... this one is really cool so check it out!

I agreed to help a buddy out with a house-sit in Galisteo this week, starting tomorrow and ending on Easter Sunday. Not so bad, except I found out that I was signed up for a Crystal Reports class in Albuquerque this coming week as well... the class starts at 8:00 AM - which basically means that I will be getting up at the butt-crack of dawn every day, hauling ass to ABQ, and then not getting back out to Galisteo until 7:00 PM. Bummer.

Then, for the last week of April, I'm going down to Las Cruces to help out at the Transportation Engineering Conference... so I'm not going to have much time for web design. Bleh! I spit on April! The stars have aligned in an attempt to delay the timely delivery of my design, but I will prevail. Be sure to check back after May 1st... things WILL be different.

Runs on .Net 1.1, is xml-driven... kinda like the utility I wrote for this site, except it is probably much better than mine! More robust, for sure. Anyway, I think I'll take it for a spin. Sounds pretty attractive.

You can find out about Das Blog at SourceForge.Net.

Anybody else out there using a hand-rolled blogger?

New features include: re-vamp of existing (Grey Zen) design, and the addition of three new themes. (see the new top menu.) Wrote a custom blogger for the site too! Now it's all done, and I can finally get some sleep!

The main lessons I learned during this reboot were 1.) separating design from structure really eases design changes and redesign and 2.) I can really put away the coffee. Wow.

My next project will be to finish my I Ching application. Look for a new, smoother, lighter version in December.