What to Read to Get Up to Speed in JavaScript. There’s a discussion going on on the JSMentors JavaScript mailing list about books to read to get you to the next level . There’s been a lot of great feedback and suggestions thrown out and I wanted to offer up what I felt were good to carry you through the learning process. While I list a number of books in the Big List page that I created , narrowing it down into specific levels makes a lot of sense. Note that some resources will overlap between levels. That should be expected as some books cover a wide breadth of language features. These are books that I’ve read over the years and found incredibly useful so I’m categorizing them to make it easier for you to get going. Introductory These are books that will give you the fundamentals of the JavaScript language and get you started: JavaScript: The Good Parts Professional JavaScript for Web Developers (Wrox Programmer to Programmer) ppk on JavaScript, 1/e Eloquent JavaScript (Online Resource) Intermediate JavaScript: The Definitive Guide Blogs.
Easel JS: A Javascript Library for Working with the HTML5 Canvas Element. Recent Updates Follow @CreateJS November 2014 Updates in preparation for next release (coming soon).New class model, with big performance increases October 2014 Lots of bug fixes and pull requests.New 'Extras' folder in GitHub with useful tools and classes July 2014 Major overhaul of Graphics to include a useful command pattern, and a big performance increase.Added Graphics.store() / unstore() The Story Why we built EaselJS About EaselJS EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas.
Featured Projects Community Show & Tell. Ion Drift A port of the Flash game Ion Drift, b10b was able to build a CreateJS version in less than a day that hit target framerates on even the lowest devices, and outperformed ports to other libraries. By b10b b10b. Audio.js. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers.
It provides a consistent html player UI to all browsers which can be styled used standard css. Installation Put audio.js, player-graphics.gif & audiojs.swf in the same folder. Include the audio.js file: <script src="/audiojs/audio.min.js"></script> Initialise audio.js: <script> audiojs.events.ready(function() { var as = audiojs.createAll(); }); </script> Then you can use <audio> wherever you like in your HTML: <audio src="/mp3/juicy.mp3" preload="auto" /> Examples A series of API tests & examples for using and extending audio.js Example 1 Test multiple load types Example 2 Custom markup/css Example 3 Multiple players, testing preload, loop & autoplay attributes Example 4 Customised player Example 5 Customised playlist player Browser & format support With Flash as a fallback, it should work pretty much anywhere.
Ogg audio.js focuses on playing mp3s. Flash local security Source code. Face Detection jQuery Plugin. Batiste/sprite.js - GitHub. MathJax | Beautiful math in all browsers. Organizing A jQuery Application - Jupiter JavaScript Consulting. Earlier this week, I realized that every organizing-a-jQuery-application blog, article, and conference talk misses the most important lesson on how to organize a jQuery app. They talk about how to organize an individual widget or piece of functionality, but not how you can break up an application into logically separate and testable components.
Separation of concerns is the bedrock of software engineering. It is the best way to achieve a quality, error free, and maintainable project. Think about it … If your code’s logic is isolated, how much damage does making an incorrect decision do? The secret to building large apps is NEVER build large apps. This article shows how to do this elegantly with JavaScriptMVC 3.0 (which was created with this pattern in mind). Srchr The Srchr app makes searches using multiple services and saves the searches between page loads. Install Srchr To install our srchr app: Download And Unzip JavaScriptMVC Install Srchr . Note: window’s users do js steal\getjs srchr. 37signals' Chalk Dissected.
Update 2010-11-05: I dove into the JavaScript a little and explained most of it. Sam Stephenson tweeted that Chalk is written in CoffeeScript and compiled on the fly when served using Brochure. That's hot! (for those unaware Sam Stephenson works at 37signals, and is also the man behind Prototype.) 37signals recently released a blackboard web app for iPad called Chalk. It includes Thomas Fuchs new mobile JS framework Zepto, a few images, iOS SpringBoard icon, and of course HTML, CSS, and JavaScript. It weighs in at about 244k including 216k of images. HTML, CSS, and JavaScript are not minified (except Zepto), but they are gzipped. The manifest is a nice summary of the contents, and allows browsers to cache the app for offline use.
CACHE MANIFEST / /zepto.min.js /chalk.js /images/background.jpg /images/chalk.png /images/chalk-sprites.png /images/chalk-tile-erase.jpg /images/chalk-tile-red.png /images/chalk-tile-white.png /stylesheets/chalk.css The rest of the HTML is mainly structural. Evercookie - virtually irrevocable persistent cookies. Samy's home page || follow my twitter || email me || samy kamkar October 11, 2010: Reported on the front page of the New York Times Find the latest details, code, and implementations on github @ Cookie found: uid = currently not set Click to create an evercookie.
Don't worry, the cookie is a random number between 1 and 1000, not enough for me to track you, just enough to test evercookies. Evercookie is written in JavaScript and contains portions in Java, SWF/ActionScript (Flash) and C# (Silverlight). What is the point of evercookie? Csshack, best website ever See CONTACT. Questions or comments, email me: code@samy.pl.
Badass JavaScript. Sylvester - Vector and Matrix math for JavaScript. Mastering Node - Open Source Nodejs eBook. Understanding JavaScript’s this keyword | JavaScript, JavaScript. (In Portugese) The JavaScript this keyword is ubiquitous yet misconceptions abound. What you need to know Every execution context has an associated ThisBinding whose lifespan is equal to that of the execution context and whose value is constant. There are three types of execution context: global, function and evaluation. Here’s a tabular summary followed by a little more detail, and some examples: 1. 2. A) Invoke as a methodthis is the baseValue of the property reference b) Invoke as baseless function callthis is the global object (or undefined in strict mode) The same applies to self invoking functions: c) Invoke using Function.prototype.callthisis passed by argument d) Invoke using Function.prototype.applythis is passed by argument e) Invoke a constructor using newthis is the newly created object 3.
What you might want to know This section explores the process by which this gets its value in the functional context – using ECMA-262 version 5.1 as a reference. from ECMA 5.1, 11.1.1 1. 1. In full… JSLint, The JavaScript Code Quality Tool. Google Closure: How not to write JavaScript. At the Edge of the Web conference in Perth last week I got to catch up with Dmitry Baranovskiy, the creator of the Raphaël and gRaphaël JavaScript libraries. Perhaps the most important thing these libraries do is make sophisticated vector graphics possible in Internet Explorer, where JavaScript performance is relatively poor. Dmitry, therefore, has little patience for poorly-written JavaScript like the code he found in Google’s just-released Closure Library. Having delivered a talk on how to write your own JavaScript library (detailed notes) at the conference, Dmitry shared his thoughts on the new library over breakfast the next morning.
“Just what the world needs—another sucky JavaScript library,” he said. When I asked him what made it ‘sucky’, he elaborated. “It’s a JavaScript library written by Java developers who clearly don’t get JavaScript.” “I’ll make you a deal,” I told him. The Slow Loop From array.js, line 63: for (var i = fromIndex; i < arr.length; i++) { return ! Return ! A JavaScript Module Pattern. Eric Miraglia (@miraglia) is an engineering manager for the YUI project at Yahoo. Eric has been at Yahoo since 2003, working on projects ranging from Yahoo Sports to YUI.
For the past several years, Eric and his colleagues on the YUI team have worked to establish YUI as the foundation for Yahoo’s frontend engineering work while open-sourcing the project and sharing it with the world under a liberal BSD license. Eric is an editor and frequent contributor to YUIBlog; his personal blog is at ericmiraglia.com. Prior to working at Yahoo, Eric taught writing at Stanford and elsewhere and led frontend engineering teams at several startups. Global variables are evil. Within YUI, we use only two globals: YAHOO and YAHOO_config. Everthing in YUI makes use of members within the YAHOO object hierarchy or variables that are scoped to such a member. 1. YAHOO.namespace("myProject"); This assigns an empty object myProject as a member of YAHOO (but doesn’t overwrite myProject if it already exists). 2. Css3-mediaqueries-js - Project Hosting on Google Code. Css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries.
Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support. UPDATE: Google discontinued the downloads section. Download newest version 1.0 from here: Usage: just include the script in your pages. (And you should combine and compress with other scripts and include it just before </body> for better page speed - but you already knew that). Write your media queries like you would for browsers with native support. Note: Doesn't work on @import'ed stylesheets (which you shouldn't use anyway for performance reasons). Happy media querying! Base2 - Project Hosting on Google Code. Because this library is standards-based it means that you don’t have to learn a new API. It uses standard (DOM, ECMAScript) properties and methods throughout which also means that there is no need for a lot of accompanying documentation. base2 is a lightweight library that irons out all the annoying differences in JavaScript implementations.
It provides the additional functionality from JavaScript 1.6+ that only Mozilla browsers implement. It also adds some features from ES4. The library is only 6KB (gzipped). You may link directly to the files above. Documentation: This is the most recent build of base2. Current version: 1.0.2. Node.js: JavaScript on the Server.