Our 50 Favorite Web Development Resources from 2012
Let’s keep it simple: last year, we did a roundup of 50 of the most useful web development resources. Today, we bring to you the 2012 edition, but only better. And what can you expect to find in this years roundup? Pretty much everything a developer could ever need: CSS frameworks & tools, HTML5 resources, JavaScript frameworks & tools, web editors, mock-up tools, application frameworks, responsive layout tools and resources… and on and on. This post does not include any jQuery resources as we published its own round-up last week, you can check it out here Top 50 Useful jQuery Plugins from 2011. CSS Frameworks Base Framework Base is a 12 column 960px grid (max) responsive CSS framework that contains everything you need to get up and running quickly. Bourbon Neat Neat is a simple grid framework built on top of Sass and Bourbon using em units and golden ratios. Kube CSS Framework The Kube Framework is certainly not an overblown responsive CSS framework with multiple layouts and styles. RWD Grid
jsAnim - Free JavaScript Animation Library
Raphaël—JavaScript Library
10 Super JavaScript Animation Frameworks
JavaScript allows you to do a wide range of animations and effects that would otherwise be very hard to achieve with minimal overheads. Below is a list of JavaScript animation frameworks that will allow you to rapidly develop animations with ease. Have fun! Related Posts: 1. Raphaël Is a small JavaScript library that should simplify your work with vector graphics on the web. Source + Demo 2. Is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Source + Demo 3. script.aculo.us Provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly. SourceDemo 4. Is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. SourceDemo 5. moo.fx Is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework. Source + Demo 8. 10.
Polymaps
Online JavaScript beautifier
Photobox - CSS3 image gallery modal viewer
A lightweight image gallery modal window script which uses only CSS3 for silky-smooth animations and transitions, utilizes GPU rending, which can be completely controlled and themed directly from the CSS. Lightweight! jquery.photobox.js is only 5kb (gziped & minified) Hardware accelerated, CSS3 transitions and animations Mobile friendly Support videos via iframe embedding Stunning UI and user-friendly UX Images & videos can be zoomed using mousewheel Thumbnails can be zoomed using mousewheel Keyboard & mouse navigation. Even using mousewheel left/right ;-) Exposed UX control up to 99%. No need to mess with the source code Observes DOM changes (if images were added/removed) Event-delegation on all thumbnails events (obviously...) HTML5 History support: update location with the currently viewed image No images at all! Supports: Firefox, Chrome and IE8+ (This plugin has nothing to do with Flickr) Github project page
jQuery Easing Plugin
Description A jQuery plugin from GSGD to give advanced easing options. Please note, the easing function names changed in version 1.2. Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). Select easing types for the demo first one for down, second one for up. The Clicker Updates 12/11/07 1.3 jQuery easing now supports a default easing mode. 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3. 22/06/07 Rewritten the above to include callback syntax, nothing else has changed. Advertisements Need reliable hosting for your blog? Credits Donate Usage Default Custom
Tutorials
Advanced Uploading Techniques — Part Two Continuing from our last tutorial, we discuss how to automatically pause and resume your uploads using the online and offline events. Advanced Uploading Techniques — Part One Uploading large files or over slow connections makes your uploads vulnerable. Web Audio API — Part Two Continuing from our previous tutorial, we now introduce the concepts of position, convolution and impulse responses. Web Audio API – Part One The Web Audio API is one of two new audio APIs designed to make creating, processing and controlling audio within web applications much simpler. requestAnimationFrame Learn the secret to silky-smooth JavaScript animation! Create an iPad optimised game HTML5 canvas is of course brilliant. Three.js part 1 – make a star-field Remember FastKat? Make an explosive firework display Creating fireworks using the HTML 5 canvas: both awesome and fun to do. Box2D JavaScript tutorials by Seth Ladd 31 days of canvas tutorials by Keith Peters
QuoJS - Micro JavaScript Library
Textillate.js
demo's
Version 0.2.2 update explanation and demonstration of new features Jarallax 0.2.2 view Jarallax controllers introduction A Quick introduction to Jarallax controllers. view What is Jarallax? A Introduction of Jarallax. view
Kartograph – rethink mapping
Using JavaScript to Control the Audio Object
This section includes the following topics: Playing and pausing audio playback in JavaScript All other functionality of the audio player is controlled from JavaScript, as shown in the following script. Specifying audio files and managing playback in JavaScript In the next example, a text input element is added in the HTML portion where you can paste in the path of an MPEG-Layer 3 (MP3) audio file. Catching errors Writing error-free code is difficult. In the JavaScript section of the code, there are areas where errors are likely. In this example, the buttons are disabled if support does not exist, so the functions would not be called. If HTML5 audio is supported, there are other errors that might happen. With the try/catch statements, these conditions fail silently, but you can see the errors if you open either the Console or Script tab in Internet Explorer 9 F12 tools. The following code example explains all concepts of this topic. Related topics
