Jan 7 2011

Transact SQL LastIndexOf Function

I can’t help but think there may be a more efficient way to do this, but I’m posting here anyway. I welcome updates to make this better…

@substring nvarchar(max),
@stringToSearch nvarchar(max)

- LEN(@substring)
+ 2
- CHARINDEX(REVERSE(@substring), REVERSE(@stringToSearch))


I still can’t believe I didn’t find much on this (beyond a single character search) on Google. Go figure.

Oct 2 2010

HuntMyState.com Launched

HuntMyState.comIt was a long time coming, but HuntMyState.com has officially launched! Geared towards high SEO and maintainability, this is one of my favorite sites I’ve worked on from the past few years. Excellent design by Ken Zarecki.

Good hunting!

Aug 15 2010

JavaScript Binary Search Function

Coffee beansI was looking into binary search functions lately and decided to comment this JavaScript binary search function I found (original is at http://www.dweebd.com/javascript/binary-search-an-array-in-javascript/) to help ensure that I had a good grasp on everything that was going on in it. Thought it might be useful for others, so I expanded my comments (read: commented the holy hell out of it) for posting here. Enjoy!

<script type="text/javascript">
 // Custom sort comparator
 function sortNumericAscending(a, b) {
 return a - b;

 // Based off of http://www.dweebd.com/javascript/binary-search-an-array-in-javascript/

 // Extend the array object to include a new function to perform a binary search.
 // Since a binary search requires the array to be sorted, we can optionally
 // pass in the name of the function to do the comparison as well as the value to find.
 Array.prototype.binarySearch = function binarySearch(valueToFind, comparator) {
 // The lower bound of the array, initally set to the true lower bound.
 lowerBound = 0,

 // The upper bound of the array, initally set to the true upper bound.
 upperBound = this.length - 1,

 // Stores the median index of the array.

 // Stores the result after we compare the value to find
 // with the value at the current median index of the array.

 // As the loop progresses, the lower and upper bounds
 // will halve upon each iteration and eventually meet.
 while (lowerBound <= upperBound) {

 // Determine and store the median index.
 medianIndex = parseInt((lowerBound + upperBound) / 2, 10);

 // Check to see if a comparator was passed in.
 if (comparator == null) {

 // If there was no comparator to use, then use the default comparator.
 if (this[medianIndex] == valueToFind) {
 // If the comparison shows that the value that's at the current median index of the array
 // is equal to the value to find then set the comparison result to zero.
 comparisonResult = 0;
 else {
 // If the comparison shows that the value that's at the current median index of the array
 // is less than the value to find then set the comparison result to one. If the comparison
 // shows that the median array value is greater than the value to find, then set the
 // comparison result to negative one.
 comparisonResult = (this[medianIndex] < valueToFind) ? 1 : -1;
 else {
 // If a comparator was supplied, then use it to determine
 // if the value is greater, lesser, or equal to the value to find.
 // It is presumed that this comparator is the same that was used to sort the array
 comparisonResult = comparator(this[medianIndex], valueToFind);

 // If the comparison shows that the value that's at the current median index of the array
 // is less than the value to find then we know we'll need to look at the top half of this array.
 if (comparisonResult < 0) {

 // Set the new lower bound to just above the current median index
 // so that the next pass will only look at the top half of this array.
 lowerBound = medianIndex + 1;

 // Since the comparison result did not show that the values were equal
 // and we've set up the new bounds of the array to search on next,
 // then just disregard the rest of this iteration of the loop and contine with the next iteration.

 // If the comparison shows that the value at the current median index of the array
 // is greater than the value to find then we know we'll need to look at the bottom half of this array.
 if (comparisonResult > 0) {

 // Set the new lower bound to just below the current median index
 // so that the next pass will only look at the bottom half of this array.
 upperBound = medianIndex - 1;

 // Since the comparison result did not show that the values were equal
 // and we've set up the new bounds of the array to search on next,
 // then just disregard the rest of this iteration of the loop and contine with the next iteration.

 // We can only get to this point if the comparison result was equal
 // so we can return the value found at the last median index of the array.
 return this[medianIndex];

 // If we searched the entire array and didn't locate
 // the value to find then just return null.
 return null;

 // Testing the implementation.
 var newArray = [0, 3, 10, 4, 1, 2];

 // Default sort comparator.
 newArray.sort(); // default sort is alphanumeric
 document.write("newArray.binarySearch(3)=" + newArray.binarySearch(3));

 // Custom sort comparator.
 document.write("newArray.binarySearch(3, sortNumericAscending)=" + newArray.binarySearch(3, sortNumericAscending));

I still think there’s a good chance I missed something so if you find anything amiss, please let me know so I can fix.

Jul 9 2010

Automatically Add/Remove Self-Labeling for Textboxes

This is simple and I’m sure that many have done this (or something similar) already, but I recently had to go through a website and retro-fit all textboxes with jQuery to automatically remove the “self label” value when the user clicks in the box. Instead of doing all of these individually, I came up with this brief jQuery script to add and remove the labels according to the title attribute (which should be there in lieu of a real label for accessibility). Maybe this will be useful to someone else, but at a minimum, I’ll know where to go to grab this again if I need it. =)

$(document).ready(function () {

// Sets textboxes to automatically add (and remove) a 'label' text value based on the title attribute.
// Note that the value should still be present initially so people without JS still can see a label.
function InitSelfLabelTextboxes() {
    $('input:text').each(function () {
        var thisBox = $(this);
        var titleVal = thisBox.attr('title');

        if (titleVal.length > 0) {
            if (thisBox.val().length == 0) thisBox.val(titleVal);

            thisBox.focus(function () {
                var currentVal = thisBox.val();
                if (currentVal == titleVal) thisBox.val('');

            thisBox.blur(function () {
                var currentVal = thisBox.val();
                if (currentVal.length == 0) thisBox.val(titleVal);

Feb 17 2010

The Mobile Web Still Sucks

As everyone expected, browsing the web on our mobile devices has become steadily more prominent. The browsers available on our phones have become more robust and feel more like desktop browsers, but you know something? They’re not.

Ooh, that’s too rich for my browser

I increasingly find myself using the Opera browser on my HTC Fuze to get stuff done or check things out. Even doing things other than browsing the web will get me there eventually by clicking a link in email or a Twitter update. (That’s also why I think that the Xbox should have a browser, but that’s another story.) Problem is (I think), more and more sites are relying heavily on advanced JavaScript using frameworks like jQuery (which I love btw). I have been continually frustrated trying to view something via Opera mobile and it either runs painfully slow (usually due to some form of AJAX) or it simply does not work. There’s nothing worse than seeing an interesting updated via Twitter, click on the link, and page is loading… loading… You see the infamous spinning spinner graphic, and… nothing. Not going anywhere. Damn.

I think this also explains the prominence of mobile apps as opposed to better-working sites on mobile. I’m glad to see that hugely popular sites like Twitter and Facebook have mobile sites, but they aren’t exactly delivering a rich web experience. Not to mention they aren’t the default if you go to the site on your phone. (You have to know to put “m.facebook.com” into the address bar; I’ll admit, though, that this could be due to mobile browser delivering deceptive user-agent values to the site.) Suffice to say, mobile sites are too stripped-down and desktop sites are too heavy; there seems to be nothing in-between.

Put your website on a diet

Enter Facebook Lite. Could this be the answer?

Site developers need to keep in mind that users may be viewing their “desktop” site via a mobile browser. I think that developing a “lite” version and placing a prominent link to allow users to switch between the two is probably the best answer. At least, that’s the best I can come up with now…

Feb 5 2010

Symantec Website Fail

“This solution requires that you use Internet Explorer. If this page is open in any other Web browser, open it in Internet Explorer.”

This was just too crazy not to post. Got this message from a page on the Symantec site after getting an error from the Symantec Endpoint Protection software we have at the office. What is this, 1990? This harkens back to the days of messages like “This site is optimized for IE at 800×600”. Good riddance to those days!

It did appear that the page worked fine in my Firefox browser, but seriously, WTF? That’s a giant website fail in my book. Inexcusable especially for a big corporation. Wow. Just wow.

Feb 4 2010

Base CSS Font Sizes Gone Wild (plus bonus CSS reset!)

I’ve been working on my version of a CSS “reset” file lately trying to achieve a gentler reset than the big ones out there. Specifically, I don’t want to reset everything all the way to zero; I’d just like better control over what those defaults end up being (cross-browser of course).

So, I’ve got almost everything done on my reset when I get to the point of wanting to set the base body font size in the CSS. So, as I have done in the past, I looked to the internet for guidance on what the best practice is. So the internet tells me:

  • Set the base body font size to a percentage in the CSS to alleviate Internet Explorer text sizing issues. (yup, knew that already)
  • Always use “em” units for your subsequent font sizing. (of course – been doing that for years)
  • Your base font size percentage should be… (!)

What? There’s no standard out there among the CSS gurus as to what that base font value should be? I was surprised.

So, time to do my own investigating to determine what my base font size should be. Here’s a list of websites that I checked and their base body font sizes:

Curiously, Twitter, Facebook and Yahoo! all use pixels as their base font size:

  • Twitter (0.75em, but overridden to 11px almost everywhere)
  • Facebook (11px)
  • Yahoo! (13px) use px as the base font size.

I’ve seen the 62.5% value often as a means to set the default browser text size to 1em = 10px. Obviously for those who want to set their fonts in pixel sizes, but know they can’t do it directly. Seems that it would work pretty well. For a long time now, I’ve been using the base font size of 76% as based off of this post by Owen Briggs. Strange that there isn’t more of a consensus among the CSS elite, but I think I’ll stick with Owen’s standard. I mean, anyone who took the trouble to take 264 happy little screenshots on the subject of CSS typography deserves some serious recognition.

I still think that the default sizes for the headings could use some tweaking, but I have a CSS reset demo page as well as having the demo pages available in a zip file.

Jan 25 2010

Website Launch GO! Dance Project Saint Louis Gets a New Look

Dance Project Saint Louis

After working on it off-and-on for …what? Over a year? We have finally launched the new website for my wife’s dance studio: Dance Project Saint Louis. Design by Ken, code by me, content by Dance Project.

It’s running WordPress and took me longer than expected to get all the little things worked out. That just might have something to do with the fact that I’m not terribly familiar with advanced WordPress development, nor am I very well-versed in PHP. I did learn a lot on the way though and I kept as much [traditionally] dynamic content as possible. Although I will admit I hard-coded a few items. One big one being the primary navigation.

Hard-coding the primary nav has it’s benefits though. I like being able to use lengthier, more descriptive names on those pages while keeping the primary nav link text nice and short.

Also started using MailChimp as our email list management service, thanks to their generous “Forever Free” accounts. Up to 500 subscribers and 3000 sends per month should do us well for quite some time. I was having trouble getting their code to work in the new site, but their customer support (via chat) was very responsive and helpful. The person on the other end was knowledgeable(!) even with my technical questions. Ended up being some kind of conflict with other jQuery code, so the help he (or she) could provide was limited, but like Simple Motives, I’m always impressed by good customer service and by knowledgeable support staff.

So, please, check it out. If you’re in St. Louis, sign up your daughters. If you’re a fellow dev, then constructive criticism is welcome.

Jan 20 2010

Web Standards. Who Cares?

Web standards, accessibility, WCAG, XHTML, CSS, blah, blah, blah… My web pages look just fine. Why should I care about the so-called “web standards”? Well, do you care that your car was built with and tested for safety standards? Do you care that if you buy a DVD, it will just work in the player you have at home? Does it bug you that you can’t just go buy a replacement battery for your digital camera (or it’s exorbitantly expensive) since it’s proprietary?

Having standards solves lots of problems.

What are web standards?

At a minimum your site will have:

  • Valid HTML/XHTML
  • Valid CSS

Hopefully your site meets some basic accessibility standards:

  • Section 508
  • WCAG priority 1

Even more hopefully, your site will meet the more strict accessibility standards (I usually go up to WCAG priority 2):

  • WCAG priority 2
  • WCAG priority 3

Also, just passing these tests isn’t enough. Seems stupid to say this at this point, but you shouldn’t be using table-based layouts and some thought should be given to how your site will degrade in text-based or unknown browsers. Focus on what matters: the content and usability. Do you really need a bunch of Flash animations and fluff on your site? If you do, then chances are good that people won’t hang around long enough for it to be successful anyway.

Adhering to these standards ensures that your pages can be viewed properly on a wide variety of platforms now and well into the future. You’re pretty much guaranteed that new web browsers will be able to view your pages properly, versus a poorly coded page that will probably fall apart visually. Check out your sites on a wide variety of browsers and devices and see what happens. Check it out on your mobile phone or on your PS3 or Wii browser. If you’ve been coding for IE only (thus making your site proprietary) it will be immediately evident.

Not to mention the fact that coding according to web standards can save money. Pages are more likely to work right “out-of-the-gate” on a greater variety of browsers/devices. Less testing plus increased compatibility = win. Standards-compliant code by definition means that developers new to the project should be able understand and maintain what was written.

Popular Validator Links

For More Info…

Dec 7 2009

JavaScript (jQuery) Text Resizer

First off, let it be known that I think that JavaScript-based text resizers suck. I firmly believe that the text size should be controlled by the user via the web browser controls. I’ve found that most clients want a JS-based text resizer because they think that it will make their website more accessible when, ironically, these types of resizers are not accessible by nature (since they require JS to work).

So, having seen poor implementations of this functionality in the past, I had a few requirements that I wanted my version of the text resizer to meet:

  1. Must be accessible or not be available at all.
    In other words, if it’s going to be non-usable or broken, then don’t even display it. There’s nothing worse to me that having something on a page that requires JavaScript to work, but doesn’t do anything at all to account for when a user does not have JavaScript. Especially when there is an incredibly easy way of addressing this (see below).
  2. Must account for the initial font-size and allow the user to return to that size
    The design mock-up that I received for this project showed that the text size controls would be a series of three letter “A” links, each larger than the previous. I decided that it made sense to make the smallest “A” represent the initial font-size. The subsequent links would add the ability for “bigger” and “biggest”.
  3. Must persist across page views
    I have seen many, many implementations of this that don’t even persist from one page to the next. That has got to be annoying if you’re really trying to use this feature.
  4. Must work on only specified areas of the design (as opposed to the whole page)
    This requirement was from the client and – in my opinion – is the closest thing to a good reason for implementing this type of functionality.

So, the first item on my list was “Must be accessible or not available at all” and was nice ‘n easy to implement. Simple solution that I’ve used in the past is to render the JavaScript-requiring-component with JS. If the user has JS, then JS will make the component available. If not, then it will never even be rendered. Simple! Now, I realize that this could be made to work server-side using AJAX or postbacks, but that was out of the scope of this particular project (not to mention getting to the point of needing to argue the downfalls of doing it this way to the client).

The third and forth items on my list were also easy. To get this to work only on specified areas of a page, I would make it work on only those elements that have a specific CSS class applied to them. To get it to work from page to page, I’d just store the requested size in a cookie. Easy-peasy!

What I found to be the most problematic once I got into this was accounting for the initial font-size when the page is first requested. I have my default font-size set in the CSS as 0.76em (which is around 12px). Using jQuery, most browsers would return the correct value in pixel units (12 point something), but – ever the oddball – Internet Explorer 7 would return some bizarre value in the vicinity of 600-or-so pixels. Needless to say, that ended up being a bit too big when the text was resized. So, researching on the ‘net showed be that this is a common problem and I didn’t come across a good, simple solution. The primary solution I came across involved measuring the height of a hidden div to get the font height pixels so that everything could then be rendered with pixel font sizes. So there was a lot of discussion out there of how to find out what the current pixel size is of the font.

The pixel size of the font seemed dangerous and irrelevant to me. Potentially dangerous since pixel sizes don’t scale well in early versions of IE (I know, I know, I have ridiculous – but oftentimes necessary – browser compatibility requirements). Irrelevant since I really don’t care what specific font size is shown initially since the user will just be wanting to make the font size “bigger” or “biggest”. All I care about is that the font size is bigger relative to the initial font size. After pondering and experimenting, I came up with the following solution: upon the font resize function, add an inner HTML element to the area being resized, then add a percentage value to that element to resize the text.

I’m sure there’s room for improvement and added flexibility, but it seems to be working out pretty well so far. Code below:


Text Size:
  <a href="javascript:ResizeText(1);">A</a>
  <a href="javascript:ResizeText(1.2);">A</a>
  <a href="javascript:ResizeText(1.6);">A</a>

  <p>This is text that will get resized.</p>

JavaScript (using jQuery):

// Global Variables
var fontSizeArea = ".body-outer"; // use 'html' for entire page
var textResizeCookie = "textResizeFactor";
var originalFontSize;

// Initialization Function
$(document).ready(function() {

  originalFontSize = $(fontSizeArea).css("font-size"); // remember the original font size
  if (originalFontSize == null) { originalFontSize = $("html").css("font-size"); }

  var savedResizeFactor = $.cookie(textResizeCookie);
  var resizeFactor;

  if (savedResizeFactor == null) {
    resizeFactor = 1;
  else {
    resizeFactor = parseFloat($.cookie(textResizeCookie));

  if (resizeFactor != 1) {

// Resize Text Function
function ResizeText(resizeFactor) {
  var wrapperClassName = "g-fs-wrapper"; // global font-size wrapper
  var newFontSize = (100 * resizeFactor) + "%";

  if ($("."+wrapperClassName).length > 0) {
    $("." + wrapperClassName).css("font-size", newFontSize);
  else {
    $(fontSizeArea).wrapInner('<div class="' + wrapperClassName + '" style="font-size:' + newFontSize + '"></div>');

  $.cookie(textResizeCookie, resizeFactor); // remember the new size