A Web Developers Blog

Link: Anatomy of a Feature

JR Tashjian — Tue, 02 Feb 2010 13:59:47 +0000

“Oh, it’s easy, just a quick http call. I could write a script to do it in like 20 seconds.”

I have definitely said that more than once in the beginning of my career. Enthusiasm for a project is awesome but, don’t let it come back to bite you in the rear!

If you’re one to say that as well, read this article written by Brent Simmons. It’s easy to jump to conclusions when you’re excited about a project or you just have so much going on that you overlook the details. Step back and take the time to look at the details before you set any commitments.

Link: Designers are not Programmers

JR Tashjian — Tue, 02 Feb 2010 13:06:19 +0000

I found this article today and figured I would share it. I’ve had debates at my workplace about if the Designers should also know how to code and I believe this article reflects my thoughts on it.

This article was written by Lukas Mathis and although it was written in March of 2009, it is still relevant. Check it out.

Be A Better Programmer

JR Tashjian — Mon, 30 Nov 2009 06:01:06 +0000

Aaron Swartz posted an article today on his blog titled: How I Hire Programmers. If you haven’t done so already, read it!

I believe this article is not only for employers looking for a way to hire better programmers. But, it could also be beneficial for an aspiring programmer to work on themselves to be a better candidate for the job.

Below, I’ve picked out a couple quotes and added my response.

“Someone who gets stuff done but isn’t smart is inefficient: non-smart people get stuff done by doing it the hard way and working with them is slow and frustrating.”

Anybody can Google around and find a code snippet, paste it in, and continue working. However, do you know what that snippet of code is doing? Do you know why that block of code works, and how it works? You need to.

Whenever I run into something I don’t know how to solve, I’ll Google it. I’ll find a snippet of code or a tutorial and read through it. I’ll pick it apart, look up function calls, comment the code and even completely rewrite it. Line by line I’ll figure out a better way it could have been written. I will make it mine. You should do the same.

“… do they learn? At some point in the conversation, you’ll probably be explaining something to them. Do they actually understand it or do they just nod and smile? There are people who know stuff about some small area but aren’t curious about others. And there are people who are curious but don’t learn, they ask lots of questions but don’t really listen. You want someone who does all three.”

With the technology of today, always changing and new things being introduced, you can’t afford not to learn something new. Are you intrigued by the API’s and Web Services available? If you’ve never used it before, use it now! Make a simple script, just to test it out. Do that, and you will become a better programmer.

Do any of these sound like you? Take a look at yourself and these points from the article. See how you can make yourself a better programmer.

Google Maps API: Center Point Location

JR Tashjian — Mon, 23 Nov 2009 04:56:22 +0000

As stated in the last article, I have been working a lot with the Google Maps API for a current client project. The most recent problem, was the application was required to display a quick overview of the current location the user was looking at. The City and the State.

Again, jQuery will be used in this demo and we will be using the GClientGeocoder service.

Loading Google Maps API

Here is the HTML for the map and the initial Google Maps API javascript code:





	
	Google Maps API: Center Point Location

	
	
	

	

	

	
	
	

	
	

	




	Google Maps API: Center Point Location

	
		
			State: current state
			City: current city

Retrieving the Current Location

Now that Google Maps API has been loaded, we need to create a function to get the current center-point’s Longitude and Latitude. Then we need to get the address, via GClientGeocoder. Then we need to strip out the data we need and update our display.

function updateMapLocation() {
	geocoder.getLocations(map.getCenter().toString(), function(point) {

		var currentAddress = point.Placemark[0].address;
		currentAddress = $.trim(currentAddress);
		var currentAddressMatches = currentAddress.split(/^([^,]*),\s([^,]*),\s([A-Z]{2})\s([0-9]*),\s([^,]*)$/);

		if(/^([^,]*),\s([a-zA-Z^,]*)[0-9\s]*,\s[^,]*$/.test(currentAddress)) {
			var currentAddressMatches = currentAddress.split(/^([^,]*),\s([a-zA-Z^,]*)[0-9\s]*,\s[^,]*$/);
		} else if(/^[^,]*,\s([^,]*),\s([a-zA-Z^,]*)[0-9\s]*,\s[^,]*$/.test(currentAddress)) {
			var currentAddressMatches = currentAddress.split(/^[^,]*,\s([^,]*),\s([a-zA-Z^,]*)[0-9\s]*,\s[^,]*$/);
		}

		var currentCity = currentAddressMatches[1];
		var currentState = currentAddressMatches[2];

		$('span#map-state').html(currentState);
		$('span#map-city').html(currentCity);
	});
}

In the code above, I realized GClientGeocoder was returning addresses for the current center point, in a few different formats. The two regular expression tests determine which format was returned and then splits out the data we need. After the data has been retrieved, we update the HTML display for span#map-state and span#map-city.

Now that we have a function to pull the address portions, we need to call it somewhere! I have two places where I have decided was the best time to update the location. When the maps is loaded (on page load) and anytime the map has been moved or zoomed.

So, we write an if statement to check if maps.isLoaded() and then we need to addListenter() to even ‘moveend’.

// once map has fully loaded, update current location in view
if(map.isLoaded()) { updateMapLocation(); }

// update location in view upon changing the map in any way
GEvent.addListener(map, 'moveend', function() { updateMapLocation(); });

Conclusion

I hope this little code snippet helps someone out! You can view the demo and download the source to try it out for yourself. If you have any questions feel free to leave a comment or email me. Enjoy!

Google Maps API: Custom Zoom Slider

JR Tashjian — Mon, 16 Nov 2009 19:03:43 +0000

Google Maps API is just one of the API’s I’ve been working with recently. The most recent problem I’ve run into that needed to be solved was the ability to create a custom designed zoom slider, replacing the default. The default one was not gonna work for this project and the designer created a better looking one.

While searching online to see if this had already been achieved. I failed to find any example of what I needed to accomplish easily and still be able to reuse the code. So, I decided to take on the feat. But, where to start?

jQuery

I am a huge fan of jQuery and jQuery has a user interface library, jQuery UI. jQuery UI gives us the ability to create a slider widget, which is highly customizable and would work for what I needed to do.

So, go download jQuery and download jQuery UI and we’ll get started! You will also need to get a Google Maps API key.

Setup

To begin, we will have to create an HTML file which loads all of our stylesheets, javascript and google map. Below is the initial HTML code. I have added the HTML for our custom slider already.





	
	Google Maps API: Custom Zoom Slider

Loading Google Maps API

Next we will need to load the Google Maps API. Here is the code. It is commented pretty well and should be easy to understand.

You can configure the return values of G_NORMAL_MAP.getMinimumResolution and G_NORMAL_MAP.getMaximumResolution to limit the zoom distance. 0 is the lowest value and 19 being the highest value (20 zoom levels).

Lets Style It!

Now that we have Google Maps loading into our div, we need to style it! Below is the code to style the Google Map and the custom slider. Again, I use a reset stylesheet which is bundled in the download.

/* Globals
------------------------------------------------------*/
body { font:75% helvetica, arial, sans-serif; background:#fff; color:#333; text-align:center; }

/* Google Map
------------------------------------------------------*/
#map { margin-top:25px; height:300px; width:518px; border:1px solid #fff; }

/* Custom Slider
------------------------------------------------------*/
#zoom-slider { margin:0 auto; position:relative; height:28px; width:203px; background:url(../images/zoom-slider-background.jpg) no-repeat; }
	/* minus button */
	#zoom-slider #zoom-control-minus { position:absolute; top:9px; left:11px; display:block; height:10px; width:10px; background:url(../images/zoom-control-minus.jpg) no-repeat; overflow:hidden; text-indent:-9999em; }
	/* plus button */
	#zoom-slider #zoom-control-plus { position:absolute; top:9px; right:11px; display:block; height:10px; width:10px; background:url(../images/zoom-control-plus.jpg) no-repeat; overflow:hidden; text-indent:-9999em; }
	/* container for the zoom 'handle' */
	#zoom-slider #zoom-range { position:absolute; top:9px; left:31px; height:10px; width:140px; background:url(../images/zoom-slider-range.jpg) no-repeat; z-index:1; }
		/* the zoom handle */
		#zoom-slider #zoom-range .ui-slider-handle { position:absolute; top:0px; margin-left:-5px; height:10px; width:10px; background:url(../images/zoom-control-handle.png) no-repeat; border:0; cursor:pointer; z-index:2; outline:none; }
		/* size path handle can travel*/
		#zoom-slider #zoom-range #zoom-path { position:absolute; height:10px; width:130px; top:0px; left:5px; cursor:pointer; }

The zoom slider will now look like this (images bundled in the download):

Make It Work

Now that we have everything looking nice and loading correctly, we need to make it work! Using jQuery UI and the Slider Widget, we will hook the div#zoom-slider div#zoom-path and allow jQuery UI to do it’s magic. however, we still need to hook the plus and minus buttons and make the slider communicate with Google Maps to update our map. In the Javascript, after we are done setting up Google Maps, we will need to place this code.

$(function() {
	// slider target
	var target = $('#zoom-slider #zoom-path');

	// create the slider
	target.slider({
		orientation: 	'horizontal',
		value: 			currentZoomLevel,
		min: 			parseInt(G_NORMAL_MAP.getMinimumResolution()),
		max: 			parseInt(G_NORMAL_MAP.getMaximumResolution()),
		step: 			1,
		animate: 		true,
		stop: function() {
			map.setZoom(parseInt(target.slider('option','value')));
		}
	});

	// update slider on zoom with double click
	GEvent.addListener(map, 'moveend', function() { target.slider('option','value', map.getZoom()); });

	// maximum slider value
	var maxValue = parseInt(target.slider('option', 'max'));

	// minimum slider value
	var minValue = parseInt(target.slider('option', 'min'));

	// hook increase zoom control
	$('#zoom-control-plus').click(function() {
		// current slider value
		var currentValue = parseInt(target.slider('option','value'));

		// current slider value increased by 1
		var newValue = currentValue+1;

		// is new value greater than max value?
		if(newValue <= maxValue) {
			// increase slider value
			target.slider('option', 'value', newValue);
			map.setZoom(newValue);
		} else {
			// slider is at max value
			target.slider('option', 'value', maxValue);
			map.setZoom(maxValue);
		}
		return false;
	});

	// hook decrease zoom control
	$('#zoom-control-minus').click(function() {
		// current slider value
		var currentValue = parseInt(target.slider('option','value'));

		// current slider value increased by 1
		var newValue = currentValue-1;

		// is new value greater than max value?
		if(newValue >= minValue) {
			// increase slider value
			target.slider('option', 'value', newValue);
			map.setZoom(newValue);
		} else {
			// slider is at max value
			target.slider('option', 'value', minValue);
			map.setZoom(minValue);
		}
		return false;
	});
});

Slider does a nice job of incrementing and decrementing the value and moving the handle the appropriate distance. Anytime the slider moves we need to update the map. Anytime the map moves we need to update the slider.

So, when initializing the slider, we hook the stop event of the slider. Each time the slider “stops” movement, we update the map zoom using the Google Map API function setZoom(). So, now we know when we move the slider, the map will update as well!

Next, we hook the “moveend” event of Google Maps. If the user double clicks the map to zoom in and out or uses the scroll wheel to zoom in and out, we update the zoom value of the slider using $.slider(‘option’, ‘value’, map.getZoom()). So, now we know when the map moves the slider will move as well.

Next, we need to hook the plus and minus buttons to allow a user to click them to zoom in and out. Using jQuery, we will bind each click event to update the map and slider values. The plus button will continue to zoom in until we reach the maximum zoom value. The minus button will continue to zoom out until we reach the minimum zoom value.

Conclusion

Well, there you have it! I hope someone finds this useful! You can view the demo and download the source to try it out for yourself. If you have any questions feel free to leave a comment or email me. Enjoy!

User Management System: Part 2

JR Tashjian — Tue, 03 Nov 2009 20:22:11 +0000

The next part of our user management system we will be creating are the views and css styles. The styles are going to be really simple and basic. Feel free to create your own styles if you want. I will not go too deeply into explaining it.

First we need to setup a directory where all of our styles will reside. I will create a new directory at the root of our site, and call it ‘assets’. Here is the hierarchy:

/assets/
/assets/themes/
/assets/themes/default/
/assets/themes/default/images/
/assets/themes/default/css/
/assets/themes/default/css/reset.css
/assets/themes/default/css/screen.css

I use Eric Meyer’s reset stylesheet for all my projects. In screen.css paste this:

/* =========== */
/* = GLOBALS = */
/* =========== */
body { background:#fff; font:75% helvetica, arial, sans-serif; color:#333; text-align:center; }

/* ============== */
/* = CONTAINERS = */
/* ============== */
#container { margin:0 auto; width:960px; text-align:left; }

/* ========== */
/* = HEADER = */
/* ========== */
#header { padding:30px 0px; border-bottom:2px solid #333; }
	#header p#pagetitle { font:2.5em Georgia, Times, serif; }

/* ========== */
/* = FOOTER = */
/* ========== */
#footer { padding:10px 0px 30px; border-top:2px solid #333; }
	#footer p#createdby { line-height:1em; }

/* =========== */
/* = CONTENT = */
/* =========== */
#content { padding:50px 0px; }
	#content table { width:100%; }
	#content h1 { font:1.75em helvetica, arial, sans-serif; margin-bottom:10px; }

/* ================ */
/* = User Listing = */
/* ================ */
#user_listing { border:1px solid #000; }
#user_listing thead tr { background:#e5e5e5; }
#user_listing td, #user_listing th { padding:5px; border:1px solid #000; }
	#user_listing col#user_listing_name { width:30%; }
	#user_listing col#user_listing_lastlogin { width:25%; }
	#user_listing col#user_listing_lastip { width:25%; }
	#user_listing col#user_listing_edit { width:10%; }
	#user_listing col#user_listing_delete { width:10%; }

/* ========= */
/* = FORMS = */
/* ========= */
form {  }
form div { padding-bottom:20px; }
form em.error { color:#a00; }
form label { display:inline; }
form input { display:block; }
form select { display:block; }

form .textfield {  }
form .textfield label {  }
form .textfield input { width:240px; padding:6px 5px 5px; color:#444; background:#f5f5f5; border:1px solid #aaa; }

form .dropdown {  }
form .dropdown label {  }
form .dropdown select { width:140px; padding:6px 5px 5px; color:#444; background:#f5f5f5; border:1px solid #aaa; }

form .buttons {  }
form .buttons input { display:block; margin-top:10px; padding:8px 10px; background:#f5f5f5; color:#444; border:1px solid #aaa; cursor:pointer; }

To load the styles into the views, I create a site config file with variables containing the paths to the assets directory and themes directory. Create this file in ./application/config/


Then you need to load the config file. I will autoload it by adding it to the config autoload variable in ./application/config/autoload.php
$autoload['configd'] = array('site_config');
Controller
Next we will create a controller for our administration. We will add 4 basic functions for each functionality we need. We will need a user listing page, create a user page, update a user page and delete a user. I will name the controller users.php:
load->helper(array('url'));

		// LOAD VIEWS
		$this->load->view('header');
		$this->load->view('users_listing');
		$this->load->view('footer');
	}

	function add()
	{
		// LOAD LIBRARIES
		$this->load->library(array('form_validation'));

		// LOAD HELPERS
		$this->load->helper(array('form', 'url'));

		// setup form validation rules
		$this->form_validation->set_rules('account_name', 'name', 'required');
		$this->form_validation->set_rules('account_email', 'email', 'required|valid_email');
		$this->form_validation->set_rules('account_password', 'password', 'required');
		$this->form_validation->set_rules('account_role', 'role', 'required');
		$this->form_validation->set_error_delimiters('', '');

		if($this->form_validation->run())
		{
			// create user
		}

		// LOAD VIEWS
		$this->load->view('header');
		$this->load->view('users_add');
		$this->load->view('footer');
	}

	function edit()
	{
		// LOAD LIBRARIES
		$this->load->library(array('form_validation'));

		// LOAD HELPERS
		$this->load->helper(array('form', 'url'));

		// setup form validation rules
		$this->form_validation->set_rules('account_name', 'name', 'required');
		$this->form_validation->set_rules('account_email', 'email', 'required|valid_email');
		$this->form_validation->set_rules('account_password', 'password', 'required');
		$this->form_validation->set_rules('account_role', 'role', 'required');
		$this->form_validation->set_error_delimiters('', '');

		if($this->form_validation->run())
		{
			// Update user
		}

		// LOAD VIEWS
		$this->load->view('header');
		$this->load->view('users_edit');
		$this->load->view('footer');
	}

	function delete()
	{
		// LOAD HELPERS
		$this->load->helper(array('url'));

		redirect('/users/index/');
	}
}

/* End of file users.php */
/* Location: ./application/controllers/users.php */
I’ve gone ahead and added validation functionality to these pages, which you will also see in the view pages. Create each of these in the ./application/views/ folder.
header.php:





	
	<?=$this->config->item('site_name')?>

	
	







	
		config->item('site_name')?>
	

	

		session->flashdata('message_text')) : ?>
			session->flashdata('message_text')?>
		
footer.php:
	

	
		Created by A Web Developer
	





user_listing.php:
User Listing

Create a User


	
		
		
		
		
		
	
	
		
			Name
			Last Login
			Last IP
			Edit
			Delete
		
	
	
		
			User Name
			
			192.168.2.1
			[Edit]
			[Delete]
		
	

user_add.php:
User Add


	
		
		
		
	

	
		
		
		
	

	
		
		
		
	

	
		
		 'User', 'admin' => 'Admin'), set_value('account_role'))?>
	

	
		
	

user_edit.php:
User Edit


	
		
		
		
	

	
		
		
		
	

	
		
		
		
	

	
		
		 'User', 'admin' => 'Admin'), set_value('account_role'))?>
	

	
		
	

Now that we have some basic functionality setup, we can start writing the code that actually communicates with our database and get some users created! The next part of this series will be up tonight, tomorrow morning at the latest. So, check back!

Name	Last Login	Last IP	Edit	Delete
User Name		192.168.2.1	[Edit]	[Delete]



Changes are coming!
JR Tashjian — Wed, 14 Oct 2009 05:36:26 +0000
I haven’t been keeping up with writing an article a week. Mostly due to other personal projects I’ve wanted to complete as well. One of these projects is The Poll Place. Check it out if you haven’t already!
Anyway, now that I’ve got a few projects off my chest I want to get back into writing. Even if the post is very short, like the last couple have been. Some of you may be wondering what happened to the User Management System Series went. Well, they didn’t fall off the face of the Earth! I’ll be posting the rest of the parts by the end of the week (making up for the past month!).
Some of the changes I am talking about are structural changes with the site (I’ve got some things cooking right now). I plan on writing book reviews on web development books and any book I’ve read that may be of interest to fellow readers. I will also be changing how I write tutorials a bit. I also want to get into writing classes for popular API’s such as Twitter, Facebook, Last.FM, etc. You’ll be seeing a lot more of me around this site.
In the meantime, I’ve updated the RSS feed link to use Feedburner. Please update your url, as site URL’s may be changing as well. Updating the url will allow you to stay informed about new articles being posted. Also, you can always follow me on Twitter! Send me a question, have a quick chat, or just to see what I’m up to. You can also nag me to get an article up, in case I start slacking again. :P
Thanks for reading A Web Developers Blog!



Don't Hard Code Your Age!
JR Tashjian — Wed, 14 Oct 2009 05:06:33 +0000
Even though this is not at all as important as not hardcoding copyright years. It can still a time saver if you happen to hard code your age into a biography on a website.
Lets make those ages DYNAMIC!
I wrote a little code snippet which updates your age automatically. All you do is enter your birth date and php does the rest! I will use my birthday in the example:
$birth_date = getdate(strtotime("August 1st 1988"));
$current_date = getdate(time());
echo ($current_date['mday'] >= $birth_date['mday'] AND $current_date['mmonth'] >= $birth_date['mmonth']) ? ($current_date['year'] - $birth_date['year']) : (($current_date['year'] - $birth_date['year']) - 1);
This would return 21, which is how old I am currently. If the current time was July 31st 2009, it would return 20. I made sure it checked both the day and month, not just subtract the years, to figure out the date. Just replace “August 1st 1988″ with your birth date.
It’s that Simple.



CodeIgniter's alternator() function
JR Tashjian — Thu, 08 Oct 2009 03:54:07 +0000
It’s surprising to me how often I find little functions for tedious tasks, that CodeIgniter already has built in. One of these functions is the alternator() function in the String Helper.
To begin using this function, make sure you have loaded the String Helper with the following code:
$this->load->helper('string');
What the alternator() function does is allow two or more items to be alternated between when iterating through a loop. Example from the CodeIgniter User Guide:
for($i = 0; $i < 10; $i++)
{
	echo alternator('string one', 'string two');
}
There is also no limit to how many parameters you can have:
...
echo alternator('one', 'two', 'three', 'four', 'five');
...
Put it to Use
What would you ever need that for? Well, what about if you are creating a list of items and every other needs class=”alt” attached to it for styling differences? I run into this issue all the time.
This is how I used to do it:

	
	
		
		>
			
		
	

And this is with the alternator() function:

	
		>
			
		
	

The alternator() function makes the ability to do this, much easier and cleaner than my original way. Hopefully I’ve helped someone out who had no idea this function was available.



The Poll Place – Project Launched!
JR Tashjian — Fri, 02 Oct 2009 21:32:47 +0000
Hey everyone!
I’ve had this project cooking for a while now, and felt I needed to launch it sooner than later. So, here it is: The Poll Place (http://thepollplace.com/)
Check it out! Make some Polls! Vote on others! But most of all, share it with others! My goal is to have this become a competitor to some of the big polling sites out there, namely Poll Daddy. So please, spread the word! There is a new kid in town!
I have got plenty of todo’s for The Poll Place, a couple major issues and a handful of minor issues. As the site grows you will notice new features being added that you can take advantage of.
I hope you all enjoy this site and use it often. Thanks in advanced for sharing it around!