• April 17th, 2008
• Filed in
  • Apple
  • Rants
  • Web Development

I have a confession to make.

SQL Server 2000 by MICRO$OFT is the best SQL application I have ever used.

Select query text -> run (ctrl+enter) -> results. nothing out there does this simple behavior.

For everything I love about OSX I do miss a couple of apps since I jumped ship in June of ‘06. A decent SQL application is right up there at the top.

The Candidates

Navicat

 I use Navicat on a daily basis but it drives me IN SANE. All I want is a simple application for running queries that’s easy to navigate and has plenty of hotkeys baked in so I can bounce around with ease and speed. Navicat fails miserably at this. I end up with 5 windows open just to do simple stuff, there’s not enough distinction between the behavior of browsing tables or writing queries. It’s a painful, verbose, hassle. Today I was so pumped I found a couple hotkeys that would save me a lot of time only to find out they were useless because they didn’t put focus on a textarea that would be painfully obvious to anyone actually using the program. Multiple queries require multiple windows and it all ends up being a CF in the end. I’m looking to replace Navicat pronto.

Query Browser

Query Browser could be awesome, but it comes up short. Again a lack of hot keys and cursor focus make using it a pain. Frequent crashes don’t help (it crashed on me twice while writing this). My biggest peeve by far is how Query Browser deals with errors. You end up getting this tiny sliver of an area dedicated to errors. If you get a couple in a row they all stack and become unreadable and you can’t even resize the errors window space OR clear them out. I do like how Query Browser makes use of tabs for multiple queries instead of creating a new window each time (take note Navicat).

phpMyAdmin

I know other mac users who just use phpMyAdmin for all their SQL needs. I hate the lag of a web interface for something that is screaming for an application interface. Again, phpMyAdmin is sans hotkeys. That’s a deal breaker.

Dismay

If anyone can enlightened me please speak up. I’ve looked near and far and this is the only list of apps I have found and I assume it’s pretty comprehensive. I tried a couple of these applications out and found that I was already using the best available out there.

I’m very close to just retreating back to the basics.

Popularity: 6% [?]

• March 24th, 2008
• Filed in
  • Web Development
  • Work

There are some site behaviors that are primed for progressive enhancement in this example we’ll look at a ratings system and how easy it is to transform a simple form to make it more visually appealing and also improve usability. For a simple rating system we want a radio button list (1-10) and a ‘vote’ button to submit our rating. The html would look something like this:

<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.

Popularity: 12% [?]