Tool Web Tool Responsivator

I've been spending a lot of time recently messing with responsive design at work and in my personal time. If you haven't looked into it yet you really need to because it makes it MUCH easier to create mobile friendly websites.

I ran across a tool yesterday called Responsivator that allows you to quickly see what a page will look like for various screen widths and heights:

http://dfcb.github.com/Responsivator/

As an example I ran the getskeleton.com through the tool and got to see the results I normally have to resize my browser to see. I also ran my work site through it and it worked perfectly. One of the nice features to this tool is that it's just a collection of iframes so I was able to view the site while I was logged in.

IE 6 Upgrade Warning

I just read an article on sitepoint.com about not wasting time developing for older versions of IE. The thing I found most interesting in the article is the ie6-upgrade-warning project on Google Code. It displays a warning box that your version of IE is out of date and provides links to upgrade options:

I may start including it in projects but rev it so it shows up for IE 7 as well.

Checking to See If a Request is an AJAX request

During my last large project we had several parts of the site that consumed JSON data received using jQuery's $.get() function. For most of the project, we created separate actions each time that we needed to query for JSON data versus sending out HTML data. Deep into the project we found out that you can do a simple check to with Zend_Request::isXmlHttpRequest().

[code language="php"]
// check to see if this is an AJAX request
if($this->getRequest()->isXmlHttpRequest()){
// Use Zend's JSON helper to make quick work of this request
$this->getHelper('json')->sendJson($arrayData);
}
[/code]

Needless to say we felt stupid for having to duplicate a lot of our actions.

15 steps towards better form usability

Another good post from That Web Guy about form usability. Looking over the list I'm guilty of at least 8 of them. :-)

http://www.thatwebguyblog.com/post/15-steps-towards-better-form-usability/

An introduction to responsive web design: using media queries

I've been spending time at work in between other projects trying to learn responsive web design. During the numerous Google searches I've been doing, I ran into the following article that does a really good job of explaining the basics. As an added bonus his blog is an excellent example of responsive web design in action.

http://www.thatwebguyblog.com/post/an-introduction-to-responsive-web-design-using-media-queries/

Quick Tip: Determining A Site's jQuery Version

Here's a quick tip for today. To get the version of jQuery running on a site type the following in "Console" tab of Chrome:
[code language="javascript"]
$().jquery
[/code]

I'm not 100% sure where this would be helpful but I found it interesting. :-)

Creating a Maintenance Page In the Zend Framework

One of the things that I love to do is to have a maintenance page so when we're doing something that could potentially break the site, like changing the database schema, we can keep the users from using the site until it's ready.  In this vein, it's nice to be able to have a quick way to do this using the Zend Framework.

Creating the Plugin/The Heavy Lifter

This is a really simple process.  Create a new plugin (I'm calling mine Speedy_Plugins_Maintenance because I'm making it part of the Speedy Library) and fill it with the following:

class Speedy_Plugins_Maintenance extends Zend_Controller_Plugin_Abstract{
    public function routeShutdown(Zend_Controller_Request_Abstract $request){ 
        // we only want to run this if the isMaintenance flag is set
        if(is_file(dirname(APPLICATION\_PATH) . '/tmp/inMaintenance')){ 
            $request->setModuleName('default');
            $request->setControllerName('maintenance');
            $request->setActionName('index');
        }
    } 
}

The trick behind this is that we want to be easy to enable and disable so we're going to check for the existence of a file.

Getting This Working in the Application

In your bootstrap.php file add the following:

protected function _initEnablePlugins(){
    $front = Zend_Controller_Front::getInstance();
    $front->registerPlugin(new Speedy_Plugins_Maintenance()); 
}

This will add the Plugin to the Front Controller and run it. The last step is to create the MaintenanceController and the associated .phtml files. They're very bland so I won't go through them here. I would suggest you don't rely on the layout you currently have on the site because it might be inaccessible due to the maintenance.

jQuery Usage

I just saw this article on SitePoint that says:

According to recent research by W3Techs, jQuery is now used on half of all websites worldwide. The popular JavaScript library has come a long way since John Resig’s Selectors in Javascript blog post in 2005.

Perhaps of more interest is the fact that, of all sites using a JavaScript library, 88.3% opt for jQuery. It’s nearest competitor, MooTools, is far behind with less than 9%.

The most interesting part of the article to me is that 50% of sites that use other libraries like MooTools also use jQuery. They speculate that it's to get a specific effect and I would guess that's the case. It would be cool to see what large sites are using jQuery as well.

http://www.sitepoint.com/jquery-used-on-50-percent-of-websites/

Communal Dashboard Article

Martin Fowler has an interesting article on communal dashboards. I really like the idea of projecting the number of rentals on the floor like Red Box does.

http://martinfowler.com/bliki/CommunalDashboard.html

Android Emulator

Today, we had some problems with one of our sites because it had form elements in an iframe inside of a div on Android 4.0 (Ice Cream Sandwich or ICS for short). Long story short it's a plan it the ass bug that I was only able to get past by reading this Stack Overflow question (http://stackoverflow.com/questions/10232211/android-4-ics-ice-cream-sandwich-iframe-that-contains-a-form). During the debugging process (because I don't have an android tablet [yet]). I found out that Google has an SDK which includes an emulator for ICS. It was super slow (this may have been my computers) and I had to borrow a physical device to work on the problem but it's a good resource if you have Android specific problems:

http://developer.android.com/sdk/index.html

In case you're wondering the only "solution" to the problem we've found is to dump the iframe; which, while I'm okay with that decision from a design standpoint, is going to be a huge amount of work.