PixelGlyph - An Iconset Of 200 Icons Designed For Mobile Apps

PixelGlyph is an iconset of 200 icons which have been specifically designed for mobile web applications. PixelGlyph contains icons for general purpose mobile applications as well as some social media icons for networks like Google+, Facebook, Twitter, etc.

The icons in the free package comes in two sizes (16px and 32px) and one color.

Requirements: None
Website: http://blog.filesq.com/pixelglyph/
License: CC Attribution 3.0 License

CSSTrashman - A Tool To Generate A Clean Stylesheet From Old CSS

CSSTrashman is an online tool which allows you to supply a URL and it scans the website and generates a new clean CSS file from the existing styles.

CSSTrashman examines your DOM and then reverse engineers a new CSS stylesheet which captures your existing styling perfectly while cleaning the bloated and ill-maintained CSS of old.

The new CSS file generated can be used as a drop-in replacement for the current stylesheet you are using on your website. CSSTrashman can also generate SASS code if you need it.

Requirements: None
Website: http://www.csstrashman.com/
License: Free

FilteredPaste.js - A jQuery Plugin To Filter & Clean Pasted Input

FilteredPaste.js s a jQuery plugin which allows you to filter any pasted input and strip it of tags and attributes which are not desired.

By default FilteredPaste.js comes with a default filter which allows alt attribute on any tags, src attribute on image tags and href attribute on anchor and link tags.

However, with FilteredPaste.js, you can also create custom filters which allows you to filter the pasted input as per your requirements.

For example, you could strip all tags and attributes of the input or you could manipulate the pasted input and add tags and attributes to it. You could strip the input of any formatting and add your own formatting to it – like displaying the pasted text in yellow color.

Browser Supports

Work is all modern browsers except IE and Opera.

Requirements: jQuery
Demo: http://willemmulder.github.com/FilteredPaste.js/
License: CC Attribution 3.0 License

MFG Labs Icon Set - An Icon Font/Set Of 120 Icons

MFG Labs Icon Set is an icons set which can also be used as an icon font. It consists of 120 icons and new icons are constantly being added to the collections.

In the MFG Labs Icon Set you will find icons mainly for use in web applications as well as some social media icons. The download package comes with a CSS styling file which allows you to create embossed and beveled icons of the same.

Requirements: None
Website: http://mfglabs.github.com/mfglabs-iconset/
License: CC Attribution 3.0 License or MIT License

Textillate.js - A jQuery Plugin For CSS3 Text Animations

Textillate.js is a simple jQuery plugin which allows you to perform some neat CSS3 animations. It combines two powerful JavaScript libraries animate.css and lettering.js and provides a simple API for CSS3 animations.

Textillate.js allows you to animate text with effects such as flash, bounce, shake and more. In all, Textillate.js contains more than 25 effects for you to apply to your text.

Requirements: jQuery, animate.css and lettering.js
Demo: http://jschr.github.com/textillate/
License: MIT License

Toolbar.js - A jQuery Plugin To Create Responsive Tooltip Style Toolbars

Toolbar.js is a jQuery plugin which allows you to create tooltip-style toolbars. It uses Twitter Bootstrap’s icons for the UI.  With Toolbar.js you can easily create toolbars for use in web applications.

Toolbar.js allows you to create unlimited number of toolbars per page and allows you to create both horizontal and vertical tooltip toolbars. The toolbars can also be attached to an element on the page and are responsive in nature.

Requirements: jQuery
Demo: http://paulkinzett.github.com/toolbar/
License: MIT License

howler.js - A Modern Web Audio JavaScript Library

howler.js is a modern JavaScript library for web audio. The library was initially developed  for an HTML5 game engine, but can also be used for web applications.

howler.js has several feature like fallback to the Web Audio API, fallback to HTML5 audio.  It also has support for multiple file formats which in turns increases support for many browsers.

howler.js also has automatic caching for Web Audio API, implements cache pool for HTML5 audio and more. howler.js allows you to play multiple files all at once with fade in/out effects. It is a standalone JavaScript library weighing at only 5KB.

Requirements: None
Demo: http://goldfirestudios.com/howler.js…Javascript-Library
License: MIT License

RoughDraft.js - A jQuery Plugin To Create & Prototype A Full Interactive HTML Mock-Up

RoughDraft.js is a jQuery plugin which allows you to create and prototype full interactive HTML mockups quickly and easily.

RoughDraft.js create the HTML elements using special data attributes which specify how the prototype elements should be created. RoughDraft.js allows you to easily create prototypes which include lorem ipsum for dummy content and placeholder images.

Requirements: jQuery
Demo: http://ndreckshage.github.com/roughdraft.js/
License: MIT License or GPL

Opentip - An Open Source JavaScript Tooltip Framework

Opentip is an open source JavaScript tooltip framework which works with any JavaScript library like jQuery, Prototype, Ender, etc.

Opentip provides you with different styles and allows you to create your own easily.  Tooltip data can be fetched using AJAX as well. You can use joints and targets to position the tooltips exactly where you want to.

Opentip also allows you to point the tooltips in any directions you wish. The tooltips are created using the canvas, which means they render properly in nearly every browser.

Another great feature of Opentips is that tooltips created using the framework are always rendered inside the browser window.

Browser Support

Opentip works in all modern browsers including Google Chrome, Firefox, Opera Safari and IE7+.

Requirements: None
Demo: http://www.opentip.org/
License: MIT License

Bijou - A Mini Icon Set Of 120+ Icons For Web Applications

Bijou is a free mini icon set consisting of more than 120 icons which can be used in web applications or on any website. The icons come in PNG format and are sized at 20px. The download package also contains the PSD for all the icons.

Requirements: None
Website: http://bijou.im/
License: Free

Behave.js - A JavaScript Library To Add IDE-Style Behavior To HTML Text Areas

Behave.js is a lightweight JavaScript library which allows you to augment plain HTML text areas to have IDE-like behavior.

Behave.js includes several features as listed below:

• Replace Tab – Pressing the tab key will insert a tab character in the text area instead of cycling through control on the page.
• Soft Tabs – Instead of using the tab character to denote tabs, spaces are used instead, with the ability to set the soft tabs size.
• Auto Open - Behave.js automatically inserts closing counterpart characters for ( { [ “ and ‘.
• Overwrite Closing Characters – If you type a closing character immediately preceding the same character, one of the duplicate characters is deleted.
• Auto Strip – If the cursor is placed between two paired characters, pressing backspace to delete the first character results in both characters to be deleted.
• Auto Indent – Using this option allows Behave.js to auto indent your code.

Naturally, all of the above options are optional and can be activated and  deactivated as required.

Requirements: None
Demo: http://jakiestfu.github.com/Behave.js/
License: MIT License

Tire - A JavaScript Library For DOM & Events Manipulation

Tire is a lightweight JavaScript library which allows you to perform DOM manipulations, AJAX requests and events handling.

Tire is inspired by jQuery, however, unlike jQuery, Tire is meant to be modular and weights in at around 11K minified. Tire is meant for newer browsers, it does not incorporate fixes for older browsers, which would significantly increase the size of the library.

Browser Support

• Chrome
• Safari 4+
• Internet Explorer 8+
• Firefox 3.5+
• Opera 10+

Tire does not support Internet Explorer 6 or 7.

Requirements: None
Website: http://tirejs.com/
License: MIT License

Inpage SEO Checker - A JavaScript Library To Continuously Check Your SEO

Inpage SEO Checker is an interesting JavaScript library which continuously monitors your web pages for SEO factors. Whenever a page is not adhering to the proper SEO best practices, the JavaScript library produces a popup on the page which lists out the problems.

Inpage SEO Checker checks for SEO factors like number of H1, H2 and H3 tags, checks for attributes on image tags, checks meta descriptions of pages as well as page keywords and titles. It also monitors the usage of the em and strong tags.

Requirements: None
Website: http://inpage-seo-checker.eventsofa.de/
License: Apache License v2.0

Giveaway: 3X What Font Is Pro Accounts–A Tool To Identify The Font You Are Looking For

What Font Is is an online font identification tool which allows you to identify fonts from images. You can provide the image by uploading one from your computer or specify the URL of the image on the web.

What Font Is then proceeds to identify which font matches closest to the font in the image. What Font Is will match both commercial fonts and free fonts.  You can specify either.

What Font Is also allows you to specify if the font you’re trying to identify is on a dark background or light one - to improve recognition accuracy.

What Font Is is available in two versions, a free version and a PRO version. The free version contains advertising and allows you to perform only 10 identifications per day. The kind people at What Font Is have provided Functionn with 3 PRO accounts worth $10 to giveaway to the readers of the blog.

The PRO accounts last for a year, have no adverting whatsoever, allows you to input up to 15 characters for recognition, and best of all, enables you to run unlimited identifications per day for a whole year.

So how to win a PRO account you say? Simple – just drop in a comment on this blog post and you will have entered the giveaway. Three readers will be selected at random and provided with their PRO accounts. A user will only be entered once even if there are multiple comments.

However, you can increase your chance of winning this PRO account if you tweet about it, post it on Facebook or share it on Google+. You just need to drop another comment with a link to your tweet/Facebook post/Google+ post for you to be entered more than once in the giveaway.

The the winners will be selected on Friday 1st of February! Good luck!

Requirements: None
Website: http://www.whatfontis.com/
License: Free/PRO

Fangle - A JavaScript Library For Reactive Markdown Documents

Fangle is a JavaScript library for creating reactive Markdown documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately.

Fangle is inspired by Tangle, the original JavaScript library for reactive documents which was featured on Functionn some time back. The only difference is that Fangle allows you to use markdown syntax to create those reactive documents.

Fangle allows you to create a reactive document, which in turn, allows the reader to play with the author's assumptions and analyses, and see the consequences.  An explorable example makes the abstract concrete, and allows the reader to develop an intuition for how a system works.

You might want to check out these:

• Tangle - A JavaScript Library For Creating Reactive Documents

Requirements: None
Website: http://jotux.github.com/fangle/
License: MIT License

Clay - A Rapid Prototyping Tool For Web Development

Clay is a rapid prototyping tool for those doing web development. Clay allows you to spin off a web server, with pre-created directory structures. You can then place your HTML files in those folders and Clay will make them available to you via a local web server.

Clay also comes with the Jinja templating engine which allows you to make use of templates to rapidly prototype your website. Finally when you are satisfied with your prototype, you can ask Clay to build the final static version of the prototype for you to deploy.

Requirements: None
Website: http://lucuma.github.com/Clay/
License: MIT License

HTML iOS Notifications - iOS-Style Notifications With CSS3 & JavaScript

HTML iOS Notifications is a simple JavaScript library which implements iOS style notifications with CSS3 and JavaScript. It allows you to call the notifications with a simple API and pass along a title and message parameters.

Requirements: None
Demo: http://taitems…./UX-Lab/iOSNotification/index.html
License: MIT License or GPL

Queen - A Framework To Runs Scripts On Many Remote Browsers Using Node.js

Queen is a framework which allows you to perform distributed tasks on many  remote browsers. It allows you to run a central server, using Node.js which allows you to push JavaScript code to run in various remote browsers.

Queen allows you to perform bi-directional communication between client-side and server-side scripts, using Socket.io. It allows you to target browsers based on browser type/version, OS, and more.

Queen also allows you to monitor connected browsers and active jobs  and also automatically detect and terminate unresponsive browsers.

Requirements: None
Website: http://queenjs.com/
License: Apache License v2.0

iosOverlay.js–A JavaScript For iOS-Style Overlays/Notifications For The Web

iosOverlay.js is a JavaScript library which allows you to create iOS style overlays/notifications. The notifications are dynamic, i.e. you can update an already displayed notification to display some other message.

Browser Support

• IE7+ — Rounded corners/animation do degrade when not supported, see optional dependencies
• Google Chrome
• Firefox
• Opera
• Desktop Safari
• Mobile Safari — iPhone & iPad

You can also optionally use Spin.js if you want to use a spinner object and jQuery for a fallback CSS animation support. If you are interested in more notifications libraries, you might check out these or find more from the Notification Libraries Channel On Functionn :

• a!ertify.js - An Unobtrusive Customizable JavaScript Notification System – Functionn
• Notify! - A jQuery Notification Plugin For Simple Notifications Bars – Functionn
• Pines Notify - JavaScript Notifications For Bootstrap Or jQuery UI. – Functionn

Requirements: None
Demo: http://taitems.github.com/iOS-Overlay/
License: MIT License or GPL

ScrollUp - A Customizable Scroll To Top jQuery Plugin

ScrollUp is a jQuery plugin to create a ‘scroll to top’ link on your page. It allows you to create the scroll to top link in three formats: As a text link, as a pill or as a tab on the page.

You can use one of the default styles or spin off your custom style as well. ScrollUp allows you to set various configuration parameters such as the distance from the top before showing the element, speed to scroll back to top, animation type for display/hiding of element, and more.

Requirements: jQuery
Demo: http://markgoodyear.com/labs/scrollup
Website: http://markgoodyear.com/2013/01/scrollup-jquery-plugin/
License: MIT License

OSM Buildings - A JavaScript Library For Visualizing 3D Building Geometry On Interactive Maps

OSM Buildings is a JavaScript library which allows you to visualize 3D building geometry on interactive maps. You can view the 3D view of the buildings by panning the map.

The map engine used by OSM Buildings is Leaflet,  and the building geometry is extracted from OpenStreetMap files. OSM Building weights in only at 9.2K in size, unminified, 4.3K minified.

Requirements: Leaflet
Demo: http://osmbuildings.org/
License: BSD

jQuery.BlackAndWhite - A Plugin To Convert Images To Greyscale Using HTML5 Canvas

jQuery.BlackAndWhite is a jQuery plugin which all allows you to convert images to greyscale on the client-side. It uses the HTML5 canvas to display the greyscale images and has a fallback for old browsers.

Requirements: jQuery
Demo: http://gianlucaguarini.com/…jQuery.BlackAndWhite/
License: MIT License

Thorax - A Backbone + Handlebars Framework To Build Large Scale Web Applications

Thorax is a battle-tested framework which allows you to create large scale web applications. It uses Backbone.js for application structure and Handlebars.js for templating.

Thorax can be used as a standalone library, with Node.js or with Rails. Thorax also provides you with various plugins for form handling, collection management, events management, mobile and more.

Requirements: Backbone.js, Handlebars.js
Website: http://walmartlabs.github.com/thorax/index.html
License: MIT License

Parsley.js - Powerful, UX Aware & Dead Simple JavaScript Forms Validation Library

Parsley.js is a JavaScript library for forms validation. Parsley.js takes a different approach to forms validation. Instead of making you use JavaScript for validating your forms, Parsley.js uses data attributes to achieve the same effect.

To use Parsley.js, you just need to include the JavaScript library then use a data attribute on the form element you want to validate. You can use the built-in validators of Parsley.js on specific fields of the form as data-attributes and Parsley.js does the rest for you.

Parsley.js is very lightweight, at only 12K minified. It is available as a standalone JavaScript library or as a jQuery or Zepto.js plugin.

Requirements: None
Demo: http://parsleyjs.org/documentation.html
License: MIT License

Automaton - A Task Automation Tool Built In JavaScript, Node.js Compatible

Automaton is a task automation tool built in JavaScript.  The purpose of Automaton is to allow you to automate repetitive tasks in your projects, using JavaScript. Automaton achieve this by allowing you to create files called autofile.

An autofile allows you to describe an ordered list of tasks to be done for another bigger task to be done. Autofiles can use each other to achieve their ends as well as work independently. Automaton comes with some built-in basic tasks to help you get started.

Automaton can be used via the command-line or as a Node.js module.

Requirements: None
Demo: http://indigounited.com/automaton/
License: MIT License

Mueller - A Modular Grid System For Responsive/Adaptive & Non–Responsive Layouts

Mueller is a modular grid system for responsive/adaptive and non-responsive layouts.  Muller is built using Compass. The grid system gives you full control over column width, gutter width, baseline and media queries.

Mueller is largely a copy of the ideas outlined by Chris Eppstein and heavily inspired by the work of Joni Korpi.

Requirements: None
Website: http://www.muellergridsystem.com/
License: BSD

xy.css - A Lightweight CSS Template For Building Responsive Liquid-Grid Designs

xy.css is a lightweight CSS template which allows us to build responsive liquid grid designs easily. xy.css is feature-packed.  It performs browser style resets using Eric Meyer’s CSS Reset. It also implements horizontal and vertical rhythm with liquid-grid layout and scalable typographic grid respectively.

xy.css allows you to create device-agnostic designs without cluttering your markup with non-semantic attribute classes. You design is progressively enhanced with CSS3, along with animated media-queries transitions.

You can find more grid frameworks on Functionn here: Functionn’s Grid Frameworks Channel.

Requirements: None
Demo: http://xycss.com/
License: GPL

dejavu - A High-Performance OOP Library For JavaScript, With Node.js Support

dejavu is a high-performance object-oriented programming library for JavaScript, which can be used with Node.js.  If you come from other object-oriented programming languages, you might find that JavaScript take on OOP is a bit  different from the classical one.

JavaScript uses prototypal inheritance, which can be daunting for newcomers to the language. dejavu attempts to solve this problem by providing a JavaScript library which implements classical OOP in JavaScript. There are lots of other JavaScript libraries which provide the same functionality as dejavu. Some of the similar, already featured libraries on Functionn, which you might be interested in are:

• StackJS - A JavaScript Object Oriented Programming Framework
• oolib.js - A JavaScript OOP Library

However, compared to those other OOP libraries, dejavu aims to be a high-performance OOP JavaScript library. Compared to the other OOP libraries for JavaScript, dejavu rivals most of them, even vanilla JavaScript. The benchmarks speak for themselves.

dejavu also comes with an optimizer which attempts to make your code written with dejavu lighter and faster. To use the optimizer,  you will need to install Node.js. dejavu also comes in two versions: as a normal JavaScript library or as an AMD module.

The AMD module version of dejavu allows you to seamlessly use dejavu with your script loaders such as require.js. Finally, dejavu depends on the utility-belt JavaScript library we featured sometime back on Functionn called Mout. You can find more about mount here: Mout - A Modular Utility-Belt JavaScript Library For The Browser & Node.js.

Browser Support

• IE (6+)
• Chrome (4+)
• Safari (3+)
• Firefox (3.6+)
• Opera (9+)

Requirements: None
Demo: http://indigounited.com/dejavu/
License: MIT License

Maki - 70+ Pixel-Perfect Icons In PNG & SVG Formats For Web Cartography

Maki is an icon sets which consists of icons which can be used to denote ‘points of interest’ on a map. The icons set contains 73 icons in total, at 3 different sizes, making a grand total of 219 icons in the download package.

The three different sizes however though are slightly different from each other. Each icon has been adapted to be best displayed at their specified sizes. The icons themselves come in two different formats: PNG and SVG.

You can find more icons on Functionn here: Icons Channel On Functionn.

Requirements: None
Demo: http://mapbox.com/maki/
License: BSD

GMailUI - A GMail User Interface Library

GMailUI is a neat JavaScript library written in CoffeeScript which allows browser extension/bookmarklet developers to easily extend GMail’s user interface. If you need to add some buttons, checkboxes or some other UI component to help with the workflow of your extension/bookmarklet, then GMailUI allows you to do so.

GMailUI provides you with the possibility of adding these UI components to you extension/bookmarklet: Button bar, Popup button, Checkboxes , Buttons , Popup menus , Sections , Error sections, Modal dialog (with title, content, footer and OK/Cancel buttons) and Breadcrumb extension.

Requirements: None
Demo: https://github.com/joscha/gmailui
License: MIT License

jQuery UI Bootstrap Theme - Bootstrap v2.X's Theme For jQuery UI

jQuery UI Bootstrap Theme is a fresh attempt at making a jQuery UI theme based upon the popular jQuery UI design. 

We have previously seen Addy Osmani create a similar theme for jQuery UI based on Twitter Bootstrap, but the project has not been updated to reflect the new design of Twitter Bootstrap 2.X.

This version of the jQuery UI Bootstrap theme is based on the latest design and looks very sleek. If you’ve been looking for an update to Addy Osmani’s jQuery UI Bootstrap theme, then this one might come in handy.

Requirements: jQuery UI
Demo: http://gustavohenke.github.com/jquery-ui-bootstrap/
License: MIT License

AppCache Generator - An Online Tool That Generates HTML5 AppCache Manifest Files

AppCache Generator is a simple online tool which allows you to enter the URL of your HTML5 application and it generates the AppCache manifest file for you.

AppCache manifest files are useful for applications which want to allow users to be able to use their applications, even when offline.

Unlike other AppCache generator tools which only scan the pages of the HTML files for cacheable resources, this tool uses actual network requests from the page to generate the manifest file.

This has the advantage of detecting and including assets which have been loaded asynchronously after initial page load.

Requirements: None
Website: http://appcache.rawkes.com/
License: Free

Breeze - A JavaScript Library To Manage Data In Rich Client Applications

Breeze is a JavaScript library which allows you to manage data in rich client applications easily. 

Breeze is especially useful if you find yourself storing data in relational databases and performing queries to save and retrieve those data as complex object graphs, then share the same data across multiple views of your JavaScript application.

Breeze allows you to query an API endpoint for data using a query language similar to LINQ. The queries can be performed asynchronously, with promises. Breeze also provides a change tracking feature which allows you to save on requests to your database by performing requests only if there is any change in data.

Breeze can also be used with popular JavaScript libraries such as jQuery, Knockout.js or Angular.js. Breeze also allows you to cache queries data on the client side for a better responsive UI.

The documentation of Breeze is very comprehensive, you should check it out to get more information about the JavaScript library.

Requirements: None
Demo: http://www.breezejs.com/samples
License: MIT License

Vagrant - Create & Configure Lightweight, Reproducible & Portable Development Environments

Vagrant is a cross-platform application which runs on Windows, MAC OS X and any popular Linux distribution, which allows you to create, configure and reproduce portable development environments for you to work within.

The concept is very simple. You download Vagrant on your OS and install it.  Vagrant uses Oracle’s VirtualBox to create the virtual environments.  It create those environment your need, allows you to configure them, and then save them.

Now when you are on another system, be it a Windows, MAC OS X or Linux, and you need to deploy that environment you previously created, you install Vagrant which will download and install VirtualBox (which run on the same triad of OSes that Vagrant runs) and then setup the environment you previously defined.

Vagrant has a list of prominent users such as Disqus, BBC, Nokia, Mozilla and more – so you know it can be trusted to do the job.

Requirements: Oracle’s VirtualBox
Demo: http://www.vagrantup.com/
License: MIT License

Teoria.js - A Lightweight & Fast JavaScript Framework For Music Theory

Teoria.js is a lightweight and fast JavaScript library for music theory, which includes both Jazz and Classical.

The purpose of Teoria.js is to provide an intuitive programming interface for those developers looking to develop a musical software, which can include software like Sheet Readers, Sheet Writers, MIDI Players etc.

Teoria.js was built from ground-up to be modular and object-oriented.  All the components included in Teoria.js can be used independently but have been developed so that they work equally as well, together.

Teoria.js can understand the following musical concepts: Note Object (alterations, octaves, keynumber, frequency, Helmholtz notation), Chord Object (simple major/minor chords to advanced Jazz chords), Scale Object and the Interval Object.

Requirements: None
Demo: http://saebekassebil.github.com/teoria/
License: MIT License

Maxmertkit - CSS Framework Based On Widget-Modifier Coding Style

Maxmertkit is a new CSS framework which is based on a widget-modifier coding style.  What this means is that instead of trying to showcase all the functionalities of the CSS framework by demoing every single component of it, Maxmertkit allows you to demo each component by choosing yourself which one to demo.

Maxmertkit provides you with a list of possible widgets defined by the CSS framework such as table, input, form vertical, form horizontal, button, input group, buttons group, groups with carets, tabs, badge, label, dropdown, menu, toolbar, menu in dropdown, tooltip and progressbar.

If you wish to see how a button looks when you apply the ‘huge’ class to it, firstly you drag the button widget to the widget display area, then you drag the class ‘huge’ onto the displayed button to apply the huge class to it.

This is an efficient way to showcase the various features of the CSS framework without cluttering up the page with all the possible variations of the components. The Maxmertkit also has other components like social media buttons, popups, tabs, tables, scroll spy, carousel and more.

Requirements: None
Demo: http://maxmert.com/
License: Apache License v2.0

Heisenberg.js - A Project Base For Building Modern JavaScript Applications

Heisenberg.js is a boilerplate for building JavaScript applications based on the Mediator Pattern. It helps you structure your JavaScript code and allows you to use the Mediator Pattern to develop JavaScript applications.

Unlike Backbone.js, which is based on the MVC pattern, the Mediator pattern of Heisenberg.js consists of a set of objects which communicate by emitting event signals to which objects can register interest in and act accordingly.

Heisenberg.js aims to be a solution which sit between unstructured jQuery code and fully-fledged Backbone.js applications.

Heisenberg.js comes with a built-in templating engine – Handlebars.js, which can be changed for any other one of your choice. It includes jQuery and Underscore.js as well.

It has a fully documented source code if you are interested into going deeper in your understanding of how Heisenberg.js works.

Requirements: None
Demo: http://benhowdle.im/heisenberg/
License: MIT License

Rye - A JavaScript Library For DOM, Events Manipulation & Touch Support

Rye is a lightweight JavaScript library for DOM and events manipulation as well as touch support. It works in all major browsers, including IE9+. Rye also has an event emitter as well as support for isolated DOM events.

Rye tries to takes the best from other similar JavaScript libraries and tries to implement a new JavaScript library, which is meant for modern browsers. It also tries to take a minimal approach by using stand browser APIs where possible and tries to take advantage of the new version of JavaScript – ES5.

Rye is also modular.  This means that you can build your own custom version of Rye, using only the modules you need, hence keeping the size of the JavaScript library down to a minimum. Rye’s documentation is very extensive as well, making any new adopters find their feet easily. The API is similar to jQuery and Zepto.js’ API.

Browser Compatibility

• Chrome - 6+
• Safari - 5+
• Firefox - 6+
• IE - 9+
• Opera - 11.5+
• iOS - 4.1+ (6.0.1)
• Android - 4.0+
• Blackberry - 10+
• Opera Mobile - 11.1+ (12.1)
• Chrome (Android) - 18+ (18)
• Firefox (Android) - 15+ (18)

Requirements: None
Website: http://ryejs.com/
License: MIT License

Ink - A Front-End Framework For Quick UI Development Using HTML, CSS & JavaScript

Ink is a front-end framework for quick development of UIs using HTML, CSS and JavaScript, similar to Twitter Bootstrap.  It provides an easy way to create modern layouts and provides implementations of common interface elements such as gallery, modal, table, tree view, sortable list, data picker, tabs, form validator and more.

Ink also has a core JavaScript engine called Ink JS Core which provides DOM manipulation, communication facilities, page effects and more.  Ink also has predefined layout styles, navigation menus, typography styles, icons (Font Awesome), alerts and tables.

Requirements: None
Demo: http://ink.sapo.pt
License: MIT License

voxel.js - An Open Source Voxel Game Building Toolkit For Modern Web Browsers

voxel.js is a collection of projects which allows you to create Minecraft-like games in the browser. voxel.js requires a browser which has WebGL support, as the games created with Voxel.js required it to run.

The idea behind voxel.js was to create a framework which is not monolithic but rather composed of several modules.  Modules can be installed using Node.js package manager NPM.

The core components of voxel.js are the voxel-engine which is required for any voxel.js games, voxel – the logic that generates the voxel game world and voxel-mesh which takes data from the previously mentioned voxel module and turns it into a three.js mesh that can be displayed as a game.

voxel.js also has several add-ons to complement the above core modules. They range from add-ons which allow you to create simple NPC creatures, to add-ons which can generate a forest or debrit. You can check out voxel.js’s website for more information.

Requirements: Node.js
Demo: http://voxeljs.com
License: BSD

Dotted Paper - Free Dotted Paper PDF, Perfect For Designers' Use

Dotted Paper is a simple website which provides a free printable PDF file which is a dotted page.  This dotted page can be used for web, interface, banding or user experience design – perfect for designers to use. Instead of spending money buying a book for doing those sketches – you can use these as they are free.

Requirements: None
Website: http://dottedpaper.com/
License: Free

alias.sh - An Online Tool Manage, Share And Synchronize Your Aliases

alias.sh is a web-based application which allows you to share, manage and synchronize your bash shell aliases in the cloud.  With a two click registration system, you are setup with an account and you can then seamlessly synchronize all your aliases across various computers – without any hassle.

This service can also serve as a backup for all your aliases if your computer crashes. You can then just login to your alias.sh and get back all your aliases. Another neat feature of alias.sh is that it allows you to submit aliases and others can then upvote it and comment on it.

To prevent and security issues, such as man-in the middle attacks, alias.sh uses SSL to sync your aliases, so you can rest assured that nothing is being tampered with – and that you are getting the verbatim aliases.

Requirements: None
Website: http://alias.sh
License: Free

Bootstrap Tour Extended - Powerful JavaScript Tour Library Built For Highly Dynamic Applications

Bootstrap Tour Extended is a JavaScript tour library built ontop of Twitter Bootstrap.  It is a fork of the previously featured Bootstrap Tour plugin on Functionn. However, this Bootstrap Tour library adds some more bells and whistles to the older library, making it more appropriate for highly dynamic applications.

Francois-Guillaume Ribreau, the author, wanted a persistant, clean, evented, deferred based Tour library with optional overlay support. With no other tour library providing all those features, Bootstrap Tour Extended was created to cater to those features.

What makes Bootstrap Tour Extended appropriate for highly dynamic applications is the global parameters the tour library can take.  It accepts both strings and functions as parameters. This feature allows you to attach tour features to elements which are not yet present at tour start-up but do sometime after in the timeline.

Requirements: Twitter Bootstrap, jQuery
Demo: http://sorich87.github.com/bootstrap-tour/
License: MIT License or GPL

grid(ism) - A Practical, Robust And Responsive CSS Grid Framework

grid(ism) is a practical and robust responsive CSS framework which aims to allow you to create responsive websites easily. grid(ism) was created with simplicity in mind. 

t uses simple naming conventions for classes, equal margins sizes on the outside and inside of gutters, as well as independent sections management of the layout. You can check out the website for a demo.

Requirements: None
Demo: http://cobyism.com/gridism/
License: MIT License

Web Development: 2012 & Forward - Featuring Dr. Axel Rauschmayer, Alex Young, Umut Muhaddisoglu & Ray Cheung

2012  has been a fantastic year for web development. I cannot even begin to describe how utterly fantastic 2012 has been for for the web. We’ve seen JavaScript become one of the most popular programming languages, we’ve seen the HTML5 specification completed, we’ve seen Responsive Web Design change the way we design websites and much much more.

As the year ended, every blog were churning out their best of posts, most of which were pretty fantastic. At Functionn however, we decided to do something different. We decided to invite some of the prominent writers from some very established blogs to talk to us and share their views of 2012 and beyond for web development.

So today, we will be joined by the following distinguished writers:

• Dr. Axel Rauschmayer (@rauschma) - Editor of JavaScript Weekly & 2ality.com, maintains JS Central and organizes MunichJS. You can find out more about him at his personal blog http://rauschma.de/.
• Alex R. Young (@alex_young & @dailyjs) - Editor-in-Chief Of DailyJS and usevim.com, founder of Helicoid, Software Engineer based in London.
• Umut Muhaddisoglu – Editor Of WebResourcesDepot, Creator Of UptimeRobot and ioDeck
• Ray Cheung – Editor Of WebAppers  and runs several other websites such as Photoshop Lady, Cutest Paw, Mobile Tuxedo and more.

We’ve asked them to answer a set of questions and provide us with their views on those matters. They have duly obliged and below, we’ve put together the answers below.

Q: Tell us a little bit about yourself. How has 2012 been to you? What have you been working on lately?

 2012 has been a very productive year for me:

My JavaScript and web development blog, 2ality, is doing well. Several people who I greatly respect, have written kind testimonials for it.

I spoke at several great JavaScript-related conferences: Mix-IT Lyon, Fluent San Francisco, JSConf EU Berlin and dotJS Paris. There are two videos that you can check out: “Improving JavaScript” (Fluent) “JavaScript inheritance: beyond the basics” (JSConf EU)

O’Reilly has published “The Past, Present, and Future of JavaScript”, as a free mini-ebook (registration required).

I contributed articles to to the free digital magazine Appliness (“A closer look at Underscore templates” – among others) and to the Adobe Developer Connection (“Categorizing values in JavaScript”).

I’ve become editor of the popular free email newsletter JavaScript Weekly.

I'm Alex R. Young and I write and edit DailyJS.com and usevim.com. Throughout 2012 I've been writing about JavaScript, including a commercial book about Node.js for a well-known publisher.

I also have some eBooks in the works that you'll see on DailyJS in 2013.

I work as a freelance Node, iOS, and Ruby consultant to pay the bills. In 2012 I worked for some interesting companies, large and small, mostly based in London England but a few from the US as well.

I'm a designer/developer from Istanbul who used to create web projects for customers but completely focused on my own projects since 6 years.

WebResourcesDepot is my main project, a website that shares the best resources for web designers/developers daily. I'm a fan of high-quality, ready-to-use resources, they save so much time and WebResourcesDepot is all about that.

Creating at least a new project each year was my target and that worked on 2012 as well. With a friend (Devrim Vardar), we have created ioDeck which currently a self-hosted PHP form generator application but will become more soon (like the ability to sending newsletters). We are working on it a lot.

I have probably spent most of my time on Uptime Robot this year. It is a totally free uptime monitoring service that runs since 3 years. It grew so much and to help it scale/perform better, I rewritten its engine with Node.js and about to activate it. Excited :).

To sum up, 2012 was quite busy and ended up teaching me quite nice stuff like co-partnering a project and Node.js.

Hello, I am Ray Cheung from Hong Kong.

I love working on my own projects; starting from an idea, designing from scratch with some inspiration along the way, coding, and then spreading it around the world gives me a great sense of accomplishment.

Currently I am managing self-started websites with over 3 million visitors per month.

I have been busy working on WebAppers.com since 2007. In 2012, I have been trying something completely new, which is CutestPaw.com and TwitrCovers.com. They target a whole new market and audience. And I am impressed the growth of the sites.

Q: Now that 2012 is over, what do you think were some of the most exciting developments in the world of web development this year?

On the content side I have been impressed by:

Responsive Web Design leads to web pages that adapt automatically to the width of the viewport.

They thus scale seamlessly from cell phones to desktop computers. Example: UX Munich Conference.

Parallax scrolling enabled engaging user experiences. Three examples: Hobo Lobo of Hamelin, Spokes – Eclectic Pedicab Rides, Rit Team.

Digital pop-up books: Beercamp 2012 was first, Google’s “Digital Creativity Guidebook” is also nice.

Last year has seen many exciting new JavaScript development tools:

• Grunt: a build tool (think Ant, but in JavaScript instead of XML).
• Package management tools for the web: Twitter Bower, volo, Jam, Ender.
• Yeoman: a meta-build tool (that is built on several tools) has also been popular.

More and more integrated development environments are written in HTML5 (examples: Cloud9, Brackets), but I haven’t yet had time to try them out.

Lastly, much to my delight (even though I rarely use their products), Microsoft has become a good web citizen.

You can write first-class apps for Windows 8 in HTML5 (several of the standard apps are in fact written in it) and TypeScript tries to fit into the JavaScript ecosystem instead of competing with it.

Summer 2012: Node 0.8. I developed some solid commercial projects with 0.4 and 0.6, but 0.8 felt like a major milestone as Node's hype started to fade and people began to take it more seriously.

For me, Node's streams API has been a constant source of fascination. I've been working hard to encourage people to learn it, but the best development in this area was substack's free book on the subject.

The API is changing to make it more reliable, and although that came to fruition in an unstable Node release in December, it will be a big deal for Node in 2013.

Although I find Node suitable for many network-oriented programs that have nothing to do with web development, streams and asynchronous I/O seems to fit a lot of web applications that I've been developing.

For example, media streaming and projects that make heavy use of WebSockets.

I'm so surprised to see HTML5-CSS3 becoming the standard this fast, that is really great.

This year was the victory of apps, frameworks and plugins. Many designer/developers completely shifted from custom code to ready-to-use ones.

Nobody plans to create their own CMS, write their own JS gallery or develop a support-ticket system but instead prefer to use the proven ones.

Everyone now focuses on the time and result but not the dragons caught while doing them (which is good).

Stripe is the most exciting project I have seen in 2012.

Stripe is a simple, developer-friendly way to accept payments online. I think it’s a great alternative to PayPal.

However, it’s only available to US and Canada now. I hope it will be available to other countries very soon too.

Q: What web development tool/library/framework/mindset shift has impressed you most in 2012?

See previous answer to previous question.

Prominent client-side developers have been pushing "micro frameworks" for a while, and 2012 saw many smaller client-side libraries submitted to DailyJS that had zero dependencies.

It seems like we're moving away from monolithic frameworks.

The thing about smaller libraries is managing them becomes difficult. One interesting development that addressed this was the Component project by TJ Holowaychuk, who is known in the Node community for creating Express.

I don't think Component has hit its stride yet -- in terms of community interest - so I hope to see it really take off in 2013.

It is Bootstrap for me.

Not only because I find it awesome but because it showed the necessity and demand for such front-end frameworks.

There is also Node.js (it existed before but I used it this year the first time). Friends still make fun of "me excitedly describing the performance it provided for Uptime Robot".

It simply enabled me to write a high-performance app with only JavaScript, so cool.

I really like jQuery Masonry (Pinterest Style) layout jQuery plugin.

It really changed the way people viewing the content of websites. It works really well when using it along with infinity scroll jQuery plugin.

I have used them on both cutestpaw.com and twitrcovers.com, and my visitors love it very much.

Q: Which single tool/library/framework/mindset shift would you recommend other developers to use/put to work?

The following technologies have not (yet) gotten enough attention:

CSS Grid Layout allows HTML5 apps to catch up to native GUI frameworks (Android, Java SWT, etc.). It is currently only supported on Internet Explorer 10, but will soon come to Firefox.

The Shadow DOM allows one to encapsulate HTML5 widgets (video players, social buttons, etc.), which is important for the future of the platform.

qooxdoo is a framework for developing native-style HTML5 apps (for mobile, desktop, etc.) It’s solid work and well documented. A serious (and free) competitor to Ext JS.

I'd recommend two things for client-side developers:

Distribute smaller components, and write unit tests. Learn Jasmine or Mocha, both work well for browser-based testing.

Also, if you're a predominantly client-side developer, why not learn Node? It's an extremely convenient way to break into server-side development. Don't be afraid to try new things!

Bootstrap again. It is a such a huge time-saver.

We used it in ioDeck, customized when needed and loved the integrity of elements, components and the code it provided.

No Doubt, jQuery is the framework I would recommend for other developers to use.

It’s fast and concise. And best of all, there are tons of plugins available. It helps you speeding up your web development.

Thank you so much for all the jQuery plugin developers out there, those useful plugins really helps us a lot.

Q: What most excites, scares and disappoints you about the web today?

I love that you can do more and more things with HTML5.

On the flip side, browsers also become more and more bloated, because they have to support the ever-growing platform.

Some HTML5 APIs feel rough to me and would profit from having more solid foundations, e.g. promises.

Lastly, there are way too many libraries being written for JavaScript, most of which end up not being maintained. But that is also a sign of the creativity of the community.

Games excite me, because they're so dependent on mastery of technology. Combining WebSockets, WebGL/Canvas, good art and sound, with a solid understanding of gameplay and game design is ridiculously multi-disciplinary. Although HTML5 is a nebulous and misused term, it's given people something to shout about, and is attracting new talent to the web -- I saw Notch talking about WebGL and immediately wrote about it in my DailyJS notes.

Games also scare me. I love sitting down with a controller to play the latest high budget action adventure games, but motion control has chipped away at my button-pushing pastime. Meanwhile, free-to-play HTML5 social games have attracted media attention to the industry, with claims of the death of the high budget game and a social game future.

It seems like my lifelong hobby (gaming) is being threatened by my lifelong career (web development).

Games disappoint me. One of my favorite all time games is Frontier: Elite 2. It's a space trading game that could easily be implemented as a massively multiplayer game in WebGL with a nice little Node server.

Why do we live in a world of Zynga instead of that? I know Zynga had financial trouble this year, but I feel disappointed by the lack of 'serious' HTML5 games -- there are a few, but not enough.

As there are now too much of everything, users/readers are in search of better and better quality of everything (because it exists).

This is what excites and scares me the most. Exciting that I'll need to create better, scary that "what if I can't?" :).

The growing speed of the web excites me the most. The security of the web scares me the most though.

I think the security of the web does not catch up with the growth of the technology.

One thing that annoys me the most is the number of social media sites rise and fall every year. It really bothers me a lot, because every time a new popular social media site came up, we have to integrate into our websites and blogs.

I hope there is only one social media site to rule them all.

Q: One word to describe the web as it is today?

Promising. Or, if I have three words: full of potential.

Addictive.

ExcitiFreshyFlexiFun (is that a word?)

If I have to use one word to describe the web today, I would use “Unbelievable”.

You cannot believe how fast the web grew in the last two decades. You cannot believe how many websites, web applications developed every day.

You also cannot believe the web helped thousands and thousands of people everyday in every possible ways.

Q: How do you see the web change in 2013 and beyond?

Print. While print is in decline, HTML will still get better at it. It has the potential to eventually replace PDF as a target format.

When it comes to entering content, lightweight syntaxes such as Markdown and AsciiDoc are becoming popular. Especially the latter might one day replace LaTeX for books and long documents.

I only wish HTML had technology similar to SyncTeX, where you can jump back and forth between the LaTeX source and the rendered PDF.

That’s almost WYSIWYG, but without its disadvantages. PDF is also ahead when it comes to delivery (a single file, we still don’t have a web archive format that all browsers support) and annotation (dead simple, e.g. via the standard OS X Preview app).

Cross-platform apps. On mobile, HTML5 is already doing quite well, thanks to PhoneGap. I’m still looking for a similarly elegant solution for desktop operating systems.

I would want such apps to be deployable on either a server or a desktop computer. Then figuring out how to split the app between the client side and the server side is challenging, especially as client-side APIs are still limited (but getting better), compared to, say, Node.js APIs.

Several projects in this area are promising:

• node-webkit: “Call all Node.js modules directly from DOM and enable a new way of writing applications with all Web technologies”
• AppJS: “SDK on top of Node.js to build desktop apps using HTML5/CSS/JS”.
• Packaged web apps: I also expect that we’ll eventually have the ability to make packaged web apps (based on Chrome, Firefox, etc.) look like native apps (a downloadable single file with an icon, running stand-alone, etc.).

It'll be supplanted by Gopher 2.0.

This will be the year where HTML5-CSS3 strengthening their places.

Thinking that we'll see some exciting standards-based (canvas or SVG) and developer-friendly (jQuery-like) animation libraries as there is a big gap there since the non-usage of Flash.

I think the speed of internet will only get faster and faster. There are more and more people will be using their mobiles browsing websites.

There will be more and more applications developed for people using them on the street, helping their daily lives. The web will only be faster, simpler and more powerful.

Q: What do you look forward to in 2013?

Two technologies, that I’m very excited about, are:

ECMAScript 6: will make JavaScript a much friendlier and powerful language. It is an important contribution to the ever increasing attractiveness of the JavaScript ecosystem. The standard will be done by the end of 2013. Modern browsers will fully support it in 2014, but parts of it will be available before then.

Firefox OS: an HTML5-based mobile operating system that is truly open source. It will be interesting to see how it competes with Android and iOS when it comes to ease of use and performance. Naturally, a dream come true for web developers and for those of us who are still sad about HP abandoning webOS devices.

My son's first words.

This will be the year where I won't be creating any new projects but improving the current ones.

WebResourcesDepot, Uptime Robot and ioDeck will all have fresh websites with new features.

Already been working on some and looking forward to the results.

"Internet of Things" is getting real each day. There are lots of projects on Kickstarter that aims to connect devices to our networks.

This may be the year where we start integrating APIs of devices like light bulbs, refrigerators or TVs to our web apps. Hopefully.

In 2013, I would like to actively promote WebAppers.com, CutestPaw.com and TwitrCovers.com.

And also, I am currently redesigning PhotoshopLady.com, hope it gives users a fresh new look, and help users navigate the Photoshop tutorials easier.

I would also love to spend some time to build a web application that is useful to web developers and designers.

Q: If you had the superpower to change something in the world, what would you change?

We still don’t have a science for complex systems (human mind, human body, societies, economies, ecologies, the weather, software, etc.).

We probably need to invent a new kind of mathematics to enable it. If we had such a science, we could begin to solve many of the systemic problems that humanity currently has.

Something else has been bothering me for a while: most of the things that we produce are difficult or impossible to recycle. We need to find a way to produce things that are recyclable in the same manner that plants are.

Then we could have our technology cake and eat it too: frequently buying new gadgets wouldn’t harm the environment, any more.

I'd make the upcoming Star Wars movies good, so I can watch them with my son and not have to apologize for things like 'yipee!' and Jar Jar Binks.

Destroying all prejudices.

If I can have a superpower, I hope I can remember everything I read on the internet with a glance of eyes.

It’s because there way too much information on the internet nowadays, but we have so little time to absorb those knowledge.

Finally, we asked the interviewees to add a final optional question on their own and answer it themselves. The questions and answers are listed below.

Q: Native apps or HTML5?

Native!

Q: Any words to the community?

If you already don't have one, make sure you create a pet-project this year, improve it regularly, work hard to promote it and will be surprised to see how much it teaches and improves you.

Q: How can I know more about you or contact you?

If you would like to know more about me, you can visit my personal blog on http://www.raycheung.me.

Please feel free to contact me if you have any questions. You can also follow me @webappers on Twitter.

That’s it for the interview. We full heartedly thank all the interviewees for their time and effort in participating in this little talk.

It would be great to hear your thought on 2012 from the web design and development perspective. Feel free to drop in comments to share your thoughts!