What I've Learned (4 of 4)

by Michael Clark
April 16, 2012 9:05 AM

The last post in this series takes me back to one of the first projects I worked on - Only1 Version 4. I previously wrote a post about this project detailing how the new version was different than its previous incarnations. This post will attempt to describe how the image verification process works.

When working on this project, we looked at various options to do image verification - including licensing a third party product. In the end, we decided to write our own solution. 

To accomplish this, I first started by parsing a username (mclark, jdoe, etc.) into a set a 10 integers ranging from 1-100 using an encryption library released on CodePlex called CTI Text Encryption. This library has a set of options that allowed me to determine the output block size (2 in this case), output format (numbers only), encryption key, and even the separator. It's a pretty powerful library. For instance, the username "jdoe" might encrypt to 2-10-72-64-98-32-33-66-7-99. The library will return duplicate numbers so I had to handle those cases in my code by incrementing one of the duplicates by one.

Once I got the encrypted name into a set of 10 integers, I matched up each integer with a row in our database. The filenames of each of our images were placed in a database with unique ID numbers - for instance, "dog1.jpg" may be ID1. I then returned the file names to my code and placed them on the page.

Sounds pretty easy, but there was quite a bit of research and thought put into this. Overall, I was very pleased with how it turned out.


What I've Learned (3 of 4)

by Michael Clark
April 2, 2012 10:13 AM

The third piece of knowledge I've picked up on recently also comes from the Admissions Checklist site. The site allows each user the ability to update their profile with new addresses, phone numbers, social media accounts, etc. It also provides an upload feature so the prospective student can add an image to their profile. This proved to be a little tricky at first, but that was mainly because I was unfamiliar with parsing a JSON object.

The goal behind this was to allow the user to upload the image, have it display in a thumnail while editing their profile, then click to save their changes once finished - all without a postback. To facilitate this, I used the jQuery File Upload plug-in. The plug-in provides several options such as multiple file upload, file type restrictions, drop zones, etc. The HTML code to use the file upload plug-in uses a simple HTML input tag with a type of "file".

Once that is in place, the javascript to use is -

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url: 'path/to/handler',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>

The file upload handler was probably the trickiest part. I had never written one before so I was pretty lost for a couple of days trying to figure it out. I ended up writing mine as a C# .ASHX file. The important things to keep in mind are that the handler interfaces with IHttpHandler (so I could process the HTTP request with my custom handler) and IRequiresSessionState (so I could name the file appropriately using session variables). Once getting the request, it was a simple matter of getting the file information from the HttpContext.

Once saving the user's image to a temporary location, I then implemented a Javascript call to a web method that wrote the user's profile changes to a database.

Looking back on it now this all seems pretty simple to me, but at the time, it took me a week or so to get this implemented properly.


Countdown to Graduation

by Lance Williams
March 29, 2012 2:05 PM

Here I am, a senior who is just six weeks from graduating, and I cannot in words express how excited I am. My time at Freed-Hardeman has definitely been the most enjoyable and memorable four years of my life, but I feel that I am ready to move on. For the past two years I have been interning in our Information Technology department as a programmer and I feel that this was the best career decision I have ever made. My education, particularly in Computer Science, has set up a great foundation of both knowledge and the ability to learn new things quickly. This education, coupled with my experience in the IT department, has given me at least some confidence in my ability to find and maintain a job.

With all that said, with my excitement to finish school and my confidence in my education and work-experience, I still am quite nervous and almost frightened in the idea of working outside of the FHU world. In my internship I have had to accomplish different tasks that involved and utilized unrelated things, but I fear that if I were placed entirely out of my element that I could fail. I don't believe this is a reflection on Freed-Hardeman's ability to educate, or my boss's ability to assign realistic programming tasks, but rather my lack of knowledge on programming in the "real-world". This uncertainty, and I think it would be said for anyone entering a market they were unfamiliar with, is truly intimidating and frightening, but also a necessary step in life.

When I compare myself to my friends that have went on to get jobs, both from Freed-Hardeman and other Universities, I do consider myself to possess similar, if not perhaps better abilities than them. I believe that FHU is responsible for this in the education and opportunities I was offered while here. While slightly scared I am beyond excited to move on. I look forward to being challenged in my profession and having the ability and mentality to utilize my Freed-Hardeman experiences to accomplish my goals.


What I've Learned (2 of 4)

by Michael Clark
March 20, 2012 10:10 PM

A recent project I've been working on has been the Admissions Checklist - a site for prospective students to track what they've turned in, see deadlines, and get in touch with Admissions. This has been a fairly big project and there have been several things I've had to figure out through trial and error.

One of the first things that stands out to me involves CSS positioning. In the Checklist, we've got three sliding "panels" which the user can alternate between for their profile, FAQs, and contact information.

This is accomplished using postions absolute and relative. In the markup, I have a "container" div with its position set to relative with overflow set to hidden. Setting the container position to relative is necessary to position the panel absolute inside the container, and setting overflow to hidden hides the panel when it's out of view. The container div also gets a positive z-index.

My panel divs are then given an absolute position. By default, I then use Javascript to set the "profile" div to display on load by setting it's position (top, bottom, left, right) attributes and it's z-index to a value greater than the container's. The other two divs - "FAQs" and "Contact" - are then hidden by pushing them right and off the screen and a z-value less than the container's.

When the user clicks to move to a different panel, I use jQuery animate to switch the positions/z-indexes of my panel divs.

It might sound more complicated than it is, but in the end, it provides a nice little user experience.


What I've Learned (1 of 4)

by Michael Clark
February 15, 2012 10:54 AM

I've officially been back at Freed-Hardeman for a little over 6 months and in that time there have been a few things I've learned.

The first tidbit I'd like to share is in regards to creating an equal two-column layout using CSS only. There are many "tricks" to accomplishing this - tables, javascript, etc., but I've finally stumbled across a pure CSS method. It's detailed fully in this article on A List Apart so I'll give a quick summary for the skimmers at home.

This method involves three divs - a container, a main content area, and a rail (think sidebar). The content and rail divs are nested inside the container div (It may seem weird, but the content div needs to come before the rail div regardless of what side the rail is supposed to display). Here are the important pieces of CSS (you can background colors to differentiate your columns if you'd like):

#container{
  background-color:#fff;
  overflow:hidden;
  width:750px;
}
#content{
  background-color:#fff;
  width:600px;
  border-right:150px solid #000;
  margin-right:-150px;
  float:left;
}
#rail{
  background-color:#000;
  width:150px;
  float:left;
}

Let's break this down into what's going on.

We have a 750px wide container with a 600px content area and a 150px side rail. The content area also gets a right border of 150px the same color as the side rail as well as a -150px margin that allows the rail div to move into it's proper place. The right border makes it appear so that as the content area grows, the side bar appears to fill in beside it (when in reality, it's just the right border). In similar fashion, if the side rail is taller than the content area, the container has the same color as the content area and fills in what's missing.

Better yet, the layout can be modified so that your column can be on the right should you so desire. The article from A List Apart also goes into detail on how to create a three-column equal height layout.

Pretty simple, isn't it?