I know what it’s like to try to build a following on Twitter. Each site I created came with a plea to “Follow me on Twitter.” The problem is, once the user clicks on my link, I have no control over what they saw and didn’t know if they even converted into a follower. Then, once they clicked follow, there was nothing more I could ask the person to do. I was blind and at best I’d only get one follower, one conversion. There had to be a better way.

I created FollowZone.com to try and solve these problems. The site gives you a customized way of presenting your Twitter profile and the ability to get more out of a new follower. When you send someone to your Follow Zone profile, they see a custom list of tweets with little to distract them. After all, the main goal is to click the “Follow Me” button, most links and buttons beyond that are distracting from that goal. Then, once they follow you, they’re presented with a Suggested List of other people to follow.

Here’s the best part. For each new person they follow on that Suggested List, you earn 1 Follow Zone Credit. Those Credits can then be used to have your profile appear on the Suggested List of someone else’s profile. By being on the Suggested List you’re exposed to a new group of people who are encouraged to follow you. This makes one follower potentially several more.

My focus will be to help you get the most out of your potential followers. That means high conversion rates for people who view your profile page and making sure they follow people on the Suggested List. The combination of those two objectives means you’ll earn more Twitter followers by doing what you already do – Ask people to follow you.

See it in action. You should follow me on Twitter here.

Update: Unfortunately, I had to stop running the site. I go into detail here http://www.followzone.com/blog/article/hiatus

I’m currently working on a website that needs a URL shortener. In order to have a good shortened URL I must make the most of the path after the domain. The common way to do this, as Bit.ly and others already do, is to have a mix of alphanumeric characters that increment each time a new URL has been created. I’m using Asp.Net and since there’s no built in function or an already published one, I created my own.

This function works by accepting a list of characters to use in the counting process. Each time a new value is needed the function increments the count by going to the next character in the array. I hope to have a lot of traffic so it’s important to be efficient and fast. The resulting code can run thousands of times in just a fraction of a second.

To use the function you need to pass in the current value (or empty string “” if it’s the first time) and a character array of values to use (include lowercase and uppercase values if you want to have case sensitivity). Including lowercase letters adds an enormous amount of extra values in a shorter character span. That’s very important when you’re working with short URLs.

Function CountWithCharacters(ByVal strValueCurrent As String, ByVal aryCharacter() As Char) As String
    Dim chrCharacterCurrent As Char
    Dim chrCharacterNew As Char
    Dim blnIncrementParent As Boolean
    Dim intCharacterCurrent As Integer = strValueCurrent.Length
    Dim strReturnValue As String

    strReturnValue = strValueCurrent

    Do
        'reset the IncrementParent switch
        blnIncrementParent = False

        'decrement the current character place so it moves up to the parent
        intCharacterCurrent -= 1

        'Are we still looking at characters that exist?
        If intCharacterCurrent >= 0 Then
            chrCharacterCurrent = strReturnValue.Substring(intCharacterCurrent, 1)

            'If the current character is the same as the last value in the array we must increment the parent
            'and set its value to the first value in the array
            If chrCharacterCurrent = aryCharacter(aryCharacter.Length - 1) Then
                If intCharacterCurrent >= 0 Then
                    blnIncrementParent = True
                    chrCharacterNew = aryCharacter(0)
                Else
                    chrCharacterNew = Nothing
                End If

            Else
                'take the next value
                chrCharacterNew = aryCharacter(Array.IndexOf(aryCharacter, chrCharacterCurrent) + 1)
            End If

            'Remove the current character and replace it with the new one
            strReturnValue = strReturnValue.Remove(intCharacterCurrent, 1).Insert(intCharacterCurrent, chrCharacterNew)
        Else
            'Trying to increment a value that doesn't exist. Instead append the first value in the character array
            strReturnValue = aryCharacter(0) & strReturnValue
        End If

    Loop While blnIncrementParent

    Return strReturnValue

End Function

Using the function
After calling the following example the result will be a value of 0 since it’s passing in an empty string and 0 is the first value in the character array. I’m creating the character array by using a string and converting it as I pass it into the function. This character array can include any set of characters in any order. I’m using numbers, lowercase letters, uppercase letters and finally _, – and ~. I’m using those three extra characters to give me more values in a smaller character span. It’s important that all these characters don’t have to be URL encoded which would actually make the URL longer.

strValue = CountWithCharacters("", "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-~".ToCharArray)

As I continue to use the function, feeding it the previous result so it can increment it, I’ll get values like 1, 2, 3, … a, b, c, …A, B, C, … _, -, ~. After the ~ value the function will return 00, 01, 02 and so on. The following call will return 0Az to strValue.

strValue = CountWithCharacters("0Ay", "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-~".ToCharArray)

Profanity
As I worked on this function it crossed my mind that I would eventually run into some curse words. As the values increment, the letter combinations will spell words like ass, shit, fuck, etc. Users will probably not appreciate me giving them a URL that contains curse words. To prevent this I created another function that skips past any words I specify. This skipping process can take a tiny fraction of a second or much longer, depending on how many characters need to be skipped. Once I hit 5+ characters it can take over 1 second to execute. That’s a lot of time for a single function but given how infrequently it needs to skip past a word and now long it’ll take me to reach 5 character URL (“00000″ is the equivalent of 17,850,626), I was willing to forgive it and move on.

Function CountWithCharacters(ByVal strValueCurrent As String, ByVal aryCharacter() As Char, ByVal arySkipWords() As String) As String
    Dim strReturnValue As String
    Dim blnSkip As Boolean
    Dim strSkipWord As String
    strReturnValue = strValueCurrent

    Do
        blnSkip = False
        strReturnValue = CountWithCharacters(strReturnValue, aryCharacter)
        For Each strSkipWord In arySkipWords
            If strReturnValue.ToLower.Contains(strSkipWord) Then
                blnSkip = True
                Exit For
            End If
        Next
    Loop While blnSkip

    Return strReturnValue

End Function

This new function will execute the previous one and then check it for a skip word. If it finds a skip word then it’ll keep looping until the counter incremented past it. This design probably isn’t the most efficient one but I didn’t want to spend any more time on something so simple. It’s better to move on and revisit it if the site gets popular enough for me to be concerned.

Here’s an example call to the function. It passes in the value “asr” which would normally return “ass” but instead, since “ass” is included in the skip word array, “ast” will be the return value.

strValue = CountWithCharacters("asr", "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-~".ToCharArray, "shit,piss,fuck,cunt,cock,dick,tit,ass".Split(","))

If you’ve looked at the HTML source of an ASP.NET page you know there’s a ton of extra white space that isn’t necessary. If you’re concerned about page load speed and bandwidth you’ll want to remove all that extra space. Here’s some code you can use to reduce page size by an average of over 10%. I put this in my MasterPage file.

Protected Overloads Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
    Dim swHtmlText As New HtmlTextWriter(New System.IO.StringWriter)

    MyBase.Render(swHtmlText)

    Dim strHtml As String = swHtmlText.InnerWriter.ToString

    strHtml = Regex.Replace(strHtml, "^\s+<", " <", RegexOptions.Multiline)
    strHtml = Regex.Replace(strHtml, ">\s+<", "> <", RegexOptions.Multiline)

    writer.Write(strHtml.Trim)

End Sub

The replacements I make are very conservative. You can get even more extreme by replacing all spaces after > and before < with the regex SingleLine option.

strHtml = Regex.Replace(strHtml, "\s+<", " <", RegexOptions.Singleline)
strHtml = Regex.Replace(strHtml, ">\s+", "> ", RegexOptions.Singleline)

That code could will break text in a Textfield so you have to make sure to test this more extreme version. You can also add a property in your code for the level of white space you want removed.

While creating a form for a project I wanted to give the user the option of either creating a new entry or selecting from an existing one. The standard way to do it is to give the user a textbox on one line and a dropdown on another. As with most forms, I wanted to limit the space used so the user wont get overwhelmed by the amount of data he needs to enter. My solution was to join the two objects as you can see in the following screen shot.

Working Demo / Example

The textbox is placed on top of the dropdown with enough room on the right to still display the down arrow of the dropdown. You can see that the user is either able to enter new text into the textbox or select an option from the dropdown.

To display the box properly I use HTML and CSS. When the user selects an option from the dropdown I use Javascript to load the value into the textbox. When the form is submitted ignore the dropdown and just pull the value from the textbox. The trickiest part of this was that IE 6 wasn’t able to display the textbox over the dropdown properly. Thanks to Hedger Wang and his fix I was able to make this work across browsers.

This style code is used to overcome the issues with IE6. Place the following code in between the <head></head> tag of your page.

<style type="text/css">
    /*fix dropdown z-index problem. Credit to http://hedgerwow.blogspot.com/ */
    .select-free
    {
        position: absolute;
        z-index: 10; /*any value*/
        overflow: hidden; /*must have*/
        width: 247px; /*must have for any value*/ /*width of area +5*/
    }
    .select-free iframe
    {
        display: none; /*sorry for IE5*/
        display: /**/ block; /*sorry for IE5*/
        position: absolute; /*must have*/
        top: 0px; /*must have*/
        left: 0px; /*must have*/
        z-index: -1; /*must have*/
        filter: mask(); /*must have*/
        width: 3000px; /*must have for any big value*/
        height: 3000px /*must have for any big value*/;
    }
    .select-free .bd
    {
        padding: 11px;
    }
</style>

This is the Javascript used to display the value in the textbox when the user selects an option from the dropdown. This also goes in between your <head></head> tag.

<script language="javascript" type="text/javascript">
     function DropDownTextToBox(objDropdown, strTextboxId) {
        document.getElementById(strTextboxId).value = objDropdown.options[objDropdown.selectedIndex].value;
        DropDownIndexClear(objDropdown.id);
        document.getElementById(strTextboxId).focus();
    }
    function DropDownIndexClear(strDropdownId) {
        if (document.getElementById(strDropdownId) != null) {
            document.getElementById(strDropdownId).selectedIndex = -1;
        }
    }
</script>

This is the HTML that includes the textbox, dropdown and the div that goes around it. You’ll notice IE conditional statements in commented area. This is part of the patch from Hedger Wang’s website. The style was placed on the actual control for simplicity, you can move it to a CSS file if you like.

<div style="position: relative;">
    <!--[if lte IE 6.5]><div class="select-free" id="dd3"><div class="bd" ><![endif]-->
    <input name="TextboxExample" type="text" maxlength="50" id="TextboxExample" tabindex="2"
        onchange="DropDownIndexClear('DropDownExTextboxExample');" style="width: 242px;
        position: absolute; top: 0px; left: 0px; z-index: 2;" />
    <!--[if lte IE 6.5]><iframe></iframe></div></div><![endif]-->
    <select name="DropDownExTextboxExample" id="DropDownExTextboxExample" tabindex="1000"
        onchange="DropDownTextToBox(this,'TextboxExample');" style="position: absolute;
        top: 0px; left: 0px; z-index: 1; width: 265px;">
        <option value="Value for Item 1" title="Title for Item 1">Item 1</option>
        <option value="Value for Item 2" title="Title for Item 2">Item 2</option>
        <option value="Value for Item 3" title="Title for Item 3">Item 3</option>
    </select>
    <script language="javascript" type="text/javascript">
        //Since the first <option> will be preselected the IndexClear function must fire once to clear that out.
        DropDownIndexClear("DropDownExTextboxExample");
    </script>
</div>

The most common way to scroll a page is to link the user to a URL with #AnchorId at the end. This method allows the browser to handle everything and there is no code needed. For times when you need a solution using code I’m going to demonstrate two other methods with Javascript.

The first option is to use the built in Javascript function location.href. This function allows you to send the user to any URL or Anchor you’d like. Using this function we’re going to send the user to an Anchor on the current page with an Id of MyAnchor.

Place an Anchor tag with the Id MyAnchor on the part of the page you’d like to scroll to. The text “scroll to here” is optional.

<a id="MyAnchor">Scroll to here</a>

Although you can call the location.href function at anytime after the page is loaded, for this example we’re going to call it right as the page loads. Place the code at the bottom of the BODY tag and right above </body>.

<script language="javascript" type="text/javascript">
    location.href = '#MyAnchor';
</script>

The second method is to scroll the user directly to an object. This can be almost any object and doesn’t have to be an Anchor. It’s useful when you don’t have an Anchor in the area or simply don’t want to put one there. The function below includes another function called ObjectPosition.

function ScrollTo(obj){
    try{
        var objpos = ObjectPosition(obj);
    }catch(e){}
    try{
        scroll(0,objpos[1]);
    }catch(e){}
    try{
        window.scrollTo(0,objpos[1]);
    }catch(e){}
}

Obj is an HTML object you’d like to scroll to.

The ObjectPosition returns both the left and top offset as a two item array. You’ll notice that I hard coded 0 in the two scroll functions. You can change that to objpos[0] if you need to scroll horizontally. I’m using two different scrolling methods because of browser issues.

Retrieves the left and top offset of an object using Javascript. I got this from Peter-Paul Koch. His description is more extensive.

function ObjectPosition(obj) {
    var curleft = 0;
      var curtop = 0;
      if (obj.offsetParent) {
            do {
                  curleft += obj.offsetLeft;
                  curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
      }
      return [curleft,curtop];
}

Pass in the object you’d like the position of and it’ll return a 2 item array. The first item is the left offset and the second item is the top offset.

Javascript only lets us check the offset from the object’s parent. Since the object may be nested inside other elements, each of the parent’s offsets must be added to get the final offset result.

The example below shows how to get the offset of an element called MyElementId. Place the code at the bottom of the BODY tag and right above </body>.

<div id="MyElementId">My test element</div>
<script language="javascript" type="text/javascript">
    var aryPosition = ObjectPosition(document.getElementById('MyElementId'));
    document.write('MyElementId left offset is ' + aryPosition[0] + '<br />');
    document.write('MyElementId top offset is ' + aryPosition[1] + '<br />');
</script>

HTML of a Dropdown list with all the time zones already added.

<select name="DropDownTimezone" id="DropDownTimezone">
      <option value="-12.0">(GMT -12:00) Eniwetok, Kwajalein</option>
      <option value="-11.0">(GMT -11:00) Midway Island, Samoa</option>
      <option value="-10.0">(GMT -10:00) Hawaii</option>
      <option value="-9.0">(GMT -9:00) Alaska</option>
      <option value="-8.0">(GMT -8:00) Pacific Time (US &amp; Canada)</option>
      <option value="-7.0">(GMT -7:00) Mountain Time (US &amp; Canada)</option>
      <option value="-6.0">(GMT -6:00) Central Time (US &amp; Canada), Mexico City</option>
      <option value="-5.0">(GMT -5:00) Eastern Time (US &amp; Canada), Bogota, Lima</option>
      <option value="-4.0">(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
      <option value="-3.5">(GMT -3:30) Newfoundland</option>
      <option value="-3.0">(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
      <option value="-2.0">(GMT -2:00) Mid-Atlantic</option>
      <option value="-1.0">(GMT -1:00 hour) Azores, Cape Verde Islands</option>
      <option value="0.0">(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
      <option value="1.0">(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris</option>
      <option value="2.0">(GMT +2:00) Kaliningrad, South Africa</option>
      <option value="3.0">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
      <option value="3.5">(GMT +3:30) Tehran</option>
      <option value="4.0">(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
      <option value="4.5">(GMT +4:30) Kabul</option>
      <option value="5.0">(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
      <option value="5.5">(GMT +5:30) Bombay, Calcutta, Madras, New Delhi</option>
      <option value="5.75">(GMT +5:45) Kathmandu</option>
      <option value="6.0">(GMT +6:00) Almaty, Dhaka, Colombo</option>
      <option value="7.0">(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
      <option value="8.0">(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
      <option value="9.0">(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
      <option value="9.5">(GMT +9:30) Adelaide, Darwin</option>
      <option value="10.0">(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
      <option value="11.0">(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
      <option value="12.0">(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
</select>

Detecting DST should be a basic function that’s included in Javascript. Sadly, along with many other basic functions, this one isn’t. For all my Google searches I wasn’t able to find a clear cut bullet proof DST detector. Many only worked in one hemisphere or specific timezones. I wrote this function to be bullet proof. It will detect the correct time zone no matter what.

As you’ll see from the code and comments, I hunt for Daylight Saving Time using a broad search to keep from being a CPU hog. Once I found DST I roll back a few hours and go on a more detailed search for the exact time DST changes over.

NOTE: This code is Dependant on my other function TimezoneDetect. You must use that function in conjunction with this one.

//Find start and end of DST
function DstDetect(){
    var dtDstDetect = new Date();
    var dtDstStart = '';
    var dtDstEnd = '';
    var dtDstStartHold = ''; //Temp date hold
    var intYearDayCount = 732; //366 (include leap year) * 2 (for two years)
    var intHourOfYear = 1;
    var intDayOfYear;
    var intOffset = TimezoneDetect(); //Custom function. Make sure you include it.

    //Start from a year ago to make sure we include any previously starting DST
    dtDstDetect = new Date()
    dtDstDetect.setUTCFullYear(dtDstDetect.getUTCFullYear() - 1);
    dtDstDetect.setUTCHours(0,0,0,0);

    //Going hour by hour through the year will detect DST with shorter code but that could result in 8760
    //FOR loops and several seconds of script execution time. Longer code narrows this down a little.
    //Go one day at a time and find out approx time of DST and if there even is DST on this computer.
    //Also need to make sure we catch the most current start and end cycle.
    for(intDayOfYear = 1; intDayOfYear <= intYearDayCount; intDayOfYear++){
        dtDstDetect.setUTCDate(dtDstDetect.getUTCDate() + 1);

        if ((dtDstDetect.getTimezoneOffset() * (-1)) != intOffset && dtDstStartHold == ''){
            dtDstStartHold = new Date(dtDstDetect);
        }
        if ((dtDstDetect.getTimezoneOffset() * (-1)) == intOffset && dtDstStartHold != ''){
            dtDstStart = new Date(dtDstStartHold);
            dtDstEnd = new Date(dtDstDetect);
            dtDstStartHold = '';

            //DST is being used in this timezone. Narrow the time down to the exact hour the change happens
            //Remove 48 hours (a few extra to be on safe side) from the start/end date and find the exact change point
            //Go hour by hour until a change in the timezone offset is detected.
            dtDstStart.setUTCHours(dtDstStart.getUTCHours() - 48);
            dtDstEnd.setUTCHours(dtDstEnd.getUTCHours() - 48);

            //First find when DST starts
            for(intHourOfYear=1; intHourOfYear <= 48; intHourOfYear++){
                dtDstStart.setUTCHours(dtDstStart.getUTCHours() + 1);

                //If we found it then exit the loop. dtDstStart will have the correct value left in it.
                if ((dtDstStart.getTimezoneOffset() * (-1)) != intOffset){
                    break;
                }
            }

            //Now find out when DST ends
            for(intHourOfYear=1; intHourOfYear <= 48; intHourOfYear++){
                dtDstEnd.setUTCHours(dtDstEnd.getUTCHours() + 1);

                //If we found it then exit the loop. dtDstEnd will have the correct value left in it.
                if ((dtDstEnd.getTimezoneOffset() * (-1)) != (intOffset + 60)){
                    break;
                }
            }

            //Check if DST is currently on for this time frame. If it is then return these values.
            //If not then keep going. The function will either return the last values collected
            //or another value that is currently in effect
            if ((new Date()).getTime() >= dtDstStart.getTime() && (new Date()).getTime() <= dtDstEnd.getTime()){
                return new Array(dtDstStart,dtDstEnd);
            }

        }
    }
    return new Array(dtDstStart,dtDstEnd);
}

When I needed a way to detect the browser time zone all I found were posts using getTimezoneOffset. The problem with that was it never took into account Daylight Saving Time (DST). If the user was currently in DST the function returns the time zone plus 60 minutes. Those extra minutes pushed the user into the next time zone incorrectly. There was no way to know if getTimezoneOffset included DST or not.

My solution was to go through each month of the current year and find its offset. Since DST adds an hour to the offset I just needed to keep the lowest offset of the year.

function TimezoneDetect(){
    var dtDate = new Date('1/1/' + (new Date()).getUTCFullYear());
    var intOffset = 10000; //set initial offset high so it is adjusted on the first attempt
    var intMonth;
    var intHoursUtc;
    var intHours;
    var intDaysMultiplyBy;

    //go through each month to find the lowest offset to account for DST
    for (intMonth=0;intMonth < 12;intMonth++){
        //go to the next month
        dtDate.setUTCMonth(dtDate.getUTCMonth() + 1);

        //To ignore daylight saving time look for the lowest offset.
        //Since, during DST, the clock moves forward, it'll be a bigger number.
        if (intOffset > (dtDate.getTimezoneOffset() * (-1))){
            intOffset = (dtDate.getTimezoneOffset() * (-1));
        }
    }

    return intOffset;
}

The function returns the correct offset, in minutes, from Coordinated Universal Time (UTC) in minutes and properly ignores DST. Remember, when calculating time zone, some time zones are set in half and three quarter hour increments.