There are ways around this such as a proxy script, but they are all kind of a pain. Most people are unaware of the fact that it is possible to create a JavaScript POST cross-domain, and it is fairly easy to do. It is true that not all browsers support this, but you will be pleasantly surprised to know that the following browsers do support it: Internet Explorer 8+, Firefox 3.5+, Safari 4+, and Chrome. Yes, IE8+ does support it. I was surprised too.

So the big question is, how does it work? Cross-domain ajax is achieved through a protocol called Cross-Origin Resource Sharing.

Cross-Origin Resource Sharing

Cross-Origin Resource Sharing is a W3C Working Draft that defines how the browser and server must communicate when accessing sources across origins. The basic gist is that the client and server use special headers to either deny or accept a cross-origin request.

For example, if a script such as http://www.websitez.com/list.js performs a POST request via AJAX to the website http://www.hosting.com/save_listings.php, it would normally fail due to cross-origin policy. However, if in the PHP script “save_listings.php”, you set a special header called “Access-Control-Allow-Origin” with the proper value, the POST will be successful.

In PHP, the proper code for the “save_listings.php” file would be:

header(“Access-Control-Allow-Origin: http://www.websitez.com”);

By setting that header value, it will allow the script located at http://www.websitez.com/list.js to perform POST and GET requests cross-origin to the http://www.hosting.com/save_listings.php script, which is on an entirely different domain.

There are additional headers that can be set as well:

Access-Control-Allow-Origin: http://www.websitez.com
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: NCZ
Access-Control-Max-Age: 1728000

You can also specify a “*” as the domain to allow any domain to perform a POST or GET to the script in question. Obviously this is a massive security risk and should only be done if you know the exact ramifications of doing so.

Access-Control-Allow-Origin: *

For further information, please checkout this great post from NCZOnline detailing the proper way to perform the AJAX call to maximize support across as many browsers as possible as well as further details on the additional headers that you can specify to gain control over who, when, and what can access your script.

There are many of these tools available on the Internet, but most just simply return statistics about your website. Things such as page size, keyword counts, header tag counts, header output, and other miscellaneous facts about your website. But this tool provides specific instructions on how to improve your website. It tells you in lamen turns what it found and how to fix it with a link to a resource that will help you complete the suggestion.

For example, when we ran the tool for Websitez.com, it returned back this information:

As you can see, there are plenty of things that we need to fix here at Websitez.com!

Checkout the website tips and suggestions tool, it is like having a webmaster expert in your back pocket!

I find myself with that feeling again with mobile development. I have tried multiple libraries, each with their pros and cons. I recently decided to dive into Sencha touch to see if it could be my plug and play framework to create interesting effects.

While Sencha Touch has glimpses of genius, it still falls far behind where a viable mobile framework needs to be. Their own example site runs horribly on my iPhone 4 on a 3G connection. On the Sencha Touch demo page, not a SINGLE demo worked as expected 100% of the time.

And in all reality, not a single library performs well on a 3G connection. A compartmentalized version of jQuery is the only thing that I have found that is the proper file size and provides the proper user experience for all smart phone users.

The truth of the matter is, while the demos may work great in a native app, they just don’t work well in the real world. When you actually have to deploy something to tens of thousands of users on the mobile web, there really isn’t a framework that has the performance needed to give the visitors the experience they desire.

I have resorted to using a combination of CSS3 and jQuery on my projects because it is the only predictable solution that gives a great user experience every time.

As I look back at Sencha, they continue to approach their library as some sort of a comparison to everything that is out there and place the success of their company on constantly “one-upping” the competition. When in reality, if they just created a modularized framework that allowed the inclusion and exclusion of certain components with graceful degradation built in, they would have a framework that would not only work for a native app, but it would be the first that truly worked for the mobile web.

• The fastest way to select an element in jQuery is by the element ID.
• The second fastest way to select an element is by tags.
• var receiveNewsletter = jQuery(‘#nslForm input.on’);
• The slowest way to select elements is by class name.
• When traversing elements, use find instead of multiple items in a selector. It is slightly faster.
• var divs = jQuery(‘.testdiv’, ‘#pageBody’); // 2353 on Firebug 3.6
• var divs = jQuery(‘#pageBody’).find(‘.testdiv’); // 2324 on Firebug 3.6 – The best time
• Cache elements in jQuery that you use often.
• var header = jQuery(‘#header’);
• var divs = header.find(‘div’);
• Use the data() function to store information on your elements for later.
• jQuery(‘#head’).data(‘name’, ‘value’);
• //Later in the flow
• jQuery(‘#head’).data(‘name’);
• Always load the jQuery library from Google’s CDN
• https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js

If you need to do DOM manipulation for the mobile web, jQuery is a great option. Hell, even if you want to do DOM manipulation in a native app, jQuery is still a great solution.

My biggest complaint is the size of the library. Even when it is minified and GZIPPED, it is still 31kb. That is impressive for the desktop web, but in my opinion it is not sufficient for the mobile web where latency is priority #1. 

I found a great resource that has the vast majority of the functions that make jQuery great at the fraction of the file size. It is called jQuip and it is available on Github. It reduces the file size from 31KB to 6KB. Keep in mind this does not contain all of the functionality of the official jQuery, but 90% of it (what it actually contains is listed in detail on the link above). Their goal is to create modules that allow you the developer to include only the functions you need which will allow you to significantly decrease the file size of the included libraries.

This is one of those projects you will want to keep an eye on. They are onto something.

It seemed that almost every project we worked on we needed to modify the login form for WordPress. One project it was simply changing the logo from the default WordPress logo to a custom one. The next it was changing the colors to match the theme we developed for the customer. And the most recent projects we had to place the login form inside of the theme layout. By the second project, we decided to stop re-inventing the wheel and create a plugin.

The WP Login plugin, or the WordPress login plugin, allows you to insert the login form into your active theme. It also extracts out the login form and allows you to customize it through a simple file editor. If you’d prefer to keep the stand-a-lone login page but simply edit the style and change the logo, the plugin can do that as well.

This plugin was meant to handle any possible WordPress login form customization, and we hope that you will give it a try and send us any feedback you may have.

Download it here!

Recently a hack was found that exploited the Timthumb.php script. The WP Mobile Detector utilizes the Timthumb.php script, so it could potentially effect any blog running the WP Mobile Detector plugin.

I am happy to announce that this was fixed and an update was pushed to WordPress.org. As long as you have version 1.7 or higher you are all set.

The exploit had to do with how a version of Timthumb.php validated the domains that were authorized for the script. It performed a string comparison on an array that was incorrect.

For example, if this domain was authorized “domain.com”, then this domain would also be authorized, “mydomain.com”, since it contains the authorized domain. This is a pretty huge error in the script and has since been fixed in the most recent version.

If you use Timthumb.php with any of your projects, it is recommended that you update to the most recent version, which is version 2.8 as of writing this post.

You can find the most recent version here: http://timthumb.googlecode.com/svn/trunk/timthumb.php

Websitez.com is proud to announce our own javascript based mobile detection script that works with any website.

By including a snippet of javascript in your website, a visitor from a mobile device will be redirected to any mobile website you desire.

This script uses the same detection available in the WP Mobile Detector premium plugin.

Features

• Detects 5,000+ mobile devices.
• Install and configure in less than a minute.
• Instantaneous mobile detection.
• Backed by proven technology.

Get the script!

If you’re interested in being one of the first to use this script for your own website, please send an email to: estolz[AT]websitez[DOT]com

As of JQM alpha release 4.1, there are 5 themes included with the library. Currently there is no ThemeRoller for JQM, so in order to create additional themes you have to edit the jQuery Mobile CSS.

The easiest way to do this is to copy all the styling from the theme that has the most similar style to what you’re trying to create and then change the letter that signifies the style.

Currently JQM uses letter notation. Theme “a”, “b”, “c”, “d”, and “e”. As of writing this article, you must use single letter annotation.

So for example, if you copy Theme “a” styles, you would have to change all of the references to a to the letter of your choice, for example, “f”.

.ui-bar-a {

would become

.ui-bar-f {

Luckily the CSS contains comments that lets you easily see the block of CSS that is for each theme, so it is easy to copy and paste. There is no easy way such as search and replace to create a new theme with a new letter, you’ll have to manually perform the change.

Additional JQM Themes

Since JQM is relatively new, there are very few custom themes out there. Here I will give you a list of the current available themes, if you have any more, leave a comment and I will update the post.

• http://www.emeraldcpu.com/zman3/jqm/mobileindextheme.php
• http://www.stabinger.us/test/jqm.html

Helpful Posts On WordPress jQuery Mobile Themes

• http://www.ifadey.com/2011/01/wordpress-theme-using-jquery-mobile/
• http://www.catswhocode.com/blog/how-to-create-a-mobile-wordpress-theme-with-jquery-mobile
• jQuery Mobile – Websitez

WordPress jQuery Mobile Themes

• WP Mobile Detector contains 5 JQM Themes
• http://www.webdevcat.com/themes
• http://frobert.com/en/2011/03/30/generic-jquery-mobile-wordpress-theme/

There is always a delay on the swipe action before anything is actually triggered.

I also tried the Sencha Touch library, which performed slightly better, but still not proper.

This leads me to believe it is an issue with the Android browsers swipe detection.

Testing Equipment

• Default Browser for each: HTC Droid Incredible w/ Android 2.2, Droid X w/ Android 2.2, HTC Thunderbolt w/ Android 2.2
• JQM 1.0a4.1.js

I will update this post if I am able to find a solution. If you know of a solution, please share it in the comments!