3 questions for making better choices

This applies to more than just money. You can use these principles to lose weight, manage a project, choose a prom dress, or decide what to tweet.

1. Where am I?
2. What are my options?
3. What's the best choice?

Each question informs the next, so go in order.

If any one of these are missing you'll have trouble staying on course, especially if you're trying to do something that doesn't come naturally, like dieting.

Quick tips for optimizing your jQuery technique

Optimize your Selectors for speed

Selector Speed

1. #id
2. tag
3. .class
4. Other weird ones

It could be that some of the other selectors can be faster than class. I haven't done extensive research, so if you're in doubt try it out.

While it's okay in your css to have verbose selectors that describe the structure more accutely e.g. #page #header #nav .current, doing this can really slow down jQuery selector speed. Remember that you don't have to worry about the cascade affect in jQuery, just be concise. The Sizzle Selector Engine of jQuery 1.3 also processes selectors in a right to left fashion, so in the example above it's going to get all elements and check each one for a class matching "current" and then compare the parents of what it finds to the rest of the selector removing anything that doesn't match the pattern. This selector can be made much faster like this #nav li.current. By adding the li jQuery switches from getting all elements to using the DOM getElementsByTagName(), which is much faster, then it just looks up and sees the parent with #nav and stops. A lot less filtering will take place.

Minimize Selections

If you're making the same selections repeatedly in your scripts you should just set a variable.

$("#aside").hide();
...
$("#aside").show();

Can be written as

var $aside = $("#aside").hide();
...
$aside.show()

Evaluate re-selecting as opposed to traversal

Sometimes it can be a lot faster to go $("div.subSection") rather than $(this).children("div.subSection")

So if you're in a situation where it looks like a reselect can be faster try it out and compare. The difference between these can vary a lot so I can't generalize here, but test it in your situation. Don't forget that code readability matters so if the difference is trivial make the code easier to understand.

Rely on jQuery less

As cool as jQuery is often you can get some good speed increases if you switch to plain JavaScript. You don't want to do this all the time as jQuery solves a lot of browser bugs that could be a real time sink. But if you're noticing a slow sort function or something that could use a speed up don't be reluctant to fall back to for loop and normal DOM.

Usually, spending a lot time on performance optimization can be a waste, but sometimes it'll really make a difference between a clean responsive UI and one that is so slow that you might as well avoid JavaScript. I know it's easy as an intermediate JavaScripter to rely on libraries for most of what you need to do, but take the time to learn some of the old ways and it can really take your code to the next level.

zenTooltip - Simple, Unobtrusive, yet memorable tooltip plugin

I've used a few tooltip scripts over the past couple years and none of them I've really liked. They either try to do everything or not enough. So I've come up with my own tooltip plugin for jQuery.

Introducing zenTooltip

• Uses title attribute for the benefit of progressive enhancement
• Uses simple html/css
• Restyling to fit your needs is simple
• Supports special formatting in the tooltip via a mini-markup syntax.
• formatting is easily extendable and is optional
• Collision detection for the browser edges
• It's open source under MPL, so do what you want

Demo and Docs

I'll be uploading the demo page to my personal site soon but until then the script and demo page is available on the zenTooltip page of Google Code.

If there's things you think the plugin should do let me know. I want to avoid feature bloat, so if you want it to load AJAX content or anything crazy like that that will be a different plugin. Feel free to leverage this code to do it and let me know so we can cross-promote.

Update: I think it's finally hit a 1.0 status. Need to get some users to test it out. Feedback welcome.

Exploring Alternative CSS Formats

I've been thinking about the syntax of CSS. I don't like it. I find it doesn't parse easilly. Could an existing data format be better?

CSS

body{
  color: #3300dd;
  background: #331000 url(http://auctiva.com/images/logo.gif) no-repeat top left;
  font-family: Arial, sans-serif;
}
h1,h2,h3{
  color: #aaf0cc;
  font-family: Tahoma, sans-serif;
  font-style: normal;
  font-weight: normal;
}
#rightSidebarPanel, #leftSidebarPanel{
  background-color: #ffffff;
}

Regular CSS is nice and compact but there's a lot of redundancy and some of the code requires too much memory. Sure you can combine all the background properties into one but there's little rules you have to remember that make it harder.

JSON

[
    {
      "s":["body"],
      "p":{
        "background":{
          "color": "#33A222",
          "image": "http://auctiva.com/images/logo.gif",
          "repeat": "no-repeat",
          "position": "top left",
        },
        "font":{
          "family":'Arial, sans-serif',
        },
        "color":"#000000"
      }
    },{
      "s":["h1","h2","h3"],
      "p":{
        "color":"#a0ff00",
        "font":{
          "family":"Tahoma,sans-serif",
          "weight":"normal",
          "style":"normal"
        }
      }
    },{
      "s":["#rightSidebarPanel","#leftSidebarPanel"],
      "p":{
        "background":{
          "color":"#ffffff" 
        }
      }
    }
  ];

JSON is nice cause it can quickly be turned into JavaScript. The standardized structure means there's less special cases and the syntax is more learnable. There's an awful lot of text that's not data though, maybe something else would be better.

YAML

- s:body
  p: 
    background:
      color: #331000
      image: http://auctiva.com/images/logo.gif
      repeat: no-repeat
      position: top left
    font: 
      family: Arial, sans-serif
- s: [h1,h2,h3]
  p: 
    color: #aaf0cc
    font:
      family: Tahoma, sans-serif
      style: normal
      weight: normal
- s: [#rightSidebarPanel, #leftSidebarPanel]
  p: 
    background: 
      color: #ffffff

Yaml is my favorite so far it's easy to read and can be parsed cleanly. I don't like the s & p keys but I don't think I can make the key the selector as selectors can be arrays. Still, I think this format can really work well.

New Portfolio - Thank You AppEngine

I've been trying to get my act together about showing my talents online. So finally I can ditch my old portfolio(No, I'm not linking to it, it's terrible).

Well, here you go:

Jethro Larson's Online Portfolio Thingy

Using ternary to choose between two methods in javascript

I found this little gem while looking at the jQuery source. I'd forgotten that you can reference properties/methods using obj["str"]. Pretty cool tip for getting your code smaller. Plus I like ternaries.

Before:

if($(this).hasClass("myClass")){
 $(this).hide();
}else{
 $(this).show();
}

After:

$(this)[$(this).hasClass("myClass")?"hide":"show"]();

This is doubly useful if you got a big chain in jQuery and don't want to break it for the if statement.

Edit(2009-3-1): As of jQuery 1.3 there's is now an optional parameter for toggle(), toggleClass(), slideToggle(), fadeToggle(). It's a bool that sets the toggle state. So now the previous statement can be written like this as well:

$(this).toggle(!$(this).hasClass("myclass"));

Markdown Ubiquity Command

I wrote this post in Markdown and converted it to html before posting using my new Markdown-to-HTML Ubiquity Command.

Much thanks to John Fraser's Showdown.js. All the hard work he'd already done I just connected it to Ubiquity.

I've very pleased that my first Ubiquity Command is so useful. I hope someone else thinks so too.

Now if only I could save the markdown rather than the html when posting. Someday I'll leave blogger...someday.