Dear Comcast,
My name is Christian Cox and my phone number is 678-478-7531. It’s Saturday, August 21, 2010 at 12:45 PM Eastern time and I just got off the phone with one of your telemarketers. He was interested in promoting an upgrade to a package with High-Speed Internet and your Digital Starter Cable, a package I am actually interested in and on terms that sounded fairly reasonable! I can truly say that I was excited that I had answered a telemarketing call that may lead to something positive. Sadly, I will not be upgrading at this time because your customer service representative was so inept and so outright deceptive to me that I am disgusted, once again, with your company’s customer service. I try. I try again and again to give your company a chance to treat me with fairness and respect, but time and again you prove to me that you, as a company, cannot follow through on that basic service requirement.

I asked your customer service representative to tell me which HD channels were included in the package. He was unable to tell me. Instead of finding out for me, or telling me where to find the information on my own, he offered a money-back guarantee for the service if I was not satisfied. Trying to manipulate me into purchasing additional services that you will not define to me is insulting and rude. Furthermore, I was never able to pin him down on the actual final cost of everything after promotional rates expired. Rather than telling me actual numbers and final costs, he was more interested in telling me how much I would save (”Your internet cost will go down!”). I find that to be insulting and purposefully deceptive. When I asked him for a total number for all services after the promotional rate expires, he gave me a number that is lower than the price I am paying now for internet only. Wow, what a deal! When I pointed that out to him, he stated that the number he told me was only for part of the service, not the package. Again, PURPOSEFULLY DECEPTIVE. At this point I became frustrated and asked to speak to his supervisor, as I was confused about the terms of the promotion and I needed clarification that he could not provide to me. Rather than put me on hold and get a supervisor (apparently they were all busy), he continued arguing with me and denying that he had been deceptive. I chose to end the call after relating how disgusted I am with both him (the CSR) and your company as a whole.

Normally I would just let this slide but today I feel like sharing it with everyone I know, and anyone else who will listen. Thanks to your high-speed internet service and the beauty that is social networking, I am about to make that happen! I will continue to use your high-speed internet service because the product is actually quite good for my needs and I do not need to interact with your customer service on a regular basis to keep it turned on. On the other hand, I will not be expanding my utility use with your company at this time or in the near future because of your horrible customer service and the treatment I received today.

Sincerely,
Christian Cox

UPDATE
At 3:10 PM this same day I answered a call from a blocked number. It was the telemarketer – same man, same accent, same voice. He said “Fuck you,” then hung up. Classic.

I am using this awesome Quicksand plugin for jQuery that makes filtering and reordering a list both beautiful and simple. I love this thing – it’s snappy, looks great, and put some polish on a regular old unordered list. But I was having trouble getting it to work locally in IE. I have an unordered list of items that I want to sort by type. Some items are one type, some items fall into multiple type categories. I’m organizing those types by class name as seen here:


<ul class="filter-list">
<li class="stores">Lorem</li>
<li class="brands">Ipsum</li>
<li class="products">Dolor</li>
<li class="stores brands">Sit</li>
<li class="brands products">Amet</li>
<li class="stores brands products">Quandis</li>
</ul>


To filter the list, I was using links as my triggers instead of inputs. Each link had an href attribute that either triggered ALL items, or corresponded to a particular class of items in the list, as seen here:

WRONG


<p class="triggers"><a href="all">All</a> | <a href="brands">Brands</a> | <a href="stores">Stores</a> | <a href="online">Online</a></p>


So I was stripping out the href attribute and using that to filter the list. But hold up a minute. In IE 7 when I test locally, that href translates to finding a class of “/user/Christian/Documents/Clients/blahblahblah/classname” or something ridiculous like that – IE appends the entire path when it passes that information to my jQuery script. So I ended up stripping out the href and using another attribute – rel – to drive the filters. Here’s the updated HTML:


<p class="triggers"><a href="#" rel="all">All</a> | <a href="#" rel="brands">Brands</a> | <a href="#" rel="stores">Stores</a> | <a href="#" rel="online">Online</a></p>


Here’s the final jQuery:


// get the initial (full) list
var $filterList = $('ul.filter-list');
// add unique id's
// i don't like having to write these all in the code
// so i wrote a script to id these for me
for(var i=0; i<$('ul.filter-list li').length; i++){
$('ul.filter-list li:eq(' + i + ')').attr('id','flitem' + i);
}
// clone first collection to get a second collection
var $data = $filterList.clone();
// handle trigger clicks
$('p.trigger a').click(function(e) {
if($(this).hasClass('all')) {
// get a group of all items
var $filteredData = $data.find('li');
} else {
// get a group of items of a particular class
var $filteredData = $data.find('li.' + $(this).attr('rel'));
}
// call quicksand
$('ul.filter-list').quicksand($filteredData, {
duration: 500,
attribute: function(v) {
// this is the unique id attribute we created above
return $(v).attr('id');
}
}
e.preventDefault();
});

So if you're having trouble getting Quicksand to work in IE, and you're using a link's href attribute as a trigger, consider moving that trigger to the rel attribute or a class name instead. Hope this helps!

UPDATE:
While this code is still functional and useful for AS 2.0 projects, an updated MailChimp AS 3.0 sample is now available from kohactive!

Here’s some sample code you can use to connect your Flash signup form to the MailChimp API. I recently had a client with an existing MailChimp account ask to allow users to sign up for their newsletter through their website, which has a full Flash interface. Unfortunately I was not able to find much documentation out there about how to make this work, and it took me some hair pulling to get it sorted out. Finally, with the help of Jesse Peterson and the API team at MailChimp, we were able to get a working version that doesn’t require any additional PHP or other backend scripting. Here’s the AS:


// Edit your MailChimp specifics here.
// You shouldn't have to edit anything but these two variables
// unless you are collecting additional data.
_global.apiKey = "YOUR_MAILCHIMP_API_KEY";
_global.listID = "YOUR_MAILCHIMP_LIST_ID";

// set tab order for form usability
firstName_txt.tabIndex = 1;
lastName_txt.tabIndex = 2;
email_txt.tabIndex = 3;
submit_mc.tabIndex = 4;

// submission
submit_mc.onRelease = function()
{
   // show a loading message in case transmission is slow
   response_txt.text = "Sending…";

   // gather form data
   var firstName:String = firstName_txt.text;
   var lastName:String = lastName_txt.text;
   var email:String = email_txt.text;

   // check the email address
   // if it's valid…
   if(validEmail(email)){

      // disable the submit button while loading data
      submit_mc.enabled = false;

      // set up result xml
      var result_xml:XML = new XML();
      result_xml.ignoreWhite = true;
      result_xml.onLoad = function(success){

         // if the user is subscribed successfully, the result set
         // will look something like
         // <MCAPI type="boolean">1</MCAPI>
         // so you can reset the form and display
         // the confirmation message.
         if(result_xml.firstChild.firstChild.toString() == "1"){
            resetForm("Please check your email to confirm your subscription.");
         }

         // or else there was a data error,
         // so you need to parse the error code.
         else{

            // Convert the error string from XML data to a string,
            // then display it in the response text field.
            var resultCode = result_xml.firstChild.childNodes[0].childNodes[0].toString();
            _root.resetForm(resultCode);
         }
      }

      // Set up a send XML object, even though we're not
      // really sending anything in XML.
      // All your data will be encoded in the send_url variable.
      var send_xml:XML = new XML();
      send_xml.ignoreWhite = true;
      // Here's where your data is added.
      // For additional text fields, add additional merge_vars
      // array elements and append at the end.
      var send_url:String = "http://api.mailchimp.com/1.1/?output=xml";
      send_url += "&method=listSubscribe&apikey=" + apiKey;
      send_url += "&id=" + listID + "&email_address=" + email;
      send_url += "&merge_vars[FNAME]=" + firstName;
      send_url += "&merge_vars[LNAME]=" + lastName;
      // And here's how you send/load:
      send_xml.sendAndLoad(send_url, result_xml);

   }
   // or else there's an issue with the email address
   else{
      // show the email error.
      showErrors();
   }
}

// validate an email address
function validEmail(inputEmail:String):Boolean
{
   if (inputEmail.indexOf(" ")>0) {
   return false;
}
var emailArray:Array=inputEmail.split("@");
if (emailArray.length != 2 || emailArray[0].length == 0 || emailArray[1].length ==0) {
   return false;
}
var postArray:Array=emailArray[1].split(".");
if (postArray.length < 2) {
   return false;
}
for (var i:Number=0; i<postArray.length; i++){

   if (postArray[i].length < 1) {
      return false;
   }
}
var suffix=postArray[postArray.length-1];
if (suffix.length < 2 || suffix.length > 3) {
   return false;
}
   return true;
}

// delete all form elements and display a response message
function resetForm(pResponse){
   submit_mc.enabled = true;
   firstName_txt.text = "";
   lastName_txt.text = "";
   email_txt.text = "";
   response_txt.text = pResponse;
   Selection.setFocus("firstName_txt");
}

// select the email address and display an error message
function showErrors(){
   Selection.setFocus("email_txt");
   Selection.setSelection(0, email_txt.length);
   response_txt.text = "Invalid email address.";
   submit_mc.enabled = true;
}


Want to try it out? All you need to do to get it working is set up your MailChimp account and lists, then edit these variables:


_global.apiKey = "YOUR_MAILCHIMP_API_KEY";
_global.listID = "YOUR_MAILCHIMP_LIST_ID";

Then push your files online or test your SWF directly in the Flash Player (testing in a browser from your desktop may throw a Flash security error). You should be subscribing users in no time. Thanks again to the API team for working with me on this!

Monday

• 11:30 – Getting started with AS 3
• 2:00 – Using Flex and AIR to automate CS workflows
• 4:00 – Creating effects with Pixel Bender

Tuesday

• 8:30 – Build your 1st RIA with Flex 3
• 1:30 – AIR boot camp

Wednesday

• 9:30 – Text component library for Flash Player
• 11:00 – Build a DB-enabled AIR app with Dreamweaver, PHP and AJAX
• 2:00 – AIR core concepts for developers who use Flash
• 4:00 – Thermo hands-on

I’m actually really excited about this! Not only do I get to go to classes 8 hours a day, but I get to go to lots of  lab classes – at the end of the period they make you turn in all your practice work for a grade. No lie! Lowest scorers have to act out a new Microsoft commercial on stage at the closing ceremony. Lots of “believable” “successful” “creative” computer users proclaiming “I am a PC”?!!?! John Hodgman owns you and your weak sauce computing persona.

I’m also hoping to capitalize on the unreasonably high number of freebies I get that week. The company I work for is paying for flights, room and conference. And hopefully Adobe’s got swag coming out of their square-rim bespectacled eyeballs. Note to self: check the airline’s policy for extra carry-ons.

I get to do lots of different kinds of front-end development at maybe.for.you., and right now I’m cracking on a social networking site optimized for the iPhone. There’s a simple horizontal header at the top with a logo and a few global nav links. That header is consistent from page to page, and doesn’t require any animation. But for the main site content, I’m setting up clickable lists that scroll to reveal more detailed information. It’s basically a stripped-down version of the IUI, but built specifically for this interface using jQuery. There’s plenty of information out there about hiding the URL bar at the top of the screen – a simple javascript function can handle that:

<script language="javascript" type="text/javascript">
   addEventListener("load", function(event)
   {
	   setTimeout(function(){window.scrollTo(0, 1);}, 100);
   }, false);
</script>

Add that in your <head>tag to scroll the URL bar out of the way when the page loads. But with an AJAX-heavy interface, I found that the URL bar isn’t easy to keep out of the way. Links, animation, and scripting can all cause the URL bar to drop down, even if you’re not sending the user to a new HTML page. Eventually I was able to work out my problems, but only after wasting plenty of time with guess-and-check coding – and continuously uploading my updates to the web because I can’t test locally on my iPhone. Anyway here’s a checklist I came up with for troubleshooting the URL bar.

Prevent the default event. It’s not something I always think about, but it’s usually a good idea, and is usually the first thing I check when troubleshooting. If you’re using <a> links to trigger animations, be sure to catch and prevent that default event.  If you’re using jQuery to do your animations, this is simple:

$("a.list").click(function(event){
    event.preventDefault();
    // animation scripts go here
});

Consider the height of existing page content. Is there enough content visible on the screen to fill up the entire available vertical height? If not, the browser will scroll to the top of the page regardless of whether or not the URL is being manipulated. One solution – the CSS min-height property. Of course, it’s not universally supported but since we’re optimizing for iPhone/iPod touch we’re pretty well covered. So I create a class called “page” that includes a min-height of at least 400px – combined with the 80px of my header that should be plenty of vertical space to fill the screen.

/* CSS document */
.page
{
    min-height: 400px;
}

So I thought that would solve all my problems but during some of my page animations I was still seeing the URL bar drop down. I’m hiding a page element off the right edge of the browser, and setting its display property to “none”. When a link is clicked, I animate the original page off the left edge and animate the new page onto the screen. Even though I was using a time-delayed callback to hide the first page after the off-screen animation, since I had that line of code before the line displaying the second page the browser detected an insufficient amount of content on the page for a brief moment and scrolled to the top. Here’s the bad code:

$("#leftPage").animate({
   "left": "-100%"}, 700, "", function(){
      loadPage(event.target.rel);}
);
$("#rightPage").show();
$("#rightPage").animate({
   "left": "0%"}, 800, "", function(){
   $(".page:eq('0')").hide();}
);

And the corrected version:

$("#rightPage").show();
$("#leftPage").animate({
   "left": "-100%"}, 700, "", function(){
      loadPage(event.target.rel);}
);
$("#rightPage").animate({
   "left": "0%"}, 800, "", function(){
      $(".page:eq('0')").hide();}
);

So after a lot of trial and error I worked out most of the glitches with the URL bar. Next week I’m sure it’ll be something else.