Tag Archive: jQuery

my JQuery Character and Word counter plugin

Hey folks! After much procrastination, I finally updated my jQuery Character and Word counter plugin! Joyeeeee!.

Oh yeah, I also got a new domain name. Some fuckface took qwertypants.com (I had it in the past, it got scooped up by a shithead), so I settled for qwertypants.me.

I’ll be moving this blog over there in time. Anywho, enjoy the plugin!

Check it out here: http://qwertypants.me/counter/


A (not so) long time ago there was this little framework created called jQTouch. This for me was an amazing moment because, as the name implies, it was written on top of jQuery. I ❤ jQuery. A mobile framework that works with jQuery simply excited me beyond words.

At the time, I needed an excuse to build a mobile website so I wrote some crappy single page apps just to get my feet wet. It was pretty awesome. The only downside for me was that it was a bit sluggish. The animations were still very impressive. There are a bunch baked in animations that can satisfy your transition needs. There is also an option to create your very own transitions with very limited code.

After some time, I decided that I’d do a mobile version of my resume. Why not?! I could use this project as a great excuse to:

  1. Have a mobile version of my resume (I’m a dev, this could impress potential employees…)
  2. Learn the jQTouch framework and have fun doing it (since I’m doing it for myself)
  3. Find a new job..

It came out fantastic. It took only a few hours to put together and it did what I wanted it to do: look awesome and impress a potential employee. Then, I was introduced to phonegap: the secret weapon to bind these two magical entities.

I was lucky enough to attend an amazing training session with the uber geeks from phonegap. I learned that I can combine mega forces and use jQuery, jQTouch, and sprinkle the magic of phonegap and BAM!!! – create a fully functioning mobile website turned native mobile application. During this time, jQuery mobile was only a wish. I remember like it was yesterday…

Brain Leroux (from phonegap) said that he ran into John Resig and teased him about coming out with “jQuery mobile”, a mobile version of jQuery. He said at the time that Resig was “working on a solution”. No jQuery mobile yet? That’s fine, the guys at phonegap rolled their own API called XUI. It’s a JavaScript micro-framework that filled the gap when it comes to mobile JavaScript development. It has very similar syntax to jQuery and is very easy to use. But it’s not jQuery – which was fine, until now…

After weeks of anticipation, the jQuery team released jQuery mobile. The morning it was released (10/16/10), I literally spent the entire day going through every page in the documentation and re-building my original resume app. Again, it took only a few hours to put together. It has a very simple templating scheme that even a blind folded panda could pick up.

Like jQTouch, jQuery mobile carries the concept of having single page applications. This means that your entire site can (and should, under the correct circumstances) be written on one HTML page. This is also beneficial if you want to use phonegap to make it a native app; it’s small in file size and easy to maintain.

In jQuery mobile, each page is represented by a div tag with some special attributes. Here’s the template for a “page” in a jQuery mobile app:

<div data-role=”page” id=”” data-theme=””>
<div data-role=”header” data-theme=””>
<h1>Page title</h1></div>
<div data-role=”content”>
<ul data-role=”listview”>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<div data-role=”footer” data-position=”fixed”></div>

Some elements have a special attribute called data-role. When this attribute is added to a specific DOM element, it turns it into a badass mobile element that can kick your ass. Some values for the data-role attribute  include:

  • header
  • page
  • content
  • footer
  • listview
  • list-divider
  • collapsible
  • fieldcontain
  • button

I’m sure there are more, so keep your eyes peeled. Each value can only be assigned to it’s intended usage. So for example you can’t use the “button” value on a ul; it’s reserved for an href tag.

Another cool aspect that got picked from jQueryUI is… theming! There are currently 5 available themes with more in the works. Each element that turns into a mobile feature can have theme set to it. The themes can be assigned using the data-theme attribute. There are currently five available themes, each one assigned letters: a, b, c, d, e. The built in themes can make for some pretty interesting visual contrasts.

Anyone can create a nice simple app using jQuery mobile. It runs super smooth too, especially with the updates made to jQuery 1.4.3. If you don’t have time to view the documentation at your desk, the API documentation is written with JQuery mobile, which means you can see it on your mobile device! Double awesome!

I urge you to check it out ASAP. It’s the first release, so you as a developer can contribute and stay way ahead of the curve by getting into it early.


jQuery mobile

This is the best news I’ve heard today:

In case you missed it, here’s the webcast:

I Like You: Part 1

I, perhaps like you, has heard of a little site called Facebook. In an effort to dominate the world provide Internet users a way to share pages with their friends, they have released what they call an Open Graph protocal. This public API allows developers a new and rich way to interact with the Facebook audience (400M+).

Many popular sites have already been implementing their most popular feature: the infamous Like button. You have probably already seen this at the top or bottom of many articles; it’s the little thumbs up icon that allows readers to post the current article to their wall, thus promoting the article to their friends. The easiest way to get it on your site is by using their generator: http://developers.facebook.com/docs/reference/plugins/like.

The cool part about this is that they also offer additional meta-tag so your page can show up on search results and the users profile. Adding these optional values will really beef up your presence on Facebook (that’s a good thing). If you plan on using the  like button, you should put the extra effort to add the optional meta-tags. Doing so won’t slow down your page, it will only help people find your article easier.

Their API also offers developers the ability to query their database via Facebook Query Language (FQL). It’s pretty badass.

An example of a query would be the following:

https://api.facebook.com/method/fql.query?query=SELECT share_count, like_count, comment_count, total_count, click_count, normalized_url FROM link_stat WHERE url="http://google.com/"

This returns an XML output of the query used. This can be extremely helpful when you want to grab specific information and do cool things with it.

Stay tuned for a future post where I’ll go over how you can render your query output to a page and make it look all pretty.

Learning jQuery: resources

There are millions of articles, blogs, and slides on the Internet that can show you how to learn jQuery. If you don’t feel like forking out real dollar signs for a book, check out the list below for FREE resources that can get you started now:

There are TONS of resources, these are just a few of my favs. Which is the best one? That’s up to you. For an even more extensive list, check out: http://www.learningjquery.com/2010/07/great-ways-to-learn-jquery