Joe Sak

Ruby on Rails Photo Gallery & Shopping Cart with RESTful Authentication

Sunday, May 31st, 2009 | Design | 7 Comments

Tonight I launched another web application for Michael Youngblood Photography which allows him to build online photo galleries that his customers can privately view and order online with qty, size and framing options. The customer must use paypal to complete the transaction (because I’m still a rails n00b, guys. no serious SSL stuff for me yet).

So I grabbed the RESTful Authentication Tutorial as my base framework for the application, so I automatically had user accounts, roles, logging in and session stores to work with right off the bat.

I’m very proud of this application from a knowledge/skill expanding aspect, a UI aspect, project complexity, and the fact that I was careful to write this in “The Rails Way” as strictly as possible. Remember guys I’m still a n00b but I’m coming along. Enjoy!

Demonstration of the User Interface process and application

What I had to add on to it was the ability for Michael to create galleries which belong to the user accounts he creates in the process.

So he begins by creating a customer:

Michael begins by creating his customer

Then he names the gallery:

Michael names the gallery

Then he populates the gallery with photos:

Michael uploads photos to the gallery

This is what the customer sees when they log in (minus the edit gallery link, only admins see that)

The customer interacts with their gallery

*note, the “Add to Cart” gray bar is triggered by mouse hover.

They can add to cart:

The customer adds an item to their cart

After completing the checkout process in paypal, the user can see their order list, and Michael can access their order list directly off their private user page.

To see the full demonstration, check out my Jing! Screencast here:

View the 5 minute Screencast Demonstration

*note -> the photo uploads actually work much better and without wonkiness on the production server!

If you’d like to get your hands on the source, or would like to work with me, please contact me.

Lansing Sports given Outstanding Web Site award by NASC

Wednesday, April 29th, 2009 | Design | 1 Comment

Lansingsports.org, one of my favorite projects as a web developer for Artemis Solutions, was given the award for Outstanding Web Site by the NASC. I don’t have proof because no one is blogging or writing about it, but @greaterlansing says so, and they’re the ones who got the award, so I’ll trust them. Especially since they seem to like working with me.

LansingSports.org

Stop those damn AIM coho, trout & salmon bots!

Friday, April 10th, 2009 | Design | 4 Comments

AOL Instant Messenger. Y’all are using it.

You randomly get an IM from <adjective>coho or trout or salmon. It’s nonsensical but you reply to it out of curiosity. Then you find out the person on the other end is some random AIM user. It’s annoying as all hell. Your block list is probably long, and it doesn’t even matter because it changes its name every time!

HOW DO YOU STOP THE DAMN AIM COHO BOTS?

Thanks to some info from Morouxshi, it’s actually really easy to stop the bots:

When that stupid thing IMs you respond to it with

$optout

It will ask you to respond with something like ‘$optout blah’ and once you do that it will stop sending you IMs.

Some known AIM bot names (to help with people searching this problem):

• clingycoho
• sinistercoho
• surefootedcoho
• toroidalcoho
• passedoutcoho
• racingcoho
• bipolarcoho
• ingeniouscoho
• analyzedcoho
• merrycoho
• bisexualcoho (haha what?)
• nieceofacoho
• witchycoho
• welltimedcoho
• infuriatedcoho
• puritanicalcoho
• fiercetrout
• dramaticcoho
• swabbedcoho
• brunchingcoho
• xenophobiccoho
• stupendouscoho
• alchemicalcoho
• lopsidedcoho
• varyingcoho
• roudingcoho
• immoveablecoho
• cateredcoho
• lilliputiancoho
• falsifiedcoho
• affectionatecoho
• liberalcoho

Organize yourself with Ta-Da lists

Friday, December 12th, 2008 | Design | No Comments

The geniuses at 37signals have been offering their free Tada List service for a number of years now, but I only recently started using it. Absolutely pleased with Basecamp, I had no doubts it would be a useful web site.

Boy was I ever right. Tada List makes it so easy to stay on top of your game and your tasks. With so many bloated task managers out there, it’s nice to have a simple list that I can add to, edit, and re-order to prioritize. It’s awesome that it’s free, as well.

Thanks, 37signals!

Also, putting your dinner dates into iCal isn’t nerdy in any way, shape, or form at all.

Tags: 37signals, manage, prioritize, task lists, to-do

My First Real-World Rails App, Part IV

Wednesday, November 26th, 2008 | Design | 3 Comments

Continuing my series about my first real-world ruby on rails application, I’m posting my 4th screencast, where I demonstrate the front facing Photo Gallery.

Enjoy!

View the Screencast now

My First Real World Rails App, Part III

Monday, November 24th, 2008 | Design | 1 Comment

Continuing my series about my first real-world Ruby on Rails application, I’ve added a very simple photo gallery management tool to the Admin side of the app:

Enjoy:

Watch the Screencast now

My “Functional Requirements” documentation

Sunday, November 23rd, 2008 | Design | 1 Comment

For my first real world Rails Application:

Who needs 'em?

There’s no need to have anything more elaborate than this. Rails lets me respond to change! I have a general outline because I know the little things will come up as I work! I am able to make decisions quicker because Rails allows me to try several ideas in minutes! If I spelled every detail out painstakingly in some arduous document, I’d get bogged down with heavy commitments and feature creep. Having a rough outline allows me to focus on the core ideas of the application and make judgement calls while I work.

A jQuery Function to Auto-Fill Input Fields and Clear them on Click

Wednesday, November 19th, 2008 | Design | 29 Comments

***UPDATE 1/27/2010: I have created a github repository for this plugin, and added password field support! ***

Download the plugin here.

Original post which needs to be updated to reflect the changes in the plugin (but the idea is the same):

So you’ve got some input fields, maybe a search bar, or a name field, an email field, whatever. You’d like it to be smooth and show the required info in the field, and have it clear when your customers focus on it. How slick would that be? Well, I have written 12 lines of jQuery that will make your forms even sweeter.

Let’s start with the basics.

First, you need jQuery. I recommend linking the Google-hosted jQuery script, as this may someday help optimize your web site. The idea is that if enough people are using the hosted libraries, then there’s a good chance that your visitors have already cached the file, helping your site load faster.

Next, you need a javascript file for holding all your functions and making calls to those and the built in jQuery libraries. I call mine “functions.js”. So create that and link it after your jQuery script:

     <script src="http://www.google.com/jsapi"></script>
	<script>
		google.load('jquery','1.4.1');
	</script>
     <script src="js/functions.js" type="text/javascript"></script>

In your HTML, you need an input field. Let’s use a search box for our example.

     <input id="txtSearch" type="text" value="Search for Keyword(s)" />

Here we will get a standard textbox with the words “Search for Keyword(s)” in it. Now, we could write a function that clears the text when the user clicks, and it would be very easy, like this:

     $("#txtSearch").click(function(){ $(this).attr({ value: '' }); });

We’re presented with a few problems, however:

1. The value won’t clear if the visitor doesn’t have JavaScript enabled.
2. It only works “on click”. What if the user tabs to your field? Use “on focus” instead.
3. The value will clear even if the visitor typed their own text in already. This violates the usability rule that you should always preserve users’ data.

 <input id="txtSearch" type="text" />

Now let’s modify our JavaScript to add the default value, and clear it when clicked, but only clear if the default value is in the field.

     $("#txtSearch").attr({ value: 'Search for Keyword(s)' }).focus(function(){
            if($(this).val()=="Search for Keyword(s)"){
               $(this).val("");
            }
       });

Now we have a search field that gets a default value and clears when the visitor brings focus (through click or tabbing) to the field, but only when the default value is found in the field.

So, what if the visitor tabs through to the next field and forgets what the newly empty field was for?

Did you really think I’d leave this detail out? It’s simple. We add a function to re-fill the field with our default value on blur if the current value is found to be empty:

      $("#txtSearch").attr({ value: 'Search for Keyword(s)' }).focus(function(){
            if($(this).val()=="Search for Keyword(s)"){
               $(this).val("");
            }
       }).blur(function(){
            if($(this).val()==""){
               $(this).val("Search for Keyword(s)");
            }
       });

So can this get any better? You bet! We can make the default value have a lighter text color and give the visitor input a darker color. We can also turn this into a function so it can be applied to any field in our DOM! Let’s do it!

function autoFill(id, v){
	$(id).css({ color: "#b2adad" }).attr({ value: v }).focus(function(){
		if($(this).val()==v){
			$(this).val("").css({ color: "#333" });
		}
	}).blur(function(){
		if($(this).val()==""){
			$(this).css({ color: "#b2adad" }).val(v);
		}
	});

}

Just pass the ID of the field and the default value you want it to have:

     autoFill($("#txtSearch"), "Enter Search Keyword(s)");

That’s it, now go check out the demo and feel free to copy!

I want you to get on with your business.

Monday, November 10th, 2008 | Design | No Comments

And not waste time learning complicated software.

I want you to get on with your business.

And not waste your time dealing with buggy crap that breaks all the time.

I want you to get on with your business.

And not waste your time waiting for me to resolve your issues.

I want you to get on with your business.

And not waste your time worrying about your web site’s performance.

I want you to get on with your business.

And not waste your money in lost sales due to customer frustration.

So stop wasting your time and contact me. I’ll be glad to have your business, and you’ll be relieved to be getting mine.

Mac OS X is better than Windows, Reason #435

Tuesday, October 28th, 2008 | Design | 1 Comment

Mac OS X Finder handles long file names much better than Windows Explorer does. If you have a long list of similarly named files, OS X makes it very easy to tell, at a glance, which file you want without having to expand your window. It adds ellipses in the middle of the name, allowing you to see the beginning and end of the file name.

Windows, however, adds ellipses at the end of the file name, making it impossible to distinguish between file names.

Screenshot:

How Mac OS X Finder handles long file names

The usability improvement implied in this simple touch is unmistakeable. It’s these small details that can improve your app. Always think about how a feature, used in a particular way, can hurt or help your users.