Swipe handling to retrofit existing slider with jQuery Mobile UI

Going Mobile

While retro-fitting a client’s website as mobile-friendly and responsive, an existing slider was requested to be outfit with swipe action on mobile devices. This made sense as the experience on mobile was lacking. You just *wanted* to swipe to the next slide.

As the site was already using jQuery and a custom built slider using WordPress’s queries, implementing jQuery Mobile UI API, I was able to quickly detect left and right swipes, and extend the logic to include mobile slider navigation.

Include the jQuery code in your page, and check out the docs:

swipeleft
swiperight

Handle the Swipe:

$(function() {
	// Bind the swipeHandler callback function to the swipe event on the slider div
	$( "#slider_frames" ).on( "swipeleft", swipeHandler );
	$( "#slider_frames" ).on( "swiperight", swipeHandler);

	// Callback function references the event target and finds swipe'#' id
	function swipeHandler( event ) {
		if(event.target.id) {
		var id = event.target.id.split('swipe'),
			id = parseInt(id[1], 10);
			slideCount = $('#slider_frames li').length;
			switch(event.type) {
				case "swipeleft":
					id = (id === 1 ? slideCount : id - 1);
					buttonaction(id);
				break;
				case "swiperight":
					id = (id === slideCount ? 1 : id + 1);
					buttonaction(id);
				break;
			}
		}
	}
}); 
 

Mobile App Notification Center – Front-End

The Notification Center of MediaFactory is a page that compliments the iOS and Andriod mobile applications. The function of the page is for producers to create their push notification

Technologies used: Core JavaScript, jQuery, Google Maps 3 API, jQuery Map UI, Filemobile API

How it all works: Working with RESTful API services that serve device location, this map populates with thumbnails that represent a device. Using the Google Map radius method which can be manipulated via form data or drag & drop, a producer can draw a circle around a group of devices, configure what they would like the push notification to say and where to swipe to, and schedule the notification to send now or in the future.

Who’s using it: Bell Media – CTV News, Network 10 Australia, USA Today, Filemobile

Notification Center

 

Team meeting and SCRUM strategy

Mondays
Email from Lead Project Manager to All Staff with bullets outlining the coming week’s work to be accomplished by each resource. This benefits each employee to know what is expected of them, and lets the product and management team have a viewable checklist of what they can expect to have accomplished. It also emphases the important of not derailing the resources with off the radar tasks, and asks if they can be prioritized for the following sprint (2 weeks) instead.

No *SCRUM are required on Mondays, but the team is encouraged to speak to their peers for needs they in shared projects.

End of day project report required. Time is logged toward sprint bugs. Note for Tuesday stand-up meeting to speak about whether the programming tasks were successful, and if not, what was in your way and how that impacts the sprint.

Tuesday – Friday
15m SCRUM details whether or not you logged 5 hours of programming time toward your milestone and if the time estimate it took to complete was approximately correct.

End of day project report required. Time is logged toward sprint bugs. Note for Tuesday stand-up meeting to speak about whether the programming tasks were successful, and if not, what was in your way and how that impacts the sprint.

Friday
In addition to SCRUM meetings, each team attends a 1 hour general meeting @ 3pm to recap the week and talk about ideas. The teams, in our case Back-End team, Front-End, & Product Team (includes project & product management + QA, covers assessment of the resource calendar and alignment of info on the wall board). We will alternate meeting spaces weekly as to each have an opportunity to use The Lounge™, boardroom and lobby spaces. Following, at 3pm all teams meet together in The Lounge™ for a similar style meeting with each team having a representative to explain what their team achieved and bring to the table ideas, or the progress on ideas. Beer during and foosball after.

 

Google Map API V3 – Lat and Long values change

I was struggling with this for a while and have now learned 2 valuable things.

1. I solved my problem where Google Maps API was changing the internal variable names of it’s Latitude Longitude object, which was intermittently causing me errors.

2. How to turn an object’s keys into an array, and then use the arrays to call the object with variables.

The two step process looks like this:

  1. Loop through the object and push into a new array:
    var newArray = [];
    
    for (var key in latLng) {
    
       newArray.push(key);
    
    }
  2. Call your object with variable values with the square bracket syntax, dot notation breaks:
    var lat = latLng[newArray[0]];
    
    var lng = latLng[newArray[1]];

Find my answer on StackOverflow here: http://stackoverflow.com/a/14967355/994397

 

Map comment location with geocode on Google Map

In this post you will see how I cobbled together information from other genius people to create a plotting of a commenter’s supplied geographic location. To do this I extended the comment field to accept location, built a new feed template formatted for GeoRSS and used the Google Maps V3 plug-in to create a short code.

I’m not going to tell you this is the BEST way to do it, or that there aren’t other ways to do it. But I will tell you that it gets the job done. Any suggestions on how to improve this process are much appreciated.

Here are the elements I used to achieve this. Let’s talk about them:

1. Comprehensive Google Map Plugin

Install and activate this plug-in. It touts itself as a simple and intuitive, yet elegant and fully documented Google map plugin that installs as a widget and a short code. No limited plugin editions or limited functionality! This is the full version of this free and premium plugin.

Get it: http://wordpress.org/extend/plugins/comprehensive-google-map-plugin/

2. Creating a geoRSS feed from WordPress

Take a look at this back-to-basics tutorial for generating a geoRSS feed from WordPress, correctly formatted for use in Google Maps KML layers.

View it here: http://www.strangerpixel.com/2011/03/creating-a-georss-feed-from-wordpress/

3. Search MySQL

If you aren’t so handy with the database search query syntax of WordPress, here’s something to look at. I didn’t use code from this directly, but it gave me an idea of how to write the query properly.

View it here: http://stackoverflow.com/questions/4443280/php-mysql-search-query

4. The Google Geocoding API for php

Geocoding is the process of converting addresses (like “1600 Amphitheatre Parkway, Mountain View, CA”) into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers or position the map. The Google Geocoding API provides a direct way to access a geocoder via an HTTP request. Additionally, the service allows you to perform the converse operation (turning coordinates into addresses); this process is known as “reverse geocoding.”

Find the quick API url for doing the job, plus MUCH more here: https://developers.google.com/maps/documentation/geocoding/

5. Putting it all together:


$id = '91'; //hacky way to pass the post id, as a GET will not work via the GeoRSS ingestion:

echo ‘‘; ?>

 

 



get_results($wpdb->prepare(”
SELECT $wpdb->posts.*
FROM $wpdb->posts
WHERE ID = ‘”.$id.”‘
“));
?>

post_title; ?> – Jamaica Plain, MA


42.3068523 -71.1121722
42.3068523
-71.1121722

get_results($wpdb->prepare(”
SELECT $wpdb->comments.comment_ID, $wpdb->comments.comment_content
FROM $wpdb->comments
WHERE comment_post_ID = ‘”.$id.”‘
“));
$count = count($comments) – 1;

for($i = 0; $i get_results($wpdb->prepare(”
SELECT meta_key, meta_value
FROM $wpdb->commentmeta
WHERE meta_key = ‘_iti_ccf_post_location’
AND comment_id = ‘”.$comments[$i]->comment_ID.”‘
“));

$countj = count($commentmeta) – 1;
for($j = 0; $j meta_value;
$address = explode(‘ ‘,$address);
$address = implode(‘%20′,$address);

$geocode=file_get_contents(‘http://maps.googleapis.com/maps/api/geocode/json?address=’.$address.’&sensor=true’); $output= json_decode($geocode);
$geoLat = $output->results[0]->geometry->location->lat;
$geoLon = $output->results[0]->geometry->location->lng;
$coords = $geoLat.’ ‘.$geoLon;
?>

post_title; ?> – meta_value) ?>


comment_content?>


 

swfupload not working in ie9

This is a sneaky issue. Most of the time IE9 resolves issues, but in this case… the trusty ol’ SWFupload.js script stopped working in IE9. What happens is the the browse button simply doesn’t execute, therefore not allowing the user to select a file to upload.

Thank goodness for Google.

How to fix this:

Open the file and search for: SWFUpload.prototype.cleanUp
Change: if (typeof (movieElement[key]) === "function")
To: if (typeof (movieElement[key]) === "function" && key[0] <= 'Z')

Easy peasy, right? Only if you’re really good at this stuff and even understand what that is doing. Did you even know that this was using prototype? I definitely thought it was only jQuery.

This answer was found on the swfupload support site: http://code.google.com/p/swfupload/issues/detail?id=348

 

Back-end for Front-Enders: XML to MySQL – insert and update

Freelancing can take a developer in many directions that they wouldn’t get to go in a specific company role. The three years that I spent in front-end development taught me a lot about jQuery, CSS and conditional PHP but it really even touch on handling data. The terms ‘sanitize’ and ‘data object’ are still new-ish to me, gleaned from the lexicon of colleagues and peers. Nevertheless, it is the job of a freelancer to understand that anything is possible and then find out how to do it.

The problem:
I have an ftp folder with about 10 .xml files that get updated by a 3rd party every day at midnight. i need to a) initially insert them into MySQL and b) cron check daily for new new records and for records that need updated.

In my mind, it is a matter of breaking apart arrays and analysing them… but, I wanted a pro opinion on how it should be done. So I asked my friend Lloyd Leung what he recommended and he laid it out for me:

First, you will have to create a .php page

1.) validate the xml, make sure it’s correct. look into “tidy” in the php manual.
2.) load object if exists, or start a new object.
3.) validate the data object’s data.
4.) save the data object.
5.) done.

– Run the cron on your .xml at 2am, so it gaves them time to upload, and finalize the data.
– If at anypoint, something F’s up… send an email out to report the error as to what happened.

So, of course, this is perfectly clear but I still wanted to double check that I had my wording right. I asked exactly what he meant by ‘data object’ and was told that it’s a class, that would represent a single row in a database. Or ‘collection’ of data that is represented in the database.

For example:
– “human” would be an object.
– Human has “color of eyes”, “hair color”, “height”… and those are all properties of “human”.
– human->setHairColor(‘brown);
– human[‘hairColor’] or human->getHairColor(), would return “brown”

When you “setHairColor();” you can check if it’s a string, in a list of acceptable “colors”, if it’s “capitalized”, whatever business rules that need to happen.
So, now you’re dealing with a single class, that houses logicallly, all functions that are tied to “human”.

Thanks Lloyd! This was helpful for me.