Nettuts+

Do You Exclusively Use webkit Prefixes?

Jeffrey Way — Fri, 10 Feb 2012 16:55:00 +0000

You’ve undoubtedly read about the vendor prefix web development drama of the week. If not, the W3C mailing lists have been on fire ever since it was discussed (and essentially announced) that Microsoft, Opera, and Firefox will begin to adopt and style webkit-prefixed properties. One of the reasons behind this decision is that we developers aren’t being responsible when coding our stylesheets; we’re applying too many webkit-specific properties, without considering other browsers.

Upon hearing this, I was left thinking to myself: is this really true?

Huh? What’s Going On?

To catch up on the hot drama, gives the following articles a read:

The basic gist is that non-webkit vendors are planning to recognize and style the -webkit prefix on a number of CSS3 properties. This is partially due to the fact, they say, that too many developers have been lazy, relying too much on Webkit, and not updating older projects (especially so for mobile designs). As these competing browsers see it, they have no choice; their hands are being forced.

It’s one thing to toy around with non-standard, Webkit-specific properties for fun (such as -webkit-text-stroke); we’ve even posted similar articles on Nettuts+. However, it’s another thing entirely if developers are, for example, exclusively using Webkit’s prefix when applying CSS gradients or transitions.

Prefixing Services

An often-touted excuse for not properly prefixing all CSS3 properties is that it can be considerably difficult to keep track of which prefixes are necessary for any given property. This is certainly true, but has our community not provided a variety of solutions?

Can I Use

To begin with the manual, look-up route, CanIUse.com is a fantastic reference when we need to determine if a particular browser supports a CSS3 property. If it is supported, but requires a prefix, CanIUse will tell you.

It’s an essential bookmark for all web developers (and is not limited to only CSS).

Compass

Compass is a framework for Sass that, among other things, will automatically handle the process of prefixing your CSS3 properties. For instance, to apply cross-browser, sanity-saving box-sizing to a website, with CSS, we’d write:

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}

However, when using Compass, we can simply include a mixin, like so:

* {
  @include box-sizing(border-box);
}

This way, designers never need to concern themselves with whether or not a particular browser provides a prefixed version of a new property; Compass does it for you.

Nettuts+ Prefixr

At Nettuts+, we’ve, also, provided an easy way to “auto-prefix.” Either use the website or its API in your favorite code editor to automatically filter through your stylesheet, and update any CSS3 properties that are missing a prefixed version. This can even be integrated into your build script, so that you only ever code using the official syntax.

The difference between Prefixr and Compass is that the former doesn’t require a preprocessor, if you prefer to code all CSS by hand. Simply feed Prefixr a stylesheet, and it’ll do the rest.

Prefix-Free

Lea Verou’s Prefix-Free is a neat solution as well. It’s unique in that it’s a JavaScript-based solution that dynamically determines which browser is being used, and then assigns the necessary prefixes to the stylesheet. Simply import Prefix-free, use the official syntax for the new CSS3 properties, and it’ll take care of the rest.

While some may view the fact that it depends on JavaScript to function as a disadvantage, a considerable bonus to this method is that your stylesheets become both smaller and more maintainable. For development purposes, it’s a great choice; however, for production, you might consider using a different tool, as there can be considerable performance consequences.

CSS3 Please

CSS3Please is a nifty service that provides copy-and-paste, cross-browser CSS. Adjust the values according to your needs, and you instantly have a snippet that will correctly target all applicable browsers.

Are You Not Using These?

If you’re a preprocessor user who prefers to create his or her own CSS3 mixins, then fantastic; however, otherwise, are some of you not using these services? If so, why not? It’s understandable that Firefox and Microsoft may feel forced into supporting the webkit prefix for some properties, despite their better judgment. Particularly for older and smaller projects, we’re not always great about updating the stylesheets as needed. This is precisely why prefixed properties have hung around for so long, despite the fact that properties like border-radius have long since been supported, unprefixed. Webkit doesn’t want to “break” these websites.

So what’s the deal? Are we not being responsible?

Christian Heilmann has launched a project, called Prefix the Web; it encourages developers to update GitHub projects to include all necessary browser prefixes. Unfortunately, the initiative may be too late. What do you think?

Using JavaScript’s Prototype with MVC

James Baker — Thu, 09 Feb 2012 20:01:41 +0000

In this article, we will review the process of using JavaScript, from an MVC-based perspective, to manipulate the DOM. More specifically, we’ll engineer our JavaScript objects, their properties and methods, and their instantiations parallel to the intended behavior of our Views (what the user sees).

Consider Your Views As Objects, Not As Pages

At any point in the development of a web page, we are using a language that naturally promotes either class-based development or object-based development. In strongly-typed languages like Java and C#, we are usually writing our views in classes – giving them state, scope, and context. When we are working with languages like PHP or newer view engines, like Razor for ASP.NET, our views may simply be markup (HTML/CSS) mixed with templating. However, this does not mean we have to change our perception on how the view behaves as its own stateful entity.

Within Views, we are primarily working with HTML, which consists of nested elements; these elements have attributes which describe what their semantic purpose is or how they appear when rendered. These elements then have children or parent elements that inherit/provide cascading (through CSS) and block/inline behaviors. These elements can naturally be viewed from an OOP (Object-Oriented Programming) perspective. Consider, for example, the following markup:

		div.container {
			border: 1px solid #333;
			padding: 5px;
			color: red;
		}

			<div class="container">
				<h2>About Our Company</h2>
			</div>

Result :

As you can see above, the header inherited its font color property from its parent container though the CSS behavior of cascading. This behavior is quite similar to the concept of inheritance in OOP. We can also see that the header is a child of the container, inheriting certain properties, based on the behavior of the element. When we see our elements from this perspective, we have a better definition of what we intend to do with our view elements and can encapsulate styles and functionality better.

Inside a view, we will have markup. However, this markup may have nested partial views like sidebars, a header, a footer, a right (or left) rail, and one or more content sections. All of these partial views should be viewed as their own entity, capable of having their own state, context, and scope.

“When you conceive your views and partial views as objects, it makes writing your client-side code much easier.”

Translating This Concept Into Your Styles and Scripts

Many developers tend to write JavaScript from a procedural or functional point of view, and often neglect to consider the natural tendencies offered in view-based development approaches and parallel instantiation (creating a new instance of the view as we create a new instance of a JavaScript object corresponding to that view) when working in MVC Frameworks. It’s often the case that I run into JavaScript files that are just one method after another. Though this behavior works, and is common, it is not very efficient for code maintenance, debugging, or extension of current or future code when you are working extensively with views.

To get away from this habit and begin writing better behavioral code, when you begin to lay out your View’s scripting and styles, follow these general rules:

Golden Rules of View-based JavaScript Development

Every view that is rendered from an action on a controller should have its own JavaScript object.
Every Partial View that is loaded inside a View should have its own JavaScript object.
Name your objects the same as your views (or partial views). This will make more sense for you and everyone else that touches your code.
Use Pascal case for all objects (i.e. About, Sidebar, etc.). Your views should already, so why not do the same for your JavaScript objects?
All constants of these objects should be stored in the constructor. This means if your view has properties that will be used in multiple methods, these methods can all access these properties.
All methods that will be called on a view (or partial view) should be bound to the prototype of the object that corresponds to that view.
All event bindings for the view (or partial view) should be contained within their own event binding’s method, which is placed on the prototype.

Consider the following diagram:

I generally create view-specific scripts and styles and then grab what I need from the main stylesheets and script libraries I’ve created that would be used on many views. This also reduces the amount of code that is used.

Creating View-based Objects

In this article, we will be laying out the structure for the About Us page on an MVC-based site. To start, we will create the structure as shown above in the previous diagram. From there, we will create an About object, and begin adding methods to the prototype. First, consider the following visual layout:

This is a very logical and commonly used layout for a webpage. We can segment our page into seperate visual objects. For each of these views, we can create a logical object that will correspond to it. I generally omit the repetitive information in the filename or classname that is used by MVC to determine the URI from the route and instead stick with something that is easy to keep consistent.

For page views, I generally call my JavaScript objects by the name of the view. Here is an example of my AboutView Object:

		// View Filename: AboutView.cs (.NET MVC 1.0), About.cshtml (.NET MVC 3.0), or AboutView.php (PHP)

		var About = function(pageTitle) {
			this.pageTitle = pageTitle;
			// binding events as soon as the object is instantiated
			this.bindEvents();
		};

In the above example, we created a JavaScript object in the function format, giving it the capacity to serve as an Object constructor for all methods called for the about view. By choosing this format, we can instantiate a new instance of this, just as we do with our view Server-Side (by saying new AboutView();). From here, we can assign properties and methods to this object. In order to assign methods to this object, we will need access to the object’s prototype.

JavaScript’s Prototype is your Friend

Developers are often thwarted by the elusiveness (and ambiguity) of JavaScript’s Object Prototype.

Developers are often thwarted by the elusiveness (and ambiguity) of JavaScript’s Object Prototype. For many, it can be confusing to use and understand and adds another dimension to coding. As JavaScript becomes more event-driven with HTML5, AJAX, and web 2.0 concepts, JavaScript tends to lean naturally to procedural development that is easy to develop but hard to maintain, scale, and replicate.

Think of the word Prototype as a misnomer for now. When I think Prototype, I think of a “rough draft” or a base for inheritance, but this isn’t exactly the case.

” In reality, the better perspective for Prototype would be the Object’s Pointer in memory.”

When we create an object, we then instantiate a new instance of it. When we do that, we create a place in memory that the object can be referenced (remember, Objects in JavaScript are reference types, not primitive types; creating another variable equal to that object and then changing its values will actually change the original object in the pointer). When we create an object, instantiate a new instance of it, and then modify its “Pointer,” or Prototype, we add fields and methods to that object in memory directly (obviously we want to add all of these things before instantiation).

Here’s an example of creating methods on the About object’s prototype:

		var About = function(pageTitle) {
			this.pageTitle = pageTitle;
			// binding events as soon as the object is instantiated
			this.bindEvents();
		};

		var About.prototype.bindEvents = function() {
			 // Current context: 'this' is the About object
			 // Place all your event bindings in one place and call them out
			 // in their own methods as needed.
			 $('ul.menu').on('click', 'li.search', $.proxy(this.toggleSearch, this));
		};

		var About.prototype.toggleSearch = function(e) {
			  //Toggle the search feature on the page
		};

As you can see above, we have contained the properties of the About object within the constructor, have created a single point of reference for binding events (in this case we are using jQuery to create the event bindings, but you can use any framework or JavaScript itself), and have placed the toggleSearch method on the prototype of the About object to contain that method to that object. We have also called the bindEvents() method in the object so that it is called on instantiation.

Now, consider the following code for the Sidebar Partial View:

		var pSidebar = function(pageTitle) {
			this.pageTitle = pageTitle;

			// call the bindEvents method on instantiation of the pSidebar object.
			// this will bind the events to the object
			this.bindEvents();
		};

		var pSidebar.prototype.bindEvents = function() {
			 //current context: 'this' is the Sidebar object
			 $('ul.menu').on('click', 'li.has-submenu', $.proxy(this.toggleSubMenu, this));
			 $('input#search').on('click', $.proxy(this.openSearch, this));
		};

		var pSidebar.prototype.toggleSubMenu = function(e) {
			// toggle the submenus
			// current context:  'this' is the pSidebar obj
		};

NOTE: I called the object pSidebar because this is a partial view, not a full view. This is my preference to distinguish between the two, but makes things clearer.

The beauty of using this approach is – we can use the same method names we used in the About object and we will have no conflicts. This is because these methods are bound to the object’s prototype itself, not the global namespace. This simplifies our code and allows for a sort of “templating” for future scripting.

Instantiate Only as Needed

Once you have created your objects, calling them is simple. No longer do you need to depend on your framework to fire events when your document is loaded or ready. Now, you can simply instantiate your object and its events will be bound and executed as needed. So, let’s instantiate our About object:

Inside your view where you would call your view specific scripts (dependent upon your templating language), simply call a new instance of your object and include the file as follows:

		<script src="/path/to/scripts/views/about.js"></script>
		<script>
			new About("About Us");
		</script>

As you can see, I passed in the page title for the view (which can be any argument for any need – even Model Data. This gives you excellent context over your model data and allows you to manipulate that data in JavaScript very easily.

Just like your About Object, calling your partial views is just as easy. I would highly recommend calling new instances of your partial view JavaScript objects within the object’s constructor – this ensures that you are only calling these as needed and that they are collectively in one place.

		var About = function(pageTitle) {
			this.pageTitle = pageTitle;

			//assigning a new instance of the Sidebar Partial View to be referenced later
			this.sidebar = new pSidebar(pageTitle);

			//NOTE:  If you don't need to reference a partial view after the fact,
			//you can simply instantiate an instance of it without assigning it within the object's constructor, as so:
			new pSidebar(pageTitle);

			//doing the same for the Partial Footer View
			this.footer = new pFooter();

			// binding events as soon as the object is instantiated
			this.bindEvents();
		};

As you can see, by referencing the Sidebar object as a local property of the About object, we now bind that instance, which is a very natural behavior – this instance is now the About Page’s Sidebar.

If you don’t need to reference a partial view after the fact, you can simply instantiate an instance of it without assigning it within the object’s constructor, as so:

		var About = function(pageTitle) {
			this.pageTitle = pageTitle;

			new pSidebar(pageTitle);

			// binding events as soon as the object is instantiated
			this.bindEvents();
		};

From here, all we need to do is add another script to our scripts called in our view:

		<script src="/path/to/scripts/views/about.js"></script>
		<script src="/path/to/scripts/partials/sidebar.js"></script>
		<script>
			new About("About Us");
		</script>

Why This Technique is Beneficial

Once this structure is in place, we can then tailor our JavaScript object to match our view and apply the needed methods to that object to maintain scope. By creating a view-parallel object and working off that object’s prototype, we see the following benefits:

The nomenclature makes it easier to navigate through code
We naturally namespace our objects, reducing the need for long method names and too much use of anonymous closure.
Little to no conflict in other code because our methods are on the prototype of the object, not on the global level
When instantiating our partial views within our View’s object constructor and assigning them to a local variable reference, we effectively create a locally bound copy of that Partial View’s object.
We have a firm definition of context and are able to use the keyword ‘this’ without worry.
Debugging becomes clear because all methods shown in the stack are bound in one place.

Conclusion

As the MVC Design Pattern continues to become more popular in the design world, the development of JavaScript Objects to accompany DOM Element manipulation will change to be more tailored towards view-specific and event-specific manipulation. By tailoring our JavaScript objects to instantiate in parallel with our Views, we can have a hand-in-hand stateful relationship between the two – one that is symantically in good taste, easy to step through, simple to maintain, and perfect for expansion as the view grows or changes, creating a permeable and expandable relationship between markup and scripting.

By utilizing an Object’s Prototype, we are able to maintain a precise context on our View’s scripting object and expand that object with a repetitive development frame-of-mind. We can then replicate this format through our partial views, saving us time, brain power, and risk of bugs and unexpected behavior.

Easy Script Loading with yepnope.js

Nikola Malich — Wed, 08 Feb 2012 14:00:34 +0000

Officially released by Alex Sexton and Ralph Holzmann in late February of 2011, the yepnope.js resource loader features asynchronous, conditional loading and preloading of both JavaScript and CSS resources. This makes managing dependant, conditional code a breeze.

March of 2011

This nifty resource loader, which is only 1.6KB minified and gzipped, is now bundled with Modernizer and is great for loading polyfills, preloading or “priming” the users cache, or as a simple asynchronous resources loader / filter!

For those of you unfamiliar with polyfills, they are essentially plugins, or shims, that enable the use of new or future technologies in older browsers, e.g. web sql databases, CSS3 transformations etc.

Yepnope now also supports a number of prefixes and filters, which, when prepended to the resource url, add another layer of fine tuning or customization to its core functionality. As if this weren’t already great, yepnope also provides you with a mechanism to define your own prefixes and filters. Let’s have a look at what yepnope.js can do!

Background – Asynchronous Script Loading

Before we delve into yepnope and its features, it’s important to understand a bit about how asynchronous script loading works, why it’s useful and how it’s different from vanilla script loading.

Asynchronous loaders remove the inherent blocking nature of a script.

Typically, JavaScript files loaded with the <script> tag, block the download of resources as well as the rendering of elements within the web page. So, even though most modern browsers tend to support the parallel download of JavaScript files, image downloads and page rendering still have to wait for the scripts to finish loading. In turn, the amount of time a user has to wait for the page to display increases.

This is where asynchronous loaders come in to play. Using one of several different load techniques, they remove the inherient blocking nature of a script, which allows for parallel downloading of both the JavaScripts and resources while not interfering with page rendering. In many cases, this can reduce – sometimes drastically – page load times.

Most loaders preserve the order in which scripts are executed while providing a callback for when the script is loaded and ready.

Asynchronous loading doesn’t come without its caveats, though. When scripts are loaded the traditional way, inline code is not parsed or executed until the external scripts are fully loaded, sequentially. This is not the case with asynchronous loading. In fact, inline scripts will usually parse / execute while the scripts are still being downloaded. In like manner, the browser is also downloading resources and rendering the page as the scripts are being loaded. Thus, we can arrive at situations where inline code, which is perhaps dependant on a script / library being loaded, is executed before its dependency is ready or before / after the DOM itself is ready. As such, most loaders preserve the order in which scripts are executed while providing a callback for when the script is loaded and ready. This allows us to run any dependant inline code as a callback, perhaps, within a DOM ready wrapper, where applicable.

Also, when dealing with a small or well optimized page, the DOM can actually be ready or even loaded before the scripts themselves have finished loading! So, if the page in question isn’t progressively enhanced, in that it relies heavily on JavaScript for styling, there may be a FOUC or flash of unstyled content. Similarly, users may even experience a brief FUBC or flash of unbehaviored content. It’s important to keep these things in mind whenever you use a script / resource loader.

Step 1 – The `yepnope` Test Object

The yepnope test object has seven basic properties, any of which are optional. This object includes the actual test, resources which will be loaded as a result of the test, resources which will be loaded regardless of the test as well as callbacks. Here’s a look at the yepnope test object’s props:

test:

A boolean representing the condition we want to test.
yep:

A string or an array / object of strings representing the url’s of resources to load if the test is truthy.
nope:

A string or an array / object of strings representing the url’s of resources to load if the test is falsey.
load:

A string or an array / object of strings representing the url’s of resources to load regardless of the test result.
both:

A string or an array / object of strings representing the url’s of resources to load regardless of the test result. This is, basically, syntactic sugar as its function is generally the same as the load function.
callback:

A function which will be called for each resource as it is loaded sequentially.
complete:

A function which will be called once when all of the resources have been loaded.

Now, to get an idea of the syntax, let’s take a look at the simplest possible use of yepnope: loading a single resource.

	yepnope('resources/someScript.js');

… or perhaps loading an array of resources.

	yepnope([
		'resources/someScript.js',
		'resources/someStyleSheet.css'
	]);

How about an object literal so that we can use named callbacks later?

	yepnope({
		'someScript'	 : 'resources/someScript.js',
		'someStyleSheet' : 'resources/someStyleSheet.css'
	});

Remember, these resources will be loaded asynchronously as the page is downloading and rendering.

Step 2 – Conditions – Testing for the Features of the Future!

So, we can load resources asynchronously! That’s great, but, what if some pages don’t require a certain resource? Or, what if a resource is only needed in a particular browser which doesn’t support a cutting edge new technology?

No problem! This is where yepnope’s underlying purpose comes into focus. Using the test property, we can conditionally load resources based on need. For example, let’s assume that the Modernizer library is loaded.

For those of you unfamiliar with Modernizer, it’s a nifty test suite used for detecting HTML5 and CSS3 feature support in browsers.

Modernizer adds appropriate classnames to the pages html element, representing the features supported and not supported, e.g. “js flexbox no-canvas” etc. Additionally, you can access each of Modernizer tests, which return boolean values, individually, within your code.

So, using Modernizer, let’s test for hashchange event support as well as session history support!

Here’s a look at our test:

	yepnope({
		test : Modernizr.hashchange && Modernizr.history
	});

This test will, of course, return true only if the browser supports both of these features.

Step 3 – Loading Resources Conditionally

With our test condition set, we’ll now define which resources to load based on the result of this test. In other words, if you only need to load a specific resource when the browser lacks a feature, or the test fails, you can simply define that resource in the nope clause. Conversely, you can load resources when the test passes, within the yep clause.

So, assuming the browser doesn’t support one of these two features, we’ll load up Ben Alman’s jQuery hashchange plugin, which enables hashchange and history support in older browsers which don’t support either of these features.

Let’s load up the hashchange plugin:

	yepnope({
		test : Modernizr.hashchange && Modernizr.history,
		nope : 'resources/jquery.ba-hashchange.js'
	});

In the above example, we won’t use the yep property as we’re only providing a shim should it be needed.

To illustrate the yep clause, though, let’s test for CSS3 transformation support and then load a stylesheet for browsers which support transformations and a vanilla stylesheet for browsers that don’t. Additionally, we’ll load a jQuery plugin which mimics CSS3 transformations as well.

Using both yep and nope:

	yepnope({
		test : Modernizr.csstransforms,
		yep	 : 'resources/cssTransform.css'
		nope : ['resources/noTransform.css', 'jQuery.pseudoTransforms.js']
	});

Note that both of these examples will load all resources asynchronously as the rest of the page downloads and renders!

Step 4 – Loading Resources Regardless of the Test Condition

Yepnope also provides a way to load resources independently of the test results by way of the the load property. The load function will always load any resource it’s fed, regardless of the test result. Similarly, the both prop, which is, again, essentially just syntactic sugar, also loads resources regardless of the test result, or more accurately, on either result.

Loading by default:

	yepnope({
		test : Modernizr.hashchange && Modernizr.history,
		nope : 'resources/jquery.ba-hashchange.js',
		load : 'resources/somethingWhichIsAlwaysLoaded.css',
	});

Loading on both conditions, syntactic sugar :

	yepnope({
		test : Modernizr.hashchange && Modernizr.history,
		nope : 'resources/jquery.ba-hashchange.js',
		both : 'resources/somethingWhichIsAlwaysLoaded.css',
	});

In both of the above examples, resources will be loaded, asynchronously, no matter what.

Step 5 – Callbacks – Dependent Code After the Load

As mentioned earlier, we can’t write in-line code in the usual manner if that code is dependant on one of the scripts being loaded. Thus, we’ll use yepnope’s callback function which fires once for each resource after it has finished loading. The callback function accepts three parameters which are assigned the following:

url

This string represent the url of the resource which was loaded
result

A boolean representing the status of the load.
key

If using an array or object of resources, this will represent the index or the property name of the file which was loaded

Let’s take a look at a simple callback with the hashchange plugin example from earlier. We’ll use jQuery’s bind method to bind a handler to the hashchange event of the window:

A simple callback:

	yepnope({
		test : Modernizr.hashchange && Modernizr.history,
		nope : 'resources/jquery.ba-hashchange.js',
		callback : function(url, result, key){

			$(function(){
				$(window).bind('hashchange', function(){
					console.info(location.hash);
				});
			});

		},
	});

Regardless of what state the DOM is in, this callback, which in this particular case is within a document ready wrapper, will fire as soon as the resource is loaded.

Let’s say, however, that we are loading more than one script and that we need to fire off a callback for each script as it loads. Specifying the code we need to run in the above manner would create a redundancy as the callback is fired each time a resource is loaded. Yepnope, however, provides a great way to handle callbacks for each resource, independently of any other callbacks.

By using an object literal to define the resources we are loading, we can reference each resource key, individually, within the callback.

Let’s take a look at an example where we load jQuery as well as the jQuery hashchange plugin, which is dependant on jQuery being loaded first. This time, however, we’ll use object literals!

	yepnope({
		test : Modernizr.hashchange && Modernizr.history,
		nope : {
			'jquery' : 'resources/jquery-1.5.1.min.js',
			'hashch' : 'resources/jquery.ba-hashchange.js'
		},
		callback : {
			'jquery' : function(url, result, key){
				console.info('I will fire only when the jquery script is loaded');
			},
			'hashch' : function(url, result, key){
				console.info('I will fire only when the hashchange script is loaded');

				// This code will be added to jQuerys DOM ready call stack
				$(function(){
					$(window).bind('hashchange', function(){
						console.info(location.hash);
					});
				});
			}
		}
	});

Using the above example as a reference, you can implement your own callbacks for each resource load in an orderly manner.

Step 6 – Complete – When all is Said and Done!

Lastly, we have the complete callback which is only called once, after all the resources have finished loading. So, for example, if you’re “bootstrapping” a web application and the code you need to run is dependent on all the files you’re loading, rather than specifying a callback for each resource, you would write your code within the complete callback so that it’s only fired once, after all its dependencies have loaded. Unlike the callback function, complete doesn’t take any parameters or have access to the url, result or key props.

The `complete` callback:

	yepnope({
		test : Modernizr.hashchange && Modernizr.history,
		nope : [
			'resources/jquery-1.5.1.min.js',
			'resources/jquery.ba-hashchange.js'
		],
		complete : function(){

			console.info('I will fire only once when both jquery and the hashchange script are loaded');

			// This code will be added to jQuerys DOM ready call stack
			$(function(){
				$(window).bind('hashchange', function(){
					console.info(location.hash);
				});
			});		

		}
	});

So, essentially, the complete callback is useful for anything which needs to be done once all the resources are loaded.

Step 7 – Yepnope Plugins, Prefixes and More!

Yepnope also provides us with another nifty little feature: prefixes and filters! The default prefixes provided by yepnope, which are always prepended to the beginning of a resource url, are used for defining a file as CSS, preloading a resource or targeting Internet Explorer or one of its versions, respectively. Let’s have a look:

css!

This prefix is used for forcing yepnope to treat a resource as a stylesheet. By default, yepnope treats .css files as stylesheets and everything else as a JavaScript file. So, if you’re serving up CSS dynamically, this prefix would force yepnope to treat that resource as a stylesheet.
```
	yepnope('css!styles.php?colorscheme=blue');
					
```
preload!

This prefix allows you to load / cache a resource without executing it.
```
	yepnope('preload!userInterface.js');
					
```
ie!

There may be circumstances where you need to load specific resources only if you’re working with Internet Explorer or a particular version of Internet Explorer. Thus, the ie prefixes help you target resource loading to ie or specific versions of it. Here’s a list of the supported ie prefixes where gt stands for “versions greater than” and lt stands for “versions less than”.
- Internet Explorer:
  ie!
- Internet Explorer by version number:
  ie5!, ie6!, ie7!, ie8!, ie9!
- Internet Explorer versions greater than:
  iegt5!, iegt6!, iegt7!, iegt8!
- Internet Explorer versions less than:
  ielt7!, ielt8!, ielt9!
All of these filters are chainable and serve as a sort of OR operator in that if one of them evaluates to true the resource will be loaded. So, should we need to target ie7 and ie8, we would simply prepend the appropriate filters to the url of the resource as follows:
```
	yepnope('ie7!ie8!userInterface.js');
					
```

Creating your own filters!

Should you ever need to, yepnope also provides the means with which to create your own filters and prefixes by way of the addFilter and addPrefix methods. Any filter or prefix you create is passed a resourceObject containing a number of useful props. Remember, though, to return the resourceObject as yepnope requires that you do so. Here’s a look at the resourceObject:

url:

The url of the resource being loaded.
prefixes

The array of applied prefixes.
autoCallback

A callback which runs after each script loads, separate from the others.
noexec

A boolean value which forces preload without execution.
instead

An advanced function which takes the same parameters as the loader.
forceJS

A boolean which forces the resource to be treated as javascript.
forceCSS

A boolean which forces the resource to be treated as a stylesheet.
bypass

A boolean which determines whether or not load the current resource

Let’s say, for example, you want the ability to toggle resource loading between your CDN and web server, on the fly. Can we do that, though!? Yep! Let’s create two prefixes, one for loading from the CDN and the other for loading from your web server.

	yepnope.addPrefix('local', function(resourceObj) {

		resourceObj.url = 'http://mySite/resources/' + resourceObj.url;
		return resourceObj;

	});

	yepnope.addPrefix('amazon', function(resourceObj) {

		resourceObj.url = 'http://pseudoRepository.s3.amazonaws.com/' + resourceObj.url;
		return resourceObj;

	});

Using these prefixes, we can now easily switch between our CDN and web server!

	yepnope([
		'local!css/typography.css',
		'amazon!defaultStyle.css'
	]);

Step 8 – A few Caveats

So, while maintaining a very small footprint, the yepnope conditional loader is power-packed with a number of useful features! There are, however, a few things you should be aware of before using it.

No document.write

As with any asynchronous loader, you can’t use document.write.
Internet Explorer less than 9 and callback execution

Internet Explorer versions less than nine don’t guarantee that callbacks run immediately after the related script fires.
Be careful with the DOM

Your script may be loaded and executed before the DOM is ready. So, if you’re manipulating the DOM, it’s advisable to use a DOM ready wrapper.
You should still combine where you can

Just because you’re using an asynchronous loader doesn’t mean that you shouldn’t combine your resources where you can.
Internet Explorer asynchronous load limits

Older versions of Internet Explorer can only load two resources from the same domain at the same time, where as other versions can load up to six. So, if you’re loading multiple files, consider using a sub-domain or CDN.

Conclusion – Thoughts on yepnope.js

All in all, I found yepnope to be a great utility! Not only does it support the asynchronous loading of both scripts and stylesheets, but it provides you with a nice, clean way to load HTML5 and CSS3 polyfills conditionally. The callback mechanism is well thought out and the ability to add your own prefixes and filters is just great! Performance wise, I found yepnope to be somewhat on par with other loaders, such as Getify Solutions’ LABjs and James Burke’s require.js. Obviously, each loader is different and suits a different need but if you haven’t yet, I encourage you to give yepnope.js a go!

Turbocharge Your Website With Memcached

Nicolas Sebban — Mon, 06 Feb 2012 17:49:19 +0000

Your latest PHP/MySQL website is finally online. And it’s awesome. But it’s not as fast as you want it to be, because of the many SQL queries running every time a page is generated. And above that, you have the feeling it will not scale well under heavy loads. And you are most likely right.

In this tutorial, we will see how you can greatly improve your website’s responsiveness, and help it scale to handle many simultaneous visitors, by implementing a cache layer between your code and your database. The good news is it is fairly easy, and can be done in a few minutes!

Introducing Memcached

Memcached is a high-performance in-memory data caching system.

Modern websites and web applications use a lot of data, and it’s not uncommon to count as many as 20 or even 30 SQL queries in a single page generation. Multiply this amount by a big number of visitors, and you often get an overloaded database, and pages that take seconds to be generated and sent to the client.

The tool we are going to use today to improve performance is called Memcached. It’s a high-performance in-memory data caching system. Or to put it another way, a very fast application that runs on your server and uses a fraction of the available memory to store an associative array of data. You can ask Memcached to do two things :

Store the value V with the key K
Retrieve the value V stored with the key K

This looks minimalist, but there’s a lot you can do thanks to these two features, as we will see very soon. In fact, Memcached can do a few more things, but they’re all tied to storing or retrieving data.

Installing Memcached on modern Linux distributions is quite simple :

Ubuntu : sudo apt-get install memcached
Gentoo : sudo emerge install memcached
Redhat : sudo yum install memcached

Once installed, Memcached will be automatically started every time your server boots. You can set the amount of memory reserved for Memcached, along with other options, in the configuration file (/etc/memcached.conf). 64Mb is allocated by default. The configuration file also contains the IP address and the port Memcached will be bound to. Default values (127.0.0.1 and 11211) are fine for a standard setup.

Accessing Memcached from PHP

We want to store and retrieve data from your PHP scripts. This means we are going to need a way to connect to Memcached from PHP. For that, we’re going to install the “Memcache” extension for PHP. As it is a PECL extension, it is very easy to install with the “pecl” by typing the following command :

sudo pecl install memcache

There are two PHP extensions related to Memcache : “Memcache” and “Memcached” (notice the “d” in the second one). Both are very similar, but the first one has a smaller footprint. In this tutorial, we will use the lighter Memcache. Once installed, this extension should be enabled and the Memcache-related functions should now be available to your PHP scripts.

How does Caching Work?

Our work here is based on the following assumptions:

retrieving data from the database takes resources (CPU + i/o)
retrieving data from the database takes time
we often retrieve the very same data over and over

We also want to store our data it in a way that allows us to retrieve it efficiently.

Generally speaking, we want to save our data in a persistent environment (our MySQL database for instance). But we also want to store our data it in a way that allows us to retrieve it efficiently, even if the storage is non-persistent. So in the end, we will have two copies of our data : one being stored in MySQL and the other being stored in Memcache.

Here are the steps we have to take to make this happen :

Every write operation (SQL INSERTs and UPDATEs) will be performed in both MySQL and Memcached
Every read operation (SQL SELECTs) will be performed in Memcached, and will fall back to MySQL in case of error

At this point, you probably see which parts of your code need to be modified : parts where you write data and parts where you read data. If your PHP code is well structured, you should have wrapped your data access code in functions or —even better— classes. If so, updating your site should be very fast. If not, you might have a little more work.

Connecting to our Cache Server

First of all, let’s create a connection to our Memcached server. Here is the code you should use, early in your PHP scripts :

	// Connection constants
	define('MEMCACHED_HOST', '127.0.0.1');
	define('MEMCACHED_PORT', '11211');

	// Connection creation
	$memcache = new Memcache;
	$cacheAvailable = $memcache->connect(MEMCACHED_HOST, MEMCACHED_PORT);

At this point, we have established a connection to our Memcache server. It may have failed, but we know so thanks to the $cacheAvailable variable.

Storing Data in our Cache

Let’s dive into data storage. We are going to take an example to make things clearer – an online shop. We have a script called edit_product.php whose purpose is to save a product’s data into our database. Each one of our products has the following information:

id
name
description
price

At some point in our edit_product.php code, we run an INSERT or UPDATE SQL query whose purpose is to write this product’s data to our MySQL database. It could look just like this :

	// We have validated and sanitized our data
	// We have escaped every risky char with mysql_real_escape_string()
	// Now we want to save it into our database
	$sql = "INSERT INTO products (id, name, description, price) VALUES ($id, '$name', '$description', $price)";
	$querySuccess = mysql_query($sql, $db);

As I mentioned above, we want to store our data both in our MySQL database and Memcached server. Here is how we are going to proceed :

	// We have validated and sanitized our data
	// We have escaped every risky char with mysql_real_escape_string()
	// Now we want to write them to our database :
	$sql = "INSERT INTO products (id, name, description, price) VALUES ($id, '$name', '$description', $price)";
	$querySuccess = mysql_query($sql, $db);

	// We have written our data into our database
	// Now let's store the product name, description and price into our cache
	// The method "set" tells our Memcached server to store the data associated to a specific key
	if ($querySuccess === true)
	{
		// We build a unique key that we can build again later
		// We will use the word 'product' plus our product's id (eg. "product_12")
		$key = 'product_' . $id;

		// We store an associative array containing our product data
		$product = array('id' => $id, 'name' => $name, 'description' => $description, 'price' => $price);

		// And we ask Memcached to store that data
		$memcache->set($key, $product);
	}

At this point, both our database and cache contain our product data.

Retrieving Data from our Cache

In case our cache is unavailable, we want to fall back to MySQL.

Now let’s retrieve our data. In the same example, let’s say our online shop has a script called product.php that displays a specific product. Accessing the page product.php?id=12 will display the product whose identifier is 12.

At some point in our product.php code, we run a SELECT SQL query whose purpose is to retrieve a product’s data from our MySQL database. It could look just like this :

	// We have validated and sanitized our data
	// We have escaped every risky char with mysql_real_escape_string()
	// Now we want to read from our database :
	$sql = "SELECT id, name, description, price FROM products WHERE id = " . $id;
	$queryResource = mysql_query($sql, $db);
	$product = mysql_fetch_assoc($queryResource);

As we said above, we want to retrieve our data from our Memcached server if possible, because it’s faster than getting it from MySQL. But in case our cache server can’t be reached, or if it simply doesn’t store the data we need, we want to fall back to MySQL. Here is how we are going to proceed :

	// Initialize our $product variable
	$product = null;

	// First we check that our cache server is available
	// The $cacheAvailable variable was initialized when we connected to our cache server
	if ($cacheAvailable == true)
	{
		// We build the key we associated to our product data
		$key = 'product_' . $id;

		// Now we get the data from our cache server
		$product = $memcache->get($key);
	}

	// do we need to access MySQL ?
	if (!$product)
	{
		// In case we do...because our $product variable is still null
		// We have validated and sanitized our data
		// We have escaped every risky char with mysql_real_escape_string()
		// Now we want to read from our database :
		$sql = "SELECT id, name, description, price FROM products WHERE id = " . $id;
		$queryResource = mysql_query($sql, $db);
		$product = mysql_fetch_assoc($queryResource);
	}

At this point, we have retrieved the data we needed. It was most likely done from our cache, but could be from MySQL if the cache was not filled or couldn’t be accessed for some reason.

Conclusion

We have seen how Memcached can be used to speed up your website and limit your database load. Our example above was based on PHP and MySQL because these techologies are widely deployed, but this principle is universal and works just the same with many other technologies : C/C++, Java, Python, Ruby, Perl, .Net, MySQL, Postgres, Erlang, Lua, Lisp, Cold Fusion, Ocaml and io are listed along with PHP on the official Memcached wiki.

As I briefly mentioned earlier, Memcached provides more features than the simple set and get methods we’ve seen above. Two useful additional features are increment/decrement updates, and the ability to set an expiration time to a specific stored data. Both are available in PHP, along with a few others, as you can see in the Memcache documentation.

Have fun implementing this on your websites, and enjoy the —free— performances improvement. Thank you so much for reading and please let me know if you have any questions in the comments below.

JavaScript Testing From Scratch: New on Premium

Andrew Burgess — Sun, 05 Feb 2012 20:30:53 +0000

This likely isn’t the first tutorial on testing that you’ve ever seen. But perhaps you’ve had your doubts about testing, and never took the time to read them. After all, it can seem like extra work for no reason.

This tutorial (with screencasts) intends to change your views. We’re going to start at the very beginning: what is testing and why should you do it? Then, we’ll talk briefly about writing testable code, before actually, you know, doing some testing! Let’s get to it.

Become a Premium member to read this tutorial/screencast, as well as hundreds of other advanced tutorials and screencasts from the Tuts+ network.

Tuts+ Premium

The recently re-launched Tuts+ Premium is a service that provides top-tier training in a variety of creative fields. Whether you prefer books, visual training, or in depth tutorials, we have you covered. While we unfortunately can’t afford to provide the service for free, it’s only $19 a month – less than you’d spend on dinner.

I hope you’ll consider checking it out! In addition to learning a huge variety of new skills, it’s also a fantastic way to say thank you to Nettuts+.

Best of Tuts+ in January 2012

David Appleyard — Thu, 02 Feb 2012 15:37:09 +0000

Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!

Psdtuts+ — Photoshop Tutorials

Create a Pimped Out Truck Using Photoshop and Point and Shoot Photos

Making modifications to your car or truck in Photoshop can be a lot of fun. In this tutorial we will demonstrate how to create a pimped out truck modification using photos taken with a simple point and shoot camera, with no advanced lighting setup. Let’s get started!

Visit Article
Create an Elephant Sundae Using Photo Manipulation Techniques

Photoshop is great at seamlessly combing photos to create an entirely new scene. In this tutorial we will create an elephant sundae using several stock photos. Let’s get started!

Visit Article
The Incredible Digital Art of Michael Oswald

In this article we will be featuring the work of Michael Oswald. Oswald is a digital artist with a unique style. His technique involves a combination of photo manipulation and digital painting techniques and the results are often stunning. Let’s take a look!

Visit Article

Nettuts+ — Web Development Tutorials

Sublime Text 2 Tips and Tricks (Updated)

Sublime Text 2 is one of the fastest and most incredible code editors to be released in a long time! With a community and plugin ecosystem as passionate as this one, it just might be impossible for any other editor to catch up. I’ll show you my favorite tips and tricks today.

Visit Article
An In Depth Analysis of HTML5 Multimedia and Accessibility

In this tutorial, youll learn how HTML5 helps to provide you with several ways of presenting your media content to users. As a result, youll increase the availability of your media to users with different
needs and requirements, making it more accessible.

Visit Article
Writing an API Wrapper in Ruby with TDD

Sooner or later, all developers are required to interact with an API. The most difficult part is always related to reliably testing the code we write, and, as we want to make sure that everything works properly, we continuosly run code that queries the API itself. This process is slow and inefficient, as we can experience network issues and data inconsistencies (the API results may change). Let’s review how we can avoid all of this effort with Ruby.

Visit Article

Vectortuts+ — Illustrator Tutorials

How to Illustrate a Microscope in Illustrator

The microscopes is a symbol of our civilization. Throughout this tutorial on how to illustrate a vector microscope you’ll take advantage of numerous Illustrator tools. You will learn how to use blends, art brushes and 3D rendering in Adobe Illustrator. Let’s get started!

Visit Article
Create a Picture Gallery in Illustrator

This work is a common project created together with Iaroslav Lazunov and Alexander Egupov. We have used 3D rendering, Blends, Opacity masks, making this three-dimensional stage with vanishing points. Learn every step in how to create this picture gallery work.

Visit Article
Important Resources for Learning How to Design Typefaces and Full Fonts

If you’re serious about creating a typeface design, then you’ll need some solid resources to get started. Learn effective typeface design workflows, how to take an initial spark of an idea from sketch, through Illustrator, into Fontlab, and then work your creation into a complete and custom font design. Here are multiple tutorials that show you how to create fonts in Illustrator and Fontlab, and you can also dive into articles that describe the foundation of quality type design with ample inspirational examples.

Visit Article

Webdesigntuts+ — Web Design Tutorials

A Beginner’s Guide to Pairing Fonts

Pairing fonts can be a challenge. Selecting two or more fonts which work well is one thing – selecting two which work together to achieve your typographic aims may have you reaching for the aspirin. Let’s see if we can alleviate any headaches. This guide will help you get started with font pairing for the web.

Visit Article
Design a Series of Smart Banner Ads in Photoshop

With the continuous growth of the Internet, online marketing has gotten bigger every year, and along with it, the advertising industry. One major factor in all this craziness is buying and selling ads.

Visit Article
Twitter Bootstrap 101: Introduction

Twitter’s Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and javascript tools, freely available to use in your next web design project. This video series aims to introduce you to Bootstrap; taking you all the way from downloading the resources, to building a complete Bootstrap-based website.

Visit Article

Phototuts+ — Photography Tutorials

HDR: Love it or Leave It?

There are few techniques in the photography world that divide our community as much as HDR. High dynamic range images, or HDR images, are a special type of composite image that combines several images at different exposure settings in order to create an image with increased dynamic range. The look provided by HDR is loved by many, and disliked by perhaps just as many. In today’s article, we’re going to take a better look at what HDR is, and get some opinions from photographers using HDR.

Visit Article
Inspiring Images of Cars and Motorcycles

Cars and motorbikes have been around for 100 years. Throughout the century, they have looked beautiful, satisfied our need for speed and become a symbol for thrill seeking. Today, we’ll look at photos ranging from brand new Ferrari’s to classic muscle cars.

Visit Article
Quick Tip: GIMP Portable – Take Your Editing Software With You

While a number of smartphones now offer photo editing basics (and a plethora of apps to expand things even more), the portability of a solid photo editing program has been hard to come by. Photoshop is a monster in regards to space requirements and its ability to work on any system where it is not expressively installed. Picasa can be fairly ‘lightweight’ but lacks many of the more advanced photo editing tools. So what about GIMP?

Visit Article

Cgtuts+ — Computer Graphics Tutorials

Modeling, UVmapping And Texturing A Low Poly T-Rex In Blender, Part 1

In the first tutorial of 2012 you’ll learn how to create an awesome low-poly dinosaur using Blender and Gimp. In today’s post artist Karan Shah will walk you through the entire modeling process step by step, and show you how to create an optimized model suitable for use in any game engine.

Visit Article
Create A Realistic Explosion In Maya Using Maya Fluids

Today you’ll learn to animate and shade fluids, understand all of the major attributes, learn how adding fields will allow you to gain better control over your simulation, and how to light and render the final animation.

Visit Article
SpeedTree To UDK: The Complete Workflow, Part 1 Creating The Tree

Due to the shear number of polygons often required to make believable 3D trees, creating realistic ones for use “in-game” can be a challenging, time consuming task. SpeedTree from IDV aims to change all that with it’s intuitive UI, ease of use and powerful toolset. Making believable trees and plants has literally never been easier!

Visit Article

Aetuts+ — After Effects Tutorials

Dominoes” CameraTracker and Cinema 4d Case Study – Day 1

In this tutorial we’re going to go over the principle functionality of CameraTracker from The Foundry, learning basic workflow, optimizing results, aligning the ground plane and exporting this data from After Effects to Cinema 4d.

Visit Article
Make An Amazing Motion Reactant Flame – Tuts+ Premium

Using just a few video elements of torch flames, we composite a burning hand by using a series of null objects and expressions to drive a time lagged displacement effect to simulate fire burning from a moving source. We use the Puppet tool for the distortion and throw on some tracked lighting effects and a displacement map for the Heat. This principle can be used to add realistic, fluid motion to any tracked object.

Visit Article
Key Tips To Becoming A Successful Video Freelancer

Youve watched thousands of tutorials. Youve put in countless hours and spent many late nights working on personal projects. Youve finally come to the conclusion that this may just be something you would like to do for a career. It can seem a little intimidating at first, because how are you going to convince someone to pay you to do this? Up until now youve been your only client. How do you get more? Im going to share my insight and experiences on how to successfully launch your freelance career this year!

Visit Article

Audiotuts+ — Audio & Production Tutorials

Free Professional Quality Audio Unit Plug-ins for Mac

Lets face it, software is expensive. While there are hundreds of free plug-ins available online, more often than not two problems will arise: One, most of them are for PCs leaving us Mac users feeling left out. Two, most of them are vary poor quality.

While I do agree with the saying, “The tools are only as good as the artist,” I also believe the opposite is true; that at some point the artist can only be as good as his tools are.

Visit Article
Quick Tip: Drum Processing Part 4: Tips and Tricks

This short series of quick tips is designed to give you a good overview of the audio processing techniques involved in creating a professional sounding drum beat for use in house, electro and breaks in Cubase. In this final part we will look at a few ways to add even more life to your drums.

Here is a sample of the type of beat you could expect to end up with at the end of this series of tips:

Visit Article
Quick Tip: Use the Doubling Technique for Quick Drums

It’s 3:30 in the afternoon when your phone rings. The head of a music library is calling and she needs your help. They have a commercial for an A-list client that needs music, and they want you to submit an entry. You’ll get $10,000 if you land the gig.

Visit Article

Activetuts+ — Flash, Flex & ActionScript Tutorials

Create a Microphone-Controlled Flash Game: Code

In this mini-series, we’re creating a spaceship game where the main control is via the microphone: shout louder to make the ship fly higher. So far, we’ve created all the required graphical elements for the game. Now, it’s time to work on our code. We’ve got a lot to do, so let’s get started!

Visit Article
Why Bother With jQuery? A Guide for (Former) Flash Developers

If you, like many Flash developers, are looking into using HTML5 for your web apps, you’ll almost certainly have come across jQuery. It’s a very popular JavaScript library, used by a large percentage of the most visited websites – but what’s all the fuss about, and should you use it?

Visit Article
An Introduction to the HTML5 Gamepad API

As HTML games begin to gradually increase in popularity, vendors are starting to introduce some exciting new APIs to make gaming that little bit sweeter for both us developers and our end players. One of these is the GamepadAPI, which allows you to connect your good old console gamepad into your computer and use it for browser based games, plug and play style. Let’s dive in!

Visit Article

Wptuts+ — WordPress Tutorials

The Rise of HTML5 in WordPress

2011 was a big year for the advancement of HTML5 in the web development community. It became pretty widely adopted, especially for the mobile web. There have been major projects that help developers use HTML5, like Paul Irish’s HTML5 Boilerplate (technically 2010, but popularized in 2011) and books galore!

Visit Article
Reusable Custom Meta Boxes Part 3: Extra Fields

In Part 1 and Part 2 of our custom meta box template tutorial series, we learned how to create a field array to loop through and create a custom meta box with your standard fields. Now let’s throw in a bit of JavaScript for some fancy, but highly useful fields.

Visit Article
The Ultimate Quickstart Guide to Speeding Up Your WordPress Site

Give your site a boost! Implement crucial optimization techniques that will improve not only your ySlow score, but your Google rank too. In this tutorial we will cover all aspects of W3 caching, ySlow, Google page speed, CSS sprites & htaccess rules, to achieve a high ySlow score like i have done on my blog.

Visit Article

Mobiletuts+ — Mobile Development Tutorials

iOS SDK: Creating an Awesome Carousel

Engage your users with stunning carousels. We’ll look at how easy and clean it can be to implement scrollable, interactive carousels in your iOS applications. With high configurability, you can have 3D, flat, rotating, and endless scrolling arrays for data, images, or buttons.

Visit Article
PhoneGap From Scratch: Introduction

Want to learn how to use PhoneGap, but don’t know where to get started? Join us as we put together “Sculder”, not only a tribute to an excellent science fiction TV series, but a fully-fledged native mobile application for the believer in you!

Visit Article
Mobile Flash is Far From Dead: Setting the Record Straight

In light of recent announcements from Adobe, there has been a lot of confusion over the state of the Flash Platform – specifically in regard to Flash content on mobile devices. This article seeks to clarify many of the misconceptions that exist by addressing the main points of confusion around these announcements regardless of the initial, monumental, and absolutely unbelievable blunders from failed public (and private) relations messaging and general marketing surrounding these announcements.

Visit Article

Learn jQuery in 30 Days

Jeffrey Way — Wed, 01 Feb 2012 04:47:14 +0000

Sometimes, it’s easy to become overwhelmed by how much there is to learn in this industry. If jQuery happens to be on your personal “need to learn soon” list, then I’m happy to announce my new course: “Learn jQuery in 30 Days”. If you’ll give me fifteen minutes a day for the next month, I’ll help you become a jQuery pro – and it’s free!

How Does it Work?

Sporadically, your skills will be put to the test, when you take the interactive quizzes!

Once you enroll (free) via email, each day, you’ll receive a 10-15 minute video lesson. As you might expect, every episode will build upon the one it proceeds, and, sporadically, your skills will be put to the test, when you take the interactive quizzes!

Along the way, you’ll learn the essentials (querying and manipulating the DOM), while incrementally working your way up to more advanced topics, such as jQuery’s AJAX methods and plugin development.

I worked particularly hard to make the process of picking up this new skill as easy as possible for everyone – even if you have very, very little JavaScript experience. So…do you want to join me?

Recently in Web Development (January ’12 Edition)

Siddharth — Mon, 30 Jan 2012 20:37:02 +0000

Web development is an industry that’s in a state of constant flux with technologies and jargon changing and mutating in an endless cycle. Not to mention the sheer deluge of information one has to process everyday.

In this series, published monthly, we’ll seek to rectify this by bringing you all the important news, announcements, releases and interesting discussions within the web development industry in a concise package. Join me after the jump for an extra dose of community content this month!

News and Releases

All of the important news in a single place: releases, announcements, companies bickering, security issues and all related hoopla.

‘HTML5 Please’ Helps Devs Make Informed Decisions

HTML5 is a beast of a spec with no one truly knowing everything there is to know. This shiny new site gives you all the information you need to use HTML5 features on your site, right now.

The site provides you with recommendations as to whether you should be using that specific facet of HTML5 right now and provides you with helpful links to polyfills, when necessary. Time saver!

HP Open Sources Enyo

Enyo is the engine that powers webOS. But what exactly is Enyo, you ask? Well, it’s a spiffy JavaScript framework that helps you build better performing, easier to maintain application.

I’m sure you’ve heard this plenty of times before so why don’t you check out the link below to find out for yourself?

Tech Giants Protest SOPA

Last month saw a figurative deluge of protests against SOPA. If you have no idea what SOPA is, hit the link below to find out.

While many services merely blackened out their logo, many others, including Wikipedia and Reddit, went the extra length and completely blacked out their sites. The proposed bill has been shelved but I predict that we’ll see another in a different skin soon…

Vim on a Tablet? Yes, Please!

I understand not everyone uses a tablet but the number is growing, quite rapidly. Wouldn’t it be great to SSH into your server to fix that pesky bug? Get a proper laptop, you say? I’m going to ask you to shush for now and go with the flow.

This month saw the release of Vim for the iOS platform. And no, it’s not a gimped version. From a quick run through, it seems that all the nice bits are still in there. If you’re in the intersection between developers and iPad users, let us know in the comments below as to whether it fits your needs.

Cut the Rope Ported to the Browser

I’m sure a lot of you have played this ridiculously cute ‘aww’ inducing game. What brings the game to our list is the fact that it has been ported to the browser by the newly cool Internet Explorer team.

And true to their current vision, they’ve ported it using JavaScript and the magic of HTML5. The link below leads you to a write up about the game development instead of the game itself to protect your productivity.

The Rails Tutorial, Version Two, Inches Towards Completion

‘The’ Rails tutorial? Indeed it is! Michael Hartl’s free has helped many learn the voodoo that is Rails and Michael is slowly updating his ebook for Ruby 1.9 and Rails 3.2

Thus far, six chapters are out with a chapter expected every week in the future. Make sure to check the site out!

Sublime Text 2 Piles on More Features with New Beta

Sublime Text 2 is a grand piece of work and every build only reaffirms this. This new build introduces a ton of features including auto complete, performance improvements, a new UI theme and a ton more.

New Kids on the Block

As web developers, the sheer amount of resources we can tap into increases exponentially with time. Here is just a quick look at some recently created resources that deserve your attention — everything from new books to scripts and frameworks.

wrap.js

My wrap.js plugin handles the nested require based on a config, and takes it to the next level by generating an actual AMD module for you during the build. So now you don’t have to write wrappers around scripts that you wish were modules, wrap.js does that for you.

Github Repo

Resumable.js

Resumables is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.
The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes.

Github Repo

IcedCoffeeScript

IcedCoffeeScript is a fork of CoffeeScript. It is superset of the CoffeeScript language. The iced interpreter is a drop-in replacement for the standard coffee interpreter since it will interpret all existing CoffeeScript programs. IcedCoffeeScript (ICS) adds two new keywords: await and defer. These additions simply and powerfully streamline asynchronous control flow, both on the server and on the browser.

Github Repo

Banking.js

Banking.JS retrieves all of your bank transactions similiar to how quickbooks does it. There is no need to depend on or pay for third party services. The bank statement results are in JSON or Valid XML and supports all financial institutions.

Github Repo

Roy

Roy is a small functional language that compiles to JavaScript. The main features include whitespace significant syntax, compile-time meta-programming, structural typing and monad syntax

Github Repo

jsgif

jsgif an animated GIF player bookmarklet with support for pausing, going frame-by-frame, playing in reverse, and other features that one might expect from a video player.

Github Repo

zip.js

zip.js offers a low-level API for writing and reading large zip files (up to 4GB) with a stable RAM use. It also offers a Filesystem API in order to manipulate zip file structure.

Github Repo

Seriously.js

Seriously.js is a real-time, node-based video compositor for the web. Inspired by professional software such as After Effects and Nuke, Seriously.js renders high-quality video effects, but allows them to be dynamic and interactive.

Github Repo

Best of the Internet

Often, you’re not really looking for a tutorial as much as you’re looking for a rant, an opinion or the musings of a tired developer or just something cool with absolutely zero real world use. This sections contains links to precisely those — interesting and cool stuff from the developer community.

The Five Stages of Hosting

Five common options for hosting a web business, ranked in decreasing order of ‘cloudiness’.

JavaScript Needs Blocks

Yehuda Katz talks about why he wants to see block lambdas in JavaScript. It’s a bit technical but well worth a read.

How I Learned Enough Ruby On Rails In 12 Weeks To Launch Freelancify

A Non-Developer explains how… I think you know already. Just click the darn link and move on.

Why are software development task estimations regularly off by a factor of 2-3?

Is it the developer’s fault? Is it a management issue? Bad methodology, or lack thereof? Or is it ingrained in the nature of the process?

Explanation for the ‘Wat’ Talk – CodeMash 2012

This StackOverflow question, along with the well written answers below, explore the code that was demonstrated in the talk mentioned in the title. Provides a quick look at the quirkier portions of JavaScript.

Why are column oriented databases so much faster than row oriented databases?

A quick little read that explains why, and how, different databases perform differently. There isn’t much jargon there and gets the point quite clearly.

PHP Mind Love

The link below points to some PHP code. Figure out what the output is and you get a cookie!

Testing Socket.IO With Mocha, Should.js and Socket.IO Client

A clean writeup that details how the author got all the named technologies working together.

What is the difference between semicolons in JavaScript and in Python?

Ever had to think about the question above? How exactly do they each handle semicolons and newlines? Read up below.

The Programming Djinn

The Least Boring Programming Book teaches Ruby programming to beginners in an unconventional way.

Non-Canvas Wizardry

I don’t really have much context to go on here so just give the link below a click. Pretty smooth stuff for something that’s not canvas or Flash based.

Wrapping Up

Well, that’s about all the major changes that happened in our industry lately.

Do you want us to cover more standard news? A focus on upcoming scripts maybe? Or just more interesting posts and discussions from the community? Let us know in the comments and thank you so much for reading!

Writing an API Wrapper in Ruby with TDD

Claudio Ortolina — Sat, 28 Jan 2012 23:18:32 +0000

Sooner or later, all developers are required to interact with an API. The most difficult part is always related to reliably testing the code we write, and, as we want to make sure that everything works properly, we continuosly run code that queries the API itself. This process is slow and inefficient, as we can experience network issues and data inconsistencies (the API results may change). Let’s review how we can avoid all of this effort with Ruby.

Our Goal

“Flow is essential: write the tests, run them and see them fail, then write the minimal implementation code to make them pass. Once they all do, refactor if needed.”

Our goal is simple: write a small wrapper around the Dribbble API to retrieve information about a user (called ‘player’ in the Dribbble world).
As we will be using Ruby, we will also follow a TDD approach: if you’re not familiar with this technique, Nettuts+ has a good primer on RSpec you can read. In a nutshell, we will write tests before writing our code implementation, making it easier to spot bugs and to achieve a high code quality. Flow is essential: write the tests, run them and see them fail, then write the minimal implementation code to make them pass. Once they all do, refactor if needed.

The API

The Dribbble API is fairly straightforward. At the time of this it supports only GET requests and doesn’t require authentication: an ideal candidate for our tutorial. Moreover, it offers a 60 calls per minute limit, a restriction that perfectly shows why working with APIs require a smart approach.

Key Concepts

This tutorial needs to assume that you have some familiarity with testing concepts: fixtures, mocks, expectations. Testing is an important topic (especially in the Ruby community) and even if you are not a Rubyist, I’d encourage you to dig deeper into the matter and to search for equivalent tools for your everyday language. You may want to read “The RSpec book” by David Chelimsky et al., an excellent primer on Behavior Driven Development.

To summarize here, here are three key concepts you must know:

Mock: also called double, a mock is “an object that stands in for another object in an example”. This means that if we want to test the interaction between an object and another, we can mock the second one. In this tutorial, we will mock the Dribbble API, as to test our code we don’t need the API, itself, but something that behaves like it and exposes the same interface.
Fixture: a dataset that recreates a specific state in the system. A fixture can be used to create the needed data to test a piece of logic.
Expectation: a test example written the from the point of view of the result we want to achieve.

Our Tools

“As a general practice, run tests every time you update them.”

WebMock is a Ruby mocking library that is used to mock (or stub) http requests. In other words, it allows you to simulate any HTTP request without actually making one. The primary advantage to this is being able to develop and test against any HTTP service without needing the service itself and without incurring in related issues (like API limits, IP restrictions and such).
VCR is a complementary tool that records any real http request and creates a fixture, a file that contains all the needed data to replicate that request without performing it again. We will configure it to use WebMock to do that. In other words, our tests will interact with the real Dribbble API just once: after that, WebMock will stub all the requests thanks to the data recorded by VCR. We will have a perfect replica of the Dribbble API responses recorded locally. In addition, WebMock will let us test edge cases (like the request timing out) easily and consistently. A wonderful consequence of our setup is that everything will be extremely fast.

As for unit testing, we will be using Minitest. It’s a fast and simple unit testing library that also supports expectations in the RSpec fashion. It offers a smaller feature set, but I find that this actually encourages and pushes you to separate your logic into small, testable methods. Minitest is part of Ruby 1.9, so if you’re using it (I hope so) you don’t need to install it. On Ruby 1.8, it’s only a matter of gem install minitest.

I will be using Ruby 1.9.3: if you don’t, you will probably encounter some issues related to require_relative, but I’ve included fallback code in a comment right below it. As a general practice, you should run tests every time you update them, even if I won’t be mentioning this step explicitly throughout the tutorial.

Setup

We will use the conventional /lib and /spec folder structure to organize our code. As for the name of our library, we’ll call it Dish, following the Dribbble convention of using basketball related terms.

The Gemfile will contain all our dependencies, albeit they’re quite small.

source :rubygems

gem 'httparty'

group :test do
  gem 'webmock'
  gem 'vcr'
  gem 'turn'
  gem 'rake'
end

Httparty is an easy to use gem to handle HTTP requests; it will be the core of our library. In the test group, we will also add Turn to change the output of our tests to be more descriptive and to support color.

The /lib and /spec folders have a symmetrical structure: for every file contained in the /lib/dish folder, there should be a file inside /spec/dish with the same name and the ‘_spec’ suffix.

Let’s start by creating a /lib/dish.rb file and add the following code:

require "httparty"
Dir[File.dirname(__FILE__) + '/dish/*.rb'].each do |file|
  require file
end

It doesn’t do much: it requires ‘httparty’ and then iterates over every .rb file inside /lib/dish to require it. With this file in place, we will be able to add any functionality inside separate files in /lib/dish and have it automatically loaded just by requiring this single file.

Let’s move to the /spec folder. Here’s the content of the spec_helper.rb file.

#we need the actual library file
require_relative '../lib/dish'
# For Ruby < 1.9.3, use this instead of require_relative
# require(File.expand_path('../../lib/dish', __FILE__))

#dependencies
require 'minitest/autorun'
require 'webmock/minitest'
require 'vcr'
require 'turn'

Turn.config do |c|
 # :outline  - turn's original case/test outline mode [default]
 c.format  = :outline
 # turn on invoke/execute tracing, enable full backtrace
 c.trace   = true
 # use humanized test names (works only with :outline format)
 c.natural = true
end

#VCR config
VCR.config do |c|
  c.cassette_library_dir = 'spec/fixtures/dish_cassettes'
  c.stub_with :webmock
end

There’s quite a few things here worth noting, so let’s break it piece by piece:

At first, we require the main lib file for our app, making the code we want to test available to the test suite. The require_relative statement is a Ruby 1.9.3 addition.
We then require all the library dependencies: minitest/autorun includes all the expectations we will be using, webmock/minitest adds the needed bindings between the two libraries, while vcr and turn are pretty self-explanatory.
The Turn config block merely needs to tweak our test output. We will use the outline format, where we can see the description of our specs.
The VCR config blocks tells VCR to store the requests into a fixture folder (note the relative path) and to use WebMock as a stubbing library (VCR supports some other ones).

Last, but not least, the Rakefile that contains some support code:

require 'rake/testtask'

Rake::TestTask.new do |t|
  t.test_files = FileList['spec/lib/dish/*_spec.rb']
  t.verbose = true
end

task :default => :test

The rake/testtask library includes a TestTask class that is useful to set the location of our test files. From now on, to run our specs, we will only type rake from the library root directory.

As a way to test our configuration, let’s add the following code to /lib/dish/player.rb:

module Dish
  class Player
  end
end

Then /spec/lib/dish/player_spec.rb:

require_relative '../../spec_helper'
# For Ruby < 1.9.3, use this instead of require_relative
# require (File.expand_path('./../../../spec_helper', __FILE__))

describe Dish::Player do

  it "must work" do
    "Yay!".must_be_instance_of String
  end

end

Running rake should give you one test passing and no errors. This test is by no means useful for our project, yet it implicitly verifies that our library file structure is in place (the describe block would throw an error if the Dish::Player module was not loaded).

First Specs

To work properly, Dish requires the Httparty modules and the correct base_uri, i.e. the base url of the Dribbble API. Let’s write the relevant tests for these requirements in player_spec.rb:

...
describe Dish::Player do

  describe "default attributes" do

    it "must include httparty methods" do
      Dish::Player.must_include HTTParty
    end

    it "must have the base url set to the Dribble API endpoint" do
      Dish::Player.base_uri.must_equal 'http://api.dribbble.com'
    end

  end

end

As you can see, Minitest expectations are self-explanatory, especially if you are an RSpec user: the biggest difference is wording, where Minitest prefers “must/wont” to “should/should_not”.

Running these tests will show one error and one failure. To have them pass, let’s add our first lines of implementation code to player.rb:

module Dish

  class Player

    include HTTParty

    base_uri 'http://api.dribbble.com'

  end

end

Running rake again should show the two specs passing. Now our Player class has access to all Httparty class methods, like get or post.

Recording our First Request

As we will be working on the Player class, we will need to have API data for a player. The Dribbble API documentation page shows that the endpoint to get data about a specific player is http://api.dribbble.com/players/:id

As in typical Rails fashion, :id is either the id or the username of a specific player. We will be using simplebits, the username of Dan Cederholm, one of the Dribbble founders.

To record the request with VCR, let’s update our player_spec.rb file by adding the following describe block to the spec, right after the first one:

  ...

  describe "GET profile" do

  before do
    VCR.insert_cassette 'player', :record => :new_episodes
  end

  after do
    VCR.eject_cassette
  end

  it "records the fixture" do
    Dish::Player.get('/players/simplebits')
  end

  end

end

After running rake, you can verify that the fixture has been created. From now on, all our tests will be completely network independent.

The before block is used to execute a specific portion of code before every expectation: we use it to add the VCR macro used to record a fixture that we will call ‘player’. This will create a player.yml file under spec/fixtures/dish_cassettes. The :record option is set to record all new requests once and replay them on every subsequent, identical request. As a proof of concept, we can add a spec whose only aim is to record a fixture for simplebits’s profile. The after directive tells VCR to remove the cassette after the tests, making sure that everything is properly isolated. The get method on the Player class is made available, thanks to the inclusion of the Httparty module.

After running rake, you can verify that the fixture has been created. From now on, all our tests will be completely network independent.

Getting the Player Profile

Every Dribbble user has a profile that contains a pretty extensive amount of data. Let’s think about how we would like our library to be when actually used: this is a useful way to flesh out our DSL will work. Here’s what we want to achieve:

simplebits = Dish::Player.new('simplebits')
simplebits.profile
  => #returns a hash with all the data from the API
simplebits.username
  => 'simplebits'
simplebits.id
  => 1
simplebits.shots_count
  => 157

Simple and effective: we want to instantiate a Player by using its username and then get access to its data by calling methods on the instance that map to the attributes returned by the API. We need to be consistent with the API itself.

Let’s tackle one thing at a time and write some tests related to getting the player data from the API. We can modify our "GET profile" block to have:

describe "GET profile" do

  let(:player) { Dish::Player.new }

  before do
    VCR.insert_cassette 'player', :record => :new_episodes
  end

  after do
    VCR.eject_cassette
  end

  it "must have a profile method" do
    player.must_respond_to :profile
  end

  it "must parse the api response from JSON to Hash" do
    player.profile.must_be_instance_of Hash
  end

  it "must perform the request and get the data" do
    player.profile["username"].must_equal 'simplebits'
  end

end

The let directive at the top creates a Dish::Player instance available in the expectations. Next, we want to make sure that our player has got a profile method whose value is a hash representing the data from the API. As a last step, we test a sample key (the username) to make sure that we actually perform the request.

Note that we’re not yet handling how to set the username, as this is a further step. The minimal implementation required is the following:

...
class Player

  include HTTParty

  base_uri 'http://api.dribbble.com'

  def profile
    self.class.get '/players/simplebits'
  end

end
...

A very little amount of code: we’re just wrapping a get call in the profile method. We then pass the hardcoded path to retrieve simplebits’s data, data that we had already stored thanks to VCR.

All our tests should be passing.

Setting the Username

Now that we have a working profile function, we can take care of the username. Here are the relevant specs:

describe "default instance attributes" do

  let(:player) { Dish::Player.new('simplebits') }

  it "must have an id attribute" do
    player.must_respond_to :username
  end

  it "must have the right id" do
    player.username.must_equal 'simplebits'
  end

end

describe "GET profile" do

  let(:player) { Dish::Player.new('simplebits') }

  before do
    VCR.insert_cassette 'base', :record => :new_episodes
  end

  after do
    VCR.eject_cassette
  end

  it "must have a profile method" do
    player.must_respond_to :profile
  end

  it "must parse the api response from JSON to Hash" do
    player.profile.must_be_instance_of Hash
  end

  it "must get the right profile" do
    player.profile["username"].must_equal "simplebits"
  end

end

We’ve added a new describe block to check the username we’re going to add and simply amended the player initialization in the GET profile block to reflect the DSL we want to have. Running the specs now will reveal many errors, as our Player class doesn’t accept arguments when initialized (for now).

Implementation is very straightforward:

...
class Player

  attr_accessor :username

  include HTTParty

  base_uri 'http://api.dribbble.com'

  def initialize(username)
    self.username = username
  end

  def profile
    self.class.get "/players/#{self.username}"
  end

end
...

The initialize method gets a username that gets stored inside the class thanks to the attr_accessor method added above. We then change the profile method to interpolate the username attribute.

We should get all our tests passing once again.

Dynamic Attributes

At a basic level, our lib is in pretty good shape. As profile is a Hash, we could stop here and already use it by passing the key of the attribute we want to get the value for. Our goal, however, is to create an easy to use DSL that has a method for each attribute.

Let’s think about what we need to achieve. Let’s assume we have a player instance and stub how it would work:

player.username
  => 'simplebits'
player.shots_count
  => 157
player.foo_attribute
  => NoMethodError

Let’s translate this into specs and add them to the GET profile block:

...
describe "dynamic attributes" do

  before do
    player.profile
  end

  it "must return the attribute value if present in profile" do
    player.id.must_equal 1
  end

  it "must raise method missing if attribute is not present" do
    lambda { player.foo_attribute }.must_raise NoMethodError
  end

end
...

We already have a spec for username, so we don’t need to add another one. Note a few things:

we explicitly call player.profile in a before block, otherwise it will be nil when we try to get the attribute value.
to test that foo_attribute raises an exception, we need to wrap it in a lambda and check that it raises the expected error.
we test that id equals 1, as we know that that is the expected value (this is a purely data-dependent test).

Implementation-wise, we could define a series of methods to access the profile hash, yet this would create a lot of duplicated logic. Moreover, the would rely on the API result to always have the same keys.

“We will rely on method_missing to handle this cases and ‘generate’ all those methods on the fly.”

Instead, we will rely on method_missing to handle this cases and ‘generate’ all those methods on the fly. But what does this mean? Without going into too much metaprogramming, we can simply say that every time we call a method not present on the object, Ruby raises a NoMethodError by using method_missing. By redefining this very method inside a class, we can modify its behaviour.

In our case, we will intercept the method_missing call, verify that the method name that has been called is a key in the profile hash and in case of positive result, return the hash value for that key. If not, we will call super to raise a standard NoMethodError: this is needed to make sure that our library behaves exactly the way any other library would do. In other words, we want to guarantee the least possible surprise.

Let’s add the following code to the Player class:

def method_missing(name, *args, &block)
  if profile.has_key?(name.to_s)
    profile[name.to_s]
  else
    super
  end
end

The code does exactly what described above. If you now run the specs, you should have them all pass. I’d encorage you to add some more to the spec files for some other attribute, like shots_count.

This implementation, however, is not really idiomatic Ruby. It works, but it can be streamlined into a ternary operator, a condensed form of an if-else conditional. It can be rewritten as:

def method_missing(name, *args, &block)
  profile.has_key?(name.to_s) ? profile[name.to_s] : super
end

It’s not just a matter of length, but also a matter of consistency and shared conventions between developers. Browsing source code of Ruby gems and libraries is a good way to get accustomed to these conventions.

Caching

As a final step, we want to make sure that our library is efficient. It should not make any more requests than needed and possibly cache data internally. Once again, let’s think about how we could use it:

player.profile
  => performs the request and returns a Hash
player.profile
  => returns the same hash
player.profile(true)
  => forces the reload of the http request and then returns the hash (with data changes if necessary)

How can we test this? We can by using WebMock to enable and disable network connections to the API endpoint. Even if we’re using VCR fixtures, WebMock can simulate a network Timeout or a different response to the server. In our case, we can test caching by getting the profile once and then disabling the network. By calling player.profile again we should see the same data, while by calling player.profile(true) we should get a Timeout::Error, as the library would try to connect to the (disabled) API endpoint.

Let’s add another block to the player_spec.rb file, right after dynamic attribute generation:

describe "caching" do

  # we use Webmock to disable the network connection after
  # fetching the profile
  before do
    player.profile
    stub_request(:any, /api.dribbble.com/).to_timeout
  end

  it "must cache the profile" do
    player.profile.must_be_instance_of Hash
  end

  it "must refresh the profile if forced" do
    lambda { player.profile(true) }.must_raise Timeout::Error
  end

end

The stub_request method intercepts all calls to the API endpoint and simulates a timeout, raising the expected Timeout::Error. As we did before, we test the presence of this error in a lambda.

Implementation can be tricky, so we’ll split it into two steps. Firstly, let’s move the actual http request to a private method:

...
def profile
  get_profile
end

...

private

def get_profile
  self.class.get("/players/#{self.username}")
end
...

This will not get our specs passing, as we’re not caching the result of get_profile. To do that, let’s change the profile method:

...
def profile
  @profile ||= get_profile
end
...

We will store the result hash into an instance variable. Also note the ||= operator, whose presence makes sure that get_profile is run only if @profile returns a falsy value (like nil).

Next we can add the forced reload directive:

...
def profile(force = false)
  force ? @profile = get_profile : @profile ||= get_profile
end
...

We’re using a ternary again: if force is false, we perform get_profile and cache it, if not, we use the logic written in the previous version of this method (i.e. performing the request only if we don’t have already an hash).

Our specs should be green now and this is also the end of our tutorial.

Wrapping Up

Our purpose in this tutorial was to write a small and efficient library to interact with the Dribbble API; we’ve laid the foundation for this to happen. Most of the logic we’ve written can be abstracted and reused to access all the other endpoints. Minitest, WebMock and VCR have proven to be valuable tools to help us shape our code.

We do, however, need to be aware of a small caveat: VCR can become a double-edged sword, as our tests can become too much data-dependent. If, for any reason, the API we’re building against changes without any visible sign (like a version number), we may risk having our tests perfectly working with a dataset, which is no longer relevant. In that case, removing and recreating the fixture is the best way to make sure that our code still works as expected.

24 Extremely Useful Ruby Gems for Web Development

Siddharth — Thu, 26 Jan 2012 21:38:56 +0000

One of the nicer things about developing on the Ruby platform is the sheer amount of meticulously categorized, highly reusable code wrapped up in the form of aptly named ‘gems’.

I’m sure you’ve heard of popular frameworks like Sinatra or the super popular Rails that ship as gems but you’re missing an entire spectrum of others that handle issues at a much lower level. Start using these and watch your productivity shoot through the roof!

A Quick Note

I’m well aware that some of the gems listed here have Rails, or parts of Rails, as a dependency. That doesn’t mean that they are any less useful or need to be sneered at.

CarrierWave

Upload files in your Ruby applications, map them to a range of ORMs, store them on different backends. It works well with Rack based web applications, such as Ruby on Rails.

Related reading

Kaminari

Kaminari is a Scope & Engine based, clean, powerful, customizable and sophisticated paginator. Kaminari supports multiple ORMs (ActiveRecord, Mongoid, MongoMapper) multiple web frameworks (Rails, Sinatra), and multiple template engines (ERB, Haml).

Related reading

HAML

Haml (HTML Abstraction Markup Language) is a layer on top of XHTML or XML that’s designed to express the structure of XHTML or XML documents in a non-repetitive, elegant, easy way, using indentation rather than closing tags and allowing Ruby to be embedded with ease. It was originally envisioned as a plugin for Ruby on Rails, but it can function as a stand-alone templating engine.

Related reading

Authlogic

A simple, unobtrusive model based Ruby authentication solution. Authlogic is very flexible, it has a strong public API and a plethora of hooks to allow you to modify behavior and extend it.

Related reading

Shoulda

Shoulda is a gem that allows you to create more understandable tests for your Ruby application. Shoulda allows you to provide context to your tests enabling you to categorize tests according to a specific feature or scenario you’re testing.

Related reading

factory_girl

factory_girl provides a framework and DSL for defining and using factories – less error-prone, more explicit, and all-around easier to work with than fixtures. It has straightforward definition syntax, support for multiple build strategies (saved instances, unsaved instances, attribute hashes, and stubbed objects), and support for multiple factories for the same class (user, admin_user, and so on), including factory inheritance.

Related reading

RMagick

RMagick is an interface between the Ruby programming language and the ImageMagick and GraphicsMagick image processing libraries.

Related reading

Cancan

CanCan is an authorization library for Ruby on Rails which restricts what resources a given user is allowed to access and is decoupled from user roles. All permissions are stored in a single location and not duplicated across controllers, views, and database queries.

Related reading

Nokogiri

Nokogiri is an HTML, XML, SAX, and Reader parser. Among Nokogiri’s many features is the ability to search documents via XPath or CSS3 selectors. Nokogiri parses and searches XML/HTML very quickly, and also has correctly implemented CSS3 selector support as well as XPath support.

Related reading

SASS

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Related reading

Formtastic

Formtastic is a Rails FormBuilder DSL (with some other goodies) to make it far easier to create beautiful, semantically rich, syntactically awesome, readily stylable and wonderfully accessible HTML forms in your Rails applications.

Related reading

Capistrano

Capistrano is a utility and framework for executing commands in parallel on multiple remote machines, via SSH. It uses a simple DSL (borrowed in part from Rake) that allows you to define tasks, which may be applied to machines in certain roles. It also supports tunneling connections via some gateway machine to allow operations to be performed behind VPN’s and firewalls.

Related reading

Omniauth

OmniAuth is a Ruby authentication framework that provides a standardized interface to many different authentication providers such as Facebook, OpenID, and even traditional username and password.

Related reading

Bundler

Bundler is a tool that manages gem dependencies for your ruby application. It takes a gem manifest file and is able to fetch, download, and install the gems and all child dependencies specified in this manifest. It can manage any update to the gem manifest file and update the bundle’s gems accordingly. It also lets you run any ruby code in context of the bundle’s gem environment.

Related reading

resque

Resque (pronounced like “rescue”) is a Redis-backed library for creating background jobs, placing those jobs on multiple queues, and processing them later. Resque is heavily inspired by DelayedJob.

Related reading

Jammit

Jammit is an industrial strength asset packaging library for Rails, providing both the CSS and JavaScript concatenation and compression that you’d expect, as well as YUI Compressor and Closure Compiler compatibility, ahead-of-time gzipping, built-in JavaScript template support, and optional Data-URI / MHTML image embedding.

Related reading

capybara

Capybara helps you test Rails and Rack applications by simulating how a real user would interact with your app. It is agnostic about the driver running your tests and comes with Rack::Test and Selenium support built in.

Related reading

Active Merchant

Active Merchant is an extraction from the e-commerce system Shopify. Shopify’s requirements for a simple and unified API to access dozens of different payment gateways with very different internal APIs was the chief principle in designing the library. It was developed for usage in Ruby on Rails web applications and integrates seamlessly as a plugin but it also works excellently as a stand alone library.

Related reading

eventmachine

EventMachine implements a fast, single-threaded engine for arbitrary networkcommunications. It’s extremely easy to use in Ruby. EventMachine wraps all interactions with IP sockets, allowing programs to concentrate on the implementation of network protocols. It can be used to create both network servers and clients.

Related reading

mustache

Inspired by ctemplate, Mustache is a framework-agnostic way to renderlogic-free views.As ctemplates says, “It emphasizes separating logic from presentation:it is impossible to embed application logic in this templatelanguage.

Related reading

Github repo

Passenger

Phusion Passenger™ — a.k.a. mod_rails or mod_rack — makes deployment of Ruby web applications, such as those built on the revolutionary Ruby on Rails web framework, a breeze.

Related reading

Chef

Chef is a system integration framework designed to bring the benefits of configuration management to your entire infrastructure. With Chef, you can manage your servers by writing code, not by running commands.

Related reading

Thinking Sphinx

A concise and easy-to-use Ruby library that connects ActiveRecord to the Sphinx search daemon, managing configuration, indexing and searching.

Related reading

Wrapping Up

So those were some of the awesome gems I’ve found extremely useful when I’m whipping up a web app in Ruby. I’m a 100% sure I’m missing a metric butt load of others though. Let me know about your favorite gems in the comments below and thank you so much for reading!

Nettuts+

Do You Exclusively Use webkit Prefixes?

Huh? What’s Going On?

Prefixing Services

Are You Not Using These?

Using JavaScript’s Prototype with MVC

Consider Your Views As Objects, Not As Pages

Result :

Translating This Concept Into Your Styles and Scripts

Golden Rules of View-based JavaScript Development

Creating View-based Objects

JavaScript’s Prototype is your Friend

Instantiate Only as Needed

Why This Technique is Beneficial

Conclusion

Easy Script Loading with yepnope.js

Background – Asynchronous Script Loading

Step 1 – The yepnope Test Object

test:

yep:

nope:

load:

both:

callback:

complete:

Step 2 – Conditions – Testing for the Features of the Future!

Here’s a look at our test:

Step 3 – Loading Resources Conditionally

Let’s load up the hashchange plugin:

Using both yep and nope:

Step 4 – Loading Resources Regardless of the Test Condition

Loading by default:

Loading on both conditions, syntactic sugar :

Step 5 – Callbacks – Dependent Code After the Load

url

result

key

A simple callback:

Step 6 – Complete – When all is Said and Done!

The complete callback:

Step 7 – Yepnope Plugins, Prefixes and More!

css!

preload!

ie!

Creating your own filters!

url:

prefixes

autoCallback

noexec

instead

forceJS

forceCSS

bypass

Using these prefixes, we can now easily switch between our CDN and web server!

Step 8 – A few Caveats

No document.write

Internet Explorer less than 9 and callback execution

Be careful with the DOM

You should still combine where you can

Internet Explorer asynchronous load limits

Conclusion – Thoughts on yepnope.js

Turbocharge Your Website With Memcached

Introducing Memcached

Accessing Memcached from PHP

How does Caching Work?

Connecting to our Cache Server

Storing Data in our Cache

Retrieving Data from our Cache

Conclusion

JavaScript Testing From Scratch: New on Premium

Tuts+ Premium

Best of Tuts+ in January 2012

Psdtuts+ — Photoshop Tutorials

Nettuts+ — Web Development Tutorials

Vectortuts+ — Illustrator Tutorials

Webdesigntuts+ — Web Design Tutorials

Phototuts+ — Photography Tutorials

Cgtuts+ — Computer Graphics Tutorials

Aetuts+ — After Effects Tutorials

Audiotuts+ — Audio & Production Tutorials

Step 1 – The `yepnope` Test Object

The `complete` callback:

No `document.write`