jQuery UI & Disabling Text Selection on Click

Part of making a wonderfully interactive website with jQuery is the process of making certain elements clickable. Sometimes that means making a portion of text interactive without using the regular means of a hyperlink. One problem comes up when doing this, however. When a person clicks rapidly the browser usually interprets this to mean you want to highlight a word or paragraph. How do you stop this? Call .disableSelection() on the element with jQuery. This will disable text selection. For example:

$('#elementId').disableSelection();

It actually binds an event on the object which prevents the default behavior. It is an undocumented feature but it is awfully handy. Remember: it requires jQuery and jQuery UI as it is part of the jQuery UI core.

Synchronous AJAX with JQuery

Yes, you read that right. I just didn't think anyone would understand SJAX.

AJAX, if you don't know, stands for Asynchronous JavaScript and XML and is the term widely applied to sending HTTP POST and GET requests from client-side javascript. In JQuery, that would be $.ajax() or $.getJSON() or any one of the other similar variations.

The question that I had, to continue with the topic of this post, was, How do I do preform a synchronous AJAX call? That is, how would I treat an AJAX call as if it were inline javascript. The JQuery functions I mention above have a parameter where you would specify the call-back function that would run after the requested document is fully retrieved by the client, hence the response and call back are run asynchronously, or whenever the response has been received from the server. Then, how do I make this synchronous so that the code after the call does not execute until the javascript GET or POST is complete.

Well, it is pretty darn easy, I've found. There is a single parameter, "async," that you set to false. That's it. I've written this whole blog post and the answer is a one-word parameter: async.

$.ajax(ajaxurl, {
     async: false
});

So, now you know how to do SJAX. ;)

Web App Framework Review: Sencha Touch, jQuery Mobile & more

I was recently evaluating the different frameworks for developing mobile web apps. I created an app in Sencha Touch, jQuery Mobile and JQTouch.(I also did a responsive web site using media queries, but this isn't so much a framework.) Here is my summary.

Sencha Touch is very different than anything I have used before. All of the content of the web app is built with JS. You code everything with JS. This causes things to be a bit janky, especially on older smart phones that need more time to process all that script. The biggest drawback, however, is that the online documentation is very difficult to use, especially for newbies. They have a few video tutorials online, but some are outdated and many are inconsistent (some use MVC architecture, for instance, which really throws you off if every other tutorial doesn't). All-in-all, if you are a web developer by trade and are used to manipulating DOM-level elements, this is a very frustrating framework to try to learn. Be ready to spend a serious amount of time on the learning curve. (Also, you have to pay Sencha if you want the latest and greatest version of their framework.) After attempting a few different projects with Sencha Touch over months, I grew frustrated and threw in the towel, even outsourcing the remainder of one project to India.

jQuery Mobile is well documented and has plenty of example code for you to follow along. You develop your web app as you would a website and use different data-xxxx attributes on HTML objects to describe how objects should be styled or used. Once you have your structure, jQuery Mobile takes care of the rest, making everything look nice and employing fancy animated screen transitions. There is a small learning curve when getting started, nothing compared to Sencha Touch. And last but not least, jQuery Mobile is FOSS and appears to be in very active development. I was very happy with the example projects I put together with jQuery Mobile. They were easy to finish and worked well.

JQTouch, when I evaluated it, didn't appear to be in active development. The documentation was a little sketch and I found the demo/example code and the documentation disagreed on how things should be implemented. It took some trial and error to find out which methods were correct. I wouldn't recommend this framework for development unless they have taken great strides in recent months.

I want to mention responsive web design because it has great potential. While it doesn't give you the web app feel and isn't really a web app framework, it is definitely a good way to go if you need to develop a mobile web site. The pages load faster than they would using a web app framework (there is much less styling and JavaScript in the background). On the flip side, there are no fancy transitions, but that can be a good thing. You are in control of all the styling and the size of all the UI elements. Plus when designed right, it works on screens of all sizes -- there is no need for special mobile sub-domains or redirects.

In the end, no web app framework is perfect and completely replicates the native experience -- that hasn't happened, yet. With this said, I recommend jQuery Mobile and responsive web design as my favorites. They are different solutions for different problems (jQuery Mobile for a native-app experience, responsive for informational sites), but I would strongly suggest evaluating them if you have a new mobile web project coming up.

Hebrew Flash Card Web App

While evaluating different web app frameworks, I put together a little web app to help me get back up to speed with my biblical Hebrew vocab. And if you know anything about trying to read the Hebrew Bible, knowing a good amount of vocab is (unfortunately) essential. The flash card app is built using Sencha Touch's framework and is at http://hebrewflash.me/ ... check it out on your smartphone or iPod touch. The chapter divisions are based on Basics of Biblical Hebrew by Pratico and Van Pelt (Zondervan) so it is a great free vocab tool for students using this textbook.

Partition and Mount a Drive on CentOS

I have a few servers over at Softlayer. I recently procured a monthly computing instance with an additional 200 gigs of drive space. Thing is, the extra HD space doesn't come partitioned, formated or mounted. So, here is what you do:

First things first. Find the name of the physical drive: fdisk -l

This command will return a list of drives and information about each. You should find one that hasn't been partitioned with a name like /dev/sdb (or in my case /dev/xvdc for a computing instance) or similar. Check the size of the drive to make sure it is what you are looking for.

Next, partition the drive: fdisk /dev/xvdc (using the name of the drive, of course)

Once in the fdisk utility, press p to print the partitions to the screen. There should be none, because you haven't created any yet. If there are, are you sure you are using the right drive?

Next press n to create a new partition, press p for a primary partition, 1 for the first partition, and then use the default first and last cylinder (unless you know what you are doing, of course). Once this is set up, you can press p to make sure it worked and then finally, and most importantly, press w to write the changes to disk.

In the previous command, you'll get a slightly different name for the partition you created. It probably added a letter, something like /dev/sdb1 or /dev/xvdc1 would be right. You'll need it to format the drive: mkfs -t ext3 /dev/xvdc1 (I've used the ext3 file system, here, because it suited me just fine and is probably the most common.)

Now, where would like the disk mounted? You'll have to create a folder as the mount point. If you want the disk to be used for a new /data directory, then you'll have to create a folder with this name: mkdir /data

Next, add the drive and mount point to the /etc/fstab file so that it will be mounted at boot time. Use your favorite text editor, as they say. I used vi /etc/fstab and I added a new row, matching the spacing of the other rows: /dev/xvdc1   /data    ext3   defaults   1 2

Lastly, you mount the drive using mount /dev/xvdc1 and you are all done.

Head on over to cd /data and check it out. Or run mount without parameters to check out the details.

PS. Here are a couple websites I used when I was working through this problem myself.

Synchronize Facebook Status & Twitter

There is so much unhelpful junk out there on the web when you do a Google search on synchronizing your Facebook status' with Twitter. So, a quick post.

If you want your Facebook status to auto-tweet, go to http://www.facebook.com/twitter/

If you want your Tweets to auto-Facebook-status-update (why is there no verb for this?), go to http://apps.facebook.com/twitter/

It's just a slight change in the sub-domain. You don't need any 3rd part software or other service. Facebook and Twitter worked this out among themselves already.

jQuery Mobile Date Picker

I've been working with jQuery Mobile on a new form. I have the need for a datepicker and was really impressed with what a man by the name of jstage has put together. It is really thurough. So, if you are looking a flexible, mobile date picker, this is a good one.