For me, being a web developer is one of the coolest job around because you can play with new technologies and create some amazing stuff. The only problem(if you can name it like this) is that you need to keep up with the industry and also with your deadline and for that, you must read and learn constantly. This article will help you with 15 useful tutorials that will surely safe your time someday.

Capturing Audio & Video in HTML5

It might not be apparent, but the rise of HTML5 has brought a surge of access to device hardware. Geolocation (GPS), the Orientation API (accelerometer), WebGL (GPU), and the Web Audio API (audio hardware) are perfect examples. These features are ridiculously powerful, exposing high level JavaScript APIs that sit on top of the system’s underlying hardware capabilities. This tutorial introduces a new API, navigator.getUserMedia(), which allows web apps to access a user’s camera and microphone.

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

In this tutorial, you’ll learn how to transform an HTML list into a wall of “sticky notes” that look and work like the one above.

Writing Augmented Reality Applications using JSARToolKit

This article is about using the JSARToolKit library with the WebRTC getUserMedia API to do augmented reality applications on the web. For rendering, I’m using WebGL due to the increased performance it offers. The end result of this article is a demo application that puts a 3D model on top of an augmented reality marker in webcam video.

Measuring Page Load Speed with Navigation Timing

Navigation Timing is a JavaScript API for accurately measuring performance on the web. The API provides a simple way to get accurate and detailed timing statistics—natively—for page navigation and load events. It’s available now in Internet Explorer 9, Google Chrome and in Firefox nightly builds. This article describes the API and shows ways to make use of the timing data it exposes.

Multi-touch Web Development

Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture interactions made with the user’s fingers. As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these events. For example, nearly any fast-paced game requires the player to press multiple buttons at once, which, in the context of a touchscreen, implies multi-touch. In this article I’ll dive into the touch events API provided by iOS and Android devices, explore what sorts of applications you can build, present some best practices, and cover useful techniques that make it easier to develop touch-enabled applications.

Native HTML5 Drag and Drop

For years, we’ve been using libraries like JQuery and Dojo to simplify complex UI elements like animations, rounded corners, and drag and drop. There’s no doubt, eye-candy is important for making rich, immersive experiences on the web. But why should a library be required for common tasks that all developers are using? Drag and drop (DnD) is a first class citizen in HTML5! The spec defines an event-based mechanism, JavaScript API, and additional markup for declaring that just about any type of element be draggable on a page. I don’t think anyone can argue against native browser support for a particular feature. Native browser DnD means faster, more responsive web apps.

Quick guide to webfonts via @font-face

The @font-face feature from CSS3 allows us to use custom typefaces on the web in an accessible, manipulable, and scalable way. But, you might say, “Why would we use @font-face if we have Cufon, sIFR, and using text in images?”

Perfectly Positioned Plusses

Ever seen those thumbnails which, when hovered over, reveal an icon in the middle to suggest what’s about to happen? Ever wondered how the effect is achieved? Ever tried, but didn’t manage to get the icons dead center, especially when your thumbnails weren’t of fixed dimensions? Check out this quick tip.

A Beginner’s Guide to Using the Application Cache

The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they’re offline.

CSS3 Transitions And Transforms From Scratch

There are some amazing examples of CSS transforms and transitions, and whilst you may be blown away by them, there’s a good chance that you’re also overwhelmed and a bit intimidated. This tutorial will take you back to the very basics. We’re going to create some fundamental CSS3 transitional movements, step by step.

Best Practices for a Faster Web App with HTML5

While cookies have been used to track unique user data for years, they have serious disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request header. This can end up having a measurable impact on response time, especially during XHRs. So a best practice is to reduce cookie size. In HTML5 we can do better than that: use sessionStorage and localStorage in place of cookies. These two web storage objects can be used to persist user data on the clientside for the length of the session or indefinitely. Their data is not transferred to the server via every HTTP request, either. They have an API that will make you happy to be rid of cookies. Here are both APIs, using cookies as a fallback.

Creating a Mobile-First Responsive Web Design

We’re going to walk through how to create an adaptive web experience that’s designed mobile-first.

CSS3 Animations: the Hiccups and Bugs You’ll Want to Avoid

Improving HTML5 Canvas Performance

HTML5 canvas, which started as an experiment from Apple, is the most widely supported standard for 2D immediate mode graphics on the web. Many developers now rely on it for a wide variety of multimedia projects, visualizations, and games. However, as the applications we build increase in complexity, developers inadvertently hit the performance wall.

Menu Notification Badges Using HTML5 Data-Attributes

In this article you’ll look at a couple of ways to achieve the badge effect, including the use of HTML5 data attributes which you may be unfamiliar with.