NeilMPatterson.com

Back to my roots

admin — Wed, 19 May 2010 02:32:14 +0000

I recently created a flyer/poster design for my synagogue which gave me an opportunity to refresh my old graphic design skills. It’s not much, and since this was a non-profit I did it fairly quickly and used a business card design I found on adobe as the basis for the design. So really all I did was layout some typography, but it was fun nonetheless!

It was well received so I’m kind of impressed with it. I have done several of these flyers and posters for my Temple so far and it’s going pretty good.

On the other hand however, I have tried to help on the temple web site, but they got that locked down pretty well. I would love to give that thing an overhaul though.

Date string comparison in Coldfusion

admin — Sun, 16 May 2010 22:13:26 +0000

I discovered the other day an interesting tid-bit in cf 8 when comparing two date strings that were set as the following:

<cfset date1 = '5/19/2010' />
<cfset date2 = '19/5/2010' />
<cfif date1 eq date2>the same<cfelse>differentcfif>

When doing so the strings are considered equal. I gather this is because it translates both strings as dates automatically but one is in d/m/yyyy format and the other is m/d/yyyyy format. This was troublesome for me since I was comparing two dates that come from a possible user input, entering them into a text field of a form as an alternative to using the date picker.

DateCompare() results the same. In order to solve my issue without creating a brand new date using createDate(), I was able to use the compare() function as in the following:

<cfif compare(date1,date2) eq 0>the same<cfelse>differentcfif>

Strange thing about cf but not really a bug.

Loading images as they become available

admin — Sat, 06 Feb 2010 07:12:45 +0000

Currently working on a project that required me to create an image upload and processing factory. Basically, it allows you to upload media (photos and video) and then processes media, encodes video, resize images etc.

The problem: After uploading a batch of images, the user is brought to a page where they may name each photo they just uploaded and add descriptions. However, since we allow them to upload many photos at once, the images are not available right away. So they will see a default placeholder image until the new one is availble. When the new image is loaded, we use javascript to change the image on the page, without reloading.

The solution: a little javascript, a little jQuery.

Let’s start by creating a simple demo html:


<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
 
    <script type="text/javascript">
    </script>
  </head>
  <body>
    <h1 id="loader">Loading Images</h1>
 
    <p><img src="images/default.gif" border="0" id="1" class="dynImg" /></p>
    <p><img src="images/default.gif" border="0" id="2" class="dynImg" /></p>
    <p><img src="images/default.gif" border="0" id="3" class="dynImg" /></p>
    <p><img src="images/default.gif" border="0" id="4" class="dynImg" /></p>
    <p><img src="images/default.gif" border="0" id="5" class="dynImg" /></p>
 
  </body>
</html>

You should notice that there are six images that we will load and they all have unique id’s but the same class name. Our javascript will use the unique id to locate the file names. For the sake of this demo our loaded images will be named according to the id’s so we will be attempting to load 1.gif, 2.gif, 3.gif all the way up to 6.gif

Let’s begin to add our javascript. First let’s create a function to select the image collection and update each image. the function will be named updateDynImg().

<script type="text/javascript">
 
    function updateDynImg() {
        $('img.dynImg').each(function(){
            // Do something.
 
        });
    } ;
 
script>

Above shows how we use jQuery to select all class names of “dynImg” that happen to be img tags and loop over each one in the collection using the each function.

Now let’s set a few variables, create an image object, use that to check if the image exists and then create a new function to call when the image loads successfully.

<script type="text/javascript">
 
    function updateDynImg() {
 
        $('img.dynImg').each(function(){
            var EID = this.id;
            var URL = "images/"+EID+".gif";
            var tester=new Image();
 
            tester.onload=isGood;
            tester.src=URL;
 
            function isGood() {
                document.getElementById(EID).src = "images/"+EID+".gif";
            }
 
        });
    } ;
script>

This is the meat of our script above. It’s pretty god damn basic. but it works. If you were to load images into your images directory now it will load. Of course after a page refresh since we have not set our interval yet.

There are a couple other things we will need to update as well. First, let’s create a new function to run this function when the page loads and set an interval to run every 5 seconds. We can paste this directly below the first function.

$(document).ready(function(){
    // run the kickoff update.
    updateDynImg();
 
    //set the interval to run update.
    setInterval("updateDynImg()", 5000)
});

Pretty straightforward, not gonna go into detail there. Now, to solve some problems with browser caching when attempting to load these images we will add a random number to each image.

function updateDynImg() {
 
        $('img.dynImg').each(function(){
            var randomnumber=Math.floor(Math.random()*10001);
            var EID = this.id;
            var URL = "images/"+EID+".gif?id="+randomnumber;
            var tester=new Image();
 
            tester.onload=isGood;
            tester.src=URL;
 
            function isGood() {
                document.getElementById(EID).src = "images/"+EID+".gif";
            }
 
        });
    } ;

Easy enough. Now I want to make sure I am not running a check if the image is already loaded. So let’s just make sure that the src of the current image is the default.gif (must use absolute paths for this).

function updateDynImg() {
 
    $('img.dynImg').each(function(){
        var randomnumber=Math.floor(Math.random()*10001);
        var EID = this.id;
        var URL = "images/"+EID+".gif?id="+randomnumber;
        var tester=new Image();
        var myRoot = location.href.match(/^.*\//);
 
        if (this.src == myRoot+"images/default.gif") {
            tester.onload=isGood;
            tester.src=URL;
        }
        function isGood() {
            document.getElementById(EID).src = "images/"+EID+".gif";
        }
 
    });
} ;

Excellent! Nearly done. Now I just want to update the header to show how many images are loaded and the total number of images. I wont break that down so here is the full javascript block. Go ahead and test it locally, just rename your images or drag them in and out of the directory and watch them update automatically. Fun with Javascript!

<script type="text/javascript">
 
    function updateDynImg() {
        var numOfLoaded = 0;
        var totalImages = $('img.dynImg').length;
 
        $('img.dynImg').each(function(){
            var randomnumber=Math.floor(Math.random()*10001);
            var EID = this.id;
            var URL = "images/"+EID+".gif?id="+randomnumber;
            var tester=new Image();
            var myRoot = location.href.match(/^.*\//);
 
            if (this.src == myRoot+"images/default.gif") {
                tester.onload=isGood;
                tester.src=URL;
            } else {
                if (numOfLoaded != totalImages) updateLoader();
            }
 
            function isGood() {
                document.getElementById(EID).src = "images/"+EID+".gif?id="+randomnumber;
                if (numOfLoaded != totalImages) updateLoader();
            }
 
            // This will update the h1 loader tag.
            function updateLoader(){
                numOfLoaded = numOfLoaded + 1;
                $("#loader").replaceWith('Loading Images '+numOfLoaded+' of '+totalImages+'
');
            }
        });
    } ;
 
    $(document).ready(function(){
        // Run the kickoff update.
        updateDynImg();
 
        // Set the interval to run update.
        setInterval("updateDynImg()", 5000)
    });
script>

Smurf You! launches to brighten up the week.

admin — Fri, 20 Nov 2009 01:26:57 +0000

Update: I let my domain expire. It was a fun expieriment, but time for more important things.

Been a long couple weeks for me and several others as we are dealing with some malicious site activity at work. However, Smurf You! is now live and I am very happy with the results.

Smurf You! is a micro blogging application that allows you to post your status to Twitter through SMS and all kinds of cool gadgets, some still in development. Using the open source micro-blogging service, SatusNet, and a javascript written by Adrian Speyer, you can send status updates to your friends and family and translate those into smurf-talk using the translate function.

Just having a bit of fun with it, but eventually I can step through my experience using statusnet and implementing it in a blog series to come.

Enjoy. Now smurf off!

The new www.ORLive.com has launched

admin — Wed, 17 Jun 2009 04:10:19 +0000

June 1 the company I work for, ORLive, Inc. launched a total site redesign. I played a major role in developing this redesign and to architect the back end. I worked with one other developer and one designer and outsourced about 10-15% of the work to other vendors.

Although the working conditions for this project were not ideal and the time line was shorter than we could have wanted, this was probably one of those projects where, if asked in an interview what my greatest challenge and/or accomplishment was…. this would be it.

Three months total to get a whole new back end in a Content Management System with limited documentation. I am still surprised we did it. Granted it launched minus some key features we intended to make, it was still a success. The design has flaws we are working out. Navigation is a problem. Countless other things need to happen but www.orlive.com is here and it launched June 1 as planned.

Let me know what you think?

Google Wave Is Coming

admin — Mon, 15 Jun 2009 02:12:53 +0000

If you are looking for the new wave of social networking, watch this video from Google I/O 2009 conference. It shows a sneak peak at the new innovative communication tool. It will be open source and from the looks it can open up a huge role of possibilities. Very cool stuff.

http://www.youtube.com/watch?v=v_UyVmITiYQ

Welcome to the site

admin — Sun, 14 Jun 2009 05:50:20 +0000

Welcome to Neilmpatterson.com. More good stuff to come!