Enyo

Enyo is an open source object-oriented JavaScript framework emphasizing encapsulation and modularity. Enyo contains everything you need to create a fast, scalable mobile or web application:

• Built from the ground-up for mobile first
   - Enyo powers webOS, and was designed from the beginning to be fast and work great on mobile devices
• Now available for desktop and cross-browser development
   - Enyo 2.0 now runs across mobile environments and desktop browsers including Chrome, Firefox, and Internet Explorer
• Highly customizable and extensible
   - Enyo core can be expanded with modules, UI widgets, and more
• Lightweight and fast
   - Enyo 2.0 core is about 13KB gzipped, and built for fast application rendering and performance
• Simple, self-contained, and easy to digest
   - Build increasingly complex functionality starting with simple, reusable components
• Built to scale
   - Enyo was created on the principles needed to build vast, complex mobile and web applications
• Open Source
   - Enyo is available under the Apache License, Version 2.0.

http://enyojs.com

Pure javascript / HTML5 canvas bilinear image interpolation

This code is written to be easy to read, there’s plenty of room for optimization. First, the inner function call in the inner part of the two-levels pixel processing loop is probably a performance killer.
http://www.philou.ch/pic/fear_makes_the_wolf_look_bigger.jpg
http://www.philou.ch/playground.html

http://www.philou.ch/js-bilinear-interpolation.html

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

What Is It?

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles:

Responsive Grid Down To Mobile

Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). Go ahead, resize this page!

Fast to Start

Skeleton is a tool for rapid development. Get started fast with CSS best practices, a well-structured grid that makes mobile consideration easy, an organized file structure and super basic UI elements like lightly styled forms, buttons, tabs and more.

Style Agnostic

Skeleton is not a UI framework. It's a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.

http://getskeleton.com

Cross Browser HTML5 Progress Bars In Depth

As a web application developer, progress bars are great when you want to show the user that some action is happening, especially when it can take a long time. They can be animated (like the one in Gmail does when it shows the user how long it is going to take for it to load and initialize), or static (like some shopping cart applications have to show the user how many pages it will take to check out an order). I used to create progress bars using 

 tags, CSS and a litle bit of math, but now I like to do it the HTML5 way using the  tag. This article will discuss how this tag is rendered by default in all operating systems and browsers and how to style the progress tag with CSS, even in browsers that don’t officially support the it. It will also discuss some interestinglimitations of all the browser implementations amd show some interesting examples using advanced CSS3 techniques.


http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth

How to create HTML5 applications on Windows Phone thanks to PhoneGap

We will first see in this article what the added values of PhoneGap for HTML5 applications are. We’ll then discover how to create our very first project where we will retrieve the accelerometer’s values from our JavaScript code. At last, we will review a complete HTML5 gaming sample almost ported as-is to PhoneGap to use the accelerometer available on the Windows Phones.  

1. Introduction
2. PhoneGap: a framework filling the gap
3. Let’s create our first PhoneGap project
4. Getting the accelerometer’s values from JavaScript
5. Review of a complete sample with the HTML5 Platformer game
   1. Forcing the landscape orientation
   2. Handling various resolutions
   3. Loading the levels with calls to the file system instead of using XHR
   4. Modification of the gameplay to use the accelerometer
   5. Screenshots of the result and FPS on some phones
   6. Complete Visual Studio Solution to download
6. Conclusion

http://blogs.msdn.com/b/davrous/archive/2011/12/23/tutorial-how-to-create-html5-applications-on-windows-phone-thanks-to-phonegap.aspx

jQuery UI Bootstrap

 A Bootstrap-themed kickstart for jQuery UI widgets

With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually.

http://addyosmani.github.com/jquery-ui-bootstrap

Understanding JavaScript OOP

JavaScript is an object oriented (OO) language, with its roots in the Self programming language, although it's (sadly) designed to look like Java. This makes the language's really powerful and sweet features stay covered by some pretty ugly and counter-intuitive work-arounds.

One such affected feature is the implementation of prototypical inheritance. The concepts are simple yet flexible and powerful. It makes inheritance and behaviourism first-class citizens, just like functions are first-class in functional-ish languages (JavaScript included).

Fortunately, ECMAScript 5 has gotten plenty of things to move the language in the right way, and it's on those sweet features that this article will expand. 

It's important to note, though, that this article assumes you have knowledge over other basic JavaScript functionality, like functions (including the concepts of closures and first-class functions), primitive values, operators and such.

http://killdream.github.com/blog/2011/10/understanding-javascript-oop/index.html

CSSLint

CSSLint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don't want.


https://github.com/stubbornella/csslint
http://csslint.net/

DOM Monster

DOM Monster is our answer to JavaScript performance tools that just don't give you the full picture.

DOM Monster is a cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you're on, and give you its bill of health.

If there are problems, DOM Monster will point them out—and even make suggestions on how to fix 'em.

Drag the DOM Monster! to your bookmarks bar!

DOM Monster! is the brainchild of Amy Hoy and was programmed byThomas Fuchs.

We'll keep the DOM Monster! up to date and feed it with the latest in page analyzing features for you! You don't have to update or reinstall the bookmarklet to always get the latest and greatest version! Be sure to drag the DOM Monster! to your bookmarks bar in all browsers you want to test in!

The DOM Monster is open source. Contribute your own tips and tests. Visit the DOM Monster repository on GitHub.

http://mir.aculo.us/dom-monster/

syze

Think @media queries powered by Javascript

syze is a library for JavaScript that lets you easily target your designs by device or browser sizes. syze makes designing for desktops, televisions, tablets, and mobile devices simultaneously as easy as CSS. syze works before page load so there is no flicker. Size can update on window resize and orientation change - it works cross-browser, cross-device, cross-library and is less than 1KB.

impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.


https://github.com/bartaz/impress.js
http://bartaz.github.com/impress.js