ryankinal

$(function() {
    var $draggingElement = null,
        $document = $(document),
        $dropA = $('#dropzonea'),
        $dropB = $('#dropzoneb'),
        $dropCancel = $('#textwordscontainer'),
        downHandler = function(e) {
            $draggingElement = $(this);
            $draggingElement.addClass('dragging').css({
                left: e.pageX - $draggingElement.width() / 2,

ryankinal

<em>If you haven't read my previous tutorial on <a title="Objects and the Prototype Chain" href="http://blog.javascriptroom.com/2013/01/14/objects-and-the-prototype-chain/">Objects and The Prototype Chain</a>, it would be a good idea to do so. This article builds on the concepts presented there. Object oriented programming with only those concepts, while possible, can get pretty verbose, so we often use common abstraction techniques - called Design Patterns - to simplify the task.</em>

The Initializer Pattern is my favorite OO design pattern in JavaScript. I find it intuitive and easy to use. It's straightforward, and contains all the necessary internal knowledge of an object in the object itself. I'll get to each of these points as we go along, but for now, let's just take a look at the most basic concept of the pattern: an initialization function.
<h2>In Comparison</h2>
In the first article, using basic prototypal features, we see code that looks like this:

[javascript]
var point = {
    translate: functi

ryankinal

var PetalsAroundTheRose = (function() {
    var sides = 6,
        dice = 5,
        currentRolls;

    function getPetals(rolls)
    {
        var score = 0;
        rolls.forEach(function(item) {
            if (item === 3 || item === 5)

ryankinal

/*
  Applies to: http://feedly.com/home*, http://www.feedly.com/home*
*/
body, #feedlyCenter
{
  background-image: url(https://raw.github.com/ryankinal/mysubtlepatterns/master/debut_dark/debut_dark.png);
}

.area
{

ryankinal

// factory
var createObject = function(stuff) {
    var obj = {};
    obj.stuff = stuff;
    obj.func = function()
    {
        return this.stuff + ' concatentation';
    };

    return obj;

ryankinal

Actual "Event" webhook return (partial, decoded to PHP stdClass)

stdClass Object
(
    [type] => invoice.payment_succeeded
    [livemode] => 1
    [pending_webhooks] => 1
    [object] => event
    [created] => 1352226885
    [id] => evt_0geUCmQmZaf2OD

ryankinal

' This is the ideal situation, where getting search results is abstracted
' The stored-proc code is instead moved to the Market class, and thus written only once
' no matter how many pages want this data

Dim searchMarket as New Market(licenseType, state) ' maybe with more arguments
Me.datalistCourses.DataSource = searchMarket.OnlineCourses() ' maybe with more arguments

ryankinal

// Untested, off-the-cuff
$.fn.secondClick = function(handler)
{
    var flag = false;

    $(this).click(function(e) {
        if (flag)
        {
            return handler(e);
            flag = false;

ryankinal

/**
    Chat: A factory for multi-room chat clients.
        
        methods:
            create(container, rooms)
                - container is the ID of the element in which to build the chat interface
                - rooms is either an encrypted enrollment ID or an array of room definitions
                
                - returns a ChatClient (described below)
**/

ryankinal

/**
	These two functions (addEvent and removeEvent) should be added to common.js
	- they are generally useful functions that could be used across the entire site
	when custom javascript is needed. The lightbox requires them for use.
**/
function addEvent( obj, type, fn )
{
	if (obj.addEventListener)
	{
		obj.addEventListener( type, fn, false );