My RSS » Items by Siddharth

Items by Siddharth

Nettuts+

Recently in Web Development (April ’12 Edition)

Posted: April 30th, 2012, 2:04pm MDT by Siddharth

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!

News and Releases
All of the important news in a single place: releases, announcements, companies bickering, security issues and all related hoopla.
The Infamous Semi-Colon Debate
Ahh, JavaScript. I think it has caused more conflict than thatHelen. This time around there’s been a flurry of activity around a single, missing comma. I don’t want to take you away from the drama so check out the Github discussion below, after grabbing some popcorn.

Personally, if you’re not CoffeeScript-ing, just add that darn semi-colon and call it a day.

Click here for internet drama
Django Moves to Github, Finally
Most Pythonistas know Django. For those of you who don’t, Django is a high level Python framework that helps you out with web development. While Django has had a repo on Github for a long time now, it was in a state of desolation. You’d often see that the repo only held versions that were a lot behind the curve.

Well, no more of that. Django has finally moved to Github and the repo seems to be active. If you’re interested, Subversion was what was used to manage Django earlier, since 2005.

Github repo
Meteor, a New Way to Build Apps
Tired of the current frameworks and technologies, a group of devs has created a full stack, JavaScript only framework.

Meteor is a set of new technologies for building top-quality web apps in a fraction of the time, whether you’re an expert developer or just getting started. I’m sure people are already tired of reading about JavaScript and the sheer number of frameworks sprouting out each day but this is really worth a look.

Read more
SPDY Gains More Traction With Firefox Beta
SPDY, developed by Google, is a networking protocol aimed at improving web page load times as well as web security.

As with anything web related, it takes eons to get anything standardized and browsers have already started implementing experimental versions of the technology. The latest Firefox beta adds support for the protocol, switching it on by default. It’s not the only browser to do — Chrome already includes support for SPDY while Opera does the same with its preview of version 12.

Release Notes
Microsoft Announces the Metro jQuery Mobile Theme
Microsoft, in order to increase awareness of its spectacularly clean Metro interface, has open sourced a Metro themed design for jQuery mobile. The theme includes a large number of Metro themed widgets and interactions and seems to work really well.

Read more
Firefox is Now At Version 12
Another month, another Firefox update. To be fair, the updates are now rather substantial this time around though.

This version introduces a ton of developer tools and improvements along with a far more streamlined update process. The list of developer related updates, the ones we really care about, makes for a rather interesting read so make sure to hit the link below.

Read more
CoffeeScript, Now With JavaScript’s Strict Mode, Updates to Version 1.3
Developers either love or hate CoffeeScript. I personally love it which is why you’re seeing this here. The latest version enforces the strict more at compile time helping you weed out those annoying, niggling issues.

Version 1.3 also brings you improvements to the REPL as well as a bunch of tweaks and improvements.

Change log
Rails Updates in Light of Recent Security Issues
With the havoc caused by the mass assignment issue last month, the Rails team has reconsidered their stance on this issue and has pushed out version 3.2.3 which changes the value of config.active_record.whitelist_attributes . There are also various, assorted fixes and improvements bundled into this version.

Release Notes
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.
Smooth.js
Smooth.js takes an array of numbers or vectors and returns a parametric function that continuously interpolates that array. Smooth.js supports several interpolation methods, and flexible options for boundary behavior.

Github Repo
Scroll Path
jQuery Scroll Path is a plugin that lets you define your own custom scroll path. What this means exactly is best understood by checking out the demo. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initializing the plugin.

Github Repo
keymaster.js
Keymaster is a simple (100 LoC or so) micro-library for defining and dispatching keyboard shortcuts. It has no dependencies.

Github Repo
Ham
PHP Microframework for use with whatever you like. Basically just a fast router with nice syntax, and a cache singleton. Will add more things as I go, like perhaps an extension system, autoloader and some other stuff to make developing in PHP less irritating than it currently is.

Github Repo
mailcheck.js
The jQuery plugin that suggests a right domain when your users misspell it in an email address.

Github Repo
Hammer.js
Hammer.js is a javascript library that can be used to control gestures on touch devices.

Github Repo
Monorail.js
Monorail.js will never force you, and uses only what you need. Monorail.js will never force you to install anything not needed for your project. The goal is to use what you need. Anything other than creating a project will always be optional.

Github Repo
Rainbow
Rainbow is a code syntax highlighting library written in Javascript. It was designed to be lightweight (1.4kb), easy to use, and extendable.

Github Repo
Timeline
There are lots of timeline tools on the web but they are almost all either hard on the eyes or hard to use. Create timelines that are at the same time beautiful and intuitive for users. Timeline is great for pulling in media from different sources. Just throw in a link from Twitter, YouTube, Flickr, Vimeo, Google Maps or SoundCloud and Timeline will format it to fit perfectly. More media types will be supported in the future.

Github Repo
FakeS3
FakeS3 is a lightweight server that responds to the same calls Amazon S3 responds to.
It is extremely useful for testing of S3 in a sandbox environment without actually making calls to Amazon, which not only require network, but also cost you precious dollars.

Github Repo
retina.js
retina.js makes it easy to serve high-resolution images to devices with retina displays. When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

Github Repo
Rucksack
Rucksack is a jquery plugin to arrange elements that can fit in the given width. It relies on the knapsack algorithm.

Github Repo
jQuery PopBox
jQuery PopBox is a simple balloon UI element inspired by 37Signals Highrise CRM.

Github Repo
html2canvas
This script allows you to take “screenshots” of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

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.
PHP: a fractal of bad design
A detailed look at why most people, when given a gun with two bullets and asked to shoot Hitler or PHP, want to shoot PHP twice. As much of a PHP lover I am, I can’t help but agree with a lot of this article.

Read more
PHP Sucks! But I Like It!
A really well written counter point to the earlier article, backed by a lot of reasoned thinking.

Read more
The infernal semicolon
Brendan Eich chimes in with his stance on the entire JavaScript semi-colon issue.

Read more
How to be a successful programmer without a CS degree
A wonderfully detailed answer on StackOverflow that outlines how to be a kickass programmer without an expensive CS degree.

Read more
Zero downtime deploys for Rails apps
A very informative presentation that outlines how you should go on about running and upgrading your Rails apps.

Read more
On being “Senior”
A nice little read about the software industry and the rat race around titles.

Read more
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!
The Essentials of Zepto.js

Posted: April 28th, 2012, 2:13am MDT by Siddharth
Modern JavaScript libraries are quite the behemoths — just take a look at jQuery. When you’re creating a mobile app, or even just targeting modern browsers, a library that’s much more svelte and nimble becomes a tastier proposition.

Today, we’re going to look at one such library, named Zepto.

The Issue With Mixing Desktop Libraries and Mobile Devices
One thing that has snuck past most radars has been the rise of mobile devices.

See, the internet, and the technology that powers it, has grown in leaps and bounds over the past years. We moved from static sites to web applications to dynamic web applications and then to real time, hyper responsive, thingamabob apps of today. One thing that has snuck past most radars has been the rise of mobile devices.

Think about it: a lot of us use smart phones and use it for browsing on a constant basis. Even at home, a non-trivial portion of my circle has adopted a tablet device for casual surfing and email. While this influx of devices is good from an exposure point of view, it isn’t without its caveats.

Instead of thinking of these devices as display constrained like consumers do, we, as developers, need to think of them in terms of resources and bandwidth. Not all them sport a hyper quad gajillion Ghz CPU or come with oodles of memory. And let’s not even get started with the bandwidth. A big portion of the browsing population is still stuck on these infernal excuses for a mobile internet connection.

I think you see where I’m going with this. Big, monolithic libraries like jQuery or Prototype definitely have their place but for this mobile era, I think there’s a place for something that’s a lot more nimble. And a lot of developers seem to agree with me.
All the Code to Make a Library Work Across Browsers Adds Up
Another big issue that I failed to mention is that contemporary libraries do a lot of cross browser stuff. In fact, a big draw of jQuery, initially, was how it abstracted away a lot of the cross browser quirkiness that front end developers had to work around. Even now, jQuery does a lot of heavy lifting under the hood to make sure nothing breaks in different browsers.

But if you’re a developer looking to cater to only contemporary devices, do you really need all this, dare I say, cruft? The short answer is no. By cutting out unnecessary code, you both:
- eke out more performance since there’s fewer lines of code for the browser to parse and
- make your file smaller in size, which helps with the bandwidth constrained mobile devices.
Think that this issue is overblown? Here’s a random blob of code from jQuery’s source:
```
isPlainObject: function( obj ) {
		// Must be an Object.
		// Because of IE, we also have to check the presence of the constructor property.
		// Make sure that DOM nodes and window objects don't pass through, as well
		if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
			return false;
		}
....
```
Or something a little more esoteric:
```
// Perform a simple check to determine if the browser is capable of
// converting a NodeList to an array using builtin methods.
// Also verifies that the returned array holds DOM nodes
// (which is not the case in the Blackberry browser)
try {
	Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType;

// Provide a fallback method if it does not work
} catch( e ) {
	// The intended fallback
}
....
```
This may look fairly trivial but keep in mind this tends to adds up. If you’re only going to target modern browsers, either on desktops or mobiles, then there is no real need for all these additional checks and hacks. By cutting down your intended browsers, you win on both bandwidth and performance!
So What’s Zepto’s Deal?
I hear you guys saying “Enough buildup! Tell us about the darn library already!”. So let’s get to it.

Zepto, as the title spoiled it for you, is a mobile JavaScript framework that rectifies both of the issues mentioned above. It has a very small code base and is feather weight at around 8kb.

It manages to be so svelte by mostly cutting out the cross browser stuff. When it was created, the main focus was to support Webkit only. The mobile version of Webkit to be exact. Now, it’s been expanded to work with desktop browsers too — but only modern ones. No more klutzing around to make things work this IE6!

Zepto’s API is jQuery compatible. If you use jQuery, you already know how to use Zepto.

Another area where Zepto manages to be small is how it manages to avoid feature bloat. The core library doesn’t seem to include any extraneous functionality. Even the AJAX and animation functionality are available as separate modules, should the need arise. For users that primarily use libraries for DOM traversal and manipulation, this is an utter god send.

And, oh, did I mention Zepto’s main party piece? Zepto’s API is jQuery compatible. If you use jQuery, you already know how to use Zepto.
Are Zepto and jQuery Interchangeable?
Yes and no. Depends is a more apt answer.

Yes because Zepto’s core API mimics jQuery to a large extent. In order to make it easy to use and dramatically reduce the learning curve, Zepto emulates jQuery’s API. Most of the oft used methods, like DOM manipulation, are named pretty much the same and have the same parameters in the same order. The method signatures are the same, for the engineers out there.

Let’s look at a small example:
```
$('#element').html("Hey! Are you on the GW2 beta?");
```
Looks familiar? It should. This is the exact same code you’d use with jQuery to change the HTML of an element. As I mentioned, this isn’t limited to just this method. Most DOM operations are built the same way along with your utilities, like AJAX.

On the flip side, the API isn’t a 100% match. Zepto forgoes some methods present in jQuery that’s liable to break your code. And just as importantly, since Zepto is a subset of jQuery, you’ll probably miss out on specific functionalities that are built in — Deferred is a fine example. You simply can’t swap out jQuery with Zepto and expect everything to work.

And for me, the biggest hurdle are the methods that have been copied from jQuery but have a different signature and feature set. It becomes a little frustrating when you think you’re using a method right but you aren’t. The clone method’s ability to copy event handlers is a good example. Without looking at the source, I really wouldn’t have found this out.
Exploring the Core API
If you’ve worked with jQuery before, everything below should be a snooze fest.

Enough chit chat, let’s dive into some code now. As with a lot of modern libraries, DOM traversal and manipulation is a core feature that everyone wants to perfect. Since the API and overall functionality is very similar to jQuery, I think you can safely assume everything is top notch.

Let’s take a look at some common DOM related functionality.
Modifying the HTML contents of a container
This is the bread and butter of DOM operations: reading or changing the HTML contents of an element. With Zepto, it’s as simple as calling the html method on the container, and passing in the new HTML, if needed.

For example, this obtains the HTML of an element and stores it in a variable.
```
var containerText = $('#element').html();
```
Or if you want to change it to something else:
```
$('#element').html("Hola there!");
```
Pretty simple, right?
Prepend/Append an Element to a Container
As with jQuery, Zepto makes use of the append and prepend methods. And the invokation remains the same as well.
```
$('#element').append("<p>This is the appended element.</p>");

// or

$('#element').prepend("<p>This is the appended element.</p>");
```
Events
Events are the backbone of any modern application and Zepto provides you with a bunch of easy to use methods to get your job done. The bulk of the work is done through the on method.
```
$('#element').on('click', function(e){
   // Your code here
});
```
Easy to read and easy to parse. If you’re feeling old school and feel like using bind, delegate or live methods, don’t. Just like with jQuery, they’re deprecated here.
AJAX
Any modern low level library needs to provide an easy to use wrapper around AJAX and Zepto doesn’t let you down here. Here is an example of a super simple AJAX request.
```
$.ajax({
  type: 'POST',
  url: '/project',
  data: { name: 'Super Volcano Lair' },
  dataType: 'json',
  success: function(data){
    // Do some nice stuff here
  },
  error: function(xhr, type){
    alert('Y U NO WORK?')
  }
});
```
Things might look a little complicated but what we’re doing can be boiled down to:
- Creating the AJAX object and passing it options.
- In the options, specifiy that we’d like to do a POST request. The default is GET, I imagine.
- Specify the URL to POST to.
- Specify the data that needs to be sent to the server. As you can see, I’m laughing maniacally and trying to create my own super villain lair.
- Specify methods that will be triggered when the request succeeds or fails. This way, we can update the UI whatever happens.
As with jQuery, there are separate method for a GET or POST request or ones to merely load up some web content.
Animations
What will the world come to without a few animations? Zepto exposes the almighty animate method that should handle most of your animating needs.
```
$('#element').animate({
  opacity: 0.50, top: '30px', color: '#656565'
}, 0.5)
```
We’re basically selecting the element to be animated, invoking the animate method and specify the properties to be animated as well as the time it should take to finish animating. Zepto does the rest.

Or if you just need to show and hide an element, the toggle should work just fine.

I think you get the point here — Zepto’s DOM, animation and events API emulates that of jQuery to a large extent. And as we all know, jQuery is darn good with those things. If you’ve worked with jQuery before, you shouldn’t face too much trouble here.
A Look at the Touch Events and Other Niceties
Zepto does provide you with a few touch specific events that you can leverage in your apps. These include:
- swipe — Handles your typical swipe motion. There are also separate events for different directions, like swipeLeft.
- tap — Triggered in response to a generic tap action.
- doubleTap — Obviously, this handles double taps.
- longTap — It’s triggered when an element is tapped on for more than 750ms. There doesn’t seem to be a straightforward to change this delay though.
Here’s a quick example, delightfully swiped from Zepto’s documentation.
```
<ul id=items>
  <li>List item 1 <span class=delete>DELETE</span></li>
  <li>List item 2 <span class=delete>DELETE</span></li>
</ul>

<script>
// show delete buttons on swipe
$('#items li').swipe(function(){
  $('.delete').hide()
  $('.delete', this).show()
})

// delete row on tapping delete button
$('.delete').tap(function(){
  $(this).parent('li').remove()
})
</script>
```
When a list item is swept, every other list element’s delete button is hidden and only the current’s is displayed. Tapping a delete button removes that button’s parent li item to be removed from the DOM.

This should be fairly similar to how you generally handle events, except you’ve binding your handlers to different events, that’s all.
Wrapping Up
Considering what and whom I develop for, this is perfect for me; but as it always is, your mileage may vary.

Well, that’s about almost all there is to Zepto. At it’s core, it was meant to be a lean, cruft free version of jQuery that could be used on mobile devices. Over time, it has morphed into a lean library that does away with supporting archaic browsers.

Considering what and whom I develop for, this is perfect for me; but as it always is, your mileage may vary. You may be locked into using jQuery plugins that require non-trivial modifications to make it work under Zepto or just have more faith in jQuery.

Either way, you really need to give Zepto a try to see how it fits in with your workflow before writing it off. I did and I love it!

Well, that’s all from me today. Let me know what you think in the comments below and thank you so much for reading!
Are You Our Next Awesome Writer?

Posted: April 24th, 2012, 12:07pm MDT by Siddharth
We’re in need of a kick-ass, talented author to help out on Nettuts+ on a regular basis, a Bieber fan preferably.

We’re not sticklers but we’d optimally like to see weekly and bi-weekly submissions from you. Do you have what it takes? This is a paid gig, so read on!

What You Need
- A Ninja grasp of the subject matter: Nettuts+ is one of the biggest, most trusted web development blogs out there and this is built on quality content. You, as our author, will need to possess rock solid comprehension of what you’d like to write about.
- Writing chops: You must be comfortable with the English language. We can proof your content but we can’t rewrite everything for you. If you struggle when deciding whether to write fewer or less, this might not be the gig for you.
- Ability to stick to a schedule: We expect you to keep the schedule we’ve agreed upon. Be professional.
What You’ll Get
- $150 per tutorial for the first month.
- $200 per from the second month onwards, with a pay review after a year.
- Option to submit to our premium program which pays significantly more.
So, assuming you submit an article a week, and one Premium tut/screencast per month, you can expect to make between $1100 – $1400 each month.
Excellent! Where Do I Sign Up?
We’ll need the following information from you:
- Name.
- A few sentences about yourselves.
- A single link to an article that you’ve written, helped with or like. This is compulsory.
- Two ideas for tutorials you’d like to write for us.
- Emails with an optional tutorial as attachment will get more attention from us since this means you’re serious about the gig.
- Preferential treatment (and higher pay) given to those who can record professional quality screencasts.
Please email this information to net[at]tutsplus.com.

We get a ton of single line emails. Don’t be that person. Emails without the requisite information will be discarded.

If you can’t manage a weekly/bi-weekly schedule, get in touch either way. I’m sure we can work something out!

Get cracking, ladies and gents! Looking forward to hearing from all of you.
Nettuts+ Quiz #12: Quirky HTML Tags

Posted: April 13th, 2012, 2:29pm MDT by Siddharth

Taking a break from the relatively technical focus of the past few quizzes, we’re going to do something very offbeat today. Yes, Offbeat with a capital O. Be it front end or back end programming, I’m sure you’re working with HTML tags every day. But as the saying goes, can you ‘catch ‘em all?’ Or rather, can you figure out what these rarely used HTML tags do?

I can already hear you chuckling with mirth, grasshopper. I’ve added a few deprecated tags just to keep you on your toes. Get everything right and prove that your HTML-fu is strong!

$(document).ready(function(){ $('#quiz-container').jquizzy({ questions: init.questions, resultComments: init.resultComments, twitterStatus: 'Woo! I scored {score} on the Nettuts quiz on quirky HTML tags. Give it a shot!', twitterImage: 'http://d2o0t5hpnwv4c1.cloudfront.net/jquizzy-1.0/img/share.png', twitterUsername: 'envatowebdev', splashImage: 'http://d2o0t5hpnwv4c1.cloudfront.net/1152_quiz12/nettuts.png', }); });
Getting Cozy With Underscore.js

Posted: March 31st, 2012, 2:36pm MDT by Siddharth
As JavaScript is slowly moving out of the browser, several tools have emerged that significantly improve JavaScript’s robustness.

One such tool is called Underscore.js and that’s what we’re going to take a look at today. Let’s get started!

Meet Underscore.js
So what exactly does Underscore do?

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.

One of the nicer things about working in Python or Ruby are the fancy constructs like map that make life a lot easier. The current version of JavaScript, sadly, is fairly barebones when it comes to low level utilities.

As you read above, Underscore.js is a nifty little JavaScript library that brings in a ridiculous amount of functionality at a mere 4kb.
Underscore in Action
“Enough yapping about the library”, I can hear you say. Right you are! Let’s take a look at Underscore in action first before I resume my yapping.

Let’s assume you have a random array of test scores and you need a list of those with 90+ score. You’d usually write up something like so:
```
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],
topScorers = [], scoreLimit = 90;

for (i=0; i<=scores.length; i++)
{
	if (scores[i]>scoreLimit)
	{
		topScorers.push(scores[i]);
	}
}

console.log(topScorers);
```
It’s pretty simple and even with optimization, it’s fairly verbose for what we’re trying to do.

Let’s look at what we can achieve with Underscore next.
```
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],
topScorers = [], scoreLimit = 90;

topScorers = _.select(scores, function(score){ return score > scoreLimit;});

console.log(topScorers);
```
I don’t know about you but I just had a nerdgasm. That’s some incredibly concise and readable code right there.
Sweet but Do I Really Need This?
Well, it all depends on what you’re trying to do. If your use of JavaScript is limited to merely playing around with the DOM, then the answer is mostly no since jQuery does most of what you’d want to do.

Yes.

On the other hand, if you’re dealing with non-DOM code or even complex, think MVC, front end code, Underscore is an absolute boon.

While some of the functionality exposed by the library is slowly making its way into the ECMA specifications, it’s not available in all browsers and making your code work cross browser is another nightmare on its own. Underscore provides you with a nice set of abstractions that work everywhere.

And if you’re a performance oriented person, as you should be, Underscore falls back to native implementations, if available, to make sure performance is as optimal as possible.
Getting Started
Just grab the source here, include it in your page and you’re good to go.

If you were expecting a big set up process, you’re going to be sorely disappointed. Just grab the source here, include it in your page and you’re good to go.

Underscore creates and exposes all its functionality via a single object, in global scope. This object is the titular underscore character, _.

If you’re wondering, yes, this is quite similar to how jQuery works with the dollar [$] symbol. And just like jQuery, you can remap this character in case you run into conflicts. Or if you’re like me and have an irrational love for the tilde.
Functional or Object Oriented?
While the official marketing blurb for the library states that it adds functional programming support, there is actually another way of doing things.

Let’s take our earlier code as an example:
```
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;

topScorers = _.select(scores, function(score){ return score > scoreLimit;});

console.log(topScorers);
```
This method above is the functional, or procedural, approach. You can also use a more straightforward, probably more apparent, object oriented approach.
```
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;

topScorers = _(scores).select(function(score){ return score > scoreLimit;});

console.log(topScorers);
```
There is no real ‘right’ way to do things but keep in mind that you can jQuery-esque method chaining with the latter method.
Checking Out the Functionality
Underscore provides a little more than 60 functions that span a number of functionalities. At their core, they can be classified into groups of functions that operate on:
- Collections
- Arrays
- Objects
- Functions
- Utilities
Let’s take a look at what each does and if applicable,one or two of my favorites from each section.
Collections
A collection can either be an array or an object, an associate array in JavaScript if I’m to be semantically correct.

Underscore provides a lot of methods that operate on collections. We saw the select method earlier. Here are a few more incredibly useful ones.
Pluck
Let’s say you have a nice little array containing key value pairs and you’d like to extract just a specific property from each. With Underscore, it’s a cinch.
```
var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];
var niches = _.pluck(Tuts, 'niche');

console.log(niches);

// ["Web Development", "WordPress", "PhotoShop", "After Effects"]
```
Using pluck is as simply as passing in the target object or array as well as which property to pick out. Here, I’m merely extracting the niche for each site.
Map
Map creates an array from a collection where each element can be mutated or otherwise changed through a function.

Let’s take the earlier example and extend it a bit.
```
var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];

var names = _(Tuts).pluck('name').map(function (value){return value + '+'});

console.log(names);

// ["NetTuts+", "WPTuts+", "PSDTuts+", "AeTuts+"]
```
Since I noticed the names missing the plus sign at the end, I’m adding them in the extracted array.

You’re not limited to simple concatenation here. You’re free to modify the passed value to your heart’s desires.
All
all is useful if you need to check every value in a collection passes a certain criteria. To check whether a student has passed in every subject, for example.
```
var Scores = [95, 82, 98, 78, 65];
var hasPassed = _(Scores).all(function (value){return value>50; });

console.log(hasPassed);

// true
```
Arrays
Underscore has a bunch of functions that work exclusively on arrays which is highly welcome since, compared to other languages, JavaScript provides awfully few methods dealing with arrays.
Uniq
This method basically parses an array and removes all duplicate elements providing you with only unique elements.
```
var uniqTest = _.uniq([1,5,4,4,5,2,1,1,3,2,2,3,4,1]);

console.log(uniqTest);

// [1, 5, 4, 2, 3]
```
This comes in extremely handy when you’re parsing huge datasets and need to weed out the duplicates. Keep in mind that only the first instance of an element is counted so the original order is kept.
Range
An extremely handy method that lets you create a ‘range’ or list of numbers. Let’s look at a super quick example.
```
var tens = _.range(0, 100, 10);

console.log(tens);

// [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
```
The method’s parameters are, in order, starting value, ending value and step value. If you’re wondering, using a negative step value leads to a decrementing range.
Intersection
This method compares two arrays to each others and returns the list of elements that are found in all of the passed arrays i.e. an intersection in set theory.

Let’s extend the earlier example to see how this works.
```
var tens = _.range(0, 100, 10), eights = _.range(0, 100, 8), fives = _.range(0, 100, 5);

var common = _.intersection(tens, eights, fives );

console.log(common);

// [0, 40, 80]
```
Easy, right? You just pass in the list of arrays to compare and Underscore does the rest.
Objects
In addition to the fairly expected is checks, Underscore provides various methods to clone, extend and other manipulate objects.

Here are a few of my favorites.
Keys and Values
Have a massive object where you need only the keys or only the values? It’s so darn easy with Underscore.
```
var Tuts = { NetTuts : 'Web Development',  WPTuts : 'WordPress',  PSDTuts : 'PhotoShop', AeTuts : 'After Effects'};
var keys = _.keys(Tuts), values = _.values(Tuts);

console.log(keys + values);

// NetTuts,WPTuts,PSDTuts,AeTutsWeb Development,WordPress,PhotoShop,After Effects
```
Defaults
This method is quite useful when you need to create objects with sensible defaults when one might not be used when creating it.
```
var tuts = { NetTuts : 'Web Development'};
var defaults = { NetTuts : 'Web Development', niche: 'Education'};

_.defaults(tuts, defaults);

console.log(tuts);

// Object { NetTuts="Web Development", niche="Education"}
```
Functions
As wonky as it sounds, Underscore has functions that work on functions. Most of the functions tend to be fairly complicated to explain here, so we’ll take a look at the simplest.
Bind
this is an elusive part of JavaScript and tends to leave a lot of developers really confused. This method seeks to make it a bit easier to tackle.
```
var o = { greeting: "Howdy" },
	f = function(name) { return this.greeting +" "+ name; };

  var greet = _.bind(f, o); 

  greet("Jess")
```
It’s a bit confusing so stay with me here. The bind functions basically lets you keep the value of this whenever and wherever the function is called.

This is specially useful when you’re working with event handlers where this is hijacked.
Utilities
And to further sweeten the deal, Underscore provides a ton of utility functions. Since we’re fairly out of time, let’s just look at the biggie.
Templating
There are already a ton of templating solutions out there but Underscore makes its solution worth a look by being fairly tiny in its implementation whilst being fairly powerful.

Let’s take a look at a quickie example.
```
var data =   {site: 'NetTuts'}, template =   'Welcome! You are at <%= site %>';

var parsedTemplate = _.template(template,  data );

console.log(parsedTemplate);

// Welcome! You are at NetTuts
```
First up, we create the data to populate the template followed by the template itself. By default, Underscore uses ERB style delimiters though this is entirely customizable.

With those in place, we can simply call the template passing in our template and the data. We store the result in a separate string to be used later to update content, as needed.

Keep in mind that this is an extremely simple demonstration of Underscore’s templating. You can find use any JavaScript code inside the template using the delimiters. When you need to iterate over complex objects, say JSON sources, you can pair up with Underscore’s excellent collection functions to create templates rapidly.
Still Not Convinced That You Should Pick This
jQuery and Underscore go hand in hand.

No, no, you’ve got it all wrong! If anything, jQuery and Underscore complement each other well and go hand in hand. Really!

See, jQuery does a few things extremely well. DOM manipulation and animation are chief amongst those. It doesn’t deal with anything in the higher or lower levels. If frameworks like Backbone or Knockout deal with the higher level issues, Underscore tackles all the relatively bare metal ones.

For even more perspective, jQuery has little purpose outside the browser as the bulk of its functionality deals with the DOM. Underscore, on the other hand, can be used on the browser or on the server side without any issues. In fact, Underscore has the most number of Node modules dependent on it.

Well, that’s about it for today. Considering the scope of Underscore, we’ve barely scratched the surface here. Make sure to check out more of the library and let me know if you have any questions in the comments below. Thank you so much for reading!
Recently in Web Development (March ’12 Edition)

Posted: March 29th, 2012, 1:25pm MDT by Siddharth

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!

News and Releases
All of the important news in a single place: releases, announcements, companies bickering, security issues and all related hoopla.
PHP 5.4 is Out
The venerable PHP language is now at version 5.4 with a lot of new features and additions including a built-in server and traits.

Make sure to check out the release notes as well as our dedicated article on what’s new with the release.

Release Notes
PHP 5.4 is Here! What You Must Know
Basic but Critical Rails Vulnerability Found
Rails used to have a certain stigma attached to some time back — the infamous ‘Rails doesn’t scale. Now there’s another that threatens to easily overrun the earlier.

Earlier this month, an enterprising Egor Homakov discovered a vulnerability due to the way Rails handles mass assignments of attributes. As a result, quite possibly numerous Rails based apps were open to easy attacks which leads us to our next story…

Read more
Github Gets Broken Into
As a result of the vulnerability in Rails, mentioned above, Github got hacked with Egor gaining commit access and other admin privileges to every repository.

How Egor announced his breakin

Github’s response
PHP Moves to Github
In even more Github related news, the PHP project now has a copy for your checking out needs at Github now. The repo seems to be actively developer, as expected.

Read more
Chrome Overtakes IE, for a Day
Oh how the mighty have fallen! For a single day earlier this month, Chrome overtook IE’s marketshare. Now though, things are back with IE claiming 34.8% while Chrome has 30.9%.

Read more
Python 3.3 and Django 1.4 Released
For the Pythonistas, a couple of big releases this month.

Django, one of my favorite Python frameworks, as well as Python itself got updated this month. Make sure to check out the changelogs below — both boast some massive feature additions.

Python 3.3

Django 1.4
Amazon Drops Prices on AWS Services
The Amazon palette of web apps have really made web development a lot easier over the past few years. In addition to constantly adding features, Amazon also cuts their prices a lot keeping our costs in line with savings from Moore’s law.

Read more
HaXe — a New Programming Language
haXe is a new language that can be compiled to all popular programming platforms with its fast compiler – JavaScript, Flash, NekoVM, PHP, C++, C# and Java. It’s open source to boot!

Read 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.
Tower.js
Full Stack Web Framework for Node.js and the Browser. Built on top of Node’s Connect and Express, modeled after Ruby on Rails. Built for the client and server from the ground up.

Github Repo
Graphene
Graphene is a realtime dashboard & graphing toolkit based on D3 and Backbone.

It was made to offer a very aesthetic realtime dashboard that lives on top of Graphite (but could be tailored to any back end, eventually).

Github Repo
Heatmap.js
heatmap.js is a JavaScript library that can be used to generate web heatmaps with the html5canvas element based on your data. The heatmaps are fully customizable.

Github Repo
ShellJS
ShellJS is a portable (Windows included) implementation of Unix shell commands on top of the Node.js API. You can use it to eliminate your shell script’s dependency on Unix while still keeping its familiar and powerful commands.

Github Repo
Messenger.js
Messenger.js is a library that makes network communication via JSON dead simple and insanely fast!

Github Repo
Kalendae
Kalendae is an attempt to do something that nobody has yet been able to do: make a date picker that doesn’t suck. It’s fully portable, no dependencies. No jQuery, no Prototype, no MooTools; just add the script and the stylesheet and you’re good to go.

Github Repo
AtomizeJS
AtomizeJS is a JavaScript library for writing distributed programs, that run in the browser, without having to write any application specific logic on the server.

Github Repo
Cassovary
Cassovary is a simple “big graph” processing library for the JVM. Most JVM-hosted graph libraries are flexible but not space efficient. Cassovary is designed from the ground up to first be able to efficiently handle graphs with billions of nodes and edges.

Github Repo
Surface JS
Surface is a JS library intended to help manage single-page applications (or “Ajaxy” apps). It promotes decoupling of components and provides tools for navigating between “screens” and integrating with the browser history.

Github Repo
Noty
noty is a jQuery plugin that makes it easy to create alert, success, error and confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. (Except growl like notifications)

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.
Interpreted Languages: PHP, Perl, Python, Ruby
A side by side reference sheet of how to do common functions in PHP, Perl, Python and Ruby. Wonderfully useful if you have to learn the cesspool that is PERL.

Read more
Apache 2.4 Faster Than Nginx?
Is the latest version of Apache faster than Nginx? Find out in this shootout!

Read more
Your Favourite Programming Language is Not Good Enough
@fhaard explains why you’re a wuss if you’re too emotionally attached to a programming language. A great read!

Read more
PHP is Insecure (and Other Enterprise Open-Source F.U.D.)
Benjamin Balter systematically disassembles a lot of false assumptions around the PHP platform. This is definitely something to link to the snooty Rails developer in your social circle — everyone probably has come in touch with this mythical brogrammer.

Read more
What’s the Difference Between a URI and a URL?
One of those questions that I was too ashamed to ask. Thankfully, I ran into this StackOverflow post which does a stellar job of explaining the difference.

Read more
Why You Should Never, Ever, EVER Use Linked-list in Your Code Again
This is one for the relatively low level programmer. It’s easy to forget that we have plenty of data structures other than arrays and hashes when it comes to web development but if you’re remotely interested in a different paradigm, this is a great read.

Read more
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!
Nettuts+ Quiz #11: Do You Know SQL?

Posted: March 17th, 2012, 12:44pm MDT by Siddharth

In 2012, we plan to take our quizzes to a whole new level with ones aimed at all languages and catering to all competencies and tastes. This month, we’re covering a little SQL.

With more frameworks being bundled with an ORM, SQL is quickly becoming a lost art and is mostly relegated to the nerdiest of our clan — those pesky database people. Why not take today’s quiz and see whether you DB-chops have really gone the way of the dodo?

$(document).ready(function(){ $('#quiz-container').jquizzy({ questions: init.questions, resultComments: init.resultComments, twitterStatus: 'Woo! I scored {score} on the Nettuts quiz on SQL. Give it a shot!', twitterImage: 'http://d2o0t5hpnwv4c1.cloudfront.net/jquizzy-1.0/img/share.png', twitterUsername: 'envatowebdev', splashImage: 'http://d2o0t5hpnwv4c1.cloudfront.net/1148_quiz11/promo.png', }); });
Recently in Web Development (February ’12 Edition)

Posted: February 29th, 2012, 10:58am MST by Siddharth

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!

News and Releases
All of the important news in a single place: releases, announcements, companies bickering, security issues and all related hoopla.
The Developer Community Bickers About Prefixes
Last month played host to glorious drama as developer and vendors started discussing about vendor prefixes. Specifically, Microsoft, Mozilla and Opera have stated that they’re going to adopt and style webkit properties in the future.

There is a ton of information to absorb on either side of the argument so here are some links to catch up:

Do You Exclusively Use webkit Prefixes?
Now Vendor Prefixes Have Become a Problem
Call For Action On Vendor Prefixes
Apache Celebrates 17th Anniversary, Releases Version 2.4
Apache, as one of the most popular servers, powers a vast portion of the internet. As of this month, Apache is officially 17 years old — old, specially by internet standards.

The new version brings in lots of juicy improvements like asynchronous I/O support, reduced memory usage and dramatically improved performance.

Read more
Firefox 2012 Roadmap Published
Firefox released their extremely detailed roadmap for the year 2012. In addition to performance improvements and feature additions, there are a bunch of things that I’m looking forward to in the roadmap.

Faster startups, more developer tools and inbuilt PDF viewers? Sign me up!

Read more
Visual Studio Gets a VIM Emulation Layer
Get the best of both worlds — Visual Studio’s robustness with VIM’s spiffy key binds. I’ve been trying this out for the past couple of weeks and it works great!

Read more
Chrome Launches on Android
With the sheer number of mobile devices accessing the internet, it’s no longer feasible to really ignore that segment of users. Google has finally released a version of their popular Chrome browser for the Android operating system. The mobile versions syncs all your information seamlessly, if it helps…

Read more
Django 1.4 Beta 1 Released
With all the noise around Rails and NodeJS, it’s easy to forget that there are other great frameworks still kicking around.

Django is one such framework. And they just released a beta with a lot of new features including improved password hashing, form wizards, IPV6 support, CSRF improvements and much more. Make sure to check out this excellent framework!

Read more
Our Favorite Tools Get Updated
A lot of our favorite web development tools got updated this month — HTML5 Boilerplate and Modernizr being the more visible ones. Unable to hold my excitement, I posted a PSA earlier this month. Make sure to check the link below to find out more.

Read more
Backbone Gets a Bunch of Features and Gets Closer to Version 1
After an almost 9 month hiatus, Backbone introduced a lot of features over this month pushing the version number upto an exciting 0.9.1. I’ve linked you to the changelog below so you can take a look as to what’s changed.

Read more
Token Firefox and SublimeText 2 Updates
Yes, I know. Another month, another Firefox version. We’re at version 10 now with fairly middling changes.

On to more cheerful news, a new beta version of ST2 is out with a nice new icon, better indentation, better auto complete and more. Plus, you’ll now be granted +10 coolness on using ST2. True story.

SublimeText 2 changelog
Firefox 10 changelog
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.
Psd.js
psd.js is a general purpose file parser for PSD files created in Photoshop. Given a PSD file, it can parse out information such as image size and color modes, image resources, layer info, image contents, etc.

Github Repo
SQLFiddle
SQL Fiddle is a tool for database developers to test out their SQL queries. If you do not know SQL or basic database concepts, this site is not going to be very useful to you.

SQLFiddle
Touchy.js
Touchy.js is a simple light-weight (1.65 kb compressed) JavaScript library for dealing with touch events in the browser. With no dependencies, just add the script to your page and start hacking.

Github Repo
Turn.js
Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine. It works in all modern browsers including touch devices.

Github Repo
Pot.js
Pot.js is a JavaScript library that can be performed without causing stress to the UI and the CPU load by using easy loop iteration functions.

Github Repo
StratifiedJS
StratifiedJS extends the JavaScript language with a small number of constructs for concurrent programming. It allows you to express asynchronous control flow in a straightforward sequential style

Introduction to StratifiedJS
Ingrid
Ingrid is a fluid CSS layout system, whose main goal is to reduce the use of classes on individual units and is a bit less obtrusive and bit more fun to reflow for responsive layouts.

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.
XaoS.js
A real-time fractal zoomer. Using it is simple: left-click to zoom in, right-click to zoom out.

Read more
“Programmer” is an Overgeneralization
Erik McClure shares his thoughts on the sheer diversity when it comes to programmers. With software engineering exploding in sheer scope and complexity, this is makes for a great insightful read.

Read more
Differences Between JQuery .bind() vs .live() vs .delegate() vs .on()
The all knowing Elijah Manor talks about the differences between each of these jQuery event binding methods. It’s a little dense if you’re newbie but if you’re really looking to grasp the internals of jQuery, this is a must read.

Read more
Prototypes and Inheritance in JavaScript
This post is as old as the pyramids — in internet time but the information inside is still pretty spot on.

Read more
Patterns for Large-Scale JavaScript Application Architecture
Addy Osmani presents his minibook on effective architecture for JavaScript apps when they reach a non-trivial size. It’s a bit long but definitely worth your time.

Read more
Backbone and Ember
A super quick look at the differences between Backbone and Ember, two JavaScript frameworks vying for your front end MVC needs.

Read more
The Great Web Framework Shootout
On this page you will find benchmark results comparing the performance of a few of the most popular OSS web frameworks in use today.

Read more
Learn Regex the Hard Way
Zed Shaw teaches you how to regex away to development glory in this extensive guide.

Read more
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!
Essential Sublime Text 2 Plugins and Extensions

Posted: February 25th, 2012, 1:49pm MST by Siddharth

Sublime Text 2 is a relatively new code editor that I’ve been trying out for a while now. While it’s still in public beta, it already offers a great mix of features and performance that has convinced me to switch from my trusted Komodo.

While I really do love the features available out of the box, as with most things in life, there is always room for more. With Sublime Text 2 being as extensible as it is, a big ecosystem has sprouted around it, catering to most of your web development needs, be they actually useful or catering to your whimsy. To that effect, today I’d like to share some of the plugins and extensions that I’ve found quite useful. While not all of them may appeal to you, I’m sure you’ll a find a gem or two that will absolutely ease your workflow!

Zen Coding
Zen Coding is an editor plugin for high-speed HTML coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.
jQuery Package for Sublime Text
And where will all us be without jQuery? This is a Sublime Text bundle to help with jQuery functions.
Sublime Prefixr
A plugin that runs CSS through the Prefixr API, written by our very own Jeffrey Way, for Sublime Text 2.
JS Format
JsFormat is a javascipt formatting plugin for Sublime Text 2. It uses the commandline/python-module javascript formatter from JS Beautifier to format the selected text, or the entire file if there is no selection.
SublimeLinter
SublimeLinter is a plugin that supports “lint” programs (known as “linters”). SublimeLinter highlights lines of code the linter deems to contain (potential) errors. It also supports highlighting special annotations so that they can be quickly located.
Placeholders
I always find inserting placeholder, or filler, content to be a quite tedious affair. With this plugin, you can insert placeholder content and HTML in a cinch!
Sublime Alignment
I’m quite a stickler for properly formatted code. One thing to get right is lining up all those darn variable assignment so they look all organized and neat. With this plugin, all it takes is the press of key. A simple key-binding allows you align multi-line and multiple selections.
Clipboard History
Tired of having to swap out your clipboard’s contents during a marathon hackathon? Keep a history of your clipboard items with this plugin and paste away as needed.
SublimeREPL
SublimeREPL lets you run your favorite interpreter inside a Sublime buffer. Languages supported include Python and Ruby.
DetectSyntax
DetectSyntax is a plugin for Sublime Text 2 that allows you to detect the syntax of files that might not otherwise be detected properly. This is specially helpful when you run into custom file formats — files used in templating is an excellent example.
Nettuts Fetch
This plugin automatically pulls in the latest copy of a file, simply by typing a keyboard shortcut. It’ll perform a curl request to your specified URL and allow you to rest assured that, for all new projects, you’re using the latest copy of a particular asset.
JsMinifier
It’s a good practice to always minify your files during deploying to a production server. And this plugin will swiftly automate the process by minifying your JavaScript using the Google Closure compiler.
Sublime CodeIntel
SublimeCodeIntel is a code intelligence plugin ported from Open Komodo Editor to Sublime Text 2. It shows autocomplete information with the available modules in real time as well as display information about the current function in the status bar. Nifty!
Tag
This is a great plugin when you’re working with a lot of markup. Tag is a collection of packages about, predictably, tags, mixed together in an effort to provide a single package with utilities to work with tags. Close a tag on a slash and tag indenting? Sign me up!
Bracket Highlighter
This plugin collection includes plugins to fold your code according to brackts, cycle through selecting tags and many more.
Case Conversion
Have a messy co-worker who completely ignores naming conventions? This plugin should save you a good chunk of time. Case conversions converts the current word between three of the most commonly used conventions.
Stackoverflow Search
StackOverflow is an absolute life saver — I can’t count the sheer number of times it has saved my skin. This plugin lets you do a search on SO directly from your editor.
Sublime Guard
Remember Jeffrey using a gem called Guard in his super useful Rails tutorial? Well, this plugin provides a seamless interface for controlling Guard and viewing Guard output within Sublime Text 2.
Git
A nifty little plugin that integrates Git and Sublime Text and implements most of the commands that you’d use in real life. Diff viewing inside ST2 is a great time saver!
Sublime Change Quotes
This is one for the OCD among us. This plugin converts single to double or double to single quotes whilst attempting to preserve correct escaping.
Hex to HSL
Tired of constantly having to manually convert your colors’ hexcodes to HSL? This plugin will automatically do it for you with the press of a button. Well, ok, three buttons. [Shift+Ctrl+U]
That’s a Wrap!
Well, that’s about all the plugins and extensions that I use on a daily basis. Considering the teeming ecosystem that Sublime Text 2 boasts, I’m sure I’m missing a ton here. Let us know in the comments and thank you so much for reading!
Nettuts+ Quiz #10: Basic CSS3 Techniques

Posted: February 18th, 2012, 7:39am MST by Siddharth

In 2012, we plan to take our quizzes to a whole new level with ones aimed at all languages and catering to all competencies and tastes. This month, we’re covering some basic concepts and techniques in CSS3.

The prime focus today is on the easier, more accessible portions of CSS3. If you’re a hardcore CSS3 fan, don’t worry — transitions, animations, gradients and media queries are on the way!

$(document).ready(function(){ $('#quiz-container').jquizzy({ questions: init.questions, resultComments: init.resultComments, twitterStatus: 'Woo! I scored {score} on the Nettuts quiz on CSS3. Give it a shot!', twitterImage: 'http://d2o0t5hpnwv4c1.cloudfront.net/jquizzy-1.0/img/share.png', twitterUsername: 'envatowebdev', splashImage: 'http://d2o0t5hpnwv4c1.cloudfront.net/1138_quiz10/nettuts.png', }); });
Web Dev PSA: Your Favorite Tools Have Been Updated

Posted: February 13th, 2012, 2:13pm MST by Siddharth
The last week was a bit of a whirl with many of our favorite tools receiving updates and tweaks.

Usually, I’d save the announcement for our monthly “Recently in Web Development” piece, but considering how much, and how often, we use the tools below, it’s only fair that you be informed as quickly as possible.

HTML Boilerplate
First on our list is the venerable HTML5 boilerplate, or h5bp to its cushy fans. But what exactly is this ‘boilerplate’ thingy, you ask?

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-safe site.

If you’re still lost, I suggest taking a look at this excellent guide by Paul Irish.

If you’re like me and need to look at what has changed precisely, you can take a look at the complete changelog here.

Well, the big news is that h5bp has been updated to version three. Here are some of the highlights in this version:
- The build script has now been exported to its own project.
- h5bp has been put on a diet. This version is noticeably smaller in size
- The build system has been forked into a separate project.
- In a touch of whimsy, the design of the 404 page has been improved
Modernizr
A full eight months after version 2.0 comes 2.5 of Modernizr – an extremely handy JavaScript library.

It’s a common misconception that Modernizr miraculously upgrades all browsers to allow for HTML5 and CSS3 support. Unfortunately, this isn’t the case. However, instead, it detects support, which provides us with a lot of power!

Version 2.5 ships with a massive set of changes, which you can view here, but here are the important ones.
- More than 60 additional feature detects added.
- html5shiv and yepnope added to core.
- Respond.js removed from core
- A polyfill for Function.prototype.bind is baked in by default.
yepnope.js
The work of Ralph Holzmann and yayQuery’s Alex Sexton, yepnope, a utility that aids you in smartly loading your JavaScript and CSS code, just got updated to version 1.5.2.

yepnope is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need.

This nifty resource loader, which is only 1.7KB minified and gzipped, is bundled with Modernizer and is great for loading polyfills, preloading or “priming” the user’s cache, or as a simple asynchronous resources loader / filter! You can read up more here.
html5shiv
Your spiffy new HTML5 elements, in all their glory, are impervious to CSS rules in IE. This is where html5shim comes to the rescue. Simply include it in your page’s <head> section and you will be able to style the new HTML5 elements perfectly.

The new versions of html5shiv ship with some radical performance improvements, with some tests running 10 [!] times faster.

html5shiv is built into Modernizr.

Mobile Boilerplate
As a mobile alternative to h5bp, the mobile boilerplate ships as an intelligent set of defaults for mobile sites and web apps. Version three brings it up to date with the recent versions of Modernizr and closely follows the changes made to its HTML5 counterpart.
Go Check ‘em Out!
’nuff said! The staff at Nettuts+ use almost all of these on a daily basis and we think they’re worth your time as well.
Recently in Web Development (January ’12 Edition)

Posted: January 30th, 2012, 1:37pm MST by Siddharth

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!

Read more
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?

Read more
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…

Read more
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.

Read more
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.

Read more
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!

Read more
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.

Read 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’.

Read more
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.

Read more
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.

Read more
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?

Read more
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.

Read more
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.

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

Read more
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.

Read more
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.

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

Read more
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.

Read more
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!
24 Extremely Useful Ruby Gems for Web Development

Posted: January 26th, 2012, 2:38pm MST by Siddharth
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
- Github repo
- A Gentle Introduction to CarrierWave
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
- Github repo
- Railscasts #254 Pagination with Kaminari
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
- Github repo
- Railscasts #160 Authlogic
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
- Github repo
- Shoulda Looked At It Sooner
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
- Github repo
- Using factory_girl to simplify our test setup
RMagick
RMagick is an interface between the Ruby programming language and the ImageMagick and GraphicsMagick image processing libraries.

Related reading
- Github repo
- Drawing with RVG
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
- Github repo
- Railscasts #192 Authorization with CanCan
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
- Github repo
- Railscasts #268 Sass Basics
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
- Github repo
- Railscasts #133 Capistrano Tasks
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
- Github repo
- Using the New Gem Bundler Today
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
- Github repo
- Using Jammit in Rails
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
- Github repo
- Capybara (and Selenium) with RSpec & Rails 3
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
- Github repo
- Railscasts #144 Active Merchant Basics
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
- Github repo
- An introduction to eventmachine, and how to avoid callback spaghetti
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
- Github repo
- Railscasts #122 Passenger in Development
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
- Github repo
- Getting started with Chef tutorial
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
- Github repo
- Railscasts #120 Thinking Sphinx
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+ Quiz #9: The Absolute Basics of PHP

Posted: January 16th, 2012, 10:00am MST by Siddharth

In 2012, we plan to take our quizzes to a whole new level with ones aimed at all languages and catering to all competencies and tastes. But what better language to start off the new year than PHP, the darling of the masses?

In this test, aimed at beginners, your knowledge of the absolute basics of PHP will be tested. Yes, we know PHP is a bit old school but it still powers a massive portion of the web and is a force to be reckoned with. And don’t get complacent with the difficulty level of this test either! More difficult ones are on the way — we just like to take it nice and slow. Or maybe we like lulling you into a false sense of security…

$(document).ready(function(){ $('#quiz-container').jquizzy({ questions: init.questions, resultComments: init.resultComments, twitterStatus: 'Woo! I scored {score} on the Nettuts quiz about the basics of PHP. Give it a shot!', twitterImage: 'http://d2o0t5hpnwv4c1.cloudfront.net/jquizzy-1.0/img/share.png', twitterUsername: 'envatowebdev', splashImage: 'http://d2o0t5hpnwv4c1.cloudfront.net/1123_quiz9/splash.png' }); });
Recently in Web Development (December Edition)

Posted: December 26th, 2011, 8:27pm MST by Siddharth

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!

News and Releases
All of the important news in a single place: releases, announcements, companies bickering, security issues and all related hoopla.
Chrome Overtakes Firefox Globally for First Time
I admit I saw this coming but never so quickly. Chrome has overtaken Firefox in global marketshare. Chrome accounts for 25.69% of the user pie while Firefox is at 25.23%.

Chrome’s number has been increasing lately, overtaking Firefox in the UK, for example. This month, though, sees it leading Firefox for the first time on a global scale. Congrats to the Chrome team!

Read more
Facebook Creates HipHop VM to Improve Performance with PHP
It’s no secret that Facebook utilizes PHP on the backend to serve its multi-billion pageviews a month service. PHP’s ease of use has also lead to dismal performance and inability to scale.

In the past, Facebook resorted to optimizing the Zend engine but later went with creating their own PHP interpreter. The new HipHop VM is just another step towards making their PHP codebase run faster.

Read more
SOPA Protests Wash Over the Internet
I don’t wish to editorialize the contents and ramifications of SOPA so it’s best you read up on the Wikipedia page linked below.

Internet users and services worldwide, however, have organized widespread protests in opposition of this bill with the backing of internet giants like the Wikimedia foundation and Mozilla. If you live in the US, do write to your local representatives!

Read more
Dojo 1.7 Released
Version 1.7 of Dojo got released early this month with substantial improvements including a lot of API changes under the hood.

Make sure to hit the link below for more information. And if you’re looking to gain mastery over Dojo, make sure to check out our session on the topic.

Read more
SproutCore 2.0 Gets Renamed. And Renamed Again, For Good Measure
I love Sproutcore and tend to use it in a lot of my experiments. The framework has been moving steadily towards version 2.0 and was renamed to Amber.js in the process. Due to a naming collision, with Smalltalk people no less, SproutCore 2.0 is now officially Ember.js

If you’re curious as to the rationale behind all this renaming, you can find a lot more at the link below.

Read more
WordPress 3.3 is Now Live
The WordPress juggernaut rolls on with version 3.3 codenamed ‘Sonny’. The version ships with, to quote the devs themselves, “significant polish around the new user experience, navigation, uploading, and imports”.

WP.Tuts+ has a great overview of the new version, if you’re interested. Also, remember to check out the sweet, short video at the link below.

Read more
Sencha Fiddle is Out
Sencha Fiddle is an IDE that lets you start creating mobile applications through your browser. Even though it’s not finished yet, the features already in place are great and work well.

Read more
Rails Hits 4.0 Beta
The Rails master branch has officially hit the 4.0 beta mark. Big changes here include dropping support for Ruby 1.8.7. If you’re running the older version of Ruby, stick to the 3.x branch and hang tight for 3.2 to be released!

Read more
Arduino 1.0 Released
And to get slightly nerdy, Arduino has finally hit version 1.0. If you’re unsure as to what Arduino is, it’s a microcontroller which you can program through the Arduino environment.

Version 1 brings a lot of changes including API changes, new classes and much more. You can get to the release notes directly here.

Read 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.
stopcensorship.js
Use this script on your site to protest censorship of the Internet.

After the page is loaded the script randomly censors text on the page by replacing the text with black bars. It also places a black bar at the top of the page with a link to [americancensorship.org] Viewers can remove censoring for the current session by clicking on the “Remove this” link.

Read more
Sinatra::Synchrony
Sinatra::Synchrony is a small extension for Sinatra that dramatically improves the concurrency of your web application. Powered by EventMachine and EM-Synchrony, it increases the number of clients your application can serve per process when you have a lot of traffic and slow IO calls (like HTTP calls to external APIs).

Read more
jQuery Gantt Chart
jQuery Gantt Chart is a simple chart that implements gantt functionality as
a jQuery component. It’s able to page results and read JSON data amongst a ton of other features.

Read more
Create
Create, from the Midgard Project is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.

Read more
Rickshaw
Rickshaw is a JavaScript toolkit for creating interactive time series graphs.

Read more
nanoScroller.js
nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Lion-styled scrollbars for your website. It uses minimal HTML markup and the latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets.

Read more
bootbox.js
Enter bootbox.js – alert() and confirm() like behaviour using twitter’s modal dialog boxes.

Read more
Broadway
A JavaScript H.264 and VP8/WebM decoder.

Read more
gitdocs
Open-source dropbox alternative powered by git. Collaborate on files and tasks without any extra hassle. gitdocs will automatically keep everyone’s repos in sync by pushing and pulling changes. This allows any git repo to be used as a collaborative task list, file share, or wiki for a team. Supports a web front-end allowing each repo to be accessed through your browser.

Read more
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.
Why HTML5 Media is not Enough
Amos Wenger on why the media elements introduced with the HTML5 spec aren’t evolving fast enough and how he’s countering the issues he’s facing.

Read more
What Tools Developers Actually Use
A great inforgraphic charting out the tools that developers use and love. There isn’t too much data here but should give you a quick overview as to what your peers are using.

Read more
Backbone.js Fundamentals
Addy Osmani is back again with a great little ebook on working with Backbone.js. The content goes over every aspect of the Backbone framework so if you’re even remotely interested in working with it, this is a great place to start.

Read more
Cracks in the Foundation
A clear, concise look at what’s wrong with the PHP platform. If you’re a PHP user, prepare to go in with some denial.

Read more
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!
The Official 2011 Nettuts+ Holiday Gift Guide

Posted: December 19th, 2011, 2:00pm MST by Siddharth

I needn’t remind you that Christmas is almost upon us. If you still haven’t bought gifts for your loved ones, this is the perfect time to start panicking. If your loved one is a developer though, we have an easy way out for you: pick a few from the list below and you’ll be off the hook!

In this mini gift guide, we’ll take a look at what we, as developers, want our stockings to be filled with. Hopefully, Santa hasn’t figured out that we’ve been feigning innocence all year!

Subscriptions and Software
Subscriptions are the gifts that keep on giving. Depending on whether you want to gift something for work or pleasure, you’ll find something here.
Netflix
Let’s face it — we’re busy people and can’t always catch a show at the right time. Heck, we’re the ones missing dinners with our special ones, right? And DVRing things can get pretty messy pretty quickly. This is where Netflix comes in. Unlimited movies and TV episodes over the internet? Yes please. Gift this to the geek in your life and watch him light up.

Get it here
Linode / Other VPS
Show your cutting edge web developer a shared hosting plan and he’d balk. Get them a yearly subscription to a virtual private server and watch as he formulates all the sheer uses he’d eke out of it. While there are plenty of options out there, I’ve personally used Linode for a few years now and gets my recommendation.

Get it here
Heroku / Platform as a Service
Or you could be a bit more forward and present them with a subscription to a PaaS [platform as a service]. Unlike a VPS, most of the sys-admin grunt work is taken care for you, including load management, letting you focus on just the code. Again, there are lots of options here but Heroku gets my vote for being so darn good.

Get it here
Litmus / Browser Testing
Browser compatibility testing still remains a scourge on the workflow of a modern developer but it really doesn’t need to be. Get them, or yourself, a subscription to the Litmus service and forget about having gazillion browser windows and versions open to test things out.

Get it here
Magazine
People have been harking on about the death of the print medium for years now but they’ve still been chugging on. I don’t have a specific recommendation since these tend to be intensely personal so take your pick. As opposed to gaming and tech magazines, I think people like me would appreciate something related to business, travel, lifestyle, or let’s go crazy for a second here, fashion.
Evernote
Evernote is awesome. There, I said it. It basically focuses on getting all your mental threads together and then syncs it all across any of your devices. If it sounds simple and you let yourself believe that, smack yourselves on the head — it’s much more complicated than that.

Evernote goes above and beyond the call and provides a ton of nifty features including extracting data from images. While the free version is more than serviceable, the premium version ships with just a few more enticing features.

Get it here
Tuts+ Premium
Not to toot our own horn but our Tuts+ premium program offers one of the best ways to learn new technologies and skill sets or hone existing ones. In addition to a massive 700+ exclusive tutorial roster, you also get access to nearly 30 top selling ebooks. At $180 for an entire year of learning, you can’t do better than this!

Get it here
Sublime Text
And finally, don’t forget a good text editor or an IDE. They are the heart and soul of a developer’s workflow and an informed gift here will definitely elevate you in a developer’s eyes.

A lot of people will go with the Coda/Textmate hoopla but, for a change, try SublimeText. It’s cross platform, feature laden, stable and cheap for a software of such stature.

Get it here
Gadgets
The Venn diagram of web developers and tech enthusiasts is primarily largely intersecting. Be it the new all mighty smartphone or an innocuous desk toy, gadgets make for excellent gifts.
Tablets
Tablets have been the all the rage recently and I can certainly see why: they make for excellent consumption devices. Checking your all important work email or catching up on your silly kitten videos? Do it from the comfort of your couch and through an intuitive interface. Couple this with the abundance of games and other apps and you have a bonafide winner on your hands.

Which tablet to get is an argument in itself. The iPad’s software lineup is a definite advantage but don’t discount its Android brethren either. The Transformer Prime looks incredible.

Get it here
E-reader
Or if you’re feeling a little bit old school, get them an e-reader. These feature e-ink technology, making reading a lot less strenuous on your eyes [as opposed to gazing at an incandescent light bulb that is a tablet's screen] and provide an experience that’s as close to a real book as possible whilst providing superior battery life.

I personally like the Kindle but there are tons of options available in this segment.

Get it here
USB Coffee Warmer
It’s a well known fact that web developers account for roughly 97% of the world’s caffeine intake. And a vast majority of that is ingested in front of a monitor whilst mulling over some arcane piece of code that just refuses to work. Get him, or her, this magical coffee warmer that conveniently works over USB and win over their goodwill for the rest of your natural life.

Get it here
IronKey USB Drive
You can never really be too secure — specially in this digital age. Data gets swiped, accounts get hacked and passwords get broken on a daily basis.

The IronKey USB drive provides you with a plethora of features including military grade encryption, hardware level authentication, anti-keystroke logger amongst a ton of others. It’s a little pricey compared to your run of the mill USB drive but the features definitely make it worth it.

Get it here
Universal Remote
The sheer number of remotes in a modern home is staggering. You need to have one for your television, receiver, speaker, settop box, DVD/BluRay and a lot more whamathingies. Not fun at all.

While universal remotes have been around for a while now, the recent ones have really started kicking it up a notch. The Logitech Harmony series deserves a special mention since they feature great build quality, support a staggering number of devices and are quite easy to set up. There are also touch screen versions if you’re into that sort of thing.

Get it here
MiFi
Your mobile phone probably has access to a decently quick internet connection but you’ll mostly be limited to tethering it to your laptop or, worse, no tethering support at all. What happens if you’re a technophile and travel with a tablet and maybe a handheld gaming device that you’d like to get online?

The MiFi range of devices are custom made for these specific scenarios. These connect to your carrier and provide internet access to the devices of your choice. It only supports upto 5 devices but hey, that should cover 99% of y’all.

Get it here
Nerdy Desk Toys
I’m sure you can’t count the sheer number of times you’ve given up on a piece of code and sat staring at a random dent on my desk wondering where it all went wrong. Let’s get this out of the way: I can’t fix your code for you and I really can’t fix the dent on your desk. However, completely unbiased, unquestionable studies from the toy making companies state that staring at a worthwhile nerdy toy on your desk should get your creative and analytical juices flowing.

I’m pretty partial to physics based items but you can find a ton more options at the link below.

Get it here
Hardware
Moving away from gadgets and toys, here are additions to your workstation and your workplace that are worth considering. Often overlooked, these are very obvious additions that can directly improve how you work.
A Second [or Third] Display
Yes, it’s that simple — get them, or yourself, another display. It doesn’t matter whether it’s a 15″ TN panel or a 30″ IPS panel. A second monitor can vastly improve one’s workflow, and thus, productivity since there is no need to juggle around windows. Just keep your debugging window on the other display and you can be on your way. Having a video run on the other display is fun too!

Get it here
An Ergonomic Chair
Developers, like most people with white collar jobs, tend to sit for a large portion of their working day. Discounting the issues caused by being static for such long stretches, a major issue is how one tends to pick up lumbar issues quite quickly.

Ensure their safety by buying them a lumbar supportive, height adjustable, comfortable chair. I’m partial to Aaron chairs but there are plenty of options out there.

Get it here
Input Peripherals
The input peripherals are how you to interact with your workstation and there is no need to be flimsy here. Be it a spiffy tactile keyboard or a touch gizmo to replace your mouse, just make sure it’s ergonomic. As someone who used to have carpal tunnel issues in the past, I can assure you it’s not fun.

I like keyboard with low travel and illumination so I’m pretty partial towards the Logitech Illuminated keyboard.

Get it here
Earbuds or Headphones
I’m one of those people who tends to have music running constantly. Probably not the heart pounding, whumpa-whumpa sounding things that young people tend to listen to though. Ahh, I digress.

A good quality headset is critical to your sanity as a developer. Not to mention coexisting with the people around you. Tried working when someone blares ‘Friday’ around you?

I prefer a proper circumaural pair since it tends to be the most comfortable for me, big head and all.

Get it here
MOAR Storage
You can’t have enough storage space — it’s a fact of life. Chalk it upto cameras that record in much higher resolutions or faster internet speeds, or aliens, the fact remains that we’re constantly filling up our hard drives.

Cloud solutions are nice but not always optimal. In these cases, get yourself a big hunk of storage that’s network attached and call it a day. I’ve used a Drobo in the past and it’s fairly good at what it does. It’s a little on the expensive side though. Or if you do have a higher budget, get them a nice, fast SSD and watch everything load up quickly.

Get it here
Assorted Fun
If you’re looking for something generic, but fun, this is the place to be!
Skyrim
Yes, Skyrim. There’s a very good chance this gift will make the giftee lose his job, relationship and house but goshdarnit, he’ll be a Dovahkiin!

If that’s not an option, this year had an incredible amount of AAA releases — Assassin’s Creed: Revelations, Arkham City, Battlefield 3, Deus Ex: Human Revolution, Witcher 2, Portal 2, Modern Warfare 3. Phew. Take your pick and gift away.

And promise to throat punch any whiners on online services and you’ll have their eternal gratitude.

Get it here
Books
Books make for excellent gifts. They’re fairly cheap, don’t require power, can carry it around at will and you won’t get hassled during a flight.

Choosing which book to get is an incredibly intimate thing though. The best seller list at Amazon is a great place to start but don’t let it constrain you — there are tons of incredible books out there. If you’re fresh out of ideas, may I suggest the recent Steve Jobs biography? Whether you love or hate him, there’s enough material in there for you.

Get it here
30 Rock
Shows pop up all the time and it comes down to personal preference. That being said, if you can watch this video and not be interested in this show, I’m going to silently weep for humanity and start plotting something fierce.

Or if you’re looking for something a bit more serious, the debut season of Game of Thrones is incredibly well made and deserves a look. Be warned though — it’s made for an adult audience.

Get the first season here
T- Shirts
Tees makes for low profile, high humor gifts. Just choose something that the receiver will appreciate and you should be golden. Extra points if the tee’s contents contains subtle puns or jargon that no one else can understand. There are lots of places to get such clothing — I’ve linked a few of my recommendations below.

Get it here
Work Related Books
…. or you could take the easy way out and present them with one of the books below. Yes, they’ll be glad that you bought them something that would truly enrich their lives but the next time the developer in your life is late to a movie or dinner, you’ll know you have yourself to blame!
Professional JavaScript for Web Developers
Author: Nicholas Zakas

“Starting at the beginning, the book explores how JavaScript originated and evolved into what it is today. A detailed discussion of the components that make up a JavaScript implementation follows, with specific focus on standards such as ECMAScript and the Document Object Model (DOM).”
JavaScript – The Good Parts
Author: Douglas Crockford

“Most programming languages contain good and bad parts, but JavaScript has more than its share of the bad, having been developed and released in a hurry before it could be refined. This authoritative book scrapes away these bad features to reveal a subset of JavaScript that’s more reliable, readable, and maintainable than the language as a whole-a subset you can use to create truly extensible and efficient code.”
Pro JavaScript Techniques
Author: John Resig

“This book addresses all the points above in detail – modern browser support (including information on Internet Explorer 7), Object-Oriented JavaScript, testing and debugging, Unobtrusive JavaScript techniques using DOM Scripting, Ajax, creating and using blocks of reusable code, and looking towards the future of JavaScript.”
jQuery Enlightenment
Author: Cody Lindley

“jQuery Enlightenment was written to express, in short-order, the concepts essential to intermediate and advanced jQuery development. Its purpose is to instill in you, the reader, practices that jQuery developers take as common knowledge. Each chapter contains concepts essential to becoming a seasoned jQuery developer.”
Introducing HTML5
Author: Bruce Lawson

“Written by developers who have been using the new language for the past year in their work, this book shows you how to start adapting the language now to realize its benefits on today’s browsers. Rather than being just an academic investigation, it concentrates on the practical—the problems HTML5 can solve for you right away.”
Professional WordPress Plugin Development
Author: Brad Williams, Justin Tadlock, Ozh Richard

“As one of the most popular open source content management systems available today, WordPress boasts a framework that allows you to easily customize and extend it through plugins. This comprehensive book shows you how plugins work, reviews the tools and APIs available in WordPress, and demonstrates how to extend the functionality of WordPress with plugins.”
Wrapping Up
I’m sure I’m missing a ridiculous number of gifts here so holler over at the comments section below. Or if you’ve already bought a gift for the developer in your life, let us know what you bought. Thanks for stopping by!
Nettuts+ Quiz #8: Abbreviations – Darth Sidious Edition

Posted: December 7th, 2011, 2:00pm MST by Siddharth

Abbreviations are an inevitable part of being a web developer. HTML, CSS, [HTTP,] XML… the list goes on and on.

This Darth Sidious edition should be a fairly advanced test of your web development force-fu. Keep in mind that this covers the entire spectrum of the web, not merely code — so be warned!

$(document).ready(function(){ $('#quiz-container').jquizzy({ questions: init.questions, resultComments: init.resultComments, twitterStatus: 'Woo! I scored {score} on the Nettuts Abbreviations quiz. Give it a shot!', twitterImage: 'http://d2o0t5hpnwv4c1.cloudfront.net/jquizzy-1.0/img/share.png', twitterUsername: 'envatowebdev', splashImage: 'http://d2o0t5hpnwv4c1.cloudfront.net/1102_quiz8/nettuts.png', }); });
Recently in Web Development (November Edition)

Posted: November 30th, 2011, 4:25pm MST by Siddharth

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!

News and Releases
All of the important news in a single place: releases, announcements, companies bickering, security issues and all related hoopla.
Mozilla Releases Popcorn
Mozilla, in their quest to make video on the web a better experience, released their Popcorn platform. Popcorn consists of a JavaScript framework as well as a creation environment.

I’m sure you have lots of questions so make sure to read more below.

Read more
Adobe to Drop Flash for Mobile Devices
This maybe a bit tangential but it’s still important news. Adobe, after a lot of attritional warfare with Apple, has decided to drop development of the Flash players for mobile devices.

Adobe plans to instead leverage HTML5 technologoy to provide more features to developers. Read on more about the topic at the link below.

Read more
jQuery 1.7 Released
A new version of our favorite JavaScript library got released this month. This bumps up the version number to 1.7.

The new features on tap in this versions include a new event API, support for the AMD API, extensions to the deferred object and many more.

Read more
Mozilla Version Version 8 of Firefox
Mozilla did promise quicker release cycles but this is quite unprecedented. We’ve gone from version 4 to version 8 in a matter of months and most of the changes have been under the hood.

Anyway, if you’re a cutting edge, curious dev, you can find more about this release at the link below.

Read more
Nimbus.IO Launches
If you’re a developer who makes use of Amazon S3 but would like more options, here is something for you.

In the footsteps of S3 comes Rackspace Cloud comes Nimbus.io, the latest entrant in this field. Even though it’s still in beta, it’s fairly stable, competitively priced and has an API that’s quite similar to S3.

Read more
jQuery Mobile 1.0 is Out
In the midst of jQuery releases, it’s easy to forget that jQuery mobile exists. The mobile framework has been slowly creeping towards the version 1.0 release and it’s finally here.

If you’re a mobile dev, or even just someone who wants to dabble around with mobile development, you really need to go browse around at the link below.

Read more
Twitter Bootstrap Gets Updated
The wildly popular toolkit from Twitter got upgraded with a substantial number of fixes and performance improvements over the last few weeks.

If you’re a bit curious about what Bootstrap is, we do have a little tutorial that makes use of Bootstrap.

Read more
Node v0.6.0 Released
NodeJS, the JavaScript userbase’s recent darling, has been getting a steady stream of updates recently. Earlier this month, Ryan brought Node upto version 6 with a number of improvements including better Windows support.

Read 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.
Lungojs
Meet the first Mobile Framework that uses the actual features of #HTML5, #CSS3 and #JavaScript.

Read more
Slider.js
Slider.js is an easy-to-use customizable Javascript library to create image slideshows. It relies on latest web technologies: the power of CSS Transitions to perform awesome and efficient effects and the HTML5 Canvas to perform some non trivial transitions.

Read more
Face detection jQuery Plugin
A neat little jQuery plugin which detects faces in pictures and returns theirs coords.

Read more
Flatiron
An unobtrusive framework initiative for node.js. Flatiron promotes code organization and sustainability by clearly separating development concerns.

Read more
backbone-on-rails
A simple gem for using Backbone.js with Rails (>= 3.1), based on thoughtbot’s Backbone.js on Rails

Read more
kibi
An easy-to-use single-page app framework in 1,024 bytes of JavaScript. kibi currently weighs in about 200 bytes less, so there’s still room for improvement.

Read more
Derby
MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers.

Read more
BicaVM
This project is an implementation of a JVM in JavaScript. At the moment it runs Java code, but is more like a proof of concept than a real JVM.

Read more
RightJS
Even though RightJS has been around for a while, this new version brings a lot of new features since there are a ton of new features and fixes with this version.

Read more
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.
Why Parsing XHTML with RegEx is a Bad Idea
A cry for help or an artistic masterpiece? You decide. A user asks for assistance with regex for parsing XHTML leading to this linked piece.

Read more
HTML5 2D Gaming Performance Analysis
With HTML5 showing great growth, lots of developers have started using canvas and WebGL for developing games and such. If you’re thinking of making the move, this is a must read article that explores the performance facet of these technologies.

Read more
The Last PHP PDO Library You Will Ever Need
A developer’s thoughts on ORMs, SQL generation tools and how he came to write his own mini PDO library.

Read more
CoffeeScript Means Giving Up on JavaScript
Michael Woloszynowicz explains why he’s alarmed at the recent move towards languages that compile to JavaScript instead of merely using JavaScript itself.

Read more
Response to “CoffeeScript Means Giving Up on JavaScript”
As is the case with strongly opinioned prose, the above article ignited a heated discussion among the web and here’s a rebuttal that I found the most prgamatic and, well, terse. Good read!

Read more
MongoGate — or Let’s Have a Serious NoSQL Discussion
Need the down low on the current NoSQL situation? I’ve got something for you. This piece by Martin Scholl is a great read if you’re interested in the topic.

Read more
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!
50 Practical, Problem Solving Items

Posted: November 25th, 2011, 11:14am MST by Siddharth

In the real world, we have to adhere to tight deadlines — so tight that it’s often not feasible to create everything from scratch. In these situations, a well-built and tested template can be of enormous help. I’ll show you some of my favorites today, including everything from landing pages, to resumes, to under construction templates!

Admin Templates Adminica | The Professional Admin Template
Adminica is a cleanly coded, beautifully styled, easily customisable, cross-browser compatible Admin Template and Web Application Interface.
TERMINATOR – 13 different Admin Backend pages
Admin backend template that has a hell of a lot of features. It’s designed with cool “Storm Black / Aluminium” colors to make your backend even better than it is
White Label – a full featured Admin Skin
A full featured skinable and responsive CMS /Admin Panel with custom plugins, widgets, forms, validations, charts, galleries and much more
Grape – Professional & Flexible Admin Template
Grape is a professional and very flexible admin template for huge and small backend solutions. It includes custom plugins, forms, validations, charts, tables, notifications and much more.
Chameleon Circuit – Full Featured Admin Theme
Chameleon Circuit is a beautifully coded full featured admin panel theme ready to be implemented in the back end of your application, or as an intranet theme! The theme, like its namesake, can change colors into anything you want, so instead of a specific number of skins, you have an unlimited variation!
Admin Control Panel v2
Features a very slick design, rich typography ans is tablet ready (iPad + Android)
Streamlined – Content Management/CRM Template
Streamlined is an admin template for Contact Management and CRM applications. It includes element styles for buttons, tabs, tooltips, progress bar, and others.
vPanel – Application Framework
vPanel is an application framework with all the necessary features and tools you would need to build an admin panel or a software-as-a-service app. It comes with an html template version, so you can use it with other frameworks, and a zend framework ready version.
Constellation Complete Admin Skin
Constellation is a powerfull admin skin for building advanced backends, both for desktop and mobile users. It provides a wide range of styles from data visualization to lists and calendars, all fluid and nestable. This skin is build on HTML5 and CSS3 , and is powered by jQuery for maximum user experience.
Email Templates FeastMail 2 – Christmas Email Template
Feast Mail 2 is a Christmas email template with twelve exclusively designed Christmas collages. It is a great possibility to make warm relations with your clients by sending them this beautiful Christmas greetings email! This email has all you need to promote your products this Christmas and make awesome discount propositions.
Market – Newsletter and Template Builder
Market features 8 Prebuild Layouts, 24 Color Variations, 26 different Elements and 768 HTML Files.
High Definition E-mail Template
Aren’t you making any money from your Apps? Do you think more people should see your awesome designed software? Boost up your views with this extremely clean designed E-mail Template.
Christmas Season Email Template

Christmas Season Email Template is a premium HTML email template designed and built especially for the Holiday Season to showcase anything from your mobile or desktop application, portfolio, product(s), services or simply to share news with customers, friends and clients.
Versatile Newsletter 3 – automated layout creator!
The combination between the 11 unique newsletter templates, an easy to use automated layout creator that allows the creation of new newsletter templates instantly, modular layouts that simplify extending/ adapting newsletter templates and robust, properly tested and commented source code makes Versatile Newsletter 3 one of the most complete newsletter packages you can buy at themeforest.
COPRO – 14 E-mail Templates
14 modern corporate newsletter templates made in 7 different color schemes (orange, red, purple, blue, turquoise, green, gray) with inline CSS and flexible table structure for quick and easy layout manipulation (delete/copy/replace table rows inside and between layouts).
Express Mail Newsletter Template
Express Mail is a template design that caters for all businesses. The template comes with all the essential generic information and elements to get you started.
Virtual Business Cards Stylish Vcard – 11 Modern Skins Squares – HTML5 vCard/Portfolio Template
Squares is a vCard/Portfolio template built with the latest web standards and best practices. Introduce yourself and your work to future clients and employers through a clean and simple web page.
vCard – a personal profile template vCard – a personal profile template
vCard is a simple template designed to showcase your online persona in a list of your social network profiles. There’s also space fo an about page and a fully functional AJAX contact form is included.
vCard – a personal profile template
DotMe is a premium HTML /CSS business card template perfect for any creatives – designers, developers or even photographers.
Strokes! Personal Website Template
Strokes! is a vibrant personal website template, which can be used as a virtual business card on the web.
Grey & Black – Stylish Online vCard Html Template
Grey & Black is a professional online vCard template that is minimal and clean in design. It will help you to create your very own virtual business card, with the ability to showcase your featured projects in style.
Introducto – Personal Website / V Card Template
Introducto is a virtual business card (vcard) template intended for people who want to set up a professional looking web presence in minutes.
My VCard – Premium Template
This is a clean and professional flash like template, perfect for personal website. It’s a simple and minimal looking site with a rare shuffle effect.
Elegant Vcard
Features 6 backgrounds, 4 Pages, fully labeled layered, grid based, easily sliceable PSD files and valid CSS /XHTML
Under Construction Templates Landerous – Under Construction Page
Landerous is just another Under Construction/Coming Soon/Landing template – specially created to tell your visitor that your site is in progress. Clean and professional look with unique design will satisfy all your needs.
Under Construction page with twitter & pie graph!
Make sure your visitors know whats going on with this Under construction site template that features a feed of your latest tweets (which can be easily removed if you dont use twitter) and a pie chart that is easy to change to reflect your progress!
NEOTERIC—The Ultimate Under Construction Page!
NEOTERIC is a clean single page “Under Construction/Coming Soon” template in 10 SKINS designed to keep your users up to date on your site’s progress.
Easy Coming Soon with Pie Chart, 10 colors + Bonus
Easy Coming Soon is an easy and flexible under construction page that will easily let you define your upcoming website and represent it’s current status, supported by a nice looking easily editable pie chart, and ajaxed mailing-list form to keep your visitors up to date.
Chronos Under Construction Template + WP Theme
Easily customize all settings in PHP configuration file or simply install Chronos as a WordPress theme and manage everything from one single page, with a click of a mouse.
Launch Pad – Full Screen Image Under Construction
Launch Pad is a stylish full screen background under construction template with animated progress bar and countdown timer, perfect for showing off your visual work while your website is being developed. Background switcher controls allow you to cycle through background images, which are preloaded to cut loading time. A Fancybox gallery is included so you can show your work.
Marketing and Landing Pages Promo – Landing Page for Digital Product Sales
Sporting a clean minimal style, with lots of breathing space, ensuring nothing get in the way of your product’s showcase. Easy to set up, maintain and easy to replicate for new products, this sophisticated little template is a steal.
TheLanding Landing Page
TheLanding is a simple landing page with half or full header video options! Easily customize the landing page with the included instructions.
Oceanic Landing Page
Oceanic Landing Page is a premium landing page design for any kind of app or download product – even just a service – your choice! With multiple sections available, plus a tabbed area for a huge amount of information if required, this template takes good use of the Z Reading pattern to guide the eye around the design and ultimately convert your visitors in to buyers.
Unveiled – Ultimate Product Focused Landing Page
Unveiled is the ultimate product-centered landing page. With an eye-catching design, the call-to-action high-up the page and an impactful splash intro – this theme is sure to convert your visitors into customers.
BookPage – Sell your books with Style!
BookPage is the landing page template for all those internet marketeers who are releasing their own (E) Book. It has everything you need to show of your hard work.
Autopilot Landing Page (3 Themes)
Autopilot is a landing page design best suited for all businesses and industries. The template comes with one HTML and one PHP file (contact form). It comes with three themes – realistic, festive and generic.
Resumes and CVs Clean CV / Resume Html Template + 4 Bonuses!
Clean Cv / Resume is a html template that will help you set up a professional online CV in minutes and broaden the chance of finding a suitable job as many recruiters resort more and more to browsing online for prospective applicants instead of advertising their position and calling for applicants.
Awesome Online Resume/CV
This is a clean, modern and colorful (optional) Resume/CV theme suited for everyone! It is very easy to edit and includes 10 minutes of video documentation showing you exactly what to do!
Bold – CV / Resume Template – Minimal & Smart
Bold is a minimal and clean one-page CV / resume HTML + PHP template featuring print-ready and mobile-ready versions, downloadable PDF version generated on-the-fly, working Ajax contact form, jQuery lightbox gallery and social media section. It is also very easily editable and configurable.
Professional & Clean HTML CV RESUME
This template is a complete HTML CV Resume. Useful to present your skills and your personal portfolio.
Pinstripe – Premium Resume / CV Template
This is a professional pinstriped CV / Resume with a plethora of slick jQuery effects. A great way to present yourself to any potential employers / clients.
Typographic CV – impressive resume template
Typographic CV is online resume / CV template. It was created to impress your future employers or clients. And it definitely will: strong typographic design, good visual hierarchy, unique layout, cool gallery section and much more.
JumpBox – Animated Resume/Portfolio
Jump Box is a premium Ajax based CV(Resume)/Portfolio animated website template. This template is perfect to use for small websites. It can be used as a CV/Portfolio Template, Landing Page, or any website with a little number of pages.
404 and Error Pages Lost in Space – Error 404 Lost in Space – Error 404

Simple and aesthetically pleasing template with animated background. Valid HTML and CSS. Ready for all common HTTP errors, like 401, 403, 404, 500 and 503 or for many other purposes.
Modern Custom 404 Error Page
You can use this Modern Custom 404 Error Page pack for any type of errors on your site. It is designed with usability in mind – to help the user get what he wants . It’s fully customizable and browser compatible and you can choose between 16 color schemes.
Save me – 404 Error Page
“Save me” is an unique new error page, that focuses on helping the user through the frustration of getting a website error, in an user friendly and intuitive way.
Cosmo Error Page
Cosmo Error page. It has all you need – links to your other pages, links to your social profiles, working contact form.
Custom 404 Error Page – Missing Jigsaw Piece
Missing jigsaw piece custom 404 error page, in two styles; grey and dark gloss. The layout has subtle embossed text effects and textures, giving you an original look to the design.
Lost in the Clouds – Error 404
Valid HTML and CSS. Ready for all common HTTP errors, like 401, 403, 404, 500 and 503 or for many other purposes.

My RSS » Items by Siddharth

Feeds

Items by Siddharth

Posted: April 30th, 2012, 2:04pm MDT by Siddharth

Posted: April 28th, 2012, 2:13am MDT by Siddharth

Posted: April 24th, 2012, 12:07pm MDT by Siddharth

Posted: April 13th, 2012, 2:29pm MDT by Siddharth

Posted: March 31st, 2012, 2:36pm MDT by Siddharth

Posted: March 29th, 2012, 1:25pm MDT by Siddharth

Posted: March 17th, 2012, 12:44pm MDT by Siddharth

Posted: February 29th, 2012, 10:58am MST by Siddharth

Posted: February 25th, 2012, 1:49pm MST by Siddharth

Posted: February 18th, 2012, 7:39am MST by Siddharth

Posted: February 13th, 2012, 2:13pm MST by Siddharth

Posted: January 30th, 2012, 1:37pm MST by Siddharth

Posted: January 26th, 2012, 2:38pm MST by Siddharth

Posted: January 16th, 2012, 10:00am MST by Siddharth

Posted: December 26th, 2011, 8:27pm MST by Siddharth

Posted: December 19th, 2011, 2:00pm MST by Siddharth

Posted: December 7th, 2011, 2:00pm MST by Siddharth

Posted: November 30th, 2011, 4:25pm MST by Siddharth

Posted: November 25th, 2011, 11:14am MST by Siddharth