Mar
26,
2012
Problem
I’m building a skatepark finder mobile web app. I’m using Google Distance Matrix API to get the distance between the user’s location and the location of the nearest skatepark. Because of this little disclaimer “Use of the service in an application that doesn’t display a Google map is prohibited.“, I need to show a map in the app.
Since this is for mobile web, I didn’t want to display an interactive map because reducing HTTP requests and especially requests to 3rd party services is a mobile development best practice. Also, I can just create a button that links to Google maps and let the user use an interactive map however they see fit.
To minimize the service requests for the map, I decided to go with a static map. The problem with this is the limitations in the request URL. The request URL looks something like this:
https://maps.googleapis.com/maps/api/staticmap?center=39.7391536,-104.9847034&zoom=14&size=320x180&sensor=true
Notice that the size parameter is a static number and it’s required, so you have to put something in there. I don’t know if the user is using a smartphone, tablet or desktop, so I want the map to stretch the width of the application. Otherwise, you get something looking like this in landscape view on an iPhone:
Read the rest of this entry »
1 Comment »
Feb
18,
2012
Problem
I love my job and the people I work with, but some of our standard procedures are somewhat outdated. For example, when we need data from the back-end, we get a hidden html input field with the requested data in the value attribute. Sometimes we get two hidden inputs with data that needs to be extracted. Sometimes we get markup and display it via AJAX.
The problem begins when we need to extract that value from the returned hidden input field and display it to the end user in a text field.
When you search for things like extracting “extracting ajax return data”, there’s really not that much out there. This leads me to believe that most developers are using a more current method like JSON. We are moving toward RESTful solutions, but we’re not there yet.
Read the rest of this entry »
5 Comments »
Dec
13,
2011
A little disclaimer before reading this post. I recently attended the Breaking Development Conference which focuses on Web Design and Development for Mobile Devices. I’m so fired up about mobile web, that I might come off a little bias here.
In August, 2010, Forrester coined the term “App Internet“. What does the App Internet mean? “The Web, as the dominant software architecture of the Internet, is dead.” But, since then we have only seen the mobile web progress with the help of HTML5, APIs and mobile web frameworks like jQuery Mobile, Sencha and jQ Touch. In my opinion, it seems that the “mobile app fad” is dwindling down due to progressive web enhancements making mobile web more accessible across multiple platforms and older browser/device versions.
At a high level, the problem with native apps is that they must be downloaded to your device, and it’s becoming too much trouble to organize and maintain ALL the apps and scroll, scroll, scroll all the way down to find the one you’re looking for. Sure, you could keep adding them to your home screen, but where does it end? It’s not realistic to have an app for every store you buy from or every website you visit.
As mobile web improves, users will be more likely to take advantage of the idea of “use it and lose it”. Meaning, they don’t need to go through the pain of finding and downloading an app when they can open a browser based web app, use it, and move on.
Read the rest of this entry »
3 Comments »
Sep
21,
2011
This month I attended the Breaking Development Conference, which focuses on Web Design and Development for Mobile Devices. It was held at the Gaylord Opryland Convention Center in Nashville, TN. The biggest and most breathtaking resort I’ve even stayed in. The hallways in this place reminded me of the movie The Shining. I literary kept looking for a kid riding a Big Wheel up and down the hallways saying “Redrum”!
Breaking Development did an excellent job of gathering the leaders in Mobile Web Design and Development. With, of course my favorite, Luke Wroblewski, the author of Mobile First, Jeremy Keith, Dave Olson and Steve Souders just to name a few of the brilliant minds that were presenting.
Read the rest of this entry »
3 Comments »
Sep
08,
2011
If you use jQuery Mobile, you know that custom select menus are kinda shiesty to work with, so I’m going to explain the multiple ways to use the Placeholder Option and a hack to use the Placeholder Option without a label on a “long” list.
It’s common for developers to use the first ‹option› in a select menu to instruct the user the make a selection i.e. Please Select One. When a Placeholder Option is detected, jQuery Mobile will hide it in the menu list, showing only valid choices and displaying the Placeholder Option text as the header title (Please Select One).
Read the rest of this entry »
No Comments »
Aug
19,
2011
One of the things I love about my job is that I’m always learning something new. They encourage me to keep up with the latest technology and trends. My latest discovery was error handling with $.get().
As of jQuery 1.5, you can set an error handler after making an ajax request using $.get() via the jQuery XHR object, which allows you to chain the .error() callback after the request is complete. “This jQuery XHR object, or ‘jqXHR,’ returned by $.get() implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information)”.
Read the rest of this entry »
1 Comment »
Jul
13,
2011
By default Mobile Webkit assigns additional styles to forms, links and JavaScript clickable elements. You may have seen the highlighted box with round corners when you click on a link or focus an input field on your mobile device. Personally I find this annoying and they make a Rich Media Application(RMA) look like shit, but some clients will insist that usability is an issue when this default behavior is disabled.
By default jQuery Mobile disables this behavior and relies on custom button states and input field focus styles. I’ll admit that there is a little inconsistency when tapping a button, but double tapping by a low percentage of inexperienced users does not justify crayola-fying an otherwise elegant looking RMA… in my opinion.
Read the rest of this entry »
3 Comments »
Jun
04,
2011
NOTE: This post assumes you know a lil somethin’ somethin’ about Omniture and jQuery.
There are a few different ways you can implement Link Tracking for SiteCatalyst Reporting, but this post will cover the most basic way. This basic implementation just uses an instance of the custom link to be tracked. I wanted to track link clicks without using props, evars or events, so this basic implementation works great for just that. Let’s get started!
Read the rest of this entry »
7 Comments »
Apr
09,
2011
To remove a subdomain from the current URL in the browser is easier than you think. In my situation, I need to remove the mobile subdomian so that I can set a cookie that can be used on both versions of the website domain. i.e. mobile.sample.com and www.sample.com. I could have hardcoded the domain, but when you’re working with test and dev environments, it’s better to make it dynamic. Here’s what I came up with:
var separate = window.location.split('.');
separate.shift();
var currentdomain = separate.join('.');
Read the rest of this entry »
5 Comments »
Apr
04,
2011
Problem
It would be really nice if there was an easy way to create custom icons for jQuery Mobile. An ideal scenario, for me, would be to replace one of the un-needed icons in the provided icon set with my custom icon. Then, reference that icon by renaming the selector in the CSS. But, when I open the PNG, all the icons become jagged and pixelated. I’m not a Photoshop expert, so I could be doing something wrong. When opening icon-18-white.png in Photoshop, the files default color mode is Indexed Color. In order to edit this file, I need to change it. When I change the color mode, that’s when the icons degrade.
Read the rest of this entry »
16 Comments »
