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
Private Members in JavaScript Douglas Crockford www.crockford.com JavaScript is the world's most misunderstood programming language. Some believe that it lacks the property of information hiding because objects cannot have private instance variables and methods. But this is a misunderstanding. Objects JavaScript is fundamentally about objects. If a value is a function, we can consider it a method. Objects can be produced by constructors, which are functions which initialize objects. Public The members of an object are all public members. In the constructor This technique is usually used to initialize public instance variables. function Container(param) { this.member = param; } So, if we construct a new object var myContainer = new Container('abc'); then myContainer.member contains 'abc'. In the prototype This technique is usually used to add public methods. Container.prototype.stamp = function (string) { return this.member + string; } So, we can invoke the method myContainer.stamp('def') which produces 'abcdef'. Private Closures
HTML5 Canvas Tutorials 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
Callback Hell 20+ Docs and Guides for Front-end Developers (No. 8) In recent months, I’ve collected a number of different learning resources, including guides, docs, and other useful websites to help in learning different front-end technologies. I’ve rounded up some of the best ones in this post. So please enjoy the eighth installment of our Docs and Guides series and don’t forget to let me know of any others that I haven’t yet included. 1. Keyboard Event Viewer A configurable, interactive tool that allows you to view data on keyboard events, showing legacy info as well as event information as outlined in the UI Events Specification. 2. jQuery Quick API Reference A one-page cheat sheet of jQuery features, covering versions of jQuery up to 1.10/2.0. 3. Ok, this is not so much a “doc” but more of an interactive help guide where you can chat with an expert. 4. If you enjoyed SitePoint’s recent CSS Survey then you might also appreciate this data, compiled by the Microsoft Edge team. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 17. 18. 19. 20. Honorable Mentions
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.
JavaScript for Cats Easy Steps To Better Icon Design Raphaël—JavaScript Library Quick tip: using HTML5 localstorage to store JSON objects on a device in your PhoneGap app I’ve written a couple of articles about loading remote data into PhoneGap apps (sans framework), but I haven’t mentioned a good little method of storing that data on the device so you don’t need to request it from a server again. This is a quick tip for how you can do that. Of course, it depends on the type of data that you are loading from your server in the first place. You wouldn’t necessarily want to store data that would be out of date quickly – such as share prices or live sports scores. But there will certainly be times when you want to save the data you’ve just loaded for use at a later time, without having to load it again. Loading data from a remote source When loading data from a remote source I’d use jQuery or Zepto’s ajax() function like this: In this example I’m accessing a fictional data source to load a news article. Once the article is loaded the user might browse another article but later on may return to read this particular one again. HTML5 local and session storage
jsAnim - Free JavaScript Animation Library The Five Best Libraries For Building Data Visualizations An explosion in the number of available data sources and data-processing tools means that more people than ever are jumping into the world of data visualization. But with so much to learn, it can be intimidating to know just where to start. So which library is best, and what advice do the pros have? Read on and find out. Like telling the history of personal computers without mentioning Steve Jobs, it’s impossible to talk about data visualization without talking about D3. 2Reactions D3’s popularity owes a lot to the sudden interest in SVG by web designers--largely because vector graphics look superb on the kind of high-resolution screens (think Apple's Retina display), which are becoming increasingly common. “Let’s face it, for SVG-based data visualization, there is no other library that comes even close,” says Moritz Stefaner, an independent data visualization authority and owner of Truth & Beauty. 1Reaction While D3 is a generalist library, it’s not perfect for everything, however. Vega
Awesome Bubble Navigation with jQuery In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. We will use the jQuery Easing Plugin for a even nicer effect. View demoDownload source In this tutorial we are going to create a bubbly navigation with jQuery. Ok, so let’s get started. The Markup The HTML will consist of a main div that we will give the class navigation and the id nav. As an example, we just show the first two items here. Further elements inside of the item element are the image for the bubble, the icon as link element, the heading and the list of links. The CSS Let’s take a look at the styling. Now, we will use absolute positioning for the item: Since we gave the div two classes, we will now define the respective positions for each navigation item. The link elements of the icons will have the following general style: And we can again define each icon of the respective element: The JavaScript And that’s it!