www.precisiontext.com

Precision Text, a brand new company with only an idea, needed to hire a solid web developer to bring their new business idea to life.  After a few conversations, we both agreed that the best way to bring this idea to the marketplace would be to use the Ruby on Rails framework and a solid text messaging API.

The application allows for business owners to gather a list of their customer’s cell phone numbers. The business can then send out a message to these customers alerting them of new deals or special offers. The response rate has been high and the utility to the business has been huge.

I built the application from scratch and within a month was comfortable with a deployment in a beta stage. Using this beta deployment, the founders put the application through some of their own testing and determined they were comfortable selling the product as it was. Within a month of deployment, they had already secured 10 contracts!

TDD

This was the first app that I built in a completely test driven development (TDD) coding style. I have had some experience with unit and functional testing, but I have never actually built an application from scratch using TDD. Even though the processes was new, I still found the coding process to be much more efficient. I will be building apps using only TDD from now on.

Daemonized Processes / Time Zones

Sometimes businesses need to send messages later than when they’re at the computer. Rather than set up a complicated cron job or some other solution, I created a daemon within the application that actively listens for queued messages and sends them according to the time the end user requested.

Implicit in the scheduling is getting their time zone right. From a usability perspective, it is much easier not to do time math when queueing a job. A restaurant owner in Colorado shouldn’t have to compute the difference of her time zone to where the server is located. Neither would she want a message to accidently go out an hour early.

For usability and business rapport reasons, I implemented automatic adjustments for the time zone the user is in. To the user, it is seamless and easy to manage.

So, here it is, a fairly beta version of a horizontal content slider written with the Mootools 1.2 framework. Simply download (or copy and paste) the ContentSlider class into your page and then instantiate with the required arguments.

Usage Example:

the ContentSlider class

/**
 * Content Slider - A Useable Horizontal Scroller
 *
 *  Requires a parent element with hidden overflow and child elements floated inside the parent.
 *  Take any two elements as previous and next buttons and scolls the child elements through the parent element
 *
 * Dependencies: MooTools 1.2 (and probably 1.1.x but not tested)
 *
 * adapted from Antonio Lupetti's original blog post at
 *    http://woork.blogspot.com/2009/01/elegant-animated-weekly-timeline-for.html
 *
 * @version		0.9
 *
 * @license		MIT-style license
 * @author		Bryce McDonnell bryce {at} bridgetownint {dot} com   www.brycemcdonnell.com
 * @copyright	Bryce McDonnell
 */
var ContentSlider = new Class({
    config: {
		totIncrement: 0,
		increment: 0,
		maxRightIncrement: 0,
		container: $empty,
		slidingEl: "",
		slideAtATime: 1,
		previous_btn: $empty,
		next_btn: $empty,
		duration: 1000,
		transition: Fx.Transitions.Back.easeInOut
	},
 
	initialize: function(config) {
 
		this.config = $merge(this.config, config);
 
		this.config.maxRightIncrement = this.config.increment * -( ( $$(this.config.slidingEl).length / this.config.slideAtATime) - 1 );
		if (this.config.previous_btn && this.config.next_btn) {
			this.activateMoveBtns();
		};
 
		return this.config
	},
 
	move: function() {
		this.config.fx = new Fx.Tween(this.config.container, {
		property: 'margin-left',
		duration: this.config.duration,
		transition: this.config.transition,
 
		onStart: function() {
			this.config.previous_btn.removeEvents('click');
			this.config.next_btn.removeEvents('click');
		}.bind(this),
 
		onComplete: function() {
			this.activateMoveBtns();
		}.bind(this)
 
		});
	},
 
	activateMoveBtns: function() {
		//Next Button
		this.config.next_btn.addEvents({
			'click' : function(event){
				this.config.totIncrement = (this.config.totIncrement>this.config.maxRightIncrement) ? this.config.totIncrement - this.config.increment : 0;
				event.stop();
				this.move();
				this.config.fx.start(this.config.totIncrement);
	 		}.bind(this)
 
		 });
 
		//Previous Button
		this.config.previous_btn.addEvents({
			'click' : function(event){
				this.move();
				event.stop();
				this.config.totIncrement = (this.config.totIncrement < 0) ? this.config.totIncrement + this.config.increment : this.config.maxRightIncrement;
				this.config.fx.start(this.config.totIncrement);
			}.bind(this)
 
		});
	}
});
ContentSlider.extend(new Fx.Tween);

html markup

<script src="/lib/js/homeslider.js" type="text/javascript"><!--mce:0--></script>
<div id="worksamples" class="slide-box">
	<a id="slide-left" class="slider-arrows"> previous </a>
	<a id="slide-right" class="slider-arrows">next</a>
<div id="workimgs">
<ul id="slider-list">
	<li><img class="aligncenter size-full wp-image-168" title="BME logo small" src="http://blog.thedevranch.net/wp-content/uploads/2009/05/BME-logo-small.jpg" alt="BME logo small" width="300" height="405" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="meth" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="nuskin" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="choice" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="meth" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="nuskin" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="choice" width="292" height="184" /></li>
</ul>
</div>
</div>

the javascript

new ContentSlider({
		increment: 904,
		container: $("slider-list"),
		slidingEl: "#slider-list li",
		slideAtATime: 3,
		next_btn: $("slide-right"),
		previous_btn: $("slide-left")
	});

the css markup:

  /***  SLIDER   ***/
#worksamples {
	width:960px;
	height:180px;
}
#workimgs{
	width:900px;
	overflow:auto;
	overflow:hidden;
	height:200px;
	margin:0 auto;
}
#slider-list{
	width:20000px;
	margin:0;
	padding:0;
	left:400px;
}
#slider-list li{
	list-style:none;
	margin:0;
	margin-right:5px;
	padding:2px;
	float:left;
	width:292px;
	height:200px;
}
.slider-arrows {
	display:block;
	width:18px;
	height:42px;
	text-indent:-9999px;
	overflow:hidden;
	margin-top:74px;
	cursor:pointer;
}
#slide-left {
	float:left;
	background:url(../img/left-arrow.png) no-repeat !important;
	background:url(../img/left-arrow.gif) no-repeat;
}
#slide-right {
	float:right;
	background:url(../img/right-arrow.png) no-repeat !important;
	background:url(../img/right-arrow.gif) no-repeat;
 
}

Explanation:

This serves as a pretty rudimentary example. The markup is simply a list with containing images that need scrolling. For the next and previous buttons, I got creative and got rid of the text and set an image for the background. That provides a good looking UI to the user.

Usage requires two basic elements: a container and child elements to scroll through. The parent should hide all overflow and the child elements should float so as to be one long horizontal array of scrolling elements. Simply include the class on any page and then instantiate the class passing in the required arguments.

Arguments:

increment : the number of pixels the container should scoll. You could call $(”inner-el”).width here if you want to just scroll one element. I’m working on eliminating this requirement and instead just calculating it using the other arguments passed in.

container: A reference to the parent element with hidden overflow

slidingEl: collection of elements to scroll horizontally. Can be a css selector object

slideAtATime: an integer passed in to indicate how many child elements to scroll at when either the previous or next buttons are pushed. defaults to 1

next_btn: a reference to the element to scroll to the right. A click event is added to this element when the class is instantiated

previous_btn: a reference to the element to scroll to the right. A click event is added to this element when the class is instantiated

Closing:

Happy MooTool’ing ! Be sure to post a comment if you see something wrong or would like to add to this.

This is an old version of an improved Mootools Content Slider

I recently implemented a javascript based slider using MooTools. I’m increasingly becoming a huge fan of Mootools. Their documentation is great and the code I write just seems to be much cleaner. I don’t feel like it’s as fragile as js I’ve written in prototype/scriptaculous.

The content slider, which I pretty much implemented verbatim using Antonio Lupetti’s great tutorial at http://woork.blogspot.com/2009/01/elegant-animated-weekly-timeline-for.html.

Antonio’s tutorial is really great. It is missing two elements which I think improve the code base:

1) you have to set the number of elements to scroll explicitly

2) it does not handle some crazy user clicking like mad on either the left or right buttons

To solve both those pains, I’ve updated the code a bit to work with MooTools 1.2 and made a couple of enhancements seen below.

var totIncrement = 0;
var increment = 387;
var totalIncrements = $$("#sliderList li").length - 1
var maxRightIncrement = increment*(- totalIncrements);
 
var fx = new Fx.Tween('sliderList', {
   property: 'margin-left',
   duration: 1000,
   transition: Fx.Transitions.Back.easeInOut,
   onStart: function() {
      $("slide-left").removeEvents('click');
      $("slide-right").removeEvents('click');
   },
   onComplete: function() {
      appEvent();
   }
});
 
function appEvent() {
   // Previous Button
   $('slide-left').addEvents({
      'click' : function(event){
         if(totIncrement<0){
            event.stop();
            totIncrement = totIncrement + increment;
            fx.start(totIncrement);
        }
      }
   });
 
   // Next Button
   $('slide-right').addEvents({
      'click' : function(event){
         if(totIncrement>maxRightIncrement){
            event.stop();
            totIncrement = totIncrement - increment;
            fx.start(totIncrement);
        }
      }
   });
}
appEvent();

By encapsulating the right and left click events into its own function, I can easily turn on and off the events to prevent the end user from invoking the slide event in the middle of an event that may already be going on. A shorter way to say that is users can’t double click.

Secondly, creating the totalIncrements variable allows someone (like me) to add another list element into the markup at a later date without having to remember to update the javascript code.

These are just a couple of tweaks to an otherwise great tutorial. Thanks a lot Antonio and keep up the good work.

I was brought in as an associate developer to the AAA project to make sure it was completed on time with high quality. I resided in Ohio for a period of three weeks to develop alongside the lead developer.

During that time, I helped with formalizing the architectural plan of the application, offered assistance in deployment and led development projects for several areas of the application.

One fundamental role in the project was to create an online market place and integrate it with an existing SQL Server database. I also created a robust shopping cart and checkout procedure. I also built a web service to manage users in the shopping cart.

The main application was build using a Flash frontend and required data called from the Rails backend. I built a background RESTful interface and helped the lead designer integrate it with Flash.

Integration with other AAA services was also required. I built the front end code to a GIS service, a system for sending emails, and a mechanism to create, store and display unique travel products.

I returned home and continued working on the project through their successful launch in early May of 2008.

The music festival had just had a falling out with their core team of developers. They had an application with bugs and no support. Bryce was hired to become familiar with the code, do testing and bring the project up to production status.

This included re-factoring and building new code into the existing framework.

I also fixed their ailing e-commerce solution. The festival was unable to sell tickets to their events until I fixed that part of the code base

We developed a good relationship with the music festival by sharing frequent progress reports and handling new bugs quickly.