Everyone knows that in order to create the best websites you need to be up-to-date with the latest trends and developments. We asked experts and long timer designers and developers to share with us their favorite books, and the result is a selection of the very best books that everyone should read. Our list includes 25 books that all developers must read if they want to create great web sites. We cover everything from HTML to CSS, JavaScript and jQuery books.

1. Introducing HTML5

Authors: Bruce Lawson and Remy Sharp Price: $17 Amazon Kindle Buy now

As HTML5 continues to evolve, browsers are implementating at break-neck speed and HTML5 web sites spring up like flowers after rain.Lawson and Sharp’s Introducing HTML5, now in its second edition, helps you get acquainted with the possibilities of HTML5; it also explores the good and the bad within the spec, along with discussing aspects not yet fully implemented in browsers.

2. The Essential Guide to CSS and HTML Web Design

Author: Craig Grannel Price: $23.09 Buy Now

The Essential Guide to CSS and HTML Web Design is a great book, if you need suggestions on how to create great web sites that are standards compliant, usable, and look great,  and yet the book isn’t filled with boring and dry theory. No matter at what stage of your design career you, the mixture of practical tutorials and reference material makes this book invaluable to both beginners and more experienced designers.

3. HTML and CSS: Design and Build Websites

Author: Jon Duckett Price: $18 Buy Now

Every day, more and more people want to learn some HTML and CSS. Joining the professional web designers and programmers are new audiences who need to know a little bit of code at work (update a content management system or e-commerce store) and those who want to make their personal blogs more attractive. Many books teaching HTML and CSS are dry and only written for those who want to become programmers, which is why this book takes an entirely new approach.

4. CSS3 for Web Designers

Author: Dan Cederholm Price: $18/$9 (paperback/ebook) Buy now

Cederholm’s book aims to show how CSS3 is a “universe of creative possibilities”, providing insight into web fonts, advanced selectors and the many visual enhancements the technology can bring to web pages. Eric Meyer, An Event Apart partner and co-founder, says: “With Dan you know you’re getting great visual design with a fun theme, wrapped around great technical information. This book delivers big time.”

5. Handcrafted CSS: More Bulletproof Web Design

Author: Dan Cederholm and Ethan Marcotte Price: $29 Buy now

Master sophisticated CSS layout methods powered by a philosophy of ‘progressive enrichment’. Create fluid designs that support today’s plethora of connected devices, and learn techniques that create a living, textural look and feel without killing your user’s bandwidth. Dare to innovate fearlessly and gain tips on persuading your clients to accept your innovations.

6. HTML5 & CSS3 For The Real World

Author: Estelle Weyl, Louis Lazaris and Alexis Goldstein Price: $25 Buy now

One of a number of books concentrating on the core of new web technologies, HTML5 & CSS3 is all about creating dynamic websites with new toys. Instead of fluff and hype, it concentrates on fun, effective techniques that you can start using immediately. According to Studholme: “This book manages the impressive task of covering a massive amount of content without being a tome. It’s full of useful insights and real-world advice.”

7. JavaScript Enlightenment

Author: Cody Lindley Price: $15 (PDF edition) Buy now

This is the book that might transform you from a JavaScript library user into a JavaScript developer. Most of us old-timers learned JavaScript by reading other people’s code and through blind experimentation, so we missed out on a lot of the fundamentals. In this book, Cody does an amazing job walking through the ECMA spec, detailing the intricacies of the JavaScript language.

8. Scalable and Modular Architecture for CSS

Author: Jonathan Snook Price: $15 (Canadian) Buy now

In this book, which started life as a website, Snook outlines the methodology behind SMACSS (pronounced ‘smacks’), a means to examine your design process and fit rigid frameworks into a flexible thought process, thereby resulting in a consistent approach to site development when using CSS.

9. Stunning CSS3

Author: Zoe Gillenwater Price: $29 Buy now

Far too many CSS books are little more than elaborate reference guides, but Gillenwater takes a different approach, helping you learn the power of CSS3 through practical, eye-catching examples. “I don’t think this book has got the promotion and attention it deserves,” says Rewis. “It is sincerely one of the most practical, informative and lovely CSS3 books out there, due to Zoe using a project-based approach throughout to illustrate the concepts.”

10. The Truth About HTML5

Author: Luke Stevens Price: $20 Buy now

As designer and developer Sebastian Green points out, the title of this book shows this is a rather different take on HTML5: “It highlights the myths currently in circulation about the spec and also gives some information about the procedures behind creating it.” Green says the book details how people are using new tags but also shows they may have interpreted the spec incorrectly and headed in the wrong direction. It also explores a groundbreaking semantics initiative, what happens when Flash dies, and how HTML5 alters fundamental components of the web.

11. The Definitive Guide to HTML5

Author: Adam Freeman Price: $25 Buy Now

The Definitive Guide to HTML5 provides the breadth of information you’ll need to start creating the next generation of HTML5 websites. It covers all the base knowledge required for standards-compliant, semantic, modern website creation. It also covers the full HTML5 ecosystem and the associated APIs that complement the core HTML5 language.

12. HTML5: The Missing Manual

Author: Matthew MacDonald Price: $23 Buy now

HTML5 is more than a markup language—it’s a dozen independent web standards all rolled into one. Until now, all it’s been missing is a manual. With this thorough, jargon-free guide, you’ll learn how to build web apps that include video tools, dynamic drawings, geolocation, offline web apps, drag-and-drop, and many other features. HTML5 is the future of the Web, and with this book you’ll reach it quickly.

13.  Responsive Web Design with HTML5 and CSS3

Author: Ben Frain Price: $40 Buy now

Responsive web design, in my opinion, represents huge potential for business web development. It can be so easy to view it as just another buzzword, more marketing jargon if you may but if you take the time to understand what is means for web development, you will see its pretty hot with huge potential. The author moves through a well worked out movie website project to show that Responsive web design is not a huge single monolithic thing but instead a series of existing technologies ( HTML5, CSS3 ) and design techniques ( flexible grid layout, flexible images and media and media queries ).

14. CSS3: The Missing Manual

Author: David Sawyer McFarland Price:$20 Buy now

CSS3 lets you create professional-looking websites, but learning its finer points can be tricky—even for seasoned web developers. This Missing Manual shows you how to take your HTML and CSS skills to the next level, with valuable tips, tricks, and step-by-step instructions. You’ll quickly learn how to build web pages that look great and run fast on devices and screens of all sizes.

15. The Book of CSS3: A Developer’s Guide to the Future of Web Design

Author:Peter Gasston Price:$21 Buy now

CSS3 is the technology behind most of the eye-catching visuals on the Web today, but the official documentation can be dry and hard to follow. Luckily, The Book of CSS3 distills the heady technical language of the CSS3 specification into plain English, so you can get started on your next project right away. With real-world examples and a focus on results, The Book of CSS3 shows you how to transform ordinary text into stunning, richly detailed web pages fit for any browser. You’ll master the latest cutting-edge CSS features, like multi-column layouts, borders and box effects, and new color and opacity settings.

16. Stylin’ with CSS: A Designer’s Guide (Voices That Matter)

Author: Charles Wyke-Smith Price:$25 Buy now

In this completely revised edition of his bestselling Stylin’ with CSS, veteran designer and programmer Charles Wyke-Smith guides you through a comprehensive overview of designing Web pages with CSS, including the advanced capabilities of CSS3 that are now widely implemented across all the major browsers.

17. Smashing CSS: Professional Techniques for Modern Layout

Author:Eric Meyer Price: $25 Buy now

Smashing CSS takes you well beyond the basics, covering not only the finer points of layout and effects, but introduces you to the future with HTML5 and CSS3. Very few in the industry can show you the ins and outs of CSS like Eric Meyer and inside Smashing CSS Eric provides techniques that are thorough, utterly useful, and universally applicable in the real world. From choosing the right tools, to CSS effects and CSS3 techniques with jQuery, Smashing CSS is the practical guide to building modern web layouts.

18. Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics

Author: Jennifer Niederst Robbins Price: $27 Buy now

Do you want to build web pages, but have no previous experience? This friendly guide is the perfect place to start. You’ll begin at square one, learning how the Web and web pages work, and then steadily build from there. By the end of the book, you’ll have the skills to create a simple site with multi-column pages that adapt for mobile devices.

Learn how to use the latest techniques, best practices, and current web standards—including HTML5 and CSS3. Each chapter provides exercises to help you to learn various techniques, and short quizzes to make sure you understand key concepts.

This thoroughly revised edition is ideal for students and professionals of all backgrounds and skill levels, whether you’re a beginner or brushing up on existing skills.

19. JavaScript & jQuery: The Missing Manual

Author: David Sawyer McFarland Price: Buy now

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects—but many web designers find the language hard to learn. This jargon-free guide covers JavaScript basics and shows you how to save time and effort with the jQuery library of prewritten JavaScript code. You’ll soon be building web pages that feel and act like desktop programs, without having to do much programming.

20. Learning jQuery

Author:Jonathan Chaffer, Karl Swedberg Price:$40 Buy now

Step through each of the core concepts of the jQuery library, building an overall picture of its capabilities. Once you have thoroughly covered the basics, the book returns to each concept to cover more advanced examples and techniques. This book is for web designers who want to create interactive elements for their designs, and for developers who want to create the best user interface for their web applications. Basic JavaScript programming and knowledge of HTML and CSS is required. No knowledge of jQuery is assumed, nor is experience with any other JavaScript libraries.

21. Practical CSS3: Develop and Design

Author: Chris Mills Price: $21 Buy now

This book teaches how to use CSS3 to build cool, responsive user interface features that are feasible for use in real-world projects today. Readers will appreciate the author’s approachable style and will catch on quickly with this easy-to-follow, practical guide. Well known and respected CSS3 expert Chris Mills devotes much of the book to creating fallbacks for older browsers, so that the content will still be accessible and usable.

22. Core HTML5 Canvas: Graphics, Animation, and Game Development

Author: David Geary Price:$31 Buy now

Even though Core HTML5 Canvas is written for experienced software developers with an intermediate-level understanding of JavaScript, there is really something in here for everyone. This book shows you how to implement anything you can imagine with the Canvas 2D API, from text editors to video games.

23. Head First HTML and CSS

Author:Elisabeth Robson Price:$23 Buy now

Do you ever feel like a book only makes sense when you are already an expert at something, well then it’s time you picked up Head First HTML, this book will give you a great introduction to learning HTML so you can finally create those web pages you’ve always wanted. Oh, and if you’ve never heard of CSS, that’s okay–however if you want to create great websites today there is really no way around CSS, and thats why this book also covers CSS.

24. CSS Pocket Reference

Author: Eric A. Meyer Price: $11 Buy now

Sometimes you just can’t remember all the different codes needed for a website, well thats where CSS Pocket Reference delivers. This book has all the most essential information you need to implement CSS on the fly. This book is aimed at more advanced designers who just need to quickly check up on something. Along with a complete alphabetical reference to CSS3 selectors and properties, you’ll also find a short introduction to the key concepts of CSS.

25. jQuery: Novice to Ninja

Author:Earle Castledine Price: $23 Buy now

This book is great if you want to jump-start your journey into jQuery. Whether you are a beginner or an experienced developer this book will have something for you. The book starts of with the basics, and then moves on to more advanced techniques, such as plugin development and the creation of almost every conceivable UI widget.

...

We’ll finish our Learning LESS series today as we talk about putting your LESS into action on your web projects. Today’s post will be slightly different than previous posts, as we won’t really showcase new techniques and code examples as much as we’ll talk about how to use LESS, projects you can work on to jump start your LESS development and more.

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

Coding With LESS

If you read our introduction to the Learning LESS series, you saw that I recommend compiling all of your LESS locally, and simply linking to one CSS stylesheet. Two of the top programs to do this is LESS.app and CodeKit, both from Incident57.

LESS.app

LESS.app is a free application that will detect all of the LESS files in your web folder, and compile them to CSS. You can set specific output folders and select which LESS files you actually want to compile (this comes in handy if you’ve divided up your LESS into smaller modular files and import them all into one stylesheet). Additionally, you can minify your CSS from this application, saving your precious file size (but don’t even think about editing your CSS file).

CodeKit

CodeKit is the next generation of the LESS.app and has a $20 price tag attached to it (to help the creator pay off his student loans, so in reality, it aint that bad). CodeKit compiles LESS perfectly, but does a lot more. It also compiles Sass, Stylus, Haml, Coffeescript, JavaScript and Compass files. Granted, I don’t know much about those other file types (other than JavaScript), but … CodeKit can compile them! Additionally, CodeKit has a pretty awesome feature where when you save your code, your browser will automatically refresh to reflect the changes, and it does it with some cool CSS3 animations.

LESS Projects

If you want to get a jump start on using LESS in your projects, I’d recommend grabbing an open source project that already utilizes LESS. It’s the best way to dig into the techniques and tricks that experienced and expert web developers use on their projects. I’ll run through a series of projects that I utilize on a daily basis that uses LESS.

Bootstrap, from Twitter

Bootstrap, from Twitter is one of the most popular open source projects on the web right now. Developed by Mark Otto and Jacob from Twitter, Bootstrap is a set of HTML, CSS and JavaScript components for baseline user interface components and interactions, including a responsive design, UX items such as buttons, forms, and more.

Bootstrap uses LESS as the basis for all of their styles, and really divides up their code into small, modular files, which becomes extremely maintainable and easy to understand.

Responsive Bones Theme for WordPress

If you’re into designing and developing for WordPress, might I suggest starting with Bones? There are a lot of WordPress starter themes out there, but in my opinion, not much do it better than Eddie Machado’s Bones.

The responsive version of Bones uses LESS to structure a responsively designed WordPress site, using CSS3 media queries to determine which LESS file is loaded into the compiler. It’s a pretty nifty system, and definitely worth a look if you’re looking at working with WordPress.

320 and Up Project

320 and Up is the ‘tiny screen first’ responsive boilerplate. This project is a perfect starting point for those looking to create a responsive website, but not building it straight into a CMS. If you’re just looking for a website, or will be looking to import it into another CMS like ExpressionEngine, 320 and Up is the place to be.

The project uses LESS to create a responsive framework for you to style up, starting with the smaller screens and working up, as opposed to designing for a desktop and scaling down. It’s an interesting concept, and definitely one to check out!

Conclusion

That wraps up our Learning LESS series here on DeveloperDrive. Thanks so much for reading, commenting and discussing. Do you have any other projects you know that use LESS that you use? Leave them in the comments below.

...

Offline storage is one of the most anticipated features of HTML5. With users browsing to your pages and accessing your Web apps on various devices, often with limited connectivity, the Application Cache utility could prove to be a serious advantage. With HTML5 App Cache, you can instruct supporting browsers to cache copies of certain files. Once these files have been downloaded they will then be accessible offline. In this tutorial we will work through a simple example of caching a page, including an image and external JavaScript file.

Create an HTML5 Page

Create your HTML5 page using the following initial outline:

<!DOCTYPE html> <html> <head> </head> <body> <h1>Lovely Picture</h1> <canvas id="picCanvas" width="450" height="350"></canvas> </body> </html>

The page is going to include a drawing within the canvas element, which will in turn include an image. The canvas element at the moment simply specifies dimensions, we will use JavaScript in a separate file to draw within it, referencing it through the ID attribute.

Create a JavaScript File

So that we can test the App Cache function, let’s create a separate JavaScript file to work with the page. Create a new file and save it “picdraw_functions.js”.

Enter the following function:

function drawPic(picSRC, canvasElem) { //get the canvas using passed element ID var canv = document.getElementById(canvasElem); //get the context var cont = canv.getContext("2d"); //define a gradient to spread across the canvas diagonally var grad = cont.createLinearGradient(0, 0, 450, 350); //define two colors grad.addColorStop(0, "#000033"); grad.addColorStop(1, "#003300"); //set the gradient fill cont.fillStyle = grad; //fill the entire canvas with the gradient cont.fillRect(0, 0, 450, 350); //create the image var picImg = new Image(); //draw the image so that it is centered...

In part one we looked at a few of the useful array methods that Underscore provides for us. In this part of the tutorial we’re going to take a look at some of the syntactic sugar that Underscore gives us to work with array-like collection. An array-like collection is something similar to array in that it is a collection of things as opposed to a single value, but they lack some of the things that arrays possess, such as a length property.

We’ll be using the following JavaScript collections in the examples shown in this tutorial:

var myCollection = { one: ["one", "two", "three", "four", "five"], two: [1, 2, 3, 4, 5] }; var myCollection2 = [ { name: "Dan", age: 33 }, { name: "Fred", age: 44 } ];

each()

The each() method is used to iterate over an array-like collection. It accepts a minimum of two arguments where the first argument is the collection to iterate over and the second is an iterator function which is invoked for each item in the collection. To use this method with our first test collection, we could do this:

_.each(myCollection, function(item) { alert(item.length); });

The arguments passed to the iterator function will vary depending on the type of object it is iterating; if it is a standard array the function will be passed the current item, the array index the item is at, and the source array. If it is an object, such as in this example, the arguments are the value of the current item, the key (or property name), and the source object.

The each() method may also accept a third argument which is the context in which the iterator function should run. This can be incredibly useful when using each() inside a callback function, as typically the value of the this object is lost inside these functions, which can be corrected by passing in the object to use as the context for this.

size()

We used the length property as the value of our alert in the previous example, which worked because the value we were checking was a proper array. I mentioned above that one of the differences between arrays and array-like collection is that the latter do not have length properties. That can be annoying can’t it? The size() method overcomes this minor irritation for us and tells us the number of items in the collection:

_.size(myCollection);

With our test object, this will result in a value of 2, which can be useful when we need to know how many items we’re dealing with, but don’t necessarily know if we’ll be working with an array or an object.

pluck()

pluck() is a super-useful method used to extract a matching property from a series of collections. This can be incredibly useful when working with something like a collection in Backbone. To ‘pluck’ each value of name from our test array, we could use this:

_.pluck(myCollection2, "name")

In this case out test collection is an array where each item in the array is an object containing two properties. The method returns an array containing the values extracted from the source collection.

filter()

The filter() method is used to filter values out of a collection that do not pass a conditional. Similar to the each() method, it accepts a collection and an iterator function (and optionally a context), and returns an array containing only those items that pass the test. To filter all items out of our second test collection whose name properties do not contain the letter a for example, we would use the method like this:

_.filter(myCollection2, function (item) { return item.name.indexOf("a") !== -1; });

The call back function we provide should encapsulate the logic required to test each item and should return either true or false. Items for which false are returned are not include in the array that is returned.

This method also has a polar opposite, the reject() method, which returns an array containing only those items that that fail the test.

shuffle()

Need to take a sorted collection of items and shuffle them randomly in a non-biased way? If so, the shuffle() method will be your friend. Let’s say we want to shuffle the array stored in the key one in our test object; we could simply do this:

_.shuffle(myCollection.one)

The algorithm used to shuffle the collection is based on a tried and tested method of randomly sorting a collection so you can be sure that the array that is returned will be as random as if we had drawn scraps of paper from a hat.

sortBy()

The sortBy() method allows us to perform a sort on a collection based upon specific criteria. For example, to sort the objects within our third example collection based on the name property of each object we could use the following code:

_.sortBy(myCollection3, function (item) { return item.name; });

The arguments used with this function have the same signature as those used with some of the other methods we’ve looked at today and consist of the collection as the first argument, an iterator function as the second and optionally, a context as the third. The iteration function simple returns the value in the collection that we want to sort by. The sort is always done in ascending order.

We can also use this method with integers, for example:

_.sortBy(myCollection3, function (item) { return item.age; });

In this case, the objects are sorted based on the age property instead, which will result in an array where the first item is the youngest and the last the oldest.

Summary

As we as the methods we have looked at today, there are lots of other methods that help us when working with arrays or array-like collections of data, giving us quick and easy ways to do common tasks such as filtering, sorting or shuffling.

As well as actually operating on the data in the collection in some way and returning a new modified collection, we can also test the collection using methods such as all() which returns true if all items in the collection pass a conditional test, or any() which returns true if any of the items pass a conditional. In the next part of this tutorial we’ll take a look at some of the methods for working specifically with objects.

...

Underscore.js is a tiny JavaScript utility library that makes working with some of the common data structures used in JavaScript much easier. Minified and GZipped it weighs in at less than 4Kb and where possible it delegates functionality to native browser implementations for performance. It has no other dependencies and so adds very little overhead to your total script assets. It can be used on the client or server with equal ease.

Using Underscore is extremely easy; it isn’t tightly bound to the DOM, doesn’t make any assumptions about other libraries or frameworks that may be in use and doesn’t require any setup or configuration; you simply include the library file in your page and you can start calling its methods.

We’ll be using the following JavaScript arrays in the examples shown in this tutorial:

var myArray = ["one", "two", "three", "four", "five"]; var myArray2 = [1, 2, 3, 4, 5]; var myArray3 = [1, 5, 2, 2, 8, 5, 3, 8, 9, 0];

Working with arrays

Arrays are very common data structures in JavaScript, heavily used by many popular JavaScript libraries, for example, whenever jQuery returns an element (or elements) from the DOM, it returns it (or them) in an array. You may be using arrays and not even know it! In case anyone doesn’t know, an array is simply a collection of native values (strings, integers, objects, etc) where each value has a numerical index associated with it. Let’s look at some of the useful array methods provided by Underscore:

indexOf()

JavaScript has long had the indexOf() method for finding a character or sequence of characters within a string of text. The latest version of JavaScript (or ECMA Script upon which each browser’s implementation of JavaScript is based) includes an indexOf() method that works in a similar way but with arrays. It returns either the index of the first matching item in the array or -1 if a matching item is not found.

But guess what, only the very latest version of Internet Explorer supports this incredibly useful array method, so if older versions of IE must be supported, we need some other way of adding support. Enter the ring Underscore, which allows us to make use of it on older browsers.

To use this method to find the index of the string three in our test array, we could use the following code:

_.indexOf(myArray, "three")

All Underscore methods are attached the _ object, much in the same way that jQuery methods are attached to the $ object. To use indexOf() we supply the array to search as the first argument and the term we are searching for as the second. There is also a third argument which takes a Boolean indicating whether the array is already sorted, which runs a much faster search algorithm. Underscore also ships with a lastIndexOf() method which finds the last occurrence of something within an array. Pretty useful.

union()

Another useful method, this time with no native JavaScript counterpart to leverage, is the union() method. This method takes any number of arrays and returns a single array containing any items that appear in one or more of the original arrays. To see the union of two of our example arrays, we could use the following code:

_.union(myArray2, myArray3)

The returned array will contain the items in the order in which the source arrays are passed in.

uniq()

Another exceptionally useful method, similar in some respects to the union() method is uniq(). This method accepts a single array as an argument and returns an array containing only the unique items from the source array. To filter out the duplicates in our third example array, we could pass it to uniq() like this:

_.uniq(myArray3)

Just like the indexOf() method that we saw a moment ago, this method can accept a Boolean as the second argument which specifies whether the source array has already been sorted. If it has a much faster algorithm is used to weed out the duplicates.

This method uses the strict equality test (===) in its comparator function to determine whether two items are identical or not. In some situations, this may be more strict than we require, for example this !== This. To help alleviate issues such as this, we can pass a transformation function to this method as the third argument. If we were trying to make the method case-insensitive, we could use this:

_.uniq(myArray3, false, function(item) { return item.toLowerCase(); });

The transformation function receives the ‘current’ item each time it is invoked (it will be invoked for each item in the source array) and should return the transformed item. In this case, we just convert the item to lowercase before returning it. No more casing issues.

zip()

The zip() method takes any number of input arrays and returns a number of arrays where the same items from the same indices or the source arrays have been merged. It sounds tricky in words, but when you see what happens you’ll understand immediately. To zip up the first and second of our test arrays for example, we would use the method in this way:

_.zip(myArray, myArray2)

When you see the output of this expression, you’ll see that the first array returned contains the items “one” and 1, the second array contains the items “two” and 2, etc.

In this example, both source arrays contain the same number of items, so the output is pleasingly neat. We can also pass arrays with differing numbers of items and the method will still work, but some of the arrays returned will have undefined values at some of the indices.

range()

The range() method is interesting because although it is used with arrays, it doesn’t accept any arrays as arguments. Instead it accepts integers, and uses them to return an array containing a sequence of numbers. It can accept several arguments; the first argument, which is optional and defaults to 0, is the starting number. The second argument is the number to stop at, and the third argument is the step value. Again, this may be a tricky method to get your head around theoretically, but in this case, examples speak louder than words, so let’s take a look at a couple of variations.

If a single argument is provided, it is assumed to be the number to stop at and 0 is used as the starting number. 1 is used as the step:

_.range(3)

The output of this would be an array containing the values 0, 1 and 2 (remember, array indices are zero-based). If two arguments are provided they are assumed to be the starting and stopping number. 1 is used as the step:

_.range(0,3)

This would give the same result as the first example. To use a step value other than 1 we muist provide all three arguments:

_.range(0,30,10)

This now gives the result 0,10,20. We can provide a lower ending number than the starting number if we wish; in this case, the step value provided should be negative:

_.range(30, 0,-10)

In this case, the output is now 30,20,10. Although possibly not used as often as other method we have looked at, range() is nevertheless a useful method when a list of numbers between a particular range is needed.

Summary

As well as the methods we have looked at in this example, there are many other just as useful methods provided by Underscore, so it is well worth having a play with the library and seeing what other situations it may help you in. Join me in the next part of this tutorial where we’ll be looking at method related to collections (arrays or array-like structures).

...

There are many JavaScript frameworks that leverage HTML5.

Paper.js is one of these frameworks that uses Document Object Model (DOM) to structure objects in an easy-to-understand manner.  It offers creative and neat ways of doing lots of stuff on a Web browser that supports the <canvas> tag. It also offers a new and interesting approach to drawing vector graphics.

The basic setup is shown below:

<script src="js/paper.js" type="text/javascript"></script> <script src="js/main.js" type="text/paperscript"></script> <canvas id="draw" width="100%" height="100%" resize="true"></canvas>

As you can see, the paper.js is included after which you add your code file under “type=”text/….” After passing the canvas element id that needs to be drawn and ensuring that your code file includes all the classes and functionality to be used with paper.js, then the rest is a matter of being creative while you leave the rest to paper.js.

Working with Predefined Shapes

Paper.js allows you to use predefined shapes of varying dimensions and create path items and segments. For example, the code below produces circle-shaped paths from the “Circle” constructor:

var myCircle = new Path.Circle(new Point(300, 70), 50); myCircle.fillColor = 'black';

This piece of code creates a black circle with a radius of 50pts and at the x position of 300 and a y position of y.

To create a rectangle, you pass the “Rectangle” constructor the same way as a circle as shown below:

var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100)); var path = new Path.Rectangle(rectangle); path.fillColor = '#e9e9ff'; path.selected = true;

Creating Interaction

Paper.js also supports drag n drop functionality as well as keyboard strokes. An empty path is created on execution where segments can also be added as shown below:

// Create a new path once, when the script is executed: var myPath = new Path(); myPath.strokeColor = 'black'; // This function is called whenever the user // clicks the mouse in the view: function onMouseDown(event) { // If the path is empty, we need to add two segments // to the path. The first one will stay put, // and the second...

jQuery is great for adding enhancing effects that would otherwise be impossible with just HTML and CSS. In this tutorial we’re going to use jQuery and two plugins to gradually change a website’s background as the user scrolls the page.

We’ll be using the Color Animation and Waypoints plugins. The Color Animation plugin adds animations to the color properties of elements. jQuery already includes an animate function, this plugin simply extends it. The Waypoints plugin allows us to execute a function when a user scrolls past a certain element. I’m sure it’s obvious how these two plugins will help us achieve our goal.

First things first, let’s set up our project folder. Create index.html and style.css. Leave them in the root directory. Then, add a js folder. This is where we’ll put our JavaScript files.

We can grab the newest version of jQuery here and put it in the js folder. Next, create a script.js file in the js folder.

We’ll use script.js to add the Color Animation and Waypoints plugins. Get Color Animations from here and Waypoints from here. We can paste these two plugins directly into our script.js file.

The Markup

The HTML markup in this tutorial is going to be very simple. We’re just going to have a bunch of paragraphs and headings. The idea is to simulate a fairly long page so we’ll have a lot to scroll through.

Start by adding this code to index.html:

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div class="container"> </div><!-- end container --> </body> </html>

This gives us a nice basic structure to start from, but remember, we need to include our JavaScript files too. Before the closing head tag, add these two lines:

<script src="js/jquery-1.6.2.min.js"></script> <script src="js/script.js"></script>

Inside the div with the class container add the following code:

<h1>A Story About Colors</h1> <h2 id="chapter1">In The Beginning, There Was Yellow</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit accum. Sed a ornare massa. Donec ac sapien a sem aliquet facilisis. Nulla vitae nunc tortor, at luctus risus. Integer viverra sapien a nibh condimentum sed luctus lorem interdum. Aliquam...