October pwns. The climate cools to the point where it’s actually enjoyable, leaves turn here in New England, baseball playoffs, and Halloween to name a bit of awesomeness. The lovely October holiday has kept a roof over my head since I graduated from WPI, minus a short stint distracting tweens.

On the eve of October, it’s worth mentioning that if you work with websites that spike ginormously in a short amount of time that up-time is critical. Each minute of downtime can have huge revenue ramifications.

At Fright Catalog I employed a free way of instantly being alerted via txt message if any of our sites were struggling.

Montastic

Montastic is a free service that will constantly ping your domain and alert you via email when there is a problem. It’s rock solid and it just works.

Send a text to my iPhone

It took a bit of research to figure out which email address on AT&T worked with my iPhone but after testing out a few:

• phone#@mmode.com
• phone#@txt.att.com
• phone#@mms.att.com
• phone#@cingularme.com – works, but on it’s way out

I finally found a winner: phone#@txt.att.net (Thanks to Ryan for the update)

It’s not sexy but it will work as an email address that when emailed will send an MMS message to your iPhone.

I’ve seen the recently popular downforeveryoneorjustme.com advertise uptimeparty.com. They’ll let you monitor 1 site for free, but otherwise you pay. Montastic does the same job and it’s free, so it makes a great alternative.

Montastic has helped me sleep easy many-a-night if we hit some up-time snags earlier that day. It could easily be used for your own personal blog as well.

Recently I’ve been using Twitter more and more. What was initially an annoyance of a service (first time I saw a tweet about having to take a deuce I checked out) has become my office water cooler from my virtual home office where I spend my days toiling away working on the pipes of the interwebs.

Initially when I signed up for Twitter back in March of 2007 I chose a different moniker “ky“ because the big thing about Twitter was that you could use it on your cell with SMS. I figured if people were going to txt me via twitter that “ky” would be a hell of a lot easier to type than “somedirection” so I went with it.

I think Twitter as a service is starting to catch on – even Obama has 2 channels: BarackObama and ObamaNews. Seeing that use of twitter was probably the first time I thought – hey Twitter is mainstream. Obama is using technology in his campaign exceptionally well I might add. But I digress..

I realized recently that I don’t want to be boxed into the “ky” username. It’s nice to have and people recognize me (once they see my avatar) but it’s not me, it’s not my brand. So I went about changing this and stumbled upon the realization that Twitter actually handles for multiple Twitter personas quite nicely.

The Primary User Method on Twitter

1. You need a unique email address for each name
2. Choose 1 handle as your master account from which you’ll send all updates. For me I’m going to stick with ky because it’s what I started with and I have a handful of followers.
3. Create your other usernames. For my purposes I wanted to make sure I wouldn’t lose somedirection, nor did I want one of my clones to snatch KyleBradsaw from my grasp.
4. Now here’s how you can funnel people into your primary username. For myself I have just 1 tweet for both users somedirection and KyleBradshaw “DBA @ky”. This will give the surfer a link directly to my primary account while also letting them know that the account they’re looking at isn’t where I update.
5. Now ONLY follow your primary account from your alternate(s). Every time you twitter under your primary account and some one visits one of your alternate handles, when they look under the “With Others” tab they will see all of your primary holders’ tweets!

Each user can have it’s own style. I like having a couple of different looks across all of my users.

Initially I was thinking I’d have to kill off ky goodnesss for somedirection to keep my brand in tact, but this is a suitable workaround and I can have the best of both worlds. While I was at it I also grabbed KyleBradshaw for good measure. If Twitter becomes popular like myspace or gmail I’ll be glad I did.

<form id="rate_this" action="/process/rating/" method="post">
    <div id="rating_scores">
        <label><input type="radio" value="1" name="rating" />1</label>
        <label><input type="radio" value="2" name="rating" />2</label>
        <label><input type="radio" value="3" name="rating" />3</label>
        <label><input type="radio" value="4" name="rating" />4</label>
        <label><input type="radio" value="5" name="rating" />5</label>
        <label><input type="radio" value="6" name="rating" />6</label>
        <label><input type="radio" value="7" name="rating" />7</label>
        <label><input type="radio" value="8" name="rating" />8</label>
        <label><input type="radio" value="9" name="rating" />9</label>
        <label><input type="radio" value="10" name="rating" />10</label>
        <input type="submit" value="Vote" />
    </div>
</form>

Which gives us this:

A simple radio list and a simple button to submit the form.

How can we make this 100x’s better? Simply clicking on a number to submit the form automagically would be the easiest and most friendly user interaction. So we lean on jQuery to provide progressive enhancement. Using these methods we can create a rating behavior infinitely better and more appealing like this:

jQuery

// hides the vote button
  $("form#ratethis input#votebutton").hide();


// hides all radio buttons
    $("form#rate_this input[@type=radio]").hide();

// format the labels to look clickable
    $("form#ratethis label").addClass("contestselector");

// change the formatting of the label when it is hovered over
// by assigning a different class
    $("label.selector, #ratingscores a").hover(function(){ 
      $(this).addClass("selectorh");
      }, function() {
      $(this).removeClass("selector_h");

    });

// submit the form when a label is clicked
    $("form#ratethis label").click(function() {
      $(this).find("input").attr("checked","checked");
      $("input#votebutton").trigger('click');
    });
}

CSS

#ratingscores {
margin: 20px 0 10px;
border: 1px solid #cacaca;
background-image: url("/images/ratingscoresbck.gif");
background-position: 0% 45%;
background-repeat: no-repeat;
background-color: #efefef;
padding: 5px 0;
padding-left: 130px;
}
.contestselector {
color: #000;
text-transform: uppercase;
cursor: pointer;
font-size: 167%;
font-weight:bold;
padding: 10px 13px 9px;
margin: 1px;
}
.contestselectorh {
background: #c00;
border: 1px solid #a00;
background: #00c705;
border: 1px solid #008004;
color: #fff !important;
text-decoration: none !important;
margin: 0px;
}

Why hide all the radio buttons? Aside from the fact that they’re ugly we don’t need to worry about them because we’re using <label&rt;s effectively.

The labels are surrounding the buttons with so they will still get focus

<label><input type="radio" value="1" name="rating" />1</label>

We let the user know that the numbered hot spots are indeed buttons by applying a mouseover behavior.

We submit the form when a label is clicked – not when the Vote Now button is pressed.

If Javascript was not available or the jQuery rules were not applied then the html would perfectly degrade and would be entirely usable otherwise.

For an example of this method in action venture over to the Costumzee Costume Contest.

I recently spent the day debugging Internet Explorer. I save it for the absolute last step in front end development before pushing a site live. I want to avoid Explorer as much as possible.

I figured my process would be worth sharing. This is my setup.

1. MacBook running Firefox with the Web Developer Plugin and Firebug plugins installed.
2. Old Toshiba Laptop 1.8ghz barebones Windows XP installation with IE6
3. Parallels installed on the MacBook with IE7 on Windows XP SP2

With this setup I can test for any modern browser with any kind of significant market share.

• Firefox Mac
• Firefox Win
• IE 6 + 7 (soon to be 8 as well)
• Camino
• Safari

Debugging IE issues is probably the most painful thing about my job, but one that’s made a little bit easier because of my approach so I thought it’d be useful to share.

I develop 9-5 in Firefox so any rendering bugs usually come to my attention right away and I’ll fix them immediately. Camino is based on the same Gecko rendering engine so I don’t have to worry about anomalies there. Safari does a good job rendering everything and my colleagues use it as their day to day browser so we usually catch any rendering bugs that way.

Then it comes down to IE debugging. I only concern myself with IE6 and above, I can handle well for modern browsers, besides the market share of browsers that fall outside this range is really insignificant statistically. For small development teams it’s hardly worth the extra effort to pay attention to the long tail of browsers.

Looking at Google Analytics for a heavy traffic site that I work on:

5.6m Visitors from 8/1/07 – 3/20/08

<br/> IE is still dominant – so testing for these browsers is essential.

<br/> If we look at the last 6 months, IE7.0 and IE6.0 are neck and neck ~50/50, however:

<br/> In the first 3+ months of 2008 you can see that IE7 has taken a significant leap above IE6 in the market 61/39 and IE 5.5 has gone to a 0.12% market share to a meager 0.07% market share.

That leaves us only concerned with IE6 and IE7 (and hopefully upcoming IE8 will be a non factor). The best way to deal with CSS and IE is by leveraging something called conditional comments

Before conditional comments I relied on browser hacks to differentiate between browsers, but conditional comments are a lot easier and so much more effective. Currently I use these declarations:

<!--[if IE 6]>
<link rel="stylesheet" href="/stylesheets/ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/stylesheets/ie7.css" type="text/css" />
<![endif]-->

I start with IE6 and clean up any rendering issues – then I move on to IE7, which invariably has fewer issues to deal with. Because IE does not have a handy dandy tool like Firebug to help me diagnose the problem this process usually involves a lot of trial and error. It’s a very iterative process and one that my Agile Development Workflow is well suited for.

One technique I’ve found to be indispensable is assigning various background colors to the markup that I’m trying to debug. Often this is all I need to target CSS rules run amok. Over time you can avoid generating certain CSS + HTML that will break IE altogether – and that’s what separates the experts from novices.

Was this helpful? How do you approach debugging CSS in IE? Share!

When I work with large sites with many jQuery rules that have to be applied, sometimes this can cause sluggishness – especially if you’re using jQuery for progressive enhancement.

I was recently hit with a performance snag with jQuery – I just had too much going on in my jrules.js file – this is what I use to apply all of my DOM methods with jQuery. jQuery performance is great – and with the packed version it’s footprint is miniscule but when you parse a massive DOM and apply a ton of rules sluggishness ensues especially when using progressive enhancement to hide/show multiple objects.

Right now I have a jrules.js file that is big, mean and has over 200+ lines of jQuery goodness to apply every time a page loads.

I hit performance issues when I have pages with hundreds of tags in the markup and a ton of content – you can see where I’m going with this.

What I came up with and use for most of my recent projects is a way to pass over those jQuery rules that don’t need to be applied or even looked at on certain pages. This is how I go about it:

First I break up my rules according to what page they’re on.

document.ready(function() {

// GLOBAL

// HOME

// LOGIN

});

If you can segregate rules and only apply them when they’re needed you’ll significantly improve the speed with which jQuery can handle it all, especially when you’re dealing with massive DOM trees.

I leverage top level CSS inheritance to bring it together. On my pages assign an ID to the body tag from which all my jQuery rules will be executed upon.

<body id="home">

You can use .length or .size() – they’re synonymous to test if the jQuery object is avaiable in the DOM, if it doesn’t exist jQuery doesn’t have to bother with it.

Rules only used on certain pages can now be filtered and jQuery can pass over huge blocks of declarations of whom we know don’t exist in the current DOM anyhow.

document.ready(function() {

// GLOBAL
// DOM elements that exist on every page

$("input[@type=password], input[@type=text]").addClass("text");

$("input[@type=password], input[@type=text], textarea").focus(function() {
    $(this).addClass("focus");
});

// HOME body#home

if ($("body#home").size()) {
    // only applies rules on the homepage
    $("p").hover(function() {
        $(this).addClass("change")
    }, function() {
        $(this).removeClass("change")
    );
}

// LOGIN

if ($("body#login").size()) {
    // only applies rules on the login page
}

});

For simple pages with a few rules and a small DOM this is definitely overkill, but if you’ve noticed even a nano second of lag when jQuery applies your rules and see the DOM rearrange itself at page load try this out and let me know how it worked for you.

Last night when I attended a meeting of The Markup & Style Society at the Filament Group office. I got a chance to speak with Mr. jQuery himself – John Resig about my performance issue and I shared my solution to the problem. I was unsure I approached it the best way and there wasn’t a better solution available out there, but he assured me the way I was going about it was sound so consider this method Resig Approved™.

UPDATE

John alerted me to this: Seems that jQuery is now more popular than Prototype – far as search queries go at least. Congrats John & the jQuery team!

The first thing we’ll want to do is create the sync file which will be responsible for handling the rsync process. In the command line do:

macAttack: kb$ sudo touch /usr/bin/sync 
macAttack: kb$ sudo chmod +x /usr/bin/sync 
macAttack: kb$ mate /usr/bin/sync

You should be staring at an empty file. What we want to do is replicate the process you would usually do to push the site up live, or upload it to your development server via ftp.

It’s important that you have a consistent directory structure for your websites to get all of these “rules” setup (assuming that you’ll be working with multiple sites) properly. It will allow us to setup new rules with minimal effort.

I use Subversion (svn) for all of my projects and because of this I have a common directory structure for most of my web apps. It looks like this:

macAttack: kb$ /Development/Project/trunk/

For branches the directory structure looks like this:

macAttack: kb$ /Development/Project/branches/name

The beauty of syncing is all changes get moved over, overwriting the previous files so you rarely run into any sync errors and if you do it’s usually user error.

Here are the contents of my sync script (simplified)

#!/bin/bash


REPO=""
SRC=""
BRANCH=""
DEV="Development"
HOME="/Users/kb"

case $1 in
    s) 
      rsync --exclude-from=$HOME/.rsync-exclude -e "ssh" -ruv $HOME/$DEV/somedirection/trunk/blog/  serveradmin@mediatemple.com:~/domains/somedirection.com/html/
        exit
        ;;
    *) echo "Unrecognized"
        ;;
esac

Let’s break it down.

1. –exclude-from=$HOME is setup to be the same path that relates to ~/. In my user home dir ~/ there’s a file named .rsync-exclude, this file is a line-break separated list of filenames we want to exclude in our sync. Check out my exclude list » rsync exclude. The exclude list prevents .svn (subversion dir’s) from being pushed to the remote server, so you can work on a checked out copy of your web project, but the server only gets what it needs without any unnecessary files.
2. -e “ssh” tells rsync to go over ssh to sync the files, since we already set up ssh to enable auto-login to the remote server we won’t be prompted to provide a password on every sync (and you will sync alot).
3. finally we pass the parameters -ruv -r, –recursive recurse into directories #this way you only have to pass a top level path -u, –update update only (don’t overwrite newer files) #it’s important that your computers internal clock matches the remote servers -v, –verbose increase verbosity
4. The Local Path: $HOME/$DEV/somedirection/trunk/blog/
5. The Remote Path: serveradmin@mediatemple.com:~/domains/somedirection.com/html/ => username@remotehost:remotepath

If the following command is run from from Terminal:

macAttack: kb$/usr/bin/sync s

If all goes well you should get verbose output from your sync!

Rsync is a powerful tool, can work wonders with backups as well.

Let me know if you found this article helpful and give feedback. Stay tuned for Sync integration with TextMate that will really put your whole dev process in overdrive!

]]> http://somedirection.com/2008/01/12/agile-development-workflow-part-2-love-the-sync/feed/ 2 http://somedirection.com/2007/12/01/php-smarty-first-impressions/ http://somedirection.com/2007/12/01/php-smarty-first-impressions/#comments Sat, 01 Dec 2007 15:07:37 +0000 Kyle http://somedirection.com/2007/12/01/php-smarty-first-impressions/ Recently I’ve begun work on a newer, cooler, better, version of Costumzee.com with the elite hax0rs over at Mech Media. Scott and I decided to utilize a php temple engine called Smarty for better separation of code and presentation. A couple things worth noting before I dig in here:
1. The extent of my PHP knowledge is minimal – what I know of PHP is what I’ve done when tinkering with WordPress
2. My knowledge of backend web development is also minimal. I’ve been a frontend guy my whole web career. I pwn xhtml/css/javascript, but server-side dev is completely new to me (I’m finally nipping that knowledge-gap in the butt).
3. I do have knowledge of template engines. When I worked on Quibblo.com full time, we used the Perl Catalyst Framework and I got savvy with Template Toolkit which allowed me to dive into Smarty fairly quickly.

But without further ado.. Couple things I Love about Smarty
• The {debug} function. At the drop of a hat I can see everything available to me and integrate it on the front end (.tpl files).
• Plugins. I needed a way to paginate, and with minimal knowledge I was able to leverage SmartyPaginate to get the job done.
• I was productive day 1. It’s PHP (which is not a challenging language to begin with) and there’s a separation of code and presentation. I’ve dabbled with ROR, and the learning curve of doing something productive, interesting, and unique is just so much easier, because you don’t have to worry “am I doing this the way they want me to?”.
• Smarty documentation is awesome. It’s brief and concise with really world useful examples. When I do get tripped up with something Smarty related it’s a matter of referencing the documentation and in a couple minutes I’m on my way.

The very few things that I’ve gotten stuck on have been mostly due to a lack of my PHP knowledge and not so much a result of issues with Smarty so far. And unique to my situation, I had Scott right there to bounce questions off of when I hit a wall which was also great.

All in all it’s a great to leverage a templating engine like Smarty when you’re beginning to learn more about backend web development. I’ve always shied away from it because I was always working with other programmers that were more than capable in that area and my talents were always restricted to the front-side of the glorious interweb.

I was never interested much in PHP. I always felt like the future of the web was with a framework like Ruby On Rails, but I am pleasantly surprised with my Smarty experience so far and it’s made me excited to develop with PHP more down the road.

Currently, I’m developing with ROR and Smarty and I hope to compare and contrast the two in the future, stay tuned.

]]> http://somedirection.com/2007/12/01/php-smarty-first-impressions/feed/ 5 http://somedirection.com/2007/10/18/web-design-survey-2007-results/ http://somedirection.com/2007/10/18/web-design-survey-2007-results/#comments Thu, 18 Oct 2007 20:13:56 +0000 Kyle http://somedirection.com/2007/10/18/web-design-survey-2007-results/ Back in April I wrote a post to encouraged visitors to take the Web Design Survey.



The results are in! And it’s looking fairly interesting. For the first time, I feel like I have some perspective.

]]> http://somedirection.com/2007/10/18/web-design-survey-2007-results/feed/ 0 http://somedirection.com/2007/08/02/dress-by-design-featured-in-usa-today/ http://somedirection.com/2007/08/02/dress-by-design-featured-in-usa-today/#comments Thu, 02 Aug 2007 13:47:53 +0000 Kyle http://somedirection.com/2007/08/02/dress-by-design-featured-in-usa-today/

USA Today recently featured Dress By Design in an article about personalization in the apparel marketplace.

To be shown on the same level as major retailers like Steve Madden and Lands End is an accomplishment in itself. Great news!

]]> http://somedirection.com/2007/08/02/dress-by-design-featured-in-usa-today/feed/ 0 http://somedirection.com/2007/07/19/fright-catalogcom-2007-edition/ http://somedirection.com/2007/07/19/fright-catalogcom-2007-edition/#comments Fri, 20 Jul 2007 02:44:21 +0000 Kyle http://somedirection.com/2007/07/19/fright-catalogcom-2007-edition/ At my previous position I worked for Fright Catalog out of Worcester, MA. It was a great position and one I shared with my home grown team of friends and colleagues (Dan, Bill, and Joe). In retrospect, we had the perfect balance of work & fun – learning & productivity. But like anything in life, times change. The pinnacle of our achievement, our e-commerce engine codenamed Metroid, is still being improved and growing to this day. After years in development, it’s a very robust application and one that has been re-factored with ease to power Yum Drop and forth-coming Import Costumes (I’m sure there will be others soon!).

Although I no longer work there full-time, I am still fairly involved with all developments, and I’m proud to unveil the 2007 Edition of FrightCatalog.com. Let me know what you think!



]]> http://somedirection.com/2007/07/19/fright-catalogcom-2007-edition/feed/ 2