Poncho is a dead simple mobile web app for viewing current and next-day weather conditions. It works on Android and iOS, although it's tailored for non-tablet smartphone devices like Android phones, iPhone and iPod Touch. It's a mobile web app instead of a native app, so it may work on even more platforms, but I haven't tested it on anything else. If you go to app.getponcho.com on your device's browser, you can bookmark and/or add the app to your homescreen and run it virtually just like a native app.

Poncho basically consists of 2 simple views: a weather tab and a locations tab. The app will automatically detect your location (if you allow it to) and you can add other locations just by entering a zip code, city or place name into the input on the locations tab. View the weather for any of your locations just by tapping on the location. On the weather tab there's also a radar button that will take you to a weather radar integrated with Google Maps.

Background and Tech

For obvious reasons I've been hugely interested in mobile development for the last year or so. Between that and all kinds of new UI frameworks and tools springing up on an almost weekly - if not daily - basis, I wanted to jump head first into developing something for mobile platforms.

Poncho runs mainly on Spine, a lightweight MVC javascript framework for building web applications. Instead of the bloated jQuery, it uses the more lightweight and mobile-geared Zepto framework. Since I'm using YQL (Yahoo Query Language) as my weather API and HTML5 LocalStorage to store the user's locations, I needed to choose a javascript templating language as an efficient way to display the data. I chose Mustache for my Javascript templates for it's small size and efficient rendering.

I'm hosting Poncho on Google App Engine and have used Remy Sharp's awesome Inliner tool to inline all the HTML, CSS, Javascript and Images into 1 file. Since the main goal of the project was a learning experience and building an app that I myself would enjoy using, I've open sourced the project on GitHub. If you're trying the app out and having any problems or notice any bugs, please create an issue

Plans

I'm starting to put together some features and additions I want to make to Poncho, including adding a landscape orientation view. I'm also considering packaging and bundling the project using PhoneGap so that it could possibly be distributed through the Android market.

Note: Poncho's weather icons are the awesome Mobydock icons by Wojciech Grzanka

I've been reading a bit about implementing touch interfaces recently at work. I didn't realize that, for the most part, it's as easy as attaching Javascript touch events to DOM elements - just like you would with any other events in Javascript. The other thing that is a major help with Mobile Safari development is using the new CSS3 properties for animations and such. Thankfully, since you're primarily tagerting Mobile Safari/Webkit, you don't need to worry too much about cross-browser issues.

Last week, Chris Coyier wrote an article over on CSS Tricks about recreating the iphone "slide to unlock" text in Webkit/CSS3. I thought this would be a perfect opportunity to play around and take it one step further to add touch support for iphone and ipad (again, just as an experiment).

The Result

Check out the finished demo on ipad, iphone or ipod touch.

The Markup

The markup is pretty much the same as Chris'. I DID add an id to the arrow slider so that my Javascript would have a DOM hookup.

	

		
 slide to unlock
	

The CSS

I copied pretty much all of Chris' CSS as well. I did however remove some of the work he did to get the cool animated text highlight since it was messing with some of the Webkit animations I added (and it wasn't really the goal of my experiment). Here is the CSS I've added:

#well {
	-webkit-transition: opacity 0.4s ease-out;
}

This takes care of the fade out animation once you've slid it far enough to unlock. Technically, we'll handle the slide back animation for when you haven't slid the slider far enough in CSS as well, but we'll get to that in the Javascript part.

Here's my final combined CSS:

/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
html { background: black; }
body { 
	font: 14px Georgia, serif; 
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3b3b3b),color-stop(1, #000000));
	background-repeat: no-repeat;
	min-height: 350px;
	color:#fff;
}
#page-wrap { width: 720px; margin: 0 auto; padding-top: 100px; }

#well {
	padding: 14px 20px 20px 20px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	
	background: -moz-linear-gradient(top, #010101, #181818);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
	
	border: 2px solid #454545; 
	overflow: hidden;
	
	-webkit-transition: opacity 0.4s ease-out;
}

h2 {
  background: -moz-linear-gradient(left, #4d4d4d, 0.4, #4d4d4d, 0.5, white, 0.6, #4d4d4d, #4d4d4d); 
  background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d)); 
  
  -moz-background-clip: text;
  -webkit-background-clip: text;
/*  
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
*/  
  -webkit-animation: slidetounlock 5s infinite;
  
  font-size: 80px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  
  padding: 0;
  width: 200%;
}

h2 img {
	vertical-align: middle; 
}

Javascript Fun

Now for the Javascript fun:

function $(id){ return document.getElementById(id); }

$('slider').addEventListener('touchmove', function(event) {
    event.preventDefault();
    var el = event.target;
    var touch = event.touches[0];
    curX = touch.pageX - this.offsetLeft - 73;
    if(curX <= 0) return;
    if(curX > 550){
    	$('well').style.opacity = 0;
    }
   	el.style.webkitTransform = 'translateX(' + curX + 'px)'; 
}, false);

$('slider').addEventListener('touchend', function(event) {	
    this.style.webkitTransition = '-webkit-transform 0.3s ease-in';
    this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false );
    this.style.webkitTransform = 'translateX(0px)';
}, false);

To capture touch events in Webkit, you'll mostly be working with the touchstart, touchmove and touchend events. After attaching the Javascript touch events, we just have to position the slider button based on the page coordinates of your finger, and trigger our CSS3 animations. I've offset the x-axis position an additional 73px (half of our slider image) to position the touch point for the slider in the middle of the image.

We only neeed to worry about the movement along the x-axis, so we use the translateX function with the -webkit-transform property. The nice thing about Safari is that it will trigger animations automatically when your declared properties are changed - in this case "opacity". These implicit animations also only apply to certain properties.

To get the button to slide back to the starting position when the user releases their finger, we use the touchend event to add the -webkit-transition property to our button. Unfortunately, to avoid funkiness from conflicting events, we need to programmatically apply and remove the transition in the touchend event. We do this by attaching a webkitTransitionEnd event to the object and then setting the CSS property to "none".

Conclusion

This was a fun little experiment to get started using Mobile Safari's touch capabilities. Currently, I've only gotten this working on iphone, ipod touch and ipad. I may play around with trying to get it to work on Android, so if anyone has any suggestions please let me know.

A couple months ago I decided it was about time that I jumped on the HTML5 bandwagon. I really hadn't had any real world experience building anything in HTML5, and had only used a few CSS3 properties as progressive enhancements. I really wanted to take some time to design and build something awesome - without having to worry about the elephant in the room, *cough* Internet Explorer *cough*.

Unfortunately, I didn't have a whole lot of unique content laying around that could be the foundation for my site, so I decided to go the Lifestream route. I also decided to build the site with Yong Fook's SweetCron platform, which is built on my favorite php framework, CodeIgniter. It aggregates feeds from this blog, my Twitter, Delicious, Last.fm, Flickr and YouTube accounts. But enough about the boring backend details, let's move onto the new and exciting things.

The Result

You can see the final result of my HTML5 and CSS3 experiment at me.evanblack.com. Make sure to check it out in any GOOD browser, like Firefox, Safari or Chrome.

HTML5

If you take a look at the source code, you should notice how clean it is. HTML5 is a semantic wet dream. Pretty much every element, from <nav> to <header> to <article>, has a semantic meaning. This, coupled with some advanced CSS3 selectors, means you hardly ever need to use IDs or even classes! I think the hardest thing to get used to is the fact that not only is your page going to have a header and footer structure, but so is each article within your section.

If you're looking to read more about the new structural elements in HTML5, I'd recommend reading Steve Smith's article on Structural Tags in HTML5. Unfortunately, I didn't get the chance to do too much experimenting with the new <video>, <audio> and <canvas> elements, or with the new form features, but these are sure to make HTML5 even more robust once the spec is approved.

Note: Once the W3C agrees on a standard video format for the <video> element (my guess is h.264), and browser vendors get it implemented, it will make this element much more widely used because of iPhones and iPod Touches.

Design and CSS3

The main CSS3 features I implemented - aside from the usual border radius and text shadow properties - were @font-family, rgba, box-shadow and CSS gradients. I've used Yanone's awesome free font, Yanone Kaffeesatz, via @font-family for all the headlines. I also played around with a combination of border radius, rgba and CSS gradients for the navigation tabs, which I think turned out pretty well. I even tried to do some CSS transform magic for the tab animation, but alas, I had to resort to Javascript. Be sure to check out the CSS to take a closer look at how I put some of the new CSS3 features to work.

Javascript Finishing Touches (jQuery of Course!)

For some finishing touches I added a bit of jQuery magic to handle the navigation tab animation, the endless scrolling, and thus needed 'back to top' link. There's also some other javascript to help bitch-slap IE into submission, although I haven't really done much testing to see how the site's looking in it. IE8, at the very least, should not completely crash.

Conclusion

Please take a look at the final result and let me know what you think! Unfortunately, there's a lot of twitter content right now, so be sure to check out the different categories to see the alternate post designs. Building this thing was quite a learning experience and it's nice to see front-end development going in a good direction.

I'll also be adapting this baby into a Tumblr theme so stay tuned for that!

After my last post admitting that I had neglected to keep my previous personal site up to date, I'm a little embarrassed to say that I haven't made an update to this site since it's launch. Mostly the reason was because of a major career move, but I am now determined to dedicate my time and effort to this site and other personal projects.

Back in February I accepted an offer to join the UI team at Designkitchen as a Front-end Developer. This meant I'd be moving from Indianapolis 3 hours north to Chicago, and rather suddenly (within a week). Since then I've been busy with a couple of big projects at work, but have also been working on a couple of other projects on my own. I'll be posting some updates about these projects later on this week or next week, so stay tuned!

Five months ago when I decided to go about a much-needed redesign of my portfolio site, I didn't expect it to be nearly as difficult or take as much time as it has. Fortunately, it became much more of a priority when I parted ways with MediaSauce at the end of October. I also needed to write some good articles for the new blog in addition to basically generating all new content for the site.

When I looked at my old site I saw something that hadn't really been updated in 2 years. It also didn't portray what I wanted to show as my online presence or how I'd grown personally and professionally since graduating. This is the 2nd version of my portfolio and I decided to switch directions from the dark design of version 1 to something light and simple. Most of the portfolio work is from projects I've worked on in the last 2 years while working at Hirons & Company and MediaSauce.

Over the next several months, I will be continuing to make slight design changes and tweaks to enhance the site, for example, using TypeKit for the some of the headings. For now, take a look around and let me know what you think!

If you'd like to know more about the technologies behind the site, check out the About page.

For those of you that don't know, ExpressionEngine's ImageSizer Plugin is awesome. Anytime you have a client that will be uploading content images to a site that need to be certain dimensions this plugin is crucial. It will dynamically resize the image to whatever dimensions you need, and even cache the resized image for you. Also, if you specify a width and a height for the image in the plugin parameters, and the source's dimensions are different, it will even crop the image for you. This is great, but it also has a downside.

By default, the plugin will crop the image to the specified width and height from the center of the image. This works great in some cases, but recently (on this site actually) I wanted the plugin to crop my images from the top of the image. This, for example, would be desirable if web screenshots were going to be uploaded and used.

I would've expected this to be a simple parameter passed to the plugin, but unfortunately, it wasn't. I decided to take matters into my own hands and popped open the plugin code. Around line 595 I found this:

if ($crop) 
{   
	imagecopyresampled($image_resized, $image, -$int_width, -$int_height, 0, 0, $adjusted_width, $adjusted_height, $width_old, $height_old);
}

Now to Crop from the Top

I quickly diagnosed that the -$int_height variable was forcing the crop from the center. Changing that variable to a 0 would have the plugin cropping from the top. Here's the code with the change:

if ($crop) 
{   
	imagecopyresampled($image_resized, $image, -$int_width, 0, 0, 0, $adjusted_width, $adjusted_height, $width_old, $height_old);
}

You could also have the plugin crop from the top left corner if you also changed the -$int_width variable to 0. Ideally, you could make some updates to the plugin to pass in a crop_from parameter and have it accept a "topleft", "topcenter", "topright", "bottomleft", "bottomcenter", "bottomright", or "center" string.

One common thing that most developers will want to do when creating a web application with CodeIgniter is to give their users the ability to upload a profile image. Your code should be able to resize that profile image to the standard size that your design calls for. CodeIgniter provides two great classes to help make this a piece of cake.

The two library classes we will be working with are the File Uploading and Image Manipulation classes. With these two classes and the CodeIgniter User Guide you can probably figure out most of what you need, but I'll make it even easier for you. First, we will start with what you need in the View. This will create your file upload field:

The View

$Fdata = array('name' => 'user_avatar', 'class' => 'file');
echo form_upload($Fdata);

Also, make sure your form is using 'form_open_multipart'. Now we will move on to the Controller, where the bulk of the code is. The process here is to configure the upload, do the upload, configure the image resizing and then do the image resize. Here's what you should end up with:

The Controller

if($_FILES['user_avatar']['error'] == 0){
	//upload and update the file
	$config['upload_path'] = './images/profile/';
	$config['allowed_types'] = 'gif|jpg|png';
	$config['overwrite'] = false;
	$config['remove_spaces'] = true;
	//$config['max_size']	= '100';// in KB
	
	$this->load->library('upload', $config);

	if ( ! $this->upload->do_upload('user_avatar'))
	{
		$this->session->set_flashdata('message', $this->upload->display_errors('
', '
'));
		redirect('profile');
	}	
	else
	{
		//Image Resizing
		$config['source_image'] = $this->upload->upload_path.$this->upload->file_name;
		$config['maintain_ratio'] = FALSE;
		$config['width'] = 40;
		$config['height'] = 40;

		$this->load->library('image_lib', $config);

		if ( ! $this->image_lib->resize()){
			$this->session->set_flashdata('message', $this->image_lib->display_errors('
', '
'));				
		}
		
		$this->MUser->updateProfile($this->input->post('user_id'));
		//Need to update the session information if email was changed
		$this->session->set_userdata('email', $this->input->xss_clean($this->input->post('user_email')));
		$this->session->set_flashdata('message', '
Your Profile has been Updated!
');
		redirect('profile');
	}
}

You may need to make some changes to a couple of the configuration options to get what you want. You'll also notice at the bottom that I update some of my user session information afterwards. Next up, we'll handle the updateProfile function within the User Model. This part is pretty simple:

The Model

function updateProfile($user_id){
	$profile_data = array(
	'name' => $this->input->xss_clean($this->input->post('user_name')),
	'email' => $this->input->xss_clean($this->input->post('user_email')),
	'role' => $this->input->xss_clean($this->input->post('user_role')),
	'website' => $this->input->xss_clean($this->input->post('user_website'))
	);
	//check if password was updated
	if($this->input->post('user_password') != ''){
		$profile_data['password'] = md5($this->input->xss_clean($this->input->post('user_password')));
	}
	if($_FILES['user_avatar']['error'] == 0){
		$relative_url = 'images/profile/'.$this->upload->file_name;
		$profile_data['avatar'] = $relative_url;
	}
	$this->db->where('id', $user_id);
	$this->db->update('user', $profile_data);
}

Normally you would want your path to pull from the configuration options you set using $upload['full_path'], but for some reason I've had issues pulling that data from the upload.

Back when I was working with ExpressionEngine on the NIC Indy website, I needed to display custom member data fields in the member directory list. I actually found it quite surprising that ExpressionEngine didn't already have an option that allowed you to do this. After some fiddling around with the "memberlist" function, I found a pretty quick and simple way to make this happen.

First of all, you will need to open up the mod.member_memberlist.php file. It will be in the Member Management module, usually located here: "/system/modules/member". Go down to around line number 510. It should look something like this:

Before

$f_sql="SELECT m.member_id, m.username, m.screen_name, m.email, m.url, m.location, m.icq, m.aol_im, m.yahoo_im, m.msn_im, m.location, m.join_date, m.last_visit, m.last_activity, m.last_entry_date, m.last_comment_date, m.last_forum_post_date, m.total_entries, m.total_comments, m.total_forum_topics, m.total_forum_posts, m.language, m.timezone, m.daylight_savings, m.bday_d, m.bday_m, m.bday_y, m.accept_user_email, m.avatar_filename, m.avatar_width, m.avatar_height, (m.total_forum_topics + m.total_forum_posts) AS total_posts, g.group_title ";		
$p_sql="SELECT COUNT(member_id) AS count ";
$sql="FROM exp_members m, exp_member_groups g 
WHERE m.group_id = g.group_id 
AND g.group_id != '3' 
AND g.group_id != '4' 
AND g.site_id = '".$DB->escape_str($PREFS->ini('site_id'))."'
AND g.include_in_memberlist = 'y' ";

You will be adding to these SQL select statements so that it also pulls from the exp_member_data table. Here is what you'll need to change the SQL statements to:

After

$f_sql="SELECT m.member_id, m.username, m.screen_name, m.email, m.url, m.location, m.icq, m.aol_im, m.yahoo_im, m.msn_im, m.location, m.join_date, m.last_visit, m.last_activity, m.last_entry_date, m.last_comment_date, m.last_forum_post_date, m.total_entries, m.total_comments, m.total_forum_topics, m.total_forum_posts, m.language, m.timezone, m.daylight_savings, m.bday_d, m.bday_m, m.bday_y, m.accept_user_email, m.avatar_filename, m.avatar_width, m.avatar_height, (m.total_forum_topics + m.total_forum_posts) AS total_posts, g.group_title, md.m_field_id_1, md.m_field_id_2, md.m_field_id_3, md.m_field_id_4, md.m_field_id_5, md.m_field_id_6, md.m_field_id_7, md.m_field_id_8, md.m_field_id_9, md.m_field_id_10, md.m_field_id_11, md.m_field_id_12, md.m_field_id_13, md.m_field_id_14 ";       
$p_sql="SELECT COUNT(m.member_id) AS count ";
$sql="FROM exp_members m, exp_member_groups g, exp_member_data md 
WHERE m.group_id = g.group_id 
AND m.member_id = md.member_id 
AND g.group_id != '3' 
AND g.group_id != '4' 
AND g.site_id = '".$DB->escape_str($PREFS->ini('site_id'))."'
AND g.include_in_memberlist = 'y' ";

The important changes here are on lines 1, 3 and 5. Unfortunately, you will need to manually add as many "m_field_id_x"s for as many custom member fields that have been created.

Now to Display the Custom Fields

To display the newly selected custom fields on the front-end of the member list, you will need to edit the Member Templates. You can do this in the Control Panel by going to your Member Profile Theme and finding the Member List Rows template. You can display the custom member fields simply by using the normal ExpressionEngine template tags like this - {m_field_id_x} - replacing "x" with whichever member profile field you want. Here is a section of mine:

<ul>
    <li><h6>Contact Information</h6></li>
    <li>title: <span>{m_field_id_8}</span></li>
    <li>phone: <span>{m_field_id_5}</span></li>
</ul>

That's pretty much it. The only bad thing here is if Custom Member Fields are ever added you will also need to add them to the SQL statement.

The Result

As you can see from the image below, I was able to pull out the data I needed for the directory from these custom member fields.

A very common thing I see in designs I get these days are form labels that are written within the value of their associated input field. This is handy way for designers to save space and make their designs cleaner all-around. Unfortunately for us developers, simply setting the input value isn't very semantic or usable. Thanks to JQuery there's plenty of easy ways to take care of this.

The HTML

We'll start with the HTML. Nothing fancy here, just your standard form with labels and inputs.

<form id="signup" name="signup">
	<label for="email">Email Address</label>
	<input class="text" name="email" type="text" />
	<label for="zip">Zip Code</label>
	<input class="text zip" name="zip" type="text" />
	<input class="btn" type="submit" value="Sign Up" />
</form>

The CSS isn't important at all to what we're trying to accomplish, so I won't cover any of that. The JQuery on the other hand, is what does most of the work. First of all, we will want to loop through our label elements and assign their values to the inputs that immediately follow. Then you'll want to hide those labels. After that, we will handle the focus and blur events to get rid of those values when people click the form input. Here's the JQuery:

The JQuery

$(document).ready(function() {
    $("#signup label").each(function (i) {
        $(this).next("input").attr("value",$(this).html()+"...");
        $(this).hide();
    });
    $("#signup input").focus(function() {
        if($(this).prev("label").html()+"..." == this.value){
            this.value = "";
        }
    });
    $("#signup input").blur(function() {
        if(this.value == ""){
            this.value = $(this).prev("label").html()+"...";
        }
    });
});

Now this is by no means is a new or innovative technique. There are plenty of solutions out there that will accomplish the same goal. This tip is simply what I tend to use to sematically code the designs I get.

Update (12-18-2009): Smashing Magazine recently published an article by Zurb called Stronger, Better, Faster Design with CSS3 that expands on this technique and makes it even better with CSS3 by just masking the label so even when you click into the input you can still read the label.