Considering Browser Reflow
Friday, April 5th, 2013
Back in February I attended the HTML5 Denver Users Group presentation – Making Your UI Scream (Not Your Users) by Wesley Hales. From the title of the presentation you can probably guess that his talk was about website performance. Most of what he had to say about performance, I’ve heard before, but one of the things that Wesley brought up was reflow. I’ve built plenty of websites and performance is always at the top of my list, but I never looked too much into reflow. This was my biggest takeaway from Wesley. Now that performance for mobile websites is a huge consideration, I’ve been interested in other micro-optimizations. Maybe another reason that I haven’t taken reflow into consideration before is because I follow one of Wesley’s rules: Don’t let micro-optimizations weigh you down. Finish the project first.
More On Reflow
Reflow is the process in which the browser calculates the positions and geometries of all the elements in the DOM tree for visual presentation. Reflow is a user-blocking browser operation that can effect the UX, and in this day-and-age of immediate gratification, performance is a very important UX consideration. One of the most powerful things about jQuery is it’s ability to easily manipulate the DOM with methods like .show(), .hide() and .attr(), but in order to minimize reflow you should avoid touching the DOM as much as possible.
Tags: CSS, JavaScript, Performance
Posted in Code, Development, jQuery, Mobile | 1 Comment »
Mobile App Training By Apigee
Sunday, March 31st, 2013
Last Friday I attended a free mobile app training session with Apigee. We used jQuery Mobile combined with PhoneGap to produce a rich native mobile application. The training session was led up by Tim Anglade, Head of Developer Programs & Evangelism at Apigee. Tim has an impressive resume and is completely comfortable speaking in front of a crowd.
jQuery Mobile
The first half of the morning was spent introducing jQuery Mobile followed up by a crash-course in using the mobile web UI framework. Tim also introduced a drag-and-drop WYSIWYG called Codiqa to keep things moving for those unfamiliar with jQuery Mobile. Codiqa is great because you can use it as a prototyping tool and share designs with clients and/or collaborators. Having used jQuery Mobile since it’s first alpha release, I chose to open up TextMate and go to town.
Tags: BaaS, HTML5, Mobile
Posted in Code, Design, Development, jQuery, Mobile | No Comments »
AJAX without jQuery
Wednesday, December 12th, 2012
I like to post about problems that I solve so that I can refer back to if I ever encounter the same problem in the future. This time I needed to make an AJAX request without using jQuery. I’ll be honest… I’ve ALWAYS used jQuery for AJAX. Why wouldn’t you? It’s so easy, plus if you’re already using jQuery, it’s more efficient. I didn’t know where to start, but after some research, I came up with the following:
$('#container').on('tap', '#element', function(event) {
//GET URL FROM TAPPED ELEMENT
var requestURL = $(this).attr('href');
var xmlhttp = null;
if (window.XMLHttpRequest) {
//IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
xmlhttp.open('GET',requestURL,true);
//XMLHttpRequest - I GUARANTEE IT!
xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xmlhttp.send(null);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('container').innerHTML=xmlhttp.responseText;
}
}
//PREVENT DEFAULT BUTTON BEHAVIOR
event.preventDefault();
});
As you can probably see, I AM indeed using jQuery for the tap event and URL gathering. The jQuery version that this post references is v1.7.1. using the .on() method; the rest is old school javascript. Let’s break it down!
Posted in Code, Development, jQuery, Mobile | No Comments »
Prototyping With HTML5 localStorage
Tuesday, October 30th, 2012
Prototypes are good for helping clients understand functionality in their application. Prototypes are also really good for usability testing the flows and functionality. Often when conducting usability tests, we tell the test subject that it’s a prototype and to pay no attention to the details as they may not be accurate. A good example of this is a details page. Let’s say you have a list of locations in a location finder application (figure 1). In the prototype you only have one static details page with only one of the locations. Wouldn’t it be nice if the details page information matched the item the test subject selects from the list? localStorage can help you with that!
figure 1
Posted in Code, Design, Development, jQuery, Mobile | No Comments »
Dynamic Google Map Width
Monday, March 26th, 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:
Posted in Code, Design, Development, jQuery, Mobile | 1 Comment »
Extracting Ajax Return Data With jQuery
Saturday, February 18th, 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.
Posted in Code, Development, jQuery, Mobile | 5 Comments »
My Thoughts On “App Internet”
Tuesday, December 13th, 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.
Posted in Code, Development, jQuery, Mobile | 3 Comments »
jQuery Mobile Select Menu Placeholder Options
Thursday, September 8th, 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).
Posted in Code, Design, Development, jQuery, Mobile | No Comments »
Error Handling With jQuery.get()
Friday, August 19th, 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)”.
Posted in Code, Development, jQuery, Mobile | 1 Comment »
jQuery Mobile: Enable Tap Highlight Color
Wednesday, July 13th, 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.
Posted in Code, Design, Development, jQuery, Mobile | 3 Comments »