Here is the short version of the story: I am working on a project that is using a remote SVN repository. I have been using Git-SVN, since there have been (a few too many) times where I need to work on several tasks at once and not be able to commit anything immediately. So:

      > git branch foo
      > git checkout foo
      [hack.. hack... hack...]
      > git commit 
      [days go by]
      > git svn dcommit

Easy enough, right?  This has been working wonderfully for weeks; however all of a sudden:

      > git branch bar
      > git checkout bar
      [hack.. hack... hack...]
      > git commit
      [days go by]
      [oh.. by the way, can you commit your changes to this other branch instead?]

Crap.  I now have several commits in my new branch that have been committed to Git, but now need to be committed to a different SVN branch.  Now I need to find a way to do my svn switch in Git.

One would think there would be a simple command for this.  But… um… no.  Now, there are a number of forum and blog posts that pop up on the topic if you do a Google search for git svn switch.  Most of those results did not work for me at all; however I did find one post from www.beletsky.net that helped tremendously.  The first part of the solution to my problem is snipped from that post (with my own annotations to help figure out what is going on here).

1. Modify your Git config file.

Mine was in .git/config, but I understand that they could all be in different locations.  You probably have something in there already that looks like this:

      [svn-remote "svn"]
         url = [OLD-REPO]
         fetch = :refs/remotes/git-svn

You will need to add an additional entry in the config file that reads:

      [svn-remote "svnnew"]
         url = [NEW-REPO]
         fetch = :refs/remotes/git-svn-new

2. Fetch your changes from the new SVN repository.

Just a note: this will take a very long time, depending on the size of your SVN repository.  Go grab a coffee or something after firing this off.

      > git svn fetch svnnew

3. Checkout your new SVN repository in Git.

This puts you into something called “detached HEAD” state.  I’m not entirely sure what that means, but it basically allows you to create a new base branch in Git for your new SVN repository.

      > git checkout git-svn-new

4. Create your new Git branch.

This will create a new Git branch that will now be associated with your new SVN repository.

      > git checkout -b master-new

5. Look up the commit(s) from your old branch.

You will need the commit IDs from your old branch, for use when you merge the changes into your new branch.

      > git checkout old-branch
      > git log --pretty=oneline

You should get output something like the output below.  This is the commit ID followed by the commit message you entered when you did your git commit.  Note that the most recent commit is at the top of the list.  Jot down all of the commits you want to move over to your new branch.

      f8dace1a7b96ee59a6b5237920eb18da49fed0bf Commit #3
      e2a93ad2f20621c33625cbc37f7a3818236ad761 Commit #2
      6f72923317778e32fd67495c3599b825ead05f10 Commit #1

6. Cherry pick your commits.

You can use the git cherry-pick command to move your commits (one by one) from your old branch to your new branch.  Use the commit ID that you grabbed from the step above.  If you need to move over more than one commit, you will need to cherry pick each commit individually, starting with the commit that was committed first.  The example below moves over commits #2 and #3 from the list above.  Notice which commit ID I use first.

      > git checkout master-new
      > git cherry-pick e2a93ad2f20621c33625cbc37f7a3818236ad761
      > git cherry-pick f8dace1a7b96ee59a6b5237920eb18da49fed0bf

It is entirely possible that you will have code conflicts as you cherry pick your commits, which is one of the reasons why you should do each commit separately.  Git will let you know if there is a conflict.  (Here is more information on cherry picking and conflicts.)

Voila!

Once you are done, there are a couple of commands you can run to verify everything is correct:

      > git svn info  # gives you information on what SVN branch you are synced to
      > git log       # gives all commits in your Git branch; use to confirm your are in the new branch

This year marked my second year working at Optaros, where I have been learning everything from YUI (2 and 3), to Drupal (6 and 7), to even a little bit of Magento towards the end.  I had never really traveled for this job before, but the end of the year took me on a whirlwind tour of San Francisco (my first time!), then Austin, then Troy NY, and then back to Austin, all within the span of 6 weeks.  Absolute insanity, but also exciting!

In more exciting news, I was lucky enough to go on not one, but two cruises this past year!  Last February, I went on my first Ships and Dip cruise, which is basically a giant music festival on a boat in the Caribbean.  I saw more Barenaked Ladies and Great Big Sea shows that week than I had in probably the last 10 years.  I also met a bunch of great new friends – who new that letting people cut in front of you in line would be great?!   In November, I went on my second Eddie From Ohio cruise.   This was definitely one of the high points of my year – I love this band!   I got to see old friends I rarely see, and made many new ones.  I even got to sing with the band!

Speaking of high points, one of my goals for 2011 was to run my first 10k race… and I completely crushed that goal.  I ran my first half marathon this past October (in 2:17:52) and, with the help of my friends and family, raised $1535 for Dana Farber in the process!

In other news, I have been blogging and reading and coding quite a bit this year.  I did move over the summer, not quite as far as I thought I would have, but I discovered that uprooting myself for no good reason other than the fact that I am still at a point in my life where I can just is not quite good enough now as it was 8 years ago.

All of this brings me to 2012.  Everyone makes new year’s resolutions, and I know I am no different, but I also recently read that it is much better to make 3 really solid resolutions as opposed to many more, smaller ones.  I am not so sure about that, but I will do my best!  Here are my 5 resolutions for this coming year:

1. Keep running and finish my 2nd half marathon by the fall.  This is really just part of my general “take better care of myself” goal, but I like to have something specific to work towards.
2. Travel – and I do not mean just for work.  I would love to go overseas again.  I have a couple of destinations in mind already.  (Yes, Lebanon is one of them, as long as the stars align and all the shenanigans in that part of the world do not spill over the border.)
3. Work on more independent coding projects.  I would like to have at least 2 under my belt by the end of this year.
4. Be bold.  Ok, this one is not exactly specific, but they can’t all be, right?
5. Read more.  I made it to 32 books last year; perhaps I will beat that number this year.

Here is hoping these all come true.  Happy 2012!  May this year be the best year ever!

In addition to displaying the images, the end user has the option to select one of these images to be selected as a primary image by clicking on that image. When the user selects a new primary image, a banner is displayed across the bottom of the image indicating its “primary” status. So, I added an event listener to add a div to the image’s container whenever said image is clicked. Simple enough, right?

Nope. Firefox was fine, but I came across an issue in IE where the carousel “jumped” so that my newly selected primary image displayed as the first image in the carousel and all other images ahead of it disappeared.

Long story short, clicking on an element in a YUI carousel causes that element to be selected. Selecting an element in a YUI Carousel in IE (apparently) forces that element to be displayed first.

The fix? A hack!  Basically, the YUI Carousel comes with a “beforeSelectedItemChange” event, on which if you return false, the default behavior is negated.  This works for both Firefox and IE.

    changePrimary = true;
    imageCarousel.on("beforeSelectedItemChange", function() {
        if (changePrimary) {
            changePrimary = false;
            return false;
        }
    });

• New research on “The Psychology of Sharing”
  Speaking of sharing, this is a very interesting article about why people share content online.

• The Experience of the Thing
  Another interesting article, written by a friend of mine, about UX and the power of a positive brand experience.

• Dyslexie, A Typeface Designed to Help Dyslexics Read
  This is just fantastic!  The article describes the science behind new typeface and how it was developed.

• Mac/PC
  Ok, this is not an article.  But this comic hits the nail on the head.  Our digital world is practically completely online.  It is an easy argument to make that what operating system we use is now moot.

• Git: A Designer’s Primer
  I have jumped on the Git bandwagon and I think you should too.  Git is just great.  There is a learning curve, but once you are over that hump, it is a lightweight and relatively simple system to use.  Plus, it sits nicely on top of SVN.

This is super easy for input boxes.  Simply add the maxlength attribute to the input HTML filed and voila!

However, text area fields are a bit trickier.  Character limits are not built into text area fields just yet as they are with input fields, so it is necessary to have a Javascript implementation if you need to limit the text prior to submitting a form.

So… I decided to write one.  I sort of ran away with this example, mostly because there are so many things to consider from a user perspective.  If someone is entering in a longer piece of text – for example, an e-mail to a customer service department or a review on a product – is it really better to just cut them off from entering more text before they have finished their thought?  True, the user will not be able to submit the form until their giant essay has been tamed to fit within the character constraints.  From a programmatic perspective, it is better to simply cut the user off.  This ensures a successful form submission.

On the other hand, there are some people (like me) who would much rather finish their thought, and then go back and edit the text down to size.  In this case, it is much more useful to have an (obvious) indicator of how long the entered text is, so that the user knows how much needs to be cut.

Long story short (I know… too late), I decided to create a proof of concept for limiting character limits that contains options for both scenarios above.

Step 1: Create a web page.

First, I created a very simple page with 3 elements:

1. A text area input field.
2. A message letting the user know how many characters they have typed and how many characters they are allowed.
3. A check box to determine whether or not the text box will allow the user to continue to enter text once they have reached the character limit.

Step 2: Write the Javascript.

The Javascript part of this POC contains 3 major functions:

1. Function to update the text area alert

This function is called as soon as the page loads and then each time a key is pressed (on the keyup event) to update the number of characters used in the character limit message to the user.  Also, if the user has entered more characters than allowed by the limit, the truncate text area function is called.

  function updateTextAreaAlert() {
    var text = Dom.get("yui-textarea").value;
    var charsUsed = text.length || 0;

    if (charsUsed >= textLimit) {
      Dom.addClass("yui-textarea-chars", "over-limit");
      truncateTextArea();
    }

    else if (charsUsed >= textLimit * 0.9) {
      Dom.addClass("yui-textarea-chars", "near-limit");
    }

    else {
      Dom.removeClass("yui-textarea-chars", "near-limit");
      Dom.removeClass("yui-textarea-chars", "over-limit");
    }

    Dom.get("yui-textarea-chars").innerHTML = charsUsed;
  }

2. Function to check the text area limit.

This function checks to see if the value of the text area field is longer than the set character limit.  If so, the function to truncate the text area’s contents is called.  This function is called each time a key is pressed on the key down event.  This is to avoid issues with the text “jumping” – the text area contents are actually updated after the key down event is called – so we call this function on key down so that we have a chance to suppress the content update if the user is over the character limit.

  function checkTextAreaLimit(e) {
    var text = Dom.get("yui-textarea").value;

    // Check to see if a delete key was pressed; backspace is 8; delete is 46.
    var key = (window.event) ? e.which: e.keyCode;
    var pressedDel = (key == 8 || key == 46) ? true : false;

    if (!allowOverLimit() && text.length >= textLimit && !pressedDel) {
      Event.preventDefault(e);
      truncateTextArea();
    }
  }

3. Function to truncate the contents of the text area.

This function truncates the text in the text area field if the user is over the character limit.  This function is called by the two functions listed above.

  function truncateTextArea() {
    var text = Dom.get("yui-textarea").value;

    if (!allowOverLimit()) {
        Dom.get("yui-textarea").value = Dom.get("yui-textarea").value.substring(0, textLimit);
        Dom.get("yui-textarea-chars").innerHTML = Dom.get("yui-textarea").value.length;
    }
  } 

You can check out the completed proof of concept at: http://examples.jhalabi.com/textarea-limit/.

I am writing this post mostly so that I can keep all of the neat articles CSS tips and tricks that keep crossing my path all in one space, but I am sure this would be useful to others as well.

• W3Schools CSS Reference
  If you are a web developer and you do not already know about this site… well… why?!  I am including this link just for completeness.

• CSS 3 Cheat Sheet (from Smashing Magazine)
  A printable (5-page) cheat sheet of CSS 3 selectors and attributes.

• Better Semantics with CSS Combinators & Selectors (Chris Sealey – Design Festival)
  This is a good refresher for selectors and such in advanced CSS.  There are some really good tips here about progressive styling too!

• 10 Awful IE Bugs & Fixes (from Queness)
  We all hate IE.  Especially IE 6.  Why people still use IE 6 boggles my mind.  At any rate, we still have to deal with supporting it – this article lists some really useful tips about how to fix some really common issues.

• 15+ CSS Tips and Tricks (from Queness)
  More CSS tips and tricks.  These are more browser-agnostic than the previous link.

• Responsive Web Design (Ethan Marcotte)
  A bit lengthy, but a good article about how to use media queries to design for different browsers and screens.  Be warned, though – media queries are not available in all browsers (*ahem* IE).

• Creating a Color Palette (Jason Beaird – Design Festival)
  Ok, this is not strictly a CSS article, but it is related (at least in my mind) in terms of finding and matching colors.

The question actually came up in one of my more recent projects, with a client who has been using YUI 2.7 for years now.  Would they like to make the leap to YUI 3?  Probably.  Do they have the time, resources, etc. to actually upgrade their (massive) site to YUI 3?  Not so much.

YUI 3, for those of you who have not yet checked it out, is a completely re-written library, and, so far, seems to be much slicker and more JQuery-esque than its predecessor.  (Which is fabulous, if I may say so myself.  See my earlier post on YUI vs. JQuery.)

YUI 3 still is not quite complete – at least, in terms of additional widgets.  The core library launched in September 2009, and the widgets available in YUI 2 have been in the process of being rewritten for and released into YUI 3.  This process is still ongoing as far as I can tell, but YUI 3 is clever enough to be able to incorporate YUI 2 libraries into its framework.

However, some of the YUI 3 versions of these widgets are much improved over their YUI 2 counterparts.  So, for my client, the question came up: Can a YUI 3 widget get along with a core YUI 2 environment?

Long story short: I conducted a successful experiment using the YUI 3 Drag / Drop library inside a page that is otherwise using YUI 2.7.0 to create a pop-up dialog where users can reorder a group of content blocks by dragging 1 or more blocks to the desired location.

You can check out the full version of this proof of concept on my examples site at http://examples.jhalabi.com/yui3-in-yui2/.  There is also a short explanation of the basics below:

Step 1: Creating the dialog.

The code to create a dialog is basic YUI 2 code:

    openDialog: function() {
        if (COLORWAY.test.dialog == null) {
            COLORWAY.test.dialog = new YAHOO.widget.Dialog("colorway-dialog-box", {
            ... attributes go here ...
            });

            COLORWAY.test.dialog.setHeader("Reorder Color Sequence");
            COLORWAY.test.dialog.render("document.body");
        }
        COLORWAY.test.dialog.show();
    }

Step 2: Selecting elements.

As I mentioned earlier, this proof of concept was created to test dragging and dropping 1 element or multiple elements, therefore we need a way to determine whether or not the user is trying to select more than one element.  I opted for the user to hold the shift key down while selecting more than 1 element; however you can really use whatever key you want.  Just make sure to tell the user what to do!  (I have instructions listed at the top of my dialog box.)

My code is simple – and still using YUI 2.  If the user selects an element, add a “selected” class to that element.  If the user is pressing the shift key, do not remove the “selected” class from any other element that may be selected.  If the user is not pressing the shift key, unselect everything else.

    // If the shift key is not pressed, unselect all, then select that item.
    if (!COLORWAY.test.shift) {
        var selected = Selector.query("div.selected", wrapper);
        for (var i=0; i<selected.length; i++) {
            Dom.removeClass(selected[i], "selected");
        }
        Dom.addClass(target, "selected");
    }

    // If the shift key is pressed and the item is selected, unselect it.
    else if (Dom.hasClass(target, "selected")) {
        Dom.removeClass(target, "selected");
    }

    // If the shift key is pressed and the item is not selected, select it.
    else {
        Dom.addClass(target, "selected");
    }

Step 3: Dragging element(s) to their new location.

Here comes the fun part – dragging and dropping the selected elements.  This entire step is the YUI 3 part of the experiment.  A couple of things need to happen in this step.

First, we need to set up the node that is being dragged.  This happens in the Y.DD.DDM.on(‘drag:start’, function(e) {} event function.  Here, we change the dragged node’ style, change the style of all of the other selected nodes (if they exist) using the e.target.get; so, for example:

    e.target.get('dragNode').addClass('selected');
    e.target.get('dragNode').setStyles({
        backgroundColor: e.target.get('node').getStyle('backgroundColor')
    });

Next, we need to make sure we know which elements are being dropped into place, and determine if we are dropping 1 or multiple elements.  This is where the “selected” class comes in; all of this code is included in the Y.DD.DDM.on(‘drop:over’, function(e) {} event function:

    // Add node(s) to this list.
    var selected = Selector.query("#colorway-main-container div.selected");
    if (selected.length > 1) {
        for (var i=0; i<selected.length; i++) {
            e.drop.get('node').get('parentNode').insertBefore(selected[i], drop);
        }
    } else {
        e.drop.get('node').get('parentNode').insertBefore(drag, drop);
    }

During the drag, all of the YUI 3 magic happens to animate the dragged node from its old location to a new location in the Y.DD.DDM.on(‘drag:drag’, function(e) {} event function.  To be honest, I just copied the basic YUI 3 implementation into my code, but it worked exactly as I expected:

    Y.DD.DDM.on('drag:drag', function(e) {
        var y = e.target.lastXY[1];
        goingUp = (y < lastY) ? true : false;
        lastY = y;
        Y.DD.DDM.syncActiveShims(true);
    });

Finally, once the node has been dragged to its final location, we reset the styles of the dragged node in the Y.DD.DDM.on(‘drag:end’, function(e) {} event function, again using e.target.get.

Of course, there is a little more to the code than just this, but I’m not about to paste my entire source code into this post.  You can check out the completed proof of concept at http://examples.jhalabi.com/yui3-in-yui2/.

What really floored me at work the other day was a bug that came across my e-mail.   The code in question was a function that included an AJAX call to a page to get some information from a database, and then display the response text (o.responseText, in my case) inside a div (using YUI).  The function worked beautifully in Firefox, but was failing in IE:

    YAHOO.util.Dom.get(myID).innerHTML = o.responseText;

My first thoughts were that the AJAX call was failing somehow, but I quickly ruled that out, realizing that I was receiving a proper response, but my div was not being populated.

Long story short, I found this article on DOMScripting.com, where I discovered that innerHTML is the culprit.  It seems that if your response text contains any “odd” characters, IE cannot handle that text with innerHTML.

The reason, as far as I can tell, is unknown, but a work-around is well documented online; I will reiterate it below.  It is a little longer than my original solution, but this code does work in both FF and IE.

    var response = document.createElement("div");
    response.innerHTML = o.responseText;
    var container = YAHOO.util.Dom.get("myID");
    container.appendChild(response);

Um… yeah.  So, here we are at the end of 2010.  I keep thinking about that calendar, trying to convince myself that I’m really not that old and wondering what happened to those flying cars we were all promised.

At any rate, today – new year’s eve – is the day where I always think about what I would like to accomplish in the next year.   Of course, I – along with the rest of the world – do this every year, and one of these years, I’ll get to more than 50% of this list.   However, step 1 is actually making the list.

So, here are my 8 goals for 2011:

1. Work on at least 2 additional non-profit websites.
2. Run a 10K race by the fall.
3. Seriously plan out moving.  (Where, when, and if are all still up in the air.)
4. Read at least 25 books.  (I made it to 23 this year!)
5. Be able to at least hold a simple conversation in Arabic that does not involve food.
6. Blog at least twice a month.
7. Take (and post!) some more “artsy” photos.
8. Finish that blanket I’ve been meaning to knit for who knows how long.

Happy 2011!

Web development:

• JQuery 1.4.3 is released – includes updates for CSS, HTML 5, etc.
  http://blog.jquery.com/2010/10/16/jquery-143-released/
• How to screw up your SEO strategy.
  http://www.seo-chicks.com/1901/how-to-screw-up-your-social-media-strategy.html
• Why Twitter’s new design might seem familiar
  http://gizmodo.com/5651122/why-twitters-new-design-might-seem-familiar

Art and design:

• Hand cut map art.
  http://www.1designperday.com/2010/10/10/10-amazing-hand-cut-map-art/
• Declaring coral “too precious to wear”.
  http://www.etsy.com/storque/craftivism/declaring-coral-too-precious-to-wear-10844/
• This is a geek.  This is a geek’s treadmill.
  http://spydergrrl.blogspot.com/2010/10/this-is-geek-this-is-geeks-treadmill.html
• Pinching Earth
  http://gizmodo.com/5666675/pinching-earth

In the news:

• Baby born from 20 year old embryo
  http://www.npr.org/templates/story/story.php?storyId=130535250
• Benoit Mandelbrot – A patterned way of viewing life
  http://interactivemultimediatechnology.blogspot.com/2010/10/patterned-way-of-viewing-life-benoit.html
• The “Social Network” and other Google slaps.
  http://www.hallam.biz/blog/2010/10/the-social-network-and-other-google-slaps.html

I know, people want information quickly.  It makes me wonder why people blog at all.  Most people skim larger articles for the highlights, pictures, bolded headlines, etc.  This also extends to online tools – web forms, dialog boxes, instructions.  I was just reading Chris Jackson’s article on dialog boxes, and I can’t help but wonder, why write the words if we know no one will read them?  We live in a paradigm where users don’t want to be presented with every possible option – they just want whatever option will work for them and selectively ignore everything else.

Or, maybe we just need to add something unexpected into our web applications.  Perhaps if all of our dialog boxes looked like this, more people would pay attention:

So, going back to my question, should we stop writing?  Should we only limit articles, instructions, help, dialogs, etc to Twitter-sized messages?  Or, am I just being a pessimist?

UI and Design

• Ten UI Lessons from the Real World:
  http://www.componenthouse.com/article-21
• Nine Creative Eco Reminder Wall Stickers:
  http://www.1designperday.com/2010/09/29/9-creative-eco-reminder-wall-stickers/
• SASS – Syntactically Awesome Stylesheets:
  http://sass-lang.com/tutorial.html
• Compass:
  http://compass-style.org/

Social Media

• The Social Network: The Story Behind Facebook (a review):
  http://communities.canada.com/VANCOUVERSUN/blogs/techsense/archive/2010/09/30/the-social-network-the-story-behind-facebook.aspx
• I Just Retweeted a Kidney (Gizmodo):
  http://gizmodo.com/5651353/i-just-retweeted-a-kidney

Tech News:

• Goodbye Microsoft:
  http://worldofsu.com/philipsu/?page_id=193
• The Environmental Impact of Spam:
  http://1greengeneration.elementsintime.com/?p=1044

A side effect of all of this time online is that the internet now has so much information about me.  I, of course, try to limit this as much as possible with privacy settings and being very selective about what information I enter into which site.  However, after years and years of being online, it just adds up.  My personal and professional communications are hosted on various e-mail servers.  Status updates and a list of my friends can be compiled among the different social media sites.  Financial information is online via my bank.   A good chunk of my shopping habits is up on Amazon.  Even my taste in music is analyzed via iTunes Genius.  (Of course, not all of this information is available publically… but it’s out there on some server or another.)

Sometimes, I wonder if the internet knows more about me than I do.  OK… probably not.  But the internet as a collective can paint a pretty decent picture.

Why am I thinking about this now?  It’s all because of Google (who both has a pretty good sense of what kinds of information I look for online and the ability to find all sorts of information about me).  I was just reading about Rapportive, a new add-on to GMail that can present you with information about your contacts on various social networking sites.  It just made me think about how Google really is at the center of the internet.  It can compile information about anything and present it to you on one succinct page – e-mail, RSS feeds, news articles, pictures, etc.

This ease behind being able find any piece of information quickly not only makes us more and more accessible online (as we add more information about ourselves into the mix), but also makes us more reliant on this information.  We look up everything online – from news to recipes to how-to articles and more.  Personally, I no longer feel the need to buy books about web development or different languages.  I can learn what I need to learn online – and it’s often quicker than having to sift through a big book.

But is this a good thing?  Are we losing our memories to the internet?  I was reading an article on Boston.com about how today’s children no longer know how to do basic things that we from previous generations just take for granted.  Tying our shoes.  Using a can opener.  Reading an analog clock.  Yes, there are some skills that were necessary 30 years ago that are simply no longer useful because of advances in technology.  However, just because velcro exists does not mean that tying a not is no longer a useful skill.

This all reminds me of an episode of “The Outer Limits” where every single person had a chip embedded in their heads that connected them to an external network.  People accessed this network for all of their knowledge, from reading to advanced physics.  At the end of the episode (spoiler alert!) the network was destroyed and the people could no longer do basic things like recite the alphabet – all because they never actually learned any of these things.  The network provided all of their knowledge for them.  Sound familiar?

However, that’s not why I’m writing this blog entry.

I just visited the March to Keep Fear Alive website and the design is brilliant… or, at least, it is in light of my Stewart / Colbert leanings.  All I want to do is click the “Don’t Click Here” button.  I don’t care what’s on the rest of the page.  The only thing I see here is that one button… and that makes me smile.

Of course, it’s completely obvious.  What we want the  most is what we’re not allowed to have.   “Don’t touch that” means “pick it up”.  “Don’t eat that” means “take a little taste”.  Therefore, “don’t click here” means “go ahead and peek”.  So… do it!  You know you want to. 

Update: To illustrate the importance of above the fold vs. below the fold, I *just* noticed that the Rally to Restore Sanity website has the exact same button.  However, it does not have the same exact impact.  Why, you ask?  Perhaps it’s because I already saw it on Colbert’s website.  Or – and I think this is more important – it’s because there is more text on Stewart’s website, pushing the button so far down the page that I need to scroll to get there.  And, since the first rule of web design is “people don’t read”, I prove this rule by not noticing this button for a half an hour.

So, I suppose the lessons learned here are:

1. Tell me to not do the things you want me to do.

2. Stop writing so much.

That being said, it really boggles the mind (or, at least my mind) that YUI requires so much more complexity than JQuery does.  I mean, sure, YUI has neat features like datatables.  (I’m sure JQuery does too, but I haven’t found it / looked for it just yet.)   However, it seems to be a struggle to even perform basic functions in YUI.

Inexperience (on my part)?  Maybe.  Frustrating?  Oh yes.  This has actually been bothering me since I started learning YUI.

For example, take a look at DOM selectors in both.  In JQuery, you can use the same syntax to select parts of the DOM by ID, class name, or tag.  You can even nest all of these things easily.  YUI definitely prefers all selection to be done by tag, though there are functions to get an array of elements by class name or tag, and nesting these things is not trivial.

As an exercise for a project at work, I created an example to illustrate my point regarding DOM selection between YUI and JQuery.  The example is simple – all it does is replace the text in a paragraph tag when a link is clicked.   The example DOM is minimal:

    <div id="block" class="container-block">
        <h2>YUI Example</h2>
        <p>This is my original text.</p>
        <a href="#">Click here to change the text above.</a>
    </div>

I implemented the solution in both JQuery and YUI.

Here is my JQuery implementation:

    <script src="/js/jquery.min.js"></script>

    <script type="text/javascript">
        $("#jquery-block a").click(function(e) {
            e.preventDefault();
            $("#jquery-block p").html("This text was updated via JQuery.");
        });
    </script>

And here is my YUI implementation:

    <script src="/yui/yahoo-min.js"></script>
    <script src="/yui/dom-min.js"></script>
    <script src="/yui/event-min.js" ></script>

    <script type="text/javascript">
        var block = YAHOO.util.Dom.get("yui-block");
        var para = block.getElementsByTagName("p");
        var link = block.getElementsByTagName("a");
        if (link) {
            YAHOO.util.Event.addListener(link, "click", function(e) {
                YAHOO.util.Event.preventDefault(e);
                if (para) { para[0].innerHTML = "This text was updated via YUI."; }
            });
        }
    </script>

In both cases, I am grabbing the base libraries required for what I need to do here.  YUI requires 3 server calls for 3 different library files, but the 1 library file for JQuery is almost twice as large than the sum of the YUI files.  (The JQuery file is 24.1KB, whereas the sum of the 3 YUI files is 13.5KB.) So, I’m going to call that a wash.

However, my real issue with YUI is that I need to declare 3 variables and include an if statement to update this text, whereas with JQuery, I can accomplish the same task in 1 line.  (I’m not counting the prevent default commands for either case here, since the 2 are basically equivalent.)

I posted the full example on my server:
http://examples.jhalabi.com/code-snippets/jquery-v-yui.html

This has been my biggest pet peeve about YUI.  Again, I don’t know if it’s due to inexperience, but the more I look at the YUI documentation, the more I think it’s not me.  Thoughts?  Arguments?  Other pet peeves?

For a short while, this web host was 1 & 1.  I can hear the chuckles now.  Feel free to laugh out loud.  I was young(er) and naive.  I certainly know better now.  (Especially after reading the forums on web hosting providers – yikes!)

I chose 1 & 1 because we used them every so often at my previous job.  From my perspective, they seemed to work.  Then again, all I did was write code and upload it to a server.  I never actually had contact with the company itself… at least not until I started using them personally.

Oh… my… goodness.  I’m not going to go into the nitty gritty details over my gripe with 1 & 1… but let’s just say that their customer service and billing departments – to put it nicely – don’t give a flying leap.  All they are out to do is get your money – legitimately or not.  (My current fight is in regards to an illegitimate bill they are trying to get me to pay.)  I have called their customer service department several times, and have even spoken with a manager.  They definitely have a “you need to pay this because we said so” kind of attitude.

Yes, I realize that capitalism involves company making profits and bottom lines and all that.  However, my counter argument is that customer retention is equally important.  If you can’t keep your customers around, you’re going to have one heck of a time continuing to make a profit in the long run.  The people at 1 & 1 have effectively guaranteed that I will never use them again.  And I’ll certainly not recommend them to anyone.  It’s just not worth it.

So, long story short, I’m in the market for a new host for my back pocket.  Thankfully, I’m not in the middle of any projects where I need one (since none of my current projects involve 1&1, thankfully).  But, I do now need to embark on a research mission.  Recommendations are welcome!

Update (from 05 October 2010): After a whole bunch of back-and-forth with both billing and the complaints department at 1&1, they agreed to refund some of the fees that they had charged me. Fine – I just want this over with. Unfortunately, that was easier said than done. Three weeks later – no refund and they have yet to reply back to any of my messages to them. I finally tracked down the head of the complaints department, who seemed to be listening and did say that everything would be processed in the next couple of days. We’ll see. One thing is clear – it is definitely easier to give them money than it is to get it back (even after written promises from them).

Fortunately, Mother Nature was gentle this year, and only made it rain on Friday. The rest of the weekend was gorgeous! A bunch of the “usual suspects” were at the Fest – The Nields, The Kennedys, Vance Gilbert, Red Molly – but there were definitely a bunch who were missed this year. It was a much smaller Fest than years past, probably partially because of the economy and partially because of the tornado that hit a couple of years ago. Of course, all of us die-hards still come year after year.

I spent a lot of time sitting on either the Main Stage and the Workshop Stage, and loved every minute of some of my favorite workshops – Beatles covers and Gospel wake-up call. Katie and I even ventured into the dance tent, which is a little daunting at first, to say the least, but so much fun once you figure out what everyone is doing. We happened to find a really nice couple who showed us the ropes.

As usual, I posted a whole lot of photos online. And, I’m counting down until next year.

• Graduating college, and then moving on to grad school and getting an M.F.A.
• Moving to Boston, and then twice within Boston.
• Having 4 different post-RPI jobs.  (More on this later.)
• Realizing my love for running and photography, and rediscovering my love for folk music.
• Leaving the continent several times (for the first time) for Europe and the Middle East.

This past year has been a big one for me as well.  Here is 2009: the good, bad, and ugly:

• After a 5-year long tenure at CIDC (or, GrandVirtual, from the good old days), I made the decision to quit my job there.  This was a decision that I did not make lightly.  CIDC was an
  amazing gig while it lasted.  It really just stopped being amazing, and it was time to move on.
• I worked at Nokia – for 3 1/2 months.  I call Nokia my rebound job.  I wasn’t quite ready to move on past CIDC.  I’m sure Nokia is a fine company, but we weren’t a good fit.  It’s not you; it’s me.
• I found my current job at Optaros, and I’m loving it!  This just barely made the cut for 2009.  I started at Optaros in December.
• I attempted to belly dance… and discovered that I have 2 left feet.
• I (finally) went back to Lebanon!  It had been over 8 years since my last visit there, which frankly, was way too long.  I flew over to visit my family in August and stayed about 10 days.  I flew through London on the way back and spent a couple nights there for the first time.  Both legs of my trip were completely fantastic!
• I ran about 454.8 miles over the course of this year.  I did run another 5K race this year in well under 30 minutes.  However, a 10K race just wasn’t in the cards this year.  I hurt my knee after a pretty bad fall over the summer and spent the last half of July in a knee brace.  I’m fine now, but wow did that hurt!  (As an aside, I also discovered just how easy it is to get a tan line from a knee brace.)
• I went to Falcon Ridge again this year.  The festival survived the tornado of 2008, thankfully, but it was noticeably smaller in attendance.  Still, I had a good time and bought way too much music.
• I moved… across the hall.  Really.  Easiest move ever!  I now live in a real apartment, with a separate bedroom and everything.  It’s wonderful!

I don’t really like making resolutions for the new year, but I do like planning.  It’s probably the same thing, really, but in either case, here are my plans for 2010:

• Run in a 10K race… for real this time!
• Read much more often than I have been.  (My reading habits have picked up over the past month… I’m hoping to continue the trend.)
• Learn more Arabic.  I barely know any right now and it’s embarrassing.  I don’t need to be fluent right now… just somewhat conversational.
• Travel, including: seeing my cousins in Los Angeles and Chicago; gambling, eating, and shooting in Vegas; sitting on a beach somewhere (warm) for a week.
• Start going to yoga regularly try boxing classes again.
• Meditate.
• Watch classic movies… seriously.  It’s amazing how many good, classic movies I haven’t seen.

May 2010 be happier, more peaceful, and more stable than 2009.  Happy New Year!

Last Saturday, Lowen and Navarro had their last concert together at the Birchmere in Alexandria VA.  They invited a number of other musicians to play along with them.  It was an amazing, bittersweet show, and definitely worth the crazy flying back and forth between Boston and DC to see.

Photos are online here:

http://photos.jhalabi.com/2009/2009-06%20-%20DC%20-%20Lowen%20%26%20Navarro/

2008 – The good, the bad, and the ugly:

• Got a promotion at work in January and began to manage my department. Hired a boatload of people, which more than doubled our size. Managed to not grow pointy hair in the process.
• Ran 430 miles over the course of the year. Also ran my first 5K race in May (on my birthday) in a little under 30 minutes.
• Started going to power yoga class (almost) weekly. Also went to my first boxing class… and really liked it. However, the class is all the way in Allston… which is really far.
• Fell and hurt my shoulder pretty seriously. Yes, I tripped over my own feet – this happens a little too frequently. Ironically, I was going to the gym at the time. I took it as a sign to go home. My shoulder is better now.
• Turned 30 without having (too much of) a major meltdown.
• Traveled a bit (for both work and fun) – Montreal (3x), DC (2x), Chicago, Falcon Ridge, and Orlando
• Finally got the balls to ask someone out. It didn’t work out, but this is actually a biggie for me.
• Attempted to learn French. Decided Arabic is easier.
• Redecorated my apartment – nothing too major, but it looks much better.
• Bought a new camera. (I just got the camera a couple of days ago, so I’m still counting it under 2008.)

Plans for 2009:

• Run a 10K race sometime in the spring.
• Learn enough Arabic to be able to carry on a decent conversation.
• Travel to Beirut to visit family, preferably sometime in April or May, but this one is very dependent on the situation there. I’m keeping my fingers crossed.
• Train the people in my department to the point where I can leave for a few weeks and they will be OK if (when) anything blows up while I’m gone. (This will be really important if (when) I do go to Beirut.)
• Play with my new camera… a lot. *grin*
• Spend more time knitting and learning to make jewelry.
• Try to use my car as little as possible (not that I use it all that often already).

Here’s to an excellent 2009! Happy New Year everyone!