We’ve all heard time and time again that when you’re trying to determine the JavaScript capabilities of a browser you should avoid user agent string parsing like a horrible plague and instead put your trust in a little thing called feature detection. But why should we? What’s so bad about relying on user agent strings? Also, how do I even use feature detection anyway? Read on and you’ll find the answer to all of these questions.
We’ve all heard of Templating, heck I’ve written about templating. Templating is a great way to write HTML that is designed to be manipulated and inserted into a document via JavaScript, but it has a very annoying caveat: it’s a huge pain to make templates external. They pretty much have to be inline, which doesn’t allow you to maintain them separately. That’s all about to change.
As JavaScript moves further and further away from the playground programming language that it used to be, and is used more and more as the core for large-scale applications, managing the code starts to become extremely difficult. Splitting the code into multiple files helps with that, though it also adds more complexity in a different way. One way to fight this new complexity is with dependency management libraries, but which one is right for you?
Everyone has their own style when coding. For some people, the style they use might be so inconsistent that it looks like they used a program to randomize the code layout so it would confuse everyone as much as possible. In general it’s best to use a consistent coding style, for your own sake, and for the sake of everyone else who might look at your code. To keep things consistent you can use a style guide, which will help you remember and use your rules.
As more and more web browsing devices are becoming mobile and/or battery-powered, we need to become more aware of that battery power we use in our applications. Mozilla has come up with a solution for JavaScript that allows us to monitor the battery levels of the devices that our code runs on. Sadly, Firefox is the only browser that has the API implemented, but it shouldn’t be too far in the future before the API is accepted by the other browsers.
The arrival of requestAnimationFrame gives browsers the ability to throttle animations to save them from devouring system resources, especially when they aren’t actually being shown on the screen. Knowing this, we need to learn how to use it and then actually start utilizing this new tool for the benefit of our users. For this very reason, I decided to make this short video tutorial explaining how requestAnimationFrame can be used in the animations on your applications.
Have you ever needed to parse a URL using regular expressions? It’s not easy to write regular expressions (for a lot of people, including myself) and it’s even tougher to test to see if that regular expression is reliable across every situation. You could, of course, just copy and paste a regular expression (or function or library) that someone else developed and use that, but I propose that there is a simpler and more concise way of parsing URLs that doesn’t require any regular expressions.
In the world of JavaScript, animation has always been a nuisance. We’ve relied on setTimeout and setInterval for longer than we care to recall. We’ve trusted the millisecond intervals to always be hit right on the mark, even though we all knew that in all likelihood the computer would be so busy with something else that it’d miss the mark we set for it. No longer! We will set aside our old ways and look forward to a great and glorious JavaScript animation future through the use of requestAnimationFrame!
One of the most widely used design patterns in JavaScript is the module pattern. The module pattern makes use of one of the nicer features of JavaScript – closures – in order to give you some control of the privacy of your methods so that third party applications cannot access private data or overwrite it. In this post I’ll teach you what a closure is, how it works, and how to utilize it to implement the module pattern in your own JavaScript code.
Everyone loves AJAX. A few years back it was probably the biggest buzz word in all of web development. Now HTML5 and CSS3 have stolen the show, but AJAX has now taken its place as a first-class citizen among web development - and specifically JavaScript - tools. And to make things even better, Backbone.js has built in support for AJAX and makes it dead simple for you to use it to synchronize your models with a database, as I show in this video tutorial.