TeamCo AntHill

Enyo

2012-01-27T09:41:00.001-08:00

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

2012-01-11T09:42:00.001-08:00

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

2012-01-11T09:38:00.000-08:00

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

2012-01-11T09:32:00.000-08:00

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

2012-01-11T09:28:00.001-08:00

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.

Introduction
PhoneGap: a framework filling the gap
Let’s create our first PhoneGap project
Getting the accelerometer’s values from JavaScript
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
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

2012-01-06T08:18:00.000-08:00

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

2012-01-06T08:14:00.001-08:00

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

2012-01-06T07:26:00.000-08:00

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

2012-01-06T07:25:00.000-08:00

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

2012-01-04T07:17:00.000-08:00

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

2012-01-04T07:12:00.000-08:00

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

jQote2

2011-12-22T06:31:00.001-08:00

jQote2 is the second major release of jQuery’s most powerful and versatile client-side templating engine. Version 2 now incorporates a faster and more accurate parsing/conversion part that does away with its predecessor’s shortcomings in escaping quotes and multiline support.

http://aefxx.com/jquery-plugins/jqote2/
https://github.com/aefxx/jQote2

Slanger

2011-12-21T05:46:00.001-08:00

Slanger is an open source server implementation of the Pusher protocol written in Ruby. It is designed to scale horizontally across N nodes and to be agnostic as to which Slanger node a subscriber is connected to, i.e subscribers to the same channel are NOT required to be connected to the same Slanger node. Multiple Slanger nodes can sit behind a load balancer with no special configuration. In essence it was designed to be very easy to scale.

Presence channel state is shared using Redis. Channels are lazily instantiated internally within a given Slanger node when the first subscriber connects. When a presence channel is instantiated within a Slanger node, it queries Redis for the global state across all nodes within the system for that channel, and then copies that state internally. Afterwards, when subscribers connect or disconnect the node publishes a presence message to all interested nodes, i.e. all nodes with at least one subscriber interested in the given channel.

Slanger is smart enough to know if a new channel subscription belongs to the same user. It will not send presence messages to subscribers in this case. This happens when the user has multiple browser tabs open for example. Using a chat room backed by presence channels as a real example, one would not want "Barrington" to show up N times in the presence roster because Barrington is a retard and has the chat room open in N browser tabs.

Slanger was designed to be highly available and partition tolerant with eventual consistency, which in practise is instantaneous.

https://github.com/stevegraham/slanger

Programming With Nothing

2011-12-13T10:51:00.000-08:00

Ruby is a powerful language, but how much power does it have if you remove all of its datatypes except for Proc and all of its features except for Proc.new and Proc#call?

Contents

http://experthuman.com/programming-with-nothing

BREAKPOINTS.JS

2011-12-02T11:40:00.001-08:00

Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint. Get it from Github.

http://xoxco.com/projects/code/breakpoints/

Humane JS

2011-12-02T11:37:00.001-08:00

A simple, modern, framework-independent, well-tested, unobtrusive, notification system. Utilizes CSS transitions when available, falls back to JS animation when not. Includes mobile support.

http://wavded.github.com/humane-js

KeyboardJS

2011-12-02T11:33:00.001-08:00

What is KeyboardJS?
KeyboardJS is a library for binding to keys or key combos. Its available as an AMD module or a standard Library.
Language Support
KeyboardJS is for binding to keyboards with the US character set. Adding other character sets is possible by editing the key code map variable named 'keys' in the module.

http://robertwhurst.github.com/KeyboardJS

RequireJS

2011-12-02T11:31:00.001-08:00

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino andNode. Using a modular script loader like RequireJS will improve the speed and quality of your code.

http://requirejs.org/

Principles of Writing Consistent, Idiomatic JavaScript

2011-12-02T11:27:00.001-08:00

Important, Non-Idiomatic Stuff:

Code Quality: Awesome Tools, Resources & References

Leveraging Code Quality Tools by Anton Kovalyov

Get Smart

http://es5.github.com/

The following should be considered 1) incomplete, and 2) REQUIRED READING. I don't always agree with the style written by the authors below, but one thing is certain: They are consistent. Furthermore, these are authorities on the language.

Build & Deployment Process

Projects should always attempt to include some generic means by which source can be compressed in preparation for production use. Some popular and proven tools include the JavaScript-based Uglify.js, as well as the Java-based Google Closure Compiler and YUI Compressor. Choose one and support it.

You can now find a functional, generic "build kit" in the /kits directory of this repository. Usage is easy: 1) copy the contents of a kit found in /kits to a new working directory, 2) save your project .js file in the /src directory, 3) put the name of the project in project.txt, 4) run make from command line. (Even easier directions: replace occurrences of "foo")

Test Facility

Projects must include some form of unit, reference, implementation or functional testing. Use case demos DO NOT QUALIFY as "tests".

https://github.com/rwldrn/idiomatic.js

Efficient JavaScript

2011-12-02T11:25:00.001-08:00

Traditionally, a Web page would not contain much scripting, or at least, not much that would affect the performance of that Web page. However, as Web pages become more like applications, the performance of scripts is having a bigger effect. With more and more applications being developed using Web technologies, improving the performance of scripts is becoming increasingly important.

With a desktop application, a compiler is normally used to convert the source into the final binary. The compiler can take its time, and optimize as much as possible for good performance of the final application. Web applications do not have that luxury. Since they need to run on multiple browsers, platforms, and architectures, they cannot be completely precompiled. The browser has to do the interpretation and compilation each time it retrieves a script, and yet the final application has to run as smoothly as a desktop application, and load quickly as well. It is expected to run on a large variety of devices, from an ordinary desktop computer, to a mobile phone.

Browsers are fairly good at achieving this, and Opera has one of the fastest scripting engines of any current browser. However, browsers do have their limits, and that is where the Web developer has to take over. Ensuring that a Web application runs as fast as possible can be a simple matter of trading one type of loop for another, making one combined style change instead of three, or adding only the script that will actually be used.

This article will show several simple changes that can be made to improve the performance of your Web applications. Areas covered will be ECMAScript - the core language used by JavaScript, DOM, and document loading.

ECMAScript

DOM

Document loading

http://dev.opera.com/articles/view/efficient-javascript

Google Chrome Frame

2011-12-01T03:22:00.001-08:00

Enable open web technologies in Internet Explorer
Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer. With Google Chrome Frame, you can:
- Start using open web technologies - like the HTML5 canvas tag - right away, even technologies that aren't yet supported in Internet Explorer 6, 7, 8, or 9.
- Take advantage of JavaScript performance improvements to make your apps faster and more responsive.
Get started with Google Chrome Frame
Enabling Google Chrome Frame is simple. For most web pages, all you have to do is add a single tag to your pages and detect whether your users have installed Google Chrome Frame.
- If Google Chrome Frame is not installed, you can direct your users to an installation page.
- If Google Chrome Frame is installed, it detects the tag you added and works automatically.

http://code.google.com/chrome/chromeframe/

Modernizr

2011-12-01T01:54:00.001-08:00

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

Why use Modernizr?

Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers. Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use.

http://www.modernizr.com/

HTML5 Reset

2011-11-23T00:11:00.001-08:00

Summary:

HTML5 Reset is a simple set of best practices to get web projects off on the right foot.

A style sheet designed to strip initial files from browsers, meaning you start off with a blank slate.
Easy to customize -- remove whatever you don't need, keep what you do.
Analytics and jQuery snippets in place
Meta tags ready for population
Empty mobile and print style sheets, including blocks for device orientation
Modernizr.js http://www.modernizr.com/ enables HTML5 compatibility with IE (and a dozen other great features)
IE-specific classes for simple CSS-targeting
iPhone/iPad/iTouch icon snippets
Lots of other keen stuff...

http://html5reset.org
https://github.com/murtaugh/HTML5-Reset

CSS Reference

2011-11-16T07:56:00.001-08:00

This an alphabetical list of CSS features. If you are going to add or modify a page, please fit in with the template CSS Reference:Property Template and modify as required. The basic template for example pages can be found here: samples/cssref/TEMPLATE.html. Feel free to discuss any questions or suggestions on the Talk:CSS Reference page.
See also Mozilla CSS Extensions for Gecko-specific properties prefixed with -moz-. See Vendor-prefixed CSS Property Overview by Peter Beverloo for all prefixed properties.

https://developer.mozilla.org/en/CSS/CSS_Reference

Announcing Firefox Aurora 10

2011-11-16T07:55:00.001-08:00

In additional to the normal improvements that you’ve come to expect like performance, security and bug fixes, Aurora 10 focuses in HTML5 enhancements.

New additions

HTML5 Visibility API
createProcessingInstruction
WebGL antialiasing
3D Transforms
Visibility API
Document.mozFullScreenEnabled

Developer Tools

Aurora 10 also implements incremental enhancements like IndexedDB setVersion API changes. Ongoing detailed attention to evolving specifications help to keep Firefox at the front of the Web revolution. (Read more about IndexedDB on MDN.)

DOM

We now fire a “load” event on stylesheet linking when the sheet load finishes or “error” if the load fails.
We turn the POSTDATA prompt into an information page (when navigating in session history).
We only forward event attributes on body/frameset to the window if we also forward the corresponding on* property.
We no longer allow more than one call to window.open() when we allow popups.
We fixed a bug where a success callback never fired when a position update is triggered after getCurrentPosition().
We removed replaceWholeText().
We fixed an error with createPattern(zero-size canvas).
We now handle putImageData(nonfinite) correctly.
We now throw INVALID_STATE_ERR when dispatching uninitialized events.
We’ve made Document.documentURI readonly.
We fixed document.importNode to comply with optional argument omitted.

Web workers

We now allow data URLs.
We implemented event.stopImmediatePropagation in workers.
We made XHR2 response/responseType work in Web Workers.

Graphics

We implement the WebGL OES_standard_derivatives extension.
We implement minimal-capabilities WebGL mode.

JavaScript

The function caller property no longer skips over eval frames.
We fixed E4X syntax so that it is not accepted in ES5 strict mode.
weakmap.set no longer returns itself instead of undefined.
We implemented the battery API.

Offline: IndexedDB enhancements

IndexedDB setVersion API changes
Added support for IDBObjectStore/IDBIndex.count
Various methods accept both keys and KeyRanges.
Added support for IDBCursor.advance.
Implemented deleteDatabase.
objectStoreNames are no longer updated on closed databases when another connection adds or removes object stores
IDBObjectStore.delete and IDBCursor.delete now return undefined.
No longer throws an error if there are unknown properties in the options objects to createObjectStore/createIndex.
We now the errorCode to “ABORT_ERR” for all pending requests when IDBTransaction.abort() is called.
Fixed the sort order for indexes.

Layout

We have updated the current rule for handling malformed media queries.
We now support the HTML5 element and CSS property unicode-bidi: isolate.
The CSS3 implementation now supports unicode-bidi: plaintext.

Media

Implemented Document.mozFullScreenEnabled.
Enabled the DOM full-screen API on desktop Firefox by default.

http://hacks.mozilla.org/2011/11/announcing-firefox-aurora-10