Expose those DOM objects real quick

I was wearing my DHTML hat the other day and wanted to share this javascript quick tip.  When I have to script DOM objects but don’t have time to figure out their goings on, I like to dump them via a for() loop.  Here’s how it works.

In my html file I’ll create this small script.

<script type="text/javascript">
function dump( objId )
{
	var domObj = document.getElementById( objId );

	// message holder
	var str = "";
	// loop
	for( xx in domObj )
	{
		// append to the message
		str += xx + " : " + domObj[ xx ] + "nn";

		// how long is the message?
		if( str.length >= 300 )
		{
			// show it
			alert( str );

			// reset it
			str = "";
		}
	}

}
</script>

Next I’ll drop an html button into my page that passes the id of my desired object to the dump.

<button onClick="dump('parentform')">dump</button>

Lastly I’ll fire up my html file, click the dump button, and hope I find what I’m looking for in the alert.

Click dump, get popup

dump popup

I don’t always find what I’m looking for, but I always end up finding interesting stuff. Especially when you run the same html file in different browsers.  I wrote a similar javascript dumper that writes to the page instead of an alert.  This one is also interesting to see in different browsers.

10 .9 . 8 – A website becomes a man

Tonight is the next step in this year’s internet experiment.  As you can see, I have upgraded the html page to a rhobust, synergy of bleeding edge, web two point oh! technologies.  Ipso Facto, el WordPress-o.

This was the year I decided to bring it to the internets.  Since I write code for a living, it’s been an endless dream to built the perfect CMS to power my name dot com.  The constant struggle over which technology to use, how simple or complex to make it, and the endless ‘oh yeah’s.  So I decided to roll old school and made one large html page.  That was fun for a while, but I’m done the “webmaster” thing.  I’m very excited and impressed with WordPress.  Now if I can only figure out the rest of the system.  So many themes, so many widgets, so little time.

So now it’s live, and on to the dribble.  After the jump?

Been checking out Fuser lately.  I had mistaken them for another Feed Aggregator, but turns out they do email and social.  Gotta say it’s starting to grow on me.  Another part of this year’s internet experiment was to dive back into the scene through RSS and the major social sites.  I was cooking for a while, but started to get data burnout.  I had to cut down on the input.

Since then I’ve steared clear of aggregators.  I’ve gotten off RSS for Twitter and haven’t looked back.  While I don’t see myself using Fuser everyday, I can see myself using it.  It’s starting to grow on me now that I know it’s not a Flex app.  Now I’m actually digging the BeOS-ish bubbly design.  When I found the Exchange integration, that’s when I knew I’d be coming back.  

Can’t wait to see what new site I’ll find tomorrow.

A good web wireframe tool is hard to find

I’m having a hard time finding a good wireframing tool for web applications.  Right now I’m using Dreamweaver with the hopes of short cutting my html efforts once my application’s screens are ironed out.  I realize this isn’t the easiest solution, but I’ve already started, and it seems like the easiest format to translate / clean up later.

My ideal wireframe tool would do the following :

  1. Free or cheap
  2. WYSIWYG functionality
  3. Either use real HTML or export visual elements to HTML
  4. Allow for clickable navigation between screens
  5. Allow for small amounts of code interactivity

Dreamweaver meets most of these, and I’ve already made it far enough that I don’t want to turn back.

After all these years of hand crafting my html, it’s a real challenge making the switch to WYSIWYG editing.
So far it’s been ok, just not as easy as I was hoping. Hopefully this barrier is just my inexperience creating web pages the visual way.

Serialize an ASP.NET control into it’s html source code

Here’s a handy little routine that takes an ASP.NET control and spits out the html source for use in code. I’ve used this with ASCX files, but I think it should work with any type of asp:control ( ascx, server control, html control, etc ).

[csharp]
#region RenderToString
using System.IO;
using System.Text;
using System.Web.UI;

public string RenderToString(Control ctrl)
{
StringWriter stringWriter = new StringWriter();

HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);

ctrl.RenderControl(htmlWriter);

StringBuilder stringBuilder = stringWriter.GetStringBuilder();

return stringBuilder.ToString();
}

#endregion
[/csharp]

This came in handy when I was working on a mass mailer app. Instead of hard coding my email message into my codebehind, I just made an ASCX control for each message, then loaded the correct message in my code, ran it through this routine, and sent it out.

By putting the message into an ASCX file, it makes formatting HTML much easier than putting it in C# code. If you’ve ever programmed any sort of emailer that sends an HTML message, you know what a pain this can be.

I would like to think there is an easier way to do an include file via code, populate the message with some variables, then send it out, but I haven’t found it yet. If you know of an easier way, I want to hear about it.