JavaScript Module Design Pattern

Moving beyond adding simple JavaScript enhancements to your website to developing full-blown client-side applications is going to require organization. In this article, we’ll take a look at JavaScript Module Design Patterns and how to use them in your development.

I’m a huge fan of the JavaScript Module Design Pattern so thought it would be worthwhile for other developers to explain some use cases, the differences and why they’re important. The Module Pattern is what we’d call a “design pattern” and it’s extremely useful for a vast amount of reasons. The biggest reason I’m a fan — it makes scoping a breeze and doesn’t overcomplicate program design.

Great design is a product of care and attention applied to areas that matter, resulting in a useful, understandable, and hopefully beautiful user interface. But don’t be fooled into thinking that design is left only for designers.

Anthony Colangelo

The JavaScript Module Design Pattern also keeps things very simple, easy-to-read, use and uses Objects in a very nice way. Even better, it won’t bloat your code with repetitive this and prototype declarations. Continue reading “JavaScript Module Design Pattern”

Drupal Behaviors: A Quick Introduction & How-to

I’m fairly new to Drupal myself and came across something called Drupal Behaviors when I was working over at BioWare Austin. A fellow Drupal developer whom was part of the team, Ivan Fuyivara, gave a presentation on what they were and how to use them. Being a complete greenhorn at Drupal then, I was a little foggy on the concept and didn’t really understand. Now with a year of Drupal dev under my belt, a better understanding on how to do things the ‘Drupal way’, and an opportunity to work on a re-theme project at Stratfor Global Intelligence, I had the opportunity to put this feature into practice.

Here’s a quick introduction on what Drupal Behaviors are and how to use them. Feel free to critique or tell me I’m completely wrong here… in no way am I claiming to be a Drupal expert. You can also read more (though not too much info) on Drupal.org.

Continue reading “Drupal Behaviors: A Quick Introduction & How-to”

jQuery Traffic Pop Plugin

Tired of those overly priced simple scripts on sites like CodeCanyon? Me too! I can understand why others that aren’t developers spend money on them, but if you’re a dev purchasing scripts like Social Traffic Pop or Facebook Traffic Pop, you’re throwing your money away. To help stay true to the open-source philosophy, here’s an alternative Traffic Pop jQuery plugin that can be fully customized to suit your needs.

See it in action!

Traffic Pop jQuery Plugin


You content here (ex. social network sharing buttons)

Download Now (Version 1.1) Fork on GitHub

Implementation

Simple stuff! Just a disclaimer, I’ve haven’t throughly tested this in all browsers so let me know if you run into any issues. I’ll be happy to fix and update it.

This script also uses the jQuery Cookie Plugin v1.3.1 by Klaus Hartl (already added into the jquery.trafficPop.js).

The HTML

The CSS

All of which can be customized to suit your site’s needs.

That’s it!

Quick Code: jQuery Sticky Navigation When User Scrolls

Sticky navigation is being used more and more on sites and there’s a good reason why. It improves the UX by making the menu available no matter where the user is on the page. Learn how to create a simple, light-weight jQuery sticky navigation below. Best of all, it’s easy to implement on existing site’s without having to change any existing HTML code!

Sticky navigation is being used more and more on sites and there’s a good reason why. It improves the UX by making the menu available no matter where the user is on the page. Learn how to create a simple, light-weight jQuery sticky navigation below. Best of all, it’s easy to implement on existing site’s without having to change any existing HTML code!

jQuery Sticky Navigation Effect

Without further adieu, let’s jump into the code.

The JavaScript

jQuery(function(){
  var menuOffset = jQuery('#site-navigation')[0].offsetTop;
  jQuery(document).bind('ready scroll',function() {
    var docScroll = jQuery(document).scrollTop();
    if(docScroll >= menuOffset) {
      jQuery('#site-navigation').addClass('fixed').css('width',jQuery('#masthead').width());
    } else {
      jQuery('#site-navigation').removeClass('fixed').removeAttr("width");
    }
   });
});

Fairly basic jQuery code. It will add a class to the navigation when a user scrolls beyond it. Only thing you’ll need to change here is the navigation selector, #site-navigation. Also, you may want to remove .css('width',jQuery('#masthead').width()). That part of the code is more specific to this site.

The CSS

#site-navigation.fixed{
  position:fixed;
  z-index: 9999;
  top:0;
}

Simple stuff! If you’ve got any questions or need help customizing it to meet your needs feel free to shoot me a line below.

Bet I can guess your address! Reverse Geocoding with HTML5 & Google

No, this isn’t one of those bet I can guess your weight or age games you find at places like carnivals and Six Flags. I bet you I can guess your approximate address with HTML and reverse geocoding.

No, this isn’t one of those bet I can guess your weight or age games you find at places like carnivals and Six Flags. I bet you I can guess your approximate address with HTML and reverse geocoding.

Last month I wrote an article on the HTML5 Geolocation API. I’m going to take what I showed you there, expand on it and show you how to take advantage that powerful API and the Google Maps JavaScript API to perform reverse geocoding to find an approximate address.

See it in action!

Turning geographic data like a street address and zip code into geographic coordinates such as latitude and longitude is called geocoding

The process of turning geographic data like a street address and zip code into geographic coordinates such as latitude and longitude is called geocoding. When you do the opposite, turning coordinates into an address, it’s called reverse geocoding. See a live demo below:

I know, I know, it’s not perfect, but it’s a lot closer than we had which at most times was somewhere in the city, state and sometimes just country. And granted, if the user doesn’t allow us to grab their location we’re back to using the IP, but it’s still a pretty good guess. Now only if we could have got Osama Bin Laden to visit one of our webpages while logged on as himself… long shot, but wouldn’t that be awesome if that’s how it went down.


In order to guess your user’s approximate address, just take what we learned in the HTML5 Geolocation Guide to get the user’s latitude and longitude using the HTML5 Geolocation API. Add a little pitch of the Google Maps JavaScript API and BAM! We’ll have a pretty good guess at where their located.

Download Demo Files

The HTML

index.html

All basic stuff, nothing too exciting. Just ensure you load the jQuery library, MaxMind GeoIP API for our fallback and the Google Maps JavaScript API. And of course, the script we’ll write below.

The JavaScript

script.js

A Deeper Look

If you’ve already, I suggest you read my other post on HTML Geolocation to familiarize yourself with 90% of the code above. The rest is fairly simple to understand. You get the coordinates from getCurrentPosition() , then pass them to a printAddress() function, which uses the Google Maps API to perform the reverse geocoding.

The printAddress() function begins by creating a new Google Geocoder object. The Geocoder object gives us access to the geocode() method, which can take in a variety of options and return information based on them.

In this case, we’re using the google.maps.LatLng() method to create a new Google LatLng object that is passed into geocode() in order to get the address. The geocode() method is asynchronous, just like getCurrentPosition(), so we define an inline JavaScript function to handle the callback.

The callback’s response contains two parameters, one for the results and the other for the status code. If the status is OK, then it’s safe to parse the array of GeocoderResults objects stored in the results variable. The results variable is an array since Geocoder may return more than one entry.

Next, check for a GeocoderResults object in the first position of the array and, if it exists, append the formatted_address property to the defined results element.

For more information about reverse geocoding, check out Google’s documentation.

Wrapping Up

screenshot_meetwaysThe possibilities are limitless with what you can do with this functionality. Internet marketers are biting at the bit to start using this technology to drive even better user-specific ads to the eyes of millions. Online game developers like Parallel Kingdom are building ground-breaking web-based massive multiplayer online (MMO) games. With a little extra code, we can turn our code into a mobile app that gives user’s the ability to send their location to a friend or family member with a click of a button. Our imagination has now become the limit with what we can build. The next fives years is sure to be an exciting time in the web development arena bringing the whole world a better internet. Are there any projects you’ve done you can share that use the HTML5 Geolocation API?