Let’s just jump right in there.  Some caveats: I am sure there is probably a better approach to some of the code, so please give some guidance on how it should be improved.  This code assumes that all the data is already loaded into the collection.  The set of data I was working with had a record count of about 28,000 items.  I’ve gone back and both on if having that much data loaded is a good or bad thing.  Of all the articles I’ve read there doesn’t seem to be a consensus.

The folder structure I am using is:

The JSON structure I am dealing with:

The model, nothing too special going on here:

The collection, again, is a pretty basic set up.  I’ve set to model to map to App.models.Tag, our url to point to tags_all.php and overridden the parse method to return a cleaned up tags array.

The last line _.extend(collections.Tags.prototype, pagination); is where we mixin in our Pagination module(?: not sure what its proper name is actually. Module, Class?).

Next up is the Pagination mixin code, have a read of it and I’ll comment after the code.

Most of the code is pretty self-explanatory, so I won’t dig into every line.  There are some methods you will see in the code, setSort and _sort, that are actually not in use for this discussion but will follow up on them in another post.

The first four methods are the ones that get triggered to start the ball rolling on the pagination.  Each of them call the pager method.

The page method makes a backup copy of the models the first pass through.  Resets models with said backup.  Ignore the sort for this post.  And lastly we pass in the start and stop points into the Array slice method, which we in turn pass to the Backbone.js reset method.  This will trigger a reset event and any view that is watching it will execute.

The last two methods to concern yourself with is the info and setPagination methods.  The info method does some base variable set up that will be used in views that need that info, our pagination view for-instance.  The setPagination method is called by info and at this point I must add two things.  The first is that I more or less borrowed the code from a PHP pagination script and can’t find it again, otherwise I’d give credit.  The second is that the purpose of setPagination is to allow for custom pagination structure and I was not clear I how I should make this more straight forward.  Any suggestions would be great.

So, what does setPagination do?  Basically it returns an array of what pages you want in your pagination — this will become a bit clearer what you see the pagination view below/in action, but let me try to explain.  In the code that is there, if we are on page 8 of our recordset, the pages that show will look something like this: 5 6 7 8 9 10 11.   But you are not limited to that structure.  In the project I will be merging this into, it will have a structure like, assuming I am on page 8 again: 1-5 6 7 8 9 10 11-15.

Hopefully that is clear.

Next two up are the pagination view and template/index page themselves.  The final structure will look something like:  “First Previous 5 6 7 8 9 10 11 Next Last Show 20 | 50 | 100 141 – 160 of 28091 shown”.  Again, everything should be pretty self-explanatory, each method is named to do what it is supposed to do.

I am using underscore.js’ template function.  Only real thing to note is the _.each loop.  This is where the “pages”, e.g. “5 6 7 8 9 10 11“, will get parsed out.

This last bit is the view that helps parses out the tags.

Closing

Like anything else, there are a hundred ways to do things and this is just one.  My example goes off the assumption that all the data is available but I am sure it can be re-written to only fetch a certain number of records from the server on an as needed basis.

What would you do differently?  Did you see anything wrong with my implementation?

So, one of the bigger holes in opinion is with checkboxes and radio buttons and since I’ve had the benefit of working with Dijit and having it pass a very rigorous 508 testing process I figured the best approach is to mimic, in a much less-code kinda way, what Dijit was doing.

So, with out much more blabbering on, below are a few examples of the checkboxes and radio buttons:

First we have the checkboxes:

Then we have the radio buttons:

Some thoughts

So it’s basic and it works and keeps all the basic functionality that comes with standard radio buttons and checkboxes. This is, in my opinion, what any widget that overrides a form control should do.

What probably needs to be taking into account is, what if styles are turned off? What happens if images are disabled? Do we check for these and if styles are off or images are off don’t build? Not sure, maybe that is something to deal with on a per project basis?

Currently if you do something like $( “input[type=radio]:eq(2)” ).prop( ‘checked’, true ); or even $( “input[type=radio]:eq(2)” ).get(0).checked = true; and you are not using the widget the radio button will change accordingly, but not if you are using the widget. The change event is not being triggered. Will need to look into this a bit more.  Thoughts? Not longer an issue, put a setInterval in to check for the change of the checked property and seems to be working correctly.

The checkbox and radio button width are only supporting jQuery 1.6+, it is using the .prop method throughout.  If you need to use it with an earlier release of jQuery you just need to swap those .prop methods out for the .attr method.

As I stated before, this method of doing the radio buttons and checkboxes have been tested fairly well for 508 compliancy so I am pretty confident it should work for you.  However, with everything we do, there is always room for improvement so please let me know via github if you believe you have those improvements.

Lastly, I tried my best to follow the standards that were set on the jQuery UI wiki but please get with me on items I can improve.

The Source

https://github.com/bmsterling/jquery-ui

Please submit any bugs or issues you have on github, I will not respond to those issues within the comments (or at least can’t effectively).

Update

06/25/2011 : Updated the code to allow for onchange to trigger when the checked property has changed.

Titanium won’t launch emulator

For what ever reason, when first getting everything going, installing the Android SDK and Titanium that you could not launch your Android project on a Windows machine.  After some trial and error apparently you need to set the permissions on the Android folder to get it to work.  To fix, I simply gave Users “Read & Execute” permission to the C:\Program Files (x86)\Android\ folder.  After that, all was fine.

Titanium is not seeing my attached Andoid phone

Another issue was that I could not install KitchenSink onto my droid even though it was connected, registering and downloading the drivers from https://developer.motorola.com/ and installing them addressed this issue.  Another plus in registering at motorola is the other phone and tablet emulators you can download from them.

Launching KitchenSink to see how things work

Do install the KitchenSink on your phone so that you don’t have to recompile it everything you want to see an example in action.  My basic process atm goes like this, realize I need to do something, pull up my phone to find that something, locate the appropriate code in KitchenSink\Resources\examples and boom, done.

Compiling takes for ever

I usually have a ton of other apps running so compiling every two minutes can eat up some time, to speed things up I’ve set the priority level for emulator.exe to high.  This has sped up compiling a bit, if even from a false perspective.

Getting undefined VS an Empty String

Working with Titanium if you create a TextField and do not set a value for it – even an empty string – it will return “undefined” instead of an empty string.

What ah-ha moments have you had?

Update:

Someone started a thread on the forums that have some tips as well: http://developer.appcelerator......the-others

iPhone App Dev with Titanium: 01 Getting Started

A pretty basic “getting started” video but does cover changing the icon and splash screen so worth a watch; using Titanium SDK 1.1.2 but is nothing that can’t be translated into the current 1.5.1 version: http://www.youtube.com/watch?v=tX_7NGvcNk4

iPhone App Dev with Titanium: 02 Understanding Windows

In this tutorial the author goes over creating windows and subwindows: http://www.youtube.com/watch?v=TCd-cTEb51E

iPhone App Dev with Titanium: 05 Event Listeners

Pretty good quick tutorial on events: http://www.youtube.com/watch?v=WQl0kCleDi4

Developing Native Android Apps with Titanium

A pretty good walk through on how to build a native Android application as well as the Tweetanium twitter applicaiton.  It also shows off the use of intents and events: http://vimeo.com/18541179

Titanium and the Android NDK

A quick video showing of the Android NDK support: http://vimeo.com/19138717

Before I go on, this is not meant as flame bait or to put down a great product by Appcelerator, it is simply meant to give my perspective as a new developer to Titanium Mobile and to hopefully show my progression in learning how to use it.  As of this writing I am working with the Titanium Developer 1.2.2 and Titanium SDK 1.5.1 on two separate Windows 7 machines.

When I first started reading/hearing about Titanium for mobile development one of the key phrases I’d hear was “use JavaScript to build mobile apps” and from a code syntax this is correct.  But what I’ve found is that, outside of syntax, having the notion of using JavaScript to build mobile apps in not true.  When working with the Titanium API you are working with a new language from my point of view.  You have to figure out what API functions do what and when.  I know the same can be said for learning any “framework”, ie. jQuery, Dojo, etc, but it’s a bit different in this space because a trial and error approach takes minutes to see if you were correct or not whereas in working with web based frameworks you can see if you were successful with a quick page refresh.  Basically what I am getting at is don’t come to Titanium thinking your are going to hit the ground running with your current JavaScript knowledge.

Something you might have picked up from the previous paragraph is the lack of information out there.  This is both in regards to tutorials and to code examples.  As of this writing doing a search for “appcelerator titanium mobile tutorials” brings up only two somewhat recent tutorials — one by tutsplus (using Titanium SDK 1.3 but some of it is still helpful for 1.5.1) and one by cssgallery — everything else points to old versions or are “compare” articles.  Since there is no help in the tutorial-verse, I turned to the documentation which, at first glance, is pretty good but will not help you figure out how to use the API; it is simply a reference, nothing more.  Both of these facts make starting out very frustrating so the only saving grace is the Kitchen sink application that they put out so you can see the API in action.  But again, for a new Titanium user it is still a bit hard to figure out what does what and when.

The last point I want to make and most likely is the root cause for the lack of information from other sources is Appcelerator’s business approach to this Open Source project.  There are a few things they do that kinda makeme feel dirty using Titanium, one being that I can’t use the developer tool offline!  I do a ton of work on the train but can’t do any mobile development because the developer tool needs to be online.  My guess, which seems to be the consensus, is that this is to track you and how you are using developer tool which I can only assume is for investor purposes.  Why else would it need to be online for me to recompile my changes every two minutes?  Next on my list is the plastering of training ads in every email I get.  This is true every time I open the dev tool, and every time I go to the developer center.  And then there is the fact that Titanium does not have it’s own site but is interwoven into Appcelerator’s corporate site.  From a person that is all about the community — working with the WordPress, jQuery and Codeigniter communities for many years — having to go to what seems like a corporate site to ask for help or to give help just doesn’t sit well with me.

Again, this post is not meant to bash but to simply give my current perspective.  I will be working with Titanium for the foreseeable future mainly because I am not looking to learn Objective-C and am not willing to get back into writing Java.  Titanium does have a lot of interesting facets that I am looking to investigating and blogging about.

The following stats are some questions I posted surveying a large group of people.

What do you fall under?

What type of client do you support?

How long will you/your group support IE6?

If you have to support government agencies, how do you plan to tackle the IE6 issue?

How does having IE8 available effect your process?

Are your sites working in IE8?

The process is pretty simple, make sure you have Chrome installed, open and browse to the website you would like to bookmark.

Just left of the address bar is a button, click that and you will get a drop down list of options. Click on “Create application shortcuts…” and you get the below dialog box. In my case, I am creating a “Quick launch bar shortcut for Last.fm, the other options are “Start menu” and “Desktop.”

After you hit ok you while now see you newly create shortcut:

Update: Rey points out that this feature has been available for Firefox in the form of a plugin for some time via the Prism add-on found here: https://addons.mozilla.org/en-US/firefox/addon/6665

The Inspiration

A few weeks back a good friend of mine needed to put together a website to display some of her drawings/portfolio pieces. And of course I decided to go with my jqGalScroll plugin but it got me thinking that there really should be a better way of displaying her work.

After digging around I came across thunderfuel’s website and was like “OMG, I must make that” and well, I did, sorta. I built the foundation and since I am really not a design person I did not make it all that pretty, so feel free to take what I did and make it pretty.

Demo of the Portfolio idea

The HTML

As always, I am using a definition list:

The CSS

Nothing overly special, anything with height, width, or padding is needed, coloring and font styles are optional:

The JavaScript

I am using the the easing plugin in my example so be sure to grab that also:

Here is the actual code being used:

Demo of the Portfolio idea

The Improvements

So what else could be done to this example to give more of a WOW factor? Of the top of my head I can think of a few. Of course a good amount of WOW can be received from a good design instead of green on green, but what about an automatic slide show? What about different directions of the animation, ie. one from the left, one from the right, one from top and so on?

Be all mean, let me know what you come up with.

Update: Made a change to the easing methods to easeOutQuad and easeInQuad, should be less jarring.

I will be using the default theme WordPress comes with to show you have to do this.  Below is the important code you should focus on:

With WordPress 2.7, you would edit the wp_list_comments(); function to look like wp_list_comments(‘type=comment’); and just after line 8 (‹/ol›) put:

That bit of code will echo out all the pings, so your final code should look like:

Ah, but there is a problem, what if you don’t have any comments but you have pings/trackback or visa-versa? You should now be able to wrap each H3+OL combiniation in code like:

And that’s it, your Pingback and Comments are now separate. Have a look at the final code below and let me know if I missed anything or if you have any questions.

Update: In regards to Chris’ question, there is a way to separate out your comments count; after some research you can use the get_comments_number filter, you just need to create function and put it in your functions.php file.

If you don’t already have a functions.php file in your theme, just add one.

Since I want your feedback on what topics you want to read about, I signed up for skribit and installed the widget just to the right of this post.  What I ask from you is to use it, tell me what you want to hear about.  If you see a topic already in the widget you would like to hear about, vote it up and I will make sure to make that one a priority.

Jing

The concept of Jing is the always-ready program that instantly captures and shares images and video…from your computer to anywhere.

Why I think this tool should get more love? Ever needed to explain something over the phone to someone and they are just not getting it? So what do you do, you take a bunch of “print screens” and past it into a Word doc and send that over. They get it and they still don’t get “it.” Well, this is where jing comes in, you simply open the program – if you don’t already have it open be default like me – select a section of the screen to record, record what you are trying to explain, save and the send that SWF over and you just saved yourself hours of hassle.
http://www.jingproject.com/

Yugma

Yugma is the leader in affordable instant web conferencing solutions. Yugma provides Free, Professional, and Enterprise web conferencing software-as-a-service (SaaS) solutions to individuals, small businesses, and large enterprises across a diverse range of industries.

Why I think this tool should get more love? Inline with Jing, using Yugma helps you take client “support” to the next level. Sometimes a three minute video is not enough, you actually need to see what the client is seeing and the next best thing to actually sitting of the clients or co-workers shoulder is to share their screen. Yugma’s free account, although not as feature rich as the Pro account, it gets the job done in a pinch.
http://www.yugma.com/

Twitter

Twitter is a service for friends, family, and co–workers to communicate and stay connected through the exchange of quick, frequent answers to one simple question: What are you doing?

Why I think this tool should get more love? Really, Twitter gets a ton of love from the average person to Steven Colbert to CNN but I don’t think it gets enough love as tool for Developers/Designers. Imagine you work is a firm, design/development/both, and you have a problem with some code or how to make a design better, you simply call over one of your co-workers and get their advice. But if you don’t work in an office where you can get help you alternatives are forums, mailing groups or IRC which are all ok, but not – in my experience – give off the truly “personal” help that Twitter can help provide. If you follow and build a rapport with other people a request for help can be fulfilled pretty quickly.
http://twitter.com | follow me

Virtualbox

VirtualBox is a family of powerful x86 virtualization products for enterprise as well as home use. Not only is VirtualBox an extremely feature rich, high performance product for enterprise customers, it is also the only professional solution that is freely available as Open Source Software under the terms of the GNU General Public License (GPL). See “About VirtualBox” for an introduction.

Why I think this tool should get more love? I’ve had limited interaction with the other visualization apps but I really must say that I really like VirtualPC. “But you are talking about VirtualBox, am I missing something?” No, no you are not. VirtualPC in my mind is probably the best visualization app out there but it costs $$ and if you are not making a ton of $$ the next runner up is VirtualBox which is an extremely close second. In my development I try to test in as many environments as I can, I try to set up my VB to only have 512mb of ram running WinXp and Win2000 (don’t have Vista yet otherwise that would be my main install). The reason for setting up weaker environments then my custom built machine is because not everyone has 3.5gb of ram with a video card that has 512mb ram and so on. Some of the apps I build are quite JavaScript intense so I need to make sure it can still run as smoothly as possible in those systems.
http://www.virtualbox.org/

Disabling the update nag
Removes that nagging “WordPress [Version] is available! Please update now” message from your admin area.

Add Your Website to Firefox’s Search Bar Using OpenSearch XML

The ability to search right from your browser’s address toolbar is a Godsend. No more extra Google or Yahoo page loads — simply open a new tab and roll off your search terms. Of course Firefox comes with Google, Yahoo, and other search engines by default, but what if you want to offer search for YOUR website in the address bar? Using Open Search, you can create an XML file to do just that.

WordPress 2.7 Comments Enhancements

WordPress 2.7 includes a lot of new enhancements, but one of the big ones is the new comment functionality. Comments can be threaded, paged, etc. This is all built in, but unfortunately, your theme must support it. So, for theme authors, I’d suggest getting to work on making your themes compatible right away.

Have you ever needed to see what a theme looks like with your content but you did not want to have to recreate your whole site on a testing server and import all your data?  Well, Theme Test Drive to the rescue.

You simply download the plugin, unzip it, upload it to your WordPress install, install the plugin and then select the theme you want to test.  This will allow you to go through your site as if it were live and see how it looks and works.

Now, have you ever need to make some changes to your current theme but did not want to shut down your site and you did not want your visitors to see a busted site?  Well, Theme Test Drive to the rescue again.

Follow the steps above, but instead of installing a new theme, just duplicate your current theme via your ftp of choice.  Once you have the duplicate theme, go into the dup and make a change to the style.css file and change the “Theme Name” – I just renamed the theme to have a 2 at the end of the name.

Reupload that style.css file and in the select menu under the Design -> Theme Test Drive page select your newly named theme and click enable at the bottom.

After that, just work off of the duplicate theme till you have everything looking the way you want and just either copy over all the changes to the old theme folder or change your default theme to the duplicate.

Complete install instructions, support and download can be found on the plugins site.

What I have put together is some code that I have been using on a few projects and turned it into a rough plugin. I say a rough plugin because it is very basic and not entirely flexible; let’s just call it a proof-of-concept.

Live Demo of Password strength indicator and generator

In the example about you will see two password boxes and with them you have a generate password link and an icon showing you the strength of your password.

The first example you notice that I have a basic indicator showing the strength is the form a colors blocks going from green to red with red being the strongest indicator. (I got these images from the cpanel password changer)

This is what you would normally see and it is fine, but what if your design is much like my current design where you are featuring trees?

In the second example we simply swap out the icon for a tree that has four levels and when the password is real strong the tree is completely filled in with red.

Have a look at the code:

The Code for Password strength indicator and generator

By default the plugin will work off of ten default classes that you can set the css for which you can do an image sprite like I did above. Or maybe just a DIV with specific colors and widths that will illustrate a growing strength of a password.

Final Thoughts

The point of this post is to show you that you don’t need to limit yourself to what is already out there, expand your thinking to include all possibilities and not just prepackaged ones.

With that said, what other possibilities do we have for a simple thing like a password strength indicator? Hmm… maybe doing a meter type thing that goes from zero to a hundred and just rotate the pointer much like the clock example?

What I want to cover in the article is what I have learned and what steps I took when coding with RSH for the Mason project and for some other on going projects.

First thing you should do is download the Really Simple History code.

Secondly, I have been using a modified version of Adam Vandenberg’s Querystring functions which has only one modification to it.

You will need to set up your script is a particular way so that the history script is created first, and then initialized, at least the way I do it, when DOM is ready.  You can get away with doing it on Window.onload but since most likely your code will be minipulating the DOM, initializing on DOM ready is probably better for you.

I set up my inital code like below:

Lines 1 and 2 we set up some globals we will be reusing later on and line 4 we create the history object. Lines 5 and 6 should be familiar to you, here we just check to see if the DOM is ready, if so, we run the code in the containing function. Line 8 we initialize the history script and at line 9 we set the listener to “theListener” which is a function I will point out further down the page. You will see that I also have an IF statement that is checking to see if this is the initial run. This is because the the RSH script does not run the listener script when it is initialized.

The next function is just a helper function I use all the time when dealing with the hash:

The last function is the “theListener” function which I referenced at line 9 of the second group of codes. This function will get called each and every time the hash changes.

Although the RSH script does pass back two params you will see that I don’t use them and the only real reason for this is that I felt it was too complicated and I never really figured out how I should use them.

At line 2 of the function we check to see if the function was already initiated. Then at line 3 we set up a new Querystring reference – should probably change the name to hashstring or something like that at some point. And from this point on, you can check your query string for what ever parameters you need to and run the appropriate codes.