Next thing I know (like literally a day later) Google+ has already implemented a whole gallery of these things. More specifically, I was examining Google+ to check out certain features of the site as I was curious how their content-generation form works (you know, the place where it says Hi <your-name>, share your thought…). When I clicked on the “Add Event” icon, I noticed the top header of the form consisted of a gorgeous animated GIF:

Clicked on it, and of course it brought me to a whole gallery of animated GIFs separated out into themes/events etc. Birthdays, sporting events, picnics, skiing, you name it. Each one of these events comes with their own little batch of beautifully filmed – seemingly instagrammed (Should I trademark the term “instaGIFed” before it’s taken!?) – GIFS.

Also, for those whom have not heard of Vine, apparently it’s the next big social media company (I believe bough out by Twitter?) that focuses just on GIF creation. Yup.

At first I decided to suck it up and go with using ‘jQuery’ instead of ‘$’ for a little bit for the sake of getting my code to work. However, after a while I felt like there was jQuery fungus growing in every corner of my code. I needed anti-jQuery-fungus cream quick and it had to come in the form of ‘$’.

However, the jQuery-fungus would not give up so easily. Due to the nature of my code, the fungus was able to grow deep into the very fabric and essence of objects and functions. I had been using the convention of JavaScript namespaces. For example, I had something along the lines of:

var rafiki = rafiki || {};
rafiki.myObject1 = {};
rafiki.myObject1.myFunction = function(foo, bar){return jQuery(foo).val + jQuery(bar).val() };

I prefer this convention as it feels more object-oriented-esque (it’s easier for me to organize my code) and I have easy access to my objects and functions via Chrome dev tools (i.e. autocomplete on the console).

All my objects and function within the rafiki namespace depend on jQuery. I wanted to change every single jQuery to ‘$’. There are various ways of achieving this without polluting the global namespace, such as wrapping your code in a closure:

(function($){ //codez })(jQuery)

This method is nice, and privatizes your code, but it removes all your capability of executing or debugging your code via the console as it just returns a function. You can use various debuggers and set break points, but I find this more tedious than just accessing your functions/objects directly from the console.

So, how can I achieve ‘$’ access, while at the same time not polluting the global namespace AND using JS namespace conventions AND having access to my objects and functions via console? After a little head bashing I came up with this little technique:

var myNameSpace = myNameSpace || {}; //declare your namespace first

(function($){
  myNameSpace.myObject1 = {
   function1: function(param){},
   function2: function(param1, param2){},
   ...
  }
})(jQuery); //Add subsequent objects and functions inside closure

The trick to the code above is to add to extend your namespace inside closures that get fed the jQuery ‘$’ as a parameter.  This achieves a few things: you can use JS namespace conventions, you’re not polluting the global namespace, you’re able to use the ‘$’ jQuery shorthand in a jQuery.noConfliction() environment, and you still have access to your objects/functions via the console!

Hope this helps folks out! Feel free to comment below for better strategies solutions that you have found from your JS adventures!

-Raf

http://rafilabs.com/graphingSims/graphs.html

A screenshot of my graphing algorithms JS app!

Enjoy!

Current functionality:

• In the widget section of the dashboard, you can customize (i.e. add and remove) the list of categories that are displayed to the front-end users.

Future functionality:

• Allow site admins to format the e-mail that is sent out
• Allow site admins to manage e-mail subscriptions per user
• Allow site admins to style the widget
• Allow site users to subscribe to authors and tags (on top of categories)

Git repository: https://bitbucket.org/rafiki/smartyemaily

Download: smartyemaily

Note: this will only work in google chrome. Also the red threshold is set to max – move the slider to the right to change the red threshold.

Screenshot from my webcam:

screenshot from my webcam – filtering by red pixels.

Alternatively if you’re interested in the code, you can find the SVN repository here.

Currently working on an open source WordPress plugin that allows for front-end tagging of posts. It uses jQuery UI autocomplete to search the WP DB and return the closest matching tag based on the search term. If no tag was found, you can add a new tag by simply hitting the enter key.

Here is a screenshot of the widget:

I’ve been meaning to set this site up for a while – and now it’s finally up. Here is a funny picture for your enjoyment: