Initialization, JavaScript and HTML/CSS friendly behaviors

Way back (early 2009) I started a Stackoverflow question about this very same topic. I didn't find the answer I was looking for but recently I've managed to put some pieces of the puzzle together.

Normally, I'd rely on the HTML id="" property to be a known value and get at it using getElementById or $("#id"). I've never liked this approach but what are you supposed to do? This is how 99.99999% percent of the people I know do it and they think it's fine. Fine!? It's a freaking atrocity. I know it's very subtle but if you think about what your doing, your effectively duplicating knowledge everywhere, filling up your global namespace with a bunch of identifiers and having to go through hoops just to do parametrized initialization.

I think we can do better.

Oh, and If you haven't already gone there, that Stackoverflow question contains a bit of code I wrote as an example and answer to my own question. On how to go about this in an unobtrusive way.

It sort of began with the realization that jQuery addClass, hasClass and removeClass can be used to toggle a Boolean value. The state of this Boolean is reflected in the presence of a CSS class. Without thinking about it, I had stumbled on a system for handing visual states. When these CSS classes represents meaningful visual state information you can use them to style your JavaScript (or augment) using established CSS rules. These things fit well together.

All my client-side validation does is that it toggles an error CSS class at some place and I have a planned out HTML fragment with additional classes that let's me apply a style to the validation state without meddling with the original script.

I started using this more and more and it's truly an ingenious marriage between two technologies but I was still bugged that I couldn't do the same with client-side behavior, or so I thought.

By simply rethinking the way we've (or the way I've done it so many times in the past). I started thinking about CSS classes as more than visual state. What if I reserved a CSS class for a specific behavior?

By reserving certain classes for use with specific HTML fragments I can create very rich client-side behavior without violating the DRY principle, encapsulation or relying on other ugly hacks. Say good bye to printing ("<%=...") strings in JavaScript and hurray for that!

What you do is that you pick a CSS class to identify the HTML fragment and then use HTML5 data to attach properties (think of 'em as parameters). From within a document ready function, using jQuery, you query the document for all the CSS classes and do your initialization here. You have a reference to the DOM node, data availability (parametrization) and complete encapsulation (no publicly visible interface, except for the data members).

The Stackoverflow question contains a simple sample where I use this trick to add regexp validation using CSS classes and HTML5 data only (assuming that the script is already written). I can reuse this code in many different places without having to go back to my JavaScript or "hook up" these things thanks to the wonders of jQuery and CSS selectors.

I think this is something truly beautiful.

Hidden features of Visual Studio, enter watch expressions with format specifiers

Every now and then I find myself getting annoyed at these little refresh squiggles that the Visual Studio watch expression get if they potentially have side-effects. I reckon that's a good thing, however, sometimes I need to express a quick way to drill down some data structure and get at that specific value.

Format Specifiers in C# (see MSDN)

These format specifiers are for C# but some of these are language agnostic and some variations of these work with other languages.

There's more information on MSDN. But these are my favourite ones, the ones I try to remember. Because when I need them, I have know that I can use them.

Specifier	Format	Value	Displays
ac	Force evaluation of an expression. This can be useful when implicit evaluation of properties and implicit function calls is turned off. *
d	Decimal integer	0x0065	101
h	Hexadecimal integer	61541	0x0000F065
nq	String with No Quotes	"My String"	My String

* See Side Effects and Expressions.

And this is how you use them...

Watch

Name	Value
Text,nq	string without quotes
source.Skip(2).First(),ac	The 3rd element of an enumerable source
0xa,d	10
10,h	0x0000000a

The d and h format specifiers are especially nice when you find yourself toggling Hexadecimal Display on and off. And as a bonus, If you'ven figured this out yourself, these expressions also work in the DebuggerDisplayAttribute string. Very handy.

VSX Mercurial

I have a habit of leaving things unfinished if I find my self having solved the nitty gritty details. That last stretch stuff just isn't as fun as the technical challenges. Though that's a topic for another day.

This week I contracted a bad case of the flu. I've spent the last several days in bed trying to regain some strength. Laying there thinking (not really accomplishing much of anything) I thought I'd reboot that source code control plug-in for Visual Studio.

The thing about Mercurial (and this is equally true for git) is that it's super easy to get started. And with it you can distribute, patch and hack away effortlessly in mere minuets. What I felt was missing was a source control package for Visual Studio that embraced the same principles.

For all the SVN tools out there TortoiseSVN always struck me as odd because it attempts to turn every last folder in your computer into a version controlled system by integrating with the Windows Explorer Shell. I never got that and was somewhat surprised that TortoiseHg even existed. Mercurial not being SVN makes it somewhat less of an atrocity but I can't believe that people actually wants to use these GUI tools.

Unhappy with the performance of existing plug-ins for Visual Studio I decided to roll my own and I figured that it be a good opportunity to learn how to build Visual Studio Extensions.

I actually have decent statistics of the number of hours a day I actually spend within Visual Studio actively doing stuff. Learning more about the Visual Studio extensibility model felt like a smart move.

I have a very clear vision of where I wanna go from here, it's also my attempt at an open source project. I don't really have any strong feelings about open source but I've always learned a lot by reading source code. This could be a good opportunity to give something back.

If you're a Visual Studio user looking for a Mercurial SCC plug-in checkout VSX Mercurial on Codeplex.

I abandoned this project sometime ago. Mercurial is still a great tool but I use TFS and git today. I also find that the kind of integration I was planning with VSX Mercurial wasn't really what I needed, git extensions taught me this.