We're growing into something new. Read More
tylerbrinks

Tyler Brinks  Pro


Discussion

What are your favorite sites for web design inspiration

I'm always bookmarking sites that are great for web design inspiration. I tend to frequent sites like bestwebgallery.com/ and themeforest.net/ but I'm running a bit low on new material. What are some of your favorite sites for inspiration or showcasing? Let's compile a list of the best sites around. I'll take the top voted replies and edit this post with the top X URLs. Here's the master list so far: cssbeauty.com/gallery/ thebestdesigns.com/ unmatchedstyle.com/ patterntap.com/ webcreme.com/ dribbble.com/ tympanus.net/codrops/

Discussion

Do you prefer URLs with our without the "www" subdomain?

There seems to be a lot of momentum behind removing the www from urls. Twitter does it, Forrst does it, lots of big sites are trending this way. I tend to like the brevity. What's your opinion? Check out no-www.org/ if you're unfamiliar.

Discussion

Which open source projects do you use most often?

jQuery is basically a given for web projects. What other OSS projects do you use, and what is it about them that you like?

(function(defaultRoot){   
    // Parses a namespace and creates empty object literals for each
	// segment of the namespace if it doesn't already exist.
	function namespace (fullNamespace, signature) {
		var fn = defaultRoot,
		  spaces = fullNamespace.split("."),
		  ns, 
		  index,
		  segment,
		  segmentLength;
		
		if(defaultRoot.namely){
			fn = defaultRoot.namely.root;
		}
		
		// Create or access the namespace object for each namespace segment.
		//
		// Example: "sample.api.util" creates
		//	 window.sample = {
		//		api:{
		//			util: {}	
		//		}
		//	 };
		for (index = 0, segmentLength = spaces.length; index < segmentLength; index++) {
			ns = spaces[index];
			if (typeof fn[ns] === "undefined") {
				fn[ns] = {};
			}
			
			fn = fn[ns];
		}
		
		// Assign the object for the namespace segment to the input function
		if (signature) {
			for (segment in signature) {
				fn[segment] = signature[segment];
			}
		}
		
		return fn;
	}
	
	// Parses a namespace and checks whether functions exist at each segment's section
	function parseNamespace (ns, instance) {
		var root = namely.root; 
		var segments = ns.split(".");
		var index;
		
		for (index = 0, segmentCount = segments.length; index < segmentCount; ++index) {
			root = root[segments[index]] = root[segments[index]] || (namely.is.defined(segments[index + 1]) 
			? {}
			: instance);
		}
		
		return root;
	}
	
	// Applies namespace parsing. Used by the namely namespace method.
	function parse() {
        return parseNamespace.apply({}, arguments);
    }
	
	namespace("namely", {
		root: window,
		
		// Set the host container to something other than
		// the global object.
		rebase: function(namespaceRoot){
			this.root = namespaceRoot;
			return this;
		},
		
		namespace: function(ns, initializer){
			// Create an object literal if the input object isn't defined.
            var namespaceFunction = initializer || function() {},
				index;
			
			// Define a constructor for the instance being created.
            var instance = function() {
                namespaceFunction.apply(this, arguments);
            };
            
			// Parese the namespace into it's delimited parts
			// using the newly created instance.
			parse(ns, instance);
           
            instance.appendMethods = namely.appendMethods;
			
            instance._name = ns.split(".").pop();
			instance._namespace = ns;
			namespaceFunction._methodName = "constructor";
			
			// Fluent method for assuming a super class' signature.
			instance.inherits = function(_super) {
                instance.prototype = new _super();
                
				return instance;
            };
			
			// Fluend method for adding mixin functionality. 
			instance.mixin = function (source) {
				for (index = 0; index < arguments.length; index++) {
                    var method = arguments[index];
					
					// Initialize the mixin with the instance itself.
					if(namely.is.defined(method)){
						method.call(instance, instance);
					}
				}
				
				// Preserves fluency.
				return instance;
			};
				
			// Creates object (class) instances with arguments
			instance.build = function(){
				return namely.build(instance._namespace, arguments);
			};
			
			// Build onto the current namespace object.  If 'this' is "demo.app"
			// and "handlers.validation" is passed in as the partial namespace,
			// a "demo.app.handlers.validation" object is created.
			instance.namespace = function(partialNamespace, initializer){
				return namely.namespace(this._namespace + "." + partialNamespace, initializer);
			};
						
			// Preserves fluency.
            return instance;
		},
		
		// Fluent method for adding methods to an object.  Assigned to the instance.appendMethods
		// above to provide a fluent syntax for method definition.
		appendMethods: function(methods){
			var fn;
			
			if(this._namespace){
				this.prototype._namespace = this._namespace;
			}
			
            for (fn in methods) {
                this.prototype[fn] = methods[fn];
				
                if (namely.is.func(methods[fn])) {
                    this.prototype[fn]._methodName = fn;
                }
            }
			
			// Preserves fluency.
            return this;
		},
		
		// Define a mixin object.  Unline a standard namespaced object, 
		// mixins are invoked with an instance of the target class.
		defineMixin: function(ns, mixer){
			namely.namespace(ns, mixer);
		},
	
		// Adds new methods to an existing object
		appendMethod: function(target, source) {
			var fn;
            for (fn in source) {
                target[fn] = source[fn];
            }
			
			// Preserves fluency.
            return target;
        },
		
		// Builds instances of objects for a given namespace. 
		// Supports optional constructor parameters.
		build: function(fullNamespace, args){
			var fn = namely.root;
			var spaces = fullNamespace.split("."),
			index, 
			ns;
				
			for (index = 0, segmentLength = spaces.length; index < segmentLength; index++) {
				ns = spaces[index];
				if (typeof fn[ns] === "undefined") {
					fn[ns] = {};
				}
				
				fn = fn[ns];
			}
			
			return namely.construct(fn, args);
		},
	
		// Builds object instances with optional constructor parameters
		construct: function(constructor, args){
			function fn() {
				return constructor.apply(this, args);
			}
			
			fn.prototype = constructor.prototype;
			return new fn();
		},

		// Check if a namespace exists without attempting to create objects
		exists: function(fullNamespace){
			var fn = namely.root,
			spaces = fullNamespace.split("."),
			ns, 
			index,
			segment,
			segmentLength;
		
			for (index = 0, segmentLength = spaces.length; index < segmentLength; index++) {
				ns = spaces[index];
				if (typeof fn[ns] === "undefined") {
					return false;
				}
				
				fn = fn[ns];
			}
		
			return true;
		}
	});
	
	// Convenience methods that also show off how namely uses itself
	// to do namespacing.  Eating our own dog food.
	namespace("namely.is", {
		defined: function(val) {
            return typeof val !== "undefined";
        },
		
		func: function(val){
			return typeof val === "function";
		}
	});
})(window);

Making JavaScript Namespaces Easy

The more web work my team does, the more we find ourselves cleaning up JavaScript messes left by our clients. One of the most common things we see is that developers don't understand global abatement. In other words, they don't use namespaces to keep their junk out of the global window object. So, I put together a little library that makes working with namespaces easy. It's based in part on how Twitter builds their components as well as how DOJO handles object building. It's called Namely.js and you can find it on here on GitHub. I got a bit of feedback initially from a few guys like Alex Sexton, and I think it's just about ready to call version 1 "fully baked." The goal is to make namespaces, class creation, "mixins," and modularity simple. I've posted a couple sample on jsFiddle, and there are a couple samples in the GitHub repo too. I'd really appreciate feedback! Please offer suggestions or comments on how you'd use it. jsFiddles Simple Demo Mixin Demo Advanced Demo GitHub repo