AT&T Uverse with CallVantage - 2wire and dlink dropping calls

Problems: Dropped calls, call interference, static sounds, interference with wireless internet.

Components used:
AT&T 2.4Ghz E2717B Wireless Phone
AT&T Callvantage Voip Service
Dlink Telephone Adapter
Roadrunner Internet - Time Warner (switched to Uverse)
AT&T Uverse package
2Wire Modem/Router

Background
We have been using AT&T Callvantage for awhile and noticing that whenever the phone rang, we would lose our wireless internet altogether. So, after calling Callvantage customer service, they tweaked something on their end to "reduce voice traffic". So, the wireless stopped dropping out, this issue was fixed.

Our other problem was that sometimes callers would complain of static, or that we sounded far away. This problem was due to our AT&T Wireless phone. The solution here: 2.4Ghz is simply not high enough for a wireless phone used around wireless networking. YOU MUST upgrade to at least 5.8Ghz phone, 6.0 (dect) if you can. This will fix your interference among other problems.

Last, we just recently subscribed to the AT&T Uverse package, and had been long time users of the AT&T CallVantage VOIP service. Now, after about 2 minutes of talking, our calls would be dropped, almost every call. This was solved by:

1. Calling callvantage customer service instructing us to:
   
2. Go into the Uverse 2wire modem configuration page, and set the Dlink router, to DMZPlus mode. This will stop the Uverse firewall from preventing traffic to the Dlink.
3. Finally, the problem was solved by using a newer Dlink Telephone Adapter, the older TA's do not seem to work properly with the Uverse package.
4. Then, we needed to setup DMZPlus Mode with the new Dlink.

So, to reiterate, if you're having problems with your AT&T CallVantage Service with Uverse:

1. Make sure your wireless phone broadcasts at least 5.8Ghz or more.
2. Make sure you're Dlink is running in DMZPlusMode (call customer service for instructions)
3. Make sure you're using the latest Dlink Telephone Adapter.

There, hopefully that saves someone hours and hours of research, and dropped calls.

What one Google engineer did with his "20% Time"

"20% Time" is basically the one day a week all Google Engineers have to do whatever they want; and Google will sometimes even back them...

Official Google Blog: Building software tools to find child victims: "Links to this post"

Bring your website to life

A couple of ways to make your site more interactive:

1. Add "Email to friend" links to pages
2. Add "Back" link to bottom pages
3. Scrolling marquee on home page. (Tip: Use smooth motion transitions - using flash, or a javascript library. For example -see the top of lab's home page)
   
4. Upcoming Events (maybe rss feed from blog)
5. Latest News (separate from events - this is more latest news from across the industry/world)
   
6. Display a "Last Updated" date on pages.
7. Polls - ask visitors questions - provide multiple choice answers - quick ajax submission.
1. Allow some way to quickly (ajax) submit comment, question, or just to contact in anyway.
   
8. "Who's online" - with login capabilities.
9. Smooth motion image transitions
10. Some piece of data that is completely relevant at that second (time, temperature, etc)
11. Allow to search site (using google in our case)

Best javascript formatting of a phone number field

Stop fooling with phone number fields now - should I break them into 3 fields? Should I ask for format xxx-xxx-xxxx or (xxx)xxx-xxxx or xxxxxxxxxx? How about giving them one field, and formatting it as they type:
*Note - I don't have the time to test this fully, please let me know if you have trouble with it.

/*
FormatTelNo method takes in the current element of the form and formats the phone number 
in "(123 456-7890" format. This method should be fired on every key entry 
(using onKeyUp method) in the current element of the form. If any key other than 0 to 9 
is entered, it erases that entry rightaway. Maxlength and size of the current
element of the form should be 13.
Eg. <netui:textBox size="13" maxlength="13" onKeyUp="JavaScript:formatTelNo (this);" onBlur="JavaScript:checkTelNo (this);" onKeyDown="JavaScript:formatTelNo (this);"/>    
*/
function formatTelNo (telNo)
{
    // If it's blank, save yourself some trouble by doing nothing.
    if (telNo.value == "") return;

    

    var phone = new String (telNo.value);
    
    phone = phone.substring(0,14);

    /*
    "." means any character. If you try to use "(" and ")", the regular expression becomes 
    complicated sice both are reserve characters and escaping them sometimes fails. So just 
    use "." for any character and replace it later.
    */
    if (phone.match (".[0-9]{3}.[0-9]{3}-[0-9]{4}") == null)
    {
        /*
        Following "if" is for user making any changes to the formatted tel. no. If you don't put this 
        "if" condition, the user can not correct a digit by first deleting it and then entering a 
        correct one, since this will fire two "onkeyup" events : first one on deleting a 
        character and second one on entering the correct one. The first "onkeyup" event will fire this 
        function which will reformatt the tel no before the user gets a chace to correct the digit. This 
        will surely confuse the user. The "if" condition below eliminates that.
        */
        if (phone.match (".[0-9]{2}.[0-9]{3}-[0-9]{4}|" + ".[0-9].[0-9]{3}-[0-9]{4}|" +
            ".[0-9]{3}.[0-9]{2}-[0-9]{4}|" + ".[0-9]{3}.[0-9]-[0-9]{4}") == null)
        {
            /*
            You will reach here only if the user is still typing the number or if he/she has 
            messed up already formatted number. 
            */
            var phoneNumeric = phoneChar = "", i;
            // Loop thru what user has entered.
            for (i=0;i<phone.length;i++)
            {
                // Go thru what user has entered one character at a time.
                phoneChar = phone.substr (i,1);
    
                // If that character is not a number or is a White space, ignore it. Only if it is a digit, 
                // concatinate it with a number string.
                if (!isNaN (phoneChar) && (phoneChar != " ")) phoneNumeric = phoneNumeric + phoneChar;
            }
    
            phone = "";
            // At this point, you have picked up only digits from what user has entered. Loop thru it.
            for (i=0;i<phoneNumeric.length;i++)
            {
                // If it's the first digit, throw in "(" before that.
                if (i == 0) phone = phone + "(";
                // If you are on the 4th digit, put ") " before that.
                if (i == 3) phone = phone + ") ";
                // If you are on the 7th digit, insert "-" before that.
                if (i == 6) phone = phone + "-";
                // Add the digit to the phone charatcer string you are building.
                phone = phone + phoneNumeric.substr (i,1)
            }
        }
    }
    else
    { 
        // This means the tel no is in proper format. Make sure by replacing the 0th, 4th and 8th character.
        phone = "(" + phone.substring (1,4) + ") " + phone.substring (5,8) + "-" + phone.substring(9,13); 
    }
    // So far you are working internally. Refresh the screen with the re-formatted value.
    if (phone != telNo.value) telNo.value = phone;
}

/*
CheckTelNo method takes in current element of the form as input. This method should be 
fired as the user attempts to leave the current element in the form (by using onBlur method). 
It checks to see if the format of the phone is "(123) 456-7890".
Eg. <netui:textBox size="13" maxlength="13" onBlur="JavaScript:checkTelNo (this);" onKeyUp="JavaScript:formatTelNo (this);" onKeyDown="JavaScript:formatTelNo (this);"/>  
*/      
function checkTelNo (telNo)
{
    if (telNo.value == "") return;
    if (telNo.value.match (".[0-9]{3}.[0-9]{3}-[0-9]{4}") == null)
    {
        if (telNo.value.match ("[0-9]{10}") != null)
            formatTelNo (telNo)              
    }
}

How To: Create the clearest transparent Images

In all my 8 years of web development, I've always wrestled with transparent images. For the longest time, I was under the assumption that transparent .gifs were the best thing out there. And, I was wrong.

The trick: Use png's
PNG is by far, the most crisp, clear result you can find. The problem is that PNG is NOT SUPPORTED BY INTERNET EXPLORER! However, thanks to some serious research, google, and a beautiful code snippet by the folks at youngpup.net, we have a graceful, standards compliant workaround for the ugly duckling, or rather, Internet Explorer.

How to implement your transparent png
1. First, create your transparent png (using photoshop, or any image editing software)

2. Include your png on your page. Just like any other image:
<img src="images/my-trans-header.png" />

3. Grab youngpups beautiful transparent png script, and include it on your page.

4. You may want to rewrite the onload handler using your method of choice. (I use the prototype library which comes with a wonderful event handler.

5. IMPORTANT: You will need a 1px by 1px transparent gif named: x.gif located in the same directory as the file that is executing this script.

You're done!

More Resources
Young Pup's transparent png example
http://allinthehead.com/retro/69/

CSS TRICK: vertical scrollbar ie internet explorer

Another gem thanks to IE. It seems that Internet explorer automatically places a vertical scrollbar on the page even when it isn't needed. It serves no purpose other than to force us as developers to lose hair from the back and sides of our heads.

If you would like the scrollbar to appear ONLY when it is needed:
Add this bit of css to your style sheet:

html{overflow:auto}

And your done!

special thanks to the guys at trap17.com for their solution:
Css trick: Hide disabled Internet Explorer vertical scrollbar

CSS Z index with relative positioning

Q. How do I position items relatively and still be able to set their Z-index?

A. Don't!

Many of you probably already know this, but you don't have to position an element with position:absolute by hand anyways. When you set your css, simply set position:absolute - don't define the top or left positioning - and the element will lie where it normally would within the document flow.

Mysterious Padding Bug in IE????

Internet Explorer is the worst browser ever!! This browser makes my life hell every day! I'm considering changing professions because of it!

Anyways, I can't even begin to describe this one. I don't know what the cause is, but I can tell you what is happening:

If Internet Explorer (only) is inserting mysterious padding after the end of a <div> or <a>, than you are encountering this problem. For some reason, it seems to be carrying over a width, or padding from the previous line, and dropping it down. The only solution I have found is that you have to either define a padding on your line above or a 1px border.

To read more about this:
Mysterious Padding Bug in IE (scroll down to the very bottom)

Rich web-accessible fonts without downloading fonts locally

I couldn't believe this until I saw it in action on Good Creative's site. Using this flash & javascript based snippet, the page can display ANY FONT you would like, without being limited to the fonts on the user's machine! And all the while, without sacrificing accessibility, search engine friendliness, or markup semantics. Unbelievable, if it works, I have yet to test it, but I can't wait.

Check it out: sIFR 2.0: Rich Accessible Typography for the Masses

Links and Transparent PNGs

If you've ever created a link and realized that, for some reason, you can only click the text within the link??? Even though you have everything within standards, and the link is being 'displayed' (using css: display:block) as a block level element, it STILL ONLY ALLOWS YOU TO ACTUALLY CLICK THE TEXT?! (Side note- this AS USUAL is only an issue with Internet Explorer.)

I have come across this a few times, and this time I had no choice but to find a solution. Thankfully, i found the magic search words (this i find is the hardest part of all - usually when you encounter an issue, the solution is posted somewhere, the true mastery is nailing down the exact search phrase that will yield the answer to your problem, almost a game of aiming your words perfectly. This time the solution was "Transparent png links" thanks to google, and of course the author of that page).

Anyways The solution:

All you need to do is define a position:relative on your link! then, magically, it works:
Html Code:

<ul>
<li><a href="website-design.php">
<div class="divAsLink" id="website_design"> </div>
</a>
</li>
</ul>

CSS:

.subnav a{
display:block;
position:relative;}