localStorage.setItem( key , value );
// saves a new name/value pair if the key doesn't exist, otherwise
// updates the value

localStorage.getItem( key );
// returns the value associated with the given key, if it exists
// returns null if the key doesn't exist

localStorage.length;
// the number of unique keys stored

localStorage.removeItem( key );
// deletes the name/value pair with the given key, if it exists
// if it does not exist, exits

localStorage.clear();
// delete all name/value pairs currently stored

localStorage.key( n );
// returns the name of the nth key in the list, will return null if n is
// greater than or equal to localStorage.length

If the localStorage object is available, the setup script exits and allows the method to work normally.  Otherwise, it will use the same interface to create a string of name/value pairs to store in cookies.  You can use all the methods described above, but it does not support direct access to data, such as ‘localStorage.name = “bob” ;’.  One issue is that the older browsers with slow performance will experience another setback when storing large amounts of data, because the cookies will be included in headers.

There are two types of storage methods in the new Web Storage Specification: localStorage and sessionStorage.  The sessionStorage data will only persist for the life of the browser window, whereas localStorage will last indefinitely, depending on the browser.  This script uses the localStorage, but can be switched to sessionStorage pretty easily.  There are a few resources out there already where you can learn a little bit more.  Currently, the specification is supported by IE8, Firefox3.5, Safari4, and Chrome (localStorage only).

Download or Check out the repo on github.

[Note: I've done some brief testing on most browsers, but if you run into a problem, let me know]

The Search Controller

The Motionspire search controller uses one function and view for returning any content, whether it’s filtered or not, so the pagination only required one copy of the code to be implemented.  I keep a session variable for maintaining the user’s preference for items per page, and if that parameter has been sent to the search function I set the session variable :

if params[:itemsPerPage] then session[:itemsPerPage] = params[:itemsPerPage] end

When I run though the search function, I see if a page parameter has been passed:

if params[:page] then @page = params[:page].to_i else @page = 1 end

After I retrieve the articles pertaining to the search parameters (in this case the results are stored into an array called @videos), I check the :itemsPerPage preference and find the last possible page:

if session[:itemsPerPage] then @per = session[:itemsPerPage].to_i else @per = 24 end

@lastpage = @videos.length/(@per) + 1

if @videos.length%(@per) == 0

    @lastpage = @lastpage - 1

end

I have a default itemsPerPage value of 24 hardcoded, and you can change this for your search.

From here, we simply return the search results for that page, using the current page and the items per page preference:

@videos = @videos[((@page-1)*@per),@per]

For search queries within a large data set, I would recommend using these parameters with the sql query with the ‘ORDER BY’ and ‘LIMIT’ in order to avoid returning extremely large results unnecessarily.

The Helper

First, I created a short helper function that finds the min and max pages, ensuring we don’t show a negative page or a page that doesn’t exist:

def minmaxpage(current,total,option)
    min = current - 2
    if min < 1
        min = 1
        max = 1 + 4
        if max > total then max = total end
    end
    max = min + 4
    if max > total
        max = total
        min = max - 4
        while min < 1
            min = min + 1
        end
    end
    if option == 'min' then return min else return max end
end

The View

For the content from the view, we use the @videos array to present the content for the page.  The only custom coding necessary is in the links for the pages.  For this site, I provide a first and last page link, along with 2 pages on either side of the current page.  You can manipulate this code how you want, but the basic idea will remain the same.

First we grab the min and max page from the helper:

<% min = minmaxpage(@page, @lastpage, 'min') %>

<% max = minmaxpage(@page, @lastpage, 'max') %>

For the code for the page links, we simply check to see if the min page is within two of the current:

<% if min < @page %>

    <%= link_to( "Prev",

        :action => "search",

        :page => (@page - 1) ) %>

<% end %>

<% if min > 1 %>

    <%= link_to( "1",

        :action => "search",

        :page => 1 ) %>

<% end %>

<% x = min %>

Then we loop through the remaining pages, ensuring we don’t go over the max, and make the current page simple text instead of a link:

<% while x <= max %>

    <% if x.to_i == @page.to_i %>

        <span class="current"><%= x %></span>

    <% else %>

        <%= link_to( x.to_s,

            :action => "search",

            :page => x ) %>

    <% end %>

    <% x = x+1 %>

<% end %>

<% if max < @lastpage %>

    <%= link_to( @lastpage.to_s,

        :action => "search",

        :page => @lastpage ) %>

<% end %>

<% if max > @page %>

    <%= link_to( "Next",

        :action => "search",

        :page => (@page + 1) ) %>

<% end %>

The code may look a little long, but the implementation took very little time.  I know exactly what the code is doing and it is very easy to expand this for different situations and code.

There are a lot of solutions for pagination of content, but I found that this simple implementation helped me avoid using plugins and save time.  Let me know if you guys have any questions or comparable solutions.

<script type="text/javascript" src="http://www.thewojogroup.com/flipEm.js" ></script>

**Make sure to test this on your site, some flash objects or other plugins may not work properly

Enjoy!

When I’m programming, I need 8 different tabs open with every reference site I can get for a particular language.  I google function names constantly, most of my debugging time is spent with dumb syntax errors, and I’m never going to be able to use Regular Expressions off the top of my head.

So what can mediocre programmers like myself do? Develop. I’m going to go over a few tips for good application development, and how to use development methods that can improve your programming, even if you lack superstar skills.

Project Management

There are too many different project management philosophies to mention here, and many of them are developed by very experienced and knowledgeable professionals in the industry.  However, project management and planning remain to be the biggest downfall for most programmers.  Many of these methods are made to apply to development teams, but you can abstract a lot of the ideas to individual projects.  Try to check out a few papers or books on the topic during your free time.

1/3 Rule

For most projects, I try to stick with the 1/3 rule:  spend (approximately) 1/3 of your time on planning, 1/3 on coding, and 1/3 on testing.  Many programmers expect to spend the majority of the project timeline writing code, and believe that good code will drive the project.  However, I have found that most worthwhile final products are created from development timelines that have actual coding as a minority.  This 1/3 flow can often take iterations for different portions of a project, where you plan, code, and test small portions and move on to the next section.  But you will often find dedicating time to plan properly will cut down on actual coding, and proper testing will save you time in the long run.

Start with Your User

I am a big fan of top-down development.  There are a lot of different theories about development strategies and methods, but I have found that for real world applications, the single most important aspect of any program is the interface.

With that in mind, I start my planning with laying out the interface.  Implementation of this idea can vary depending on the project.  For example, you may start with wireframes and a user flow for a web application.  For something like simpleCart(js), I started by listing every way in which the user would interact with the code, including function calls, div classes, and html layout for cart items. When you start your project by building out the interface first, you are ensuring that your program will adhere to the end-user functionality of the project.

Compartmentalize Functionality

It doesn’t matter whether you are a big believer in MVC (I am) or like procedural or object-oriented (I’m a OOP guy); you will find yourself improving your code by creating structure first, and then implementing code.  It is often beneficial to create functions (or objects) that relate to real-world goals or problems.  If you say to yourself, “I am going to need to store the current user preferences in a cookie,” you might want to create a function for exactly that.

By focusing on individual problems, it becomes much easier to create efficient code for that particular purpose.  In turn, you often write better code.  It also becomes much easier to debug; if you are having a problem storing to a cookie, you simply look at your ’store to cookie’ function.  Documentation also becomes extremely easy, as the purpose of your code becomes evident simply by looking at the function name.  I know this may be second nature to many developers, but it can’t hurt to mention it.

Abstract Data Storage

I’ve found that many projects outlast hardware, hosting, or storage implementations.  You may move your code to another server, decide to implement a different database system, or find that you outgrow your storage and need to keep data in more than one place.  In any of these cases, abstracting data storage and retrieval functions from the rest of your code will benefit you immensely.  Data storage is often the last part I consider for my project.  I often do most of my developing with two empty functions: load() and store(). They are usually the last thing I implement, as, in most situations, they are the least important to the functionality of your end-user.  It also becomes extremely easy to maintain consistency of your core functionality when switching to a new data implementation by simply altering these functions.

Conclusion

These are all very high level concepts, and it may or may not be clear how to actually implement some of them in your projects.  The overriding theme that I hope you can take away from this article is that every program looks the same from 10,000 feet.  Most great applications are built with the end-user in mind, and great development isn’t necessarily dependent on great code.  Please let me know if you guys have any other tips.

**update: v1.2: fixed rounding error in price formatting
**update: v1.1: back button works, no trailing comma for options

(if you want to skip right to the example and downloads, check it out here)

Over the past few years, our company has had several clients who have needed a smaller shopping cart, usually to sell just a couple of items. We generally built these small carts using paypal. I realized it would be nice to package this up, and create a lightweight, easy-to-use, flexible shopping cart.

So we made simpleCart(js). The cart is a 10.5kb javascript file that uses cookies to keep track of the items in the cart. SimpleCart(js) doesn’t require any databases or programming knowledge. You simply need to know some basic HTML and have the ability to copy and paste. However, it can easily be expanded to use databases or contain more advanced options.

Setup Paypal

The first thing you will need to do, if you don’t already have one, is set up a free merchant account with Paypal.

Add simpleCart(js) to your pages

Once you have the files downloaded, simply add this snippet to the top of any page you wish to have the cart running on:

<script src="simpleCart.js" type="text/javascript"></script>
<script type="text/javascript"><!--
simpleCart = new cart("you@yours.com");
// --></script>

You will need to replace you@yours.com with the email address you used to sign up to Paypal.

Adding items to the cart

Any page you have the simpleCart(js) running, you can add an item by simply using a link like this:

<a onclick="simpleCart.add('name=[name]','price=[price]');return false;" href="#"> link to add item </a>

You are required to at least have a name and price when adding an item to the cart. However, you can add other fields also. If you want an image to be linked to the item, you can add it like this:

simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png');

Viewing the cart

You may have the cart on any page, and it will update automatically using ajax. To show the cart items on a particular page, you simply need to have an element with the class of “simpleCart_items” on the page. This element will automatically be filled with all of the items in the cart, and will show each field.

<div class="simpleCart_items"></div>

You can use any element (div,a,span,p,etc.) and the values will be put in the innerHTML of that element.

Showing the totals on a page

You can show the total quantity or price on any page by simply having an element with a class “simpleCart_quantity” or “simpleCart_total”:

<div class="simpleCart_total"></div> <span class="simpleCart_quantity"></span> items

Checkout and Empty Cart links

You can have a checkout or empty cart link anywhere on any page where the simpleCart(js) is active. You do this by simply setting the class of an element to “simpleCart_checkout” or “simpleCart_empty”:

<a class="simpleCart_checkout" href="#">checkout</a>

<a class="simpleCart_empty" href="#">empty cart</a>

You can use any type of element for these, and you can put anything inside of the element. Anything wrapped in a tag with those classes will link appropriately.

Other Options

Adding other product options to items.

simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','size=XL','color=Blue');

You can also change the quantity that will be added to the cart:

simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','quantity=5','size=XL','color=Blue');

The order of the arguments doesn’t matter, and you can add as many options as you would like.

Styling the cart.

You can style this cart to fit the look of your page. The contents of the cart will start with a header row:

<div class="cartHeaders">
<div class="itemImage">Image</div>
<div class="itemName">Name</div>
<div class="itemPrice">Price</div>
<div class="itemOptions">Options</div>
<div class="itemQuantity">Quantity</div>
<div class="itemTotal">Total</div>
</div>

Each item in the cart will have the following form:

<div class="itemContainer">
<div class="itemImage">[myImage]</div>
<div class="itemName">Shirt</div>
<div class="itemPrice">$6.00</div>
<div class="itemOptions">size: XL; color: Blue</div>
<div class="itemQuantity"><input type="text" /></div>
<div class="itemTotal">$30.00</div>
</div>

And there will also be a totals row:

<div class="totalRow">
<div class="totalItems">6</div>
<div class="totalPrice">$30.00</div>
</div>

You can choose to omit part of the cart in your stylesheet:

.itemOptions,itemImage{
display:none;
}

Or you can hide the header or totals rows:

.totalRow{
display:none;
}

.cartHeaders{
display:none;
}

Change the order of the cart columns.

If you would like to change the order of columns or remove the columns from ever being shown, simply add a line to the top of your page:

<script type="text/javascript" src="simpleCart.js"></script>
<script type="text/javascript">
simpleCart = new cart("you@yours.com");

//Add the following line to reorder and remove item columns
simpleCart.ItemColumns = ['Image','Price','Name','Quantity','Total'];

</script>

Download and Demo

Below are links to download simpleCart(js) and to view a working Demo. One great thing about the cart being stored in cookies is that you can have your items be added on one page and the cart be on another if you wish. The demo reflects this. The main page of the sample store is here and the View Your Cart page is here.

********* Please go to simplecartjs.com for the updated downloads and demo************

Some Background

I, like many of you out there, started programming back in the day by messing around with computers, writing little calculator programs, making websites, etc.  But I really didn’t get into it much more until I started college, where I immediately started programming with C++.  

Most of my classes started out with projects where we had to write everything (no STL!), and all of my code was from scratch.  Once I started doing more of the “development” in “web design and development”, I still practiced the idea that the only code I know is good is the code I write.

But now I can see…

Then one day, the skies parted, trumpets sounded, and my designer Steve said “Hey, have you heard of Ruby on Rails?”  

I immediately started developing with nearly pure Rails, using the built-in-just-about-everything and loving the fact that anything I couldn’t code (or didn’t want to) was usually readily available in plugins ( I love file_column!).  

I will say this, RoR is good code.  And it’s constantly being improved.  For the most part, the plugins are also good code.  And many times, a plugin works perfectly into your project to save you time and add functionality.  

Good Programming

Ask any real programmer, and the efficiency of code is not only about how it performs, but how long it takes you to create.  So obviously there is a trade-off between using plugins and writing your own code.  

That being said, if you are a web designer who is using rails to help you out, or just trying something new, use the plugins: they are great and it will save you days of coding and headaches.  

If you consider yourself a developer (or hope to), you should still use plugins.  If you code everything, you’re going to waste time. However, don’t completely rely on them.  If you want to be a programmer, you need to know how things work, because some day there won’t be a plugin for you, and you’re going to need to know what to do.  

Also, plugins are meant to be helpful for a range of situations.  Therefore, there is going to be some overhead.  If you are concerned with performance, and a plugin isn’t “perfect” for what you’re trying to do; you might need to code from scratch (or at least be prepared to customize the plugin code).

Here’s the thing…

All things considered, I will say that my natural tendency is to code most everything myself.  I like to know where everything is, and exactly what the code is doing.  I also appreciate when the code is only doing exactly what I want it to do.  If it’s impractical to write something, by all means I will ( and do ) use plugins.  

If you want some good coding experience, and have the time, try writing something yourself that you wouldn’t normally do.  Even if you don’t end up using it, you’ll learn a bit more about RoR (or any other language) and you may just have some good code you can use again.

Agree? Disagree? Don’t care?

I’m just one guy.  Let me know what you guys think.

Using the cookie functions in Rails is pretty straightforward. It’s used with the ActionController and is quite simple to use. Most people use sessions for authentication, which is a good idea. Sessions, unlike cookies, automatically save your content as encrypted strings using the browsers cookies. ActionController#cookie provides a method for saving information in the browser, but you need to hash the content yourself if need be.

However, if a user selects the remember me option when logging in, we would like to have the session expiration set to be a longer period, like 30 days. Unfortunately, this is quite difficult to do if you don’t want to change the expiration of ALL sessions.

My site already uses sessions for authentication, and I’m going to leave that be. In fact, I’m not going to change anything about the session variable at all. This way, I can add this remember function to almost any authentication system I use in the future very easily.

When a user is authenticated and has selected the “remember me” option, I do two things:

- create a cookie that stores (plain text) the user’s id (you can use name, email, etc. but I prefer the id because it says nothing about the user to anyone trying to get information)

- create a second cookie with an hashed string of some other information about the user( name, email, address )

if params[:rememberMe]
userId = (@user.id).to_s
cookies[:remember_me_id] = { :value => userId, :expires => 30.days.from_now }
userCode = Digest::SHA1.hexdigest( @user.email )[4,18]
cookies[:remember_me_code] = { :value => userCode, :expires => 30.days.from_now }
end

For the hashing of the second piece of information, use a hash such as SHA1 or MD5. We can use these two cookies to authenticate a user when they return after a session has expired.

if ( cookies[:remember_me] and cookies[:remember_me] and User.find( cookies[:remember_me]) and Digest::SHA1.hexdigest( User.find( cookies[:remember_me] ).email )[4,18] == cookies[:remember_me_code]  )
@u = User.find( cookies[:remember_me_id] )
session['user'] = @u.id
end

Just work that into your :before_filter for your authentication system, and you’re all set. Make sure you delete the variables when someone logs out:

if cookies[:remember_me_id] then cookies.delete :remember_me_id end
if cookies[:remember_me_code] then cookies.delete :remember_me_code end

****Edit: make sure to have “require ‘digest/sha1′” at the top of any page where you are using the SHA1 hash.

I wanted to create a quick and simple login system that was, most importantly, temporary. The authentication didn’t require a lot of security because no user information was stored in our db other than an email and password. I also wanted to contain all the code for the system (as much as possible at least) in a few different directories, so I can easily remove the system for the main launch.

Here is the process I wanted to create:

1. 1. user comes to the site, and inputs an email address requesting a beta account
2. 2. the user gets an email with (1) a link to create their password and (2) a code for authentication
3. 3. the user inputs the code and creates their password
4. 4. the user can now view the site, and login at a later time

So that’s the process. My designer created two pages: (1) a page with a form requesting an account and another form to login and (2) a page to create a password with the code. I created a new controller, beta, and started with these two functions:

<span style="color: #333399;">> ruby script/generate controller beta index create_password</span>

And I created a model, betauser:

<span style="color: #333399;">> ruby script/generate model betauser</span>

The model had three fields: email, password, and a boolean ‘active’ to keep track of whether the user had activated the account. I usually use the timestamps for every model just as good practice. Here is the migration:

<span style="color: #333399;">class AddBetaUsers < ActiveRecord::Migration
def self.up
create_table :betausers do |t|
t.boolean :active
t.string :email, :password
t.timestamps
end
end</span>

<span style="color: #333399;"> def self.down
drop_table :betausers
end
end</span>

Next was the function for requesting a beta account. The form’s only input was their email:

<span style="color: #333399;">def create_beta_invite
email = params[:email]
beta = Betauser.new
</span> <em><span style="color: #999999;"> //set the account to inactive
</span> </em><span style="color: #333399;"> beta.active = false
beta.email = email
if beta.save
</span><em><span style="color: #999999;">// create a code based on the users email
// its not the most secure way to do things,
// but its simple and doesnt require another
// field in the database</span></em><span style="color: #333399;">
code = Digest::SHA1.hexdigest(email)[3,12]
</span> <em><span style="color: #999999;">
// create an email with my ActiveMailer model 'Notifier'
</span> </em><span style="color: #333399;"> email = Notifier.create_beta(email,code)
email.set_content_type("text/html")
Notifier.deliver(email)
</span> <em><span style="color: #999999;"> //redirect to the password creation page
</span> </em><span style="color: #333399;"> redirect_to :action => "create_password",
:email => email
[sourcecode language="ruby"]<span style="color: #333399;"> else
redirect_to :action => "index"
end
end</span>

[/sourcecode]

After the user gets their email with their activation code, they go to the create_password page.  I send the email as a param in the link, so the activation page will only work if they use the link in the email (or directly edit the address if they are real crafty). The create password page has 3 inputs: code, password, and passRepeat (to verify the password).  Here is the action for this form:

[sourcecode language="ruby"]<span style="color: #333399;">def make_account
@beta = Betauser.find_by_email(params[:email])
if !@beta
redirect_to :action => "index"
</span> <em><span style="color: #999999;"> //check that password fields match
</span> </em><span style="color: #333399;"> elsif params[:password] == params[:passRepeat] </span> <em><span style="color: #999999;"> </span></em>

[/sourcecode]

[sourcecode language="ruby"]<em><span style="color: #999999;"> // check that the code matches our formula from before
</span> </em><span style="color: #333399;"> if params[:code] != Digest::SHA1.hexdigest(@beta.email)[3,12]
flash[:alert] = "Incorrect Code!"
redirect_to :action => "create_password",
:email => @beta.email
else
</span> <em><span style="color: #999999;"> //save the password
</span> </em><span style="color: #333399;"> @beta.password = Digest::SHA1.hexdigest(params[:password])
</span> <em><span style="color: #999999;"> //set the account to active
</span> </em><span style="color: #333399;"> @beta.active = true
@beta.save
<span style="color: #999999;"> </span></span><em><span style="color: #999999;">//use the session cookies to log the user in,
// then redirect to the site</span></em><span style="color: #333399;"><span style="color: #999999;">
</span> session['betauser'] = @beta.id
redirect_to :controller => "main",
:action => "index"
end
else
flash[:alert] = "Passwords do not match!"
redirect_to :action => "create_password",
:email => @beta.email
end
end
</span>

So now we have a user logged in. But we have to have a ‘gatekeeper’ function to allow logged in users to view the site, and send everyone else to the login page. We will put this in the application.rb controller:[/sourcecode]

[sourcecode language="ruby"]<span style="color: #999999;"> </span><em><span style="color: #999999;">// run the function before every action in our app</span></em><span style="color: #333399;"><span style="color: #999999;">
</span> before_filter :check_beta
....
protected
....</span>

[/sourcecode]

<span style="color: #333399;">def checkbeta
</span><em><span style="color: #999999;">// don't check when user is in the beta pages
// that will cause an infinite redirect loop</span></em><span style="color: #333399;">
if controller_name != 'beta'
</span><em><span style="color: #999999;">// if betauser session variable is there
// and the beta user exists, set a
// global @betauser to represent the user</span></em><span style="color: #333399;">
if (session['betauser'] and Betauser.find(session['betauser']) )
@betauser = Betauser.find(session['betauser'])
</span><em><span style="color: #999999;">// if the account has not been activated,
// send the user to the create password page</span></em><span style="color: #333399;">
if @betauser.active == false
session[:original_uri] = request.request_uri
redirect_to :controller => "beta",
:action => "create_password",
:email => @betauser.email
end
else
</span><em><span style="color: #999999;">// if a user is not logged in,
// store the requested call
// and send the user to the
// account request and login page</span></em><span style="color: #333399;">
session[:original_uri] = request.request_uri
redirect_to :controller => "beta",
:action => "index"
end
end
end</span>

Notice that if the user is logged in and the account is active, there is no redirect, and the user goes to the requested page.

The only thing left is to create a login and logout function in our beta controller:

<span style="color: #333399;">def login
password = params[:password]
email = params[:email]
user = Betauser.find_by_email(email)
<span style="color: #999999;"> </span></span><em><span style="color: #999999;">// make sure the user exists</span></em><span style="color: #333399;"><span style="color: #999999;">
</span> if !user
flash[:alert] = "No user with that email address."
redirect_to :action => "index"
<span style="color: #999999;"> </span></span><em><span style="color: #999999;">// make sure the account is active</span></em><span style="color: #333399;"><span style="color: #999999;">
</span> elsif user.active == 0
flash[:alert] = "You must activate your beta account."
redirect_to :action => "create_password",
:email => user.email
<span style="color: #999999;"> </span></span><em><span style="color: #999999;">// verify the password</span></em><span style="color: #333399;"><span style="color: #999999;">
</span> elsif Digest::SHA1.hexdigest(password) != user.password
flash[:alert] = "Incorrect Password."
redirect_to :action => "index"
else
<span style="color: #999999;"> </span></span><em><span style="color: #999999;">// set the session variable to log the user in</span></em><span style="color: #333399;"><span style="color: #999999;">
</span> session['betauser'] = user.id
</span><em><span style="color: #999999;">// send to the original request, if exists
// otherwise, send to the homepage</span></em><span style="color: #333399;">
if session[:original_uri]
redirect_to session[:original_uri]
else
redirect_to :controller => "main",
:action => "index"
end
end
end</span>

<span style="color: #333399;">def logout
</span><em><span style="color: #333399;"> </span><span style="color: #999999;">// set the session variable to nil
// and redirect to the login page</span></em><span style="color: #333399;">
session['betauser'] = nil
redirect_to :controller => "beta",
:action => "index"
end</span>

That’s about it. There are definitely things I could have done better, but I wanted something quick, dirty, and temporary. It works, and is not something I would want to use long term. However, if you have a need for a low-security, simple login, this gets it done. Overall, it only took me about an hour and 15 minutes to code, and will be very simple to remove.

**I will follow up with a very simple removal of the system, and post the files in their entirety at a later time. Check it out at Motionspire.com!