Archive | development RSS feed for this section

The HTML and CSS Behind Google’s Search Bar

Earlier this year I was working on a project that had a text entry box similar to Google’s. It was a long bar in which you entered a line of text with a button at the end to “Add” it (instead of “Search”). I really liked Google’s styling for their search bar and figured I would simply “lift” the HTML and CSS for it. However Google’s HTML source code, if you’ve ever looked at it, is heavily minimized. Everything is on one line with short, obscure CSS class names like “gac_v2.” Great for serving up webpages quickly, not so fun for trying to figure out how they’re styling their pages. I tried to find a simple “how to” for styling something in a similar way, but alas, there was none to be found.

Not to be deterred, I dug into their code, copied the portion I was interested in, removed all of the useless cruft, gave the CSS classes slightly more useful names, and came up with a working version that looked like this:

That should look rather familiar to you.

Seeing as I couldn’t find anything on the Intertubes for this (and I’m probably not the only one) I thought it might be helpful to share the HTML and CSS code for this — there’s also one image which is used as a gradient background for the search button (entirely optional; it just makes it look nice). If you find this useful leave a comment and let me know.

Right click and Save as:

 

I won the Zappos developer contest

Recently I had the good fortune of winning $1000 and being featured in the local news. Here’s how it happened.

In the middle of March I was doing some research for a blog post and I came across a contest that Zappos was running. I had recently decided that I was spending too much time building web apps for $0/hour, so I almost didn’t enter, but I had an idea that I thought I could pull off without investing too much time. My intent was to build something that was fairly simple but very polished.

I spent a couple weeks (about 40 hours total) throwing together an app in my spare time. I thought my app was good, but I’ve entered contests like this before where the entrants pour lots of time into it and produce something really stellar. So it was much to my surprise that I ended up winning the top prize in the contest (a cool $500 cash plus a $500 gift certificate to Zappos). That alone was enough to make building the app worth my while, but what happened next was even better.

Shortly after I won I posted a quick tweet about it. I have some folks from the Silicon Prairie News as followers and my tweet led to me getting an interview request. I wrote up some answers (reviewed by my wife, thanks!) and they posted an article about it the following day. That article was then mentioned in the weekly PrairieCast postcast (starting at 21:00). I was also contacted by several people who read the article about projects that they wanted my help on.

When I decided to enter the contest in never crossed my mind that it would lead to me being featured on SPN and being offered work. That goes to show though, it is definitely possible to attract luck. You don’t know how that luck will manifest itself, but it will. Do cool stuff, be social, and luck will find you.

Regarding “Attracting Luck”: it sounds like a value-free bromide, but it really does work. I’m not a social butterfly by nature, but I force myself to go out and network. It blows my mind how effective that is, because there exists someone with the ability to give you what you want just by saying “Yeah, sure” and that is 1000000000x more likely to happen after you have asked him for it in person versus happening spontaneously. (Ditto hearing, e.g., “You do SEO consulting? What a coincidence, we need that. Send us a proposal.”, “You made what? That’s interesting. I have someone you should get a coffee with.”, etc)
-Patrick McKenzie

Unable to drag images with jQuery on IE? I found a fix.

I’ve been working on an app where you drag div’s from one location to another (using jQuery for draggable/droppable). Inside of said div is some text and an image. I was running into a big problem with IE (Internet Explorer): when clicking on the image to try and drag the div it would not work. It might as well have not been draggable at all. And dragging using the text in the div caused IE to start trying to select text (but at least it would drag). Not optimal behavior.

It took me a long time to find an answer on Google, but here it is:

Don’t use the “distance” and “delay” options for draggables; they are currently incompatible with IE. As soon as I removed them the draggable functionality worked perfectly. I’m hopeful that the jQuery team will fix this in future versions, but for now, just don’t use those options.

This was with jQuery 1.5.1, jQuery UI 1.8.11 and IE8. Hopefully I’ve loaded this post with enough search terms that others will find it quickly before beating their heads against the wall :)

Installing MongoDB on Windows 7

I was trying to install MongoDB on Windows 7 recently and was having some trouble getting it to work. It doesn’t help that the installer fails silently, not telling you why it won’t install. All you know is that you ran the install command and there’s no MongoDB service installed. Anyway, here are the two gotcha’s I ran into:

  1. You need to run the command prompt as administrator.
  2. You need to have the full path to the exe when you run the install command, e.g.:
    c:\mongodb-1.4.0\bin\mongod.exe –install

Runs like a champ after that.

Image-free tabs with clean CSS

It’s slightly amazing to me how hard it is to find someone that has image-free tabs that have clean CSS. I found a lot of articles on sliding-door tabs (requiring images) and a few articles that required CSS for each individual tab (yuck!). And what I wanted wasn’t even complex:

tabs

Simple, right? I sure wasn’t going to go reinvent the wheel by writing my own CSS for them though. Thankfully after searching for a bit I came across SimpleBits’ Mini Tabs. I didn’t want mini-tabs, but the HTML and CSS was remarkably clean. Only 4 CSS declarations on a simple HTML list with a class=”active” for the current tab. With some modification to the CSS I was able to come up with tabs that looked like the above (even looks good in IE7, amazingly).

So, if you want some decent looking/functioning tabs go yank the HTML/CSS from the above link.

How to use additional one-to-one models with restful_authentication

Restful_authentication collects some basic information to get an account set up, like a username, email address, and password, which all gets stored in a User model. What if you have some additional information that you’d like to collect upon registration, and you don’t want to store it in the User model (addresses, for example)? Rails 2.3 makes this easy.

Let’s get an example registration app set up:

rails registration
ruby script/plugin install http://svn.techno-weenie.net/projects/plugins/restful_authentication
ruby script/generate authenticated user sessions

Cool, now you have your registration app set up with a Users model, controller, and view. If you start up your server and head to http://localhost:3000/users/new/ you should see a very basic registration form. Let’s add our Address model. For the sake of brevity, I’m just going to create a field that references the User model and one field for a zip code, but you get the idea.

ruby script/generate model Address user:references zipcode:string
rake db:migrate

With our Address model in place, we need to let the User model know that it is linked to the Address model. Here’s what the User model looks like (\app\models\user.rb):

require 'digest/sha1'
class User < ActiveRecord::Base
  # Virtual attribute for the unencrypted password
  attr_accessor :password

  validates_presence_of     :login, :email
  # lots more stuff that we're not going to worry about...

We’re going to add three things:

require 'digest/sha1'
class User < ActiveRecord::Base
  has_one :address
  accepts_nested_attributes_for :address
  attr_accessible :address_attributes

  # Virtual attribute for the unencrypted password
  attr_accessor :password

  validates_presence_of     :login, :email
  # lots more stuff that we're not going to worry about...

We’ve told the User model that (1) it has one Address model, (2) that it should save data for Address automagically, and (3) that the address_attributes fields are permitted fields to receive data for (if you read through the code a bit further you’ll see another attr_accessible line, you could add address_attributes there too).

We need to make one change to the User controller (\controllers\users_controller.rb) to prevent an “Called id for nil” error later on. At line 6 you should have an empty new method. We’re going to create an instance variable for User:

  # render new.rhtml
  def new
    @user = User.new
  end

Let’s now take a look at the one User view that restful_auth created (\app\views\users\new.html.erb):

<%= error_messages_for :user %>
<% form_for :user, :url => users_path do |f| -%>
<p><label for="login">Login</label><br/>
<%= f.text_field :login %></p>

<p><label for="email">Email</label><br/>
<%= f.text_field :email %></p>

<p><label for="password">Password</label><br/>
<%= f.password_field :password %></p>

<p><label for="password_confirmation">Confirm Password</label><br/>
<%= f.password_field :password_confirmation %></p>

<p><%= submit_tag 'Sign up' %></p>
<% end -%>

First of all, we need to change the form_for :user to be form_for @user. Second, we get to add in our zipcode field:

<%= error_messages_for :user %>
<% form_for @user, :url => users_path do |f| -%>
<p><label for="login">Login</label><br/>
<%= f.text_field :login %></p>

<p><label for="email">Email</label><br/>
<%= f.text_field :email %></p>

<p><label for="password">Password</label><br/>
<%= f.password_field :password %></p>

<p><label for="password_confirmation">Confirm Password</label><br/>
<%= f.password_field :password_confirmation %></p>

<% @user.build_address unless @user.address %>
<% f.fields_for :address do |a| %>
  <p>
    <%= a.label :zipcode %>
    <%= a.text_field :zipcode %>
  </p>
<% end %>

<p><%= submit_tag 'Sign up' %></p>
<% end -%>

Here’s where I ran into the two gotcha’s. If you don’t switch form_for :user to form_for @user when you submit the form you’ll get a very unpleasant error that looks like this:

ActiveRecord::AssociationTypeMismatch in UsersController#create
Address(#46729050) expected, got HashWithIndifferentAccess(#23561230)

Second, if you don’t add in line 15, @user.build_address unless @user.address, you’ll get the following error when you try to view the form:

You have a nil object when you didn't expect it!

More info on why that error occurs here.

Anyway, with the above steps you should now have a registration form that creates records for both User and Address. If you found this helpful, leave a comment and let me know!

Sorting records by distance using PHP & MySQL

I recently got to the point in my project where I was ready to implement sorting for the search results.  I wanted to sort by the distance between two zip codes. However, I quickly realized I had a major problem on my hands. I had a (potentially) large number of search results that I needed to sort. Too many to sort using PHP; I needed a way to sort them in MySQL. But the method I’d planned to use to calculate the distance between zip codes, Micah Carrick’s distance calculation class, was implemented entirely in PHP. I needed some way for the distance to end up in the SQL query so that I could sort on it.

After searching around for a bit I came across this nice bit of code which creates a MySQL query using PHP variables to calculate the distance. By combining the two methods I was able to create a very workable solution for sorting by distance. Here’s what I did:

First, download the zipcode SQL from Micah’s page and run each SQL file. That should give you a new shiny table called zip_code filled to the brim with (what else?) zip codes.

Second, you’ll need the get_zip_point function from Micah’s code:

/**
 * This function pulls just the latitude and longitude from the
 * database for a given zip code.
 */
function get_zip_point($zip)
{
	$sql = "SELECT lat, lon from zip_code WHERE zip_code='$zip'";
	$r = mysql_query($sql);
	if (!$r)
	{
		$this->last_error = mysql_error();
		return FALSE;
	}
	else
	{
		$row = mysql_fetch_array($r);
		mysql_free_result($r);
		return $row;
	}
}

Third, you’ll want a function to generate the SQL you’ll use in your query:

/**
 * Returns the SQL to calculate distance based on latitude and longitude
 */
function get_distance_SQL($lat, $lon)
{
	$sql = "
	3957 * 2 *
	atan2(
		sqrt(
			pow((sin(0.0174*(lat-$lat)/2)),2) +
			cos(0.0174*$lat) * cos(0.0174*lat) *
			pow((sin(0.0174*(lon-$lon)/2)),2)
		)
		,
		sqrt(1-
			(
				pow((sin(0.0174*(lat-$lat)/2)),2) +
				cos(0.0174*$lat) * cos(0.0174*lat) *
				pow((sin(0.0174*(lon-$lon)/2)),2)
			)
		)
	)
	as distance";

	return $sql;
}

Fourth, you wrap it all together with a few lines of PHP. I’m using CodeIgniter to handle the SQL call, so your mileage may vary a bit on the exact implementation details.

list($lat, $lon) = $this->get_zip_point($user_zip_code);

$this->db->select("users.username, zip_code.city, zip_code.state_prefix," . $this->get_distance_SQL($lat, $lon), FALSE)
		->from('users')
		->join('zip_code',"users.zip_code = zip_code.zip_code")
		->order_by('distance', 'asc');

$search_results = $this->db->get();

And shazam, you now have a way to sort a set of SQL results by distance.

Making CodeIgniter’s Pagination library play nice with jQuery

I’m back, and despite the fact that I haven’t posted in a bit I’ve been accomplishing quite a bit on the site …or maybe not. You see, I started keeping track of the hours I’ve been spending working on the site. Over the last 6 days I’ve put in 11 hours on the site. That’s a pretty good amount of time I’ve put in, actually, considering that my goal is to put in at least 8 hours (the equivalent of one work day) a week on the site.

On the (perhaps) not so good side, the majority of that time has been spent implementing pagination on the search results page. You would think this would be incredibly easy considering that CodeIgniter has a Pagination class. It shouldn’t take me approximately 8 hours, right? Well, apparently it does when you’re trying to use AJAX to handle your pagination. I was even perfectly willing to accept a complete hack for a solution, but alas, anything I tried to do to cobble together a fix for one issue only introduced another issue somewhere else.

Eventually jQuery came to my rescue. In the configuration for Pagination I set the base_url to ” (an empty string) so that the href on the pagination links would contain only the number for the search results. Then I set up jQuery to find all of the anchor links in my paging div, stop the normal link function, and call my function to load in the search results. The jQuery code came out like this:

$(document).ready(function(){
  $("div.paging > a").click(function(e){
    // stop normal link click
    e.preventDefault();

    $('div#search_results').load("/search/get_results/"+$(this).attr("href"));
  });
});

This is still something of a hack as I’m basically creating fake href values for the anchor tags, but whatever, it works! I can come back later and fix it. At this point hacks are okay. Speed is much more valuable than perfectly elegant code as I want to find out if my idea is solid before investing oodles of time in it.

Form validation callbacks and private functions

If you’re familiar with CodeIgniter you probably know about callbacks within form validation. Callbacks allow you to do your own validation of fields. For example, if you want to verify if a username is unique then you could create a username_check function to validate the field. You add the callback rule like this:

$this->form_validation->set_rules( 'username', 'Username',
  'trim|required|callback_username_check' );

And then create a matching function like this:

function username_check( $username )
{
  // some code
}
?>

However, as this is currently implemented someone could access your function as a page at a URL like example.com/index.php/login/username_check/ if they guessed the function name. While that may not have any ill side-effects, it’s probably just as well if no one can access the function besides you.

In come private functions for controllers, which allow you to create a function like this:

function _utility()
{
  // some code
}

And if you try to access the function via a URL, like example.com/index.php/login/_utility/, you’ll get a 404 (page not found).

You probably see where I’m going with this. If you create your callbacks as private functions, no one will be able to access the callbacks as pages. It’s quite simple to do. You add an underscore before your callback function name:

function _username_check( $username )
{
  $valid_username = TRUE; // You would perform some kind of check on the field here

  if ($valid_username == FALSE)
  {
    $this->form_validation->set_message('_username_check', 'The username you have provided is not valid.');
    return FALSE;
  }
  else
  {
    return TRUE;
  }
}

And then add an underscore in your callback rule (note the two underscores after callback):

$this->form_validation->set_rules( 'username', 'Username',
  'trim|required|callback__username_check' );

Done!

Authentication with CodeIgniter

Having finished the registration process, I realized I needed some way to keep people logged in, let them log in, log out, retrieve their password, possibly have some kind of email validation, etc. All sorts of things. I started looking through the CodeIgniter user guide and about they closest things they have is the session library. While you could use it to track if a user is logged in, that’s about the extent of the value it would provide to you.

At first I looked for ways that I might be able to at least run checks on pages to see if a user is logged in or not. It turns out that’s not terribly difficult (once you figure out how to do it). You need to create your own authentication controller for use with pages where you want to check if the user is logged in. Cool, that works. I could throw the log in/log out functionality in easily enough, but resetting passwords and validating email addresses would be a whole different matter.

That’s when I decided that I should start looking for a user-contributed authentication library. The CodeIgniter Wiki has a nice list of them. As I started looking through them and all their various features I realized I should come up with a list of the features that I needed to have. Here’s what I was looking for in a library:

  • Good coding practices
  • Good documentation
  • Small number of files
  • Database implementation that’s not complex
  • Login using username or email address
  • Emails for lost passwords
  • Automatic login
  • Hashing of passwords
  • Maximum number of failed login attempts
  • Emails for activation (nice to have)
  • reCAPTCHA support (nice to have)

Not too harsh, right? Unfortunately most of the libraries ended up being too large, too simple, or completely lacking in documentation. It was hard to find a library that fit somewhere in the middle. I did find one library that might meet all of my requirements, and if not, it’s awfully close: Redux 2 (beta). It has all of the functionality I want, it doesn’t contain a crazy number of files, the database is simple and well thought out, there’s a complete sample application that makes use of the library, and more. I’m going to give it a try and comment in my next post on how well it works.

I should also mention in the course of my search I came across an excellent post on Stack Overflow regarding authentication libraries for CodeIgniter. There’s a lot of great discussion on that page and Redux was also listed there as being one of the better solutions available.