Aware.js is a simple jQuery plugin that allows a site to customize and personalize the display of content based on a reader's behavior without requiring login, authentication, or any server-side processing.

Aware.js bundles several features into one easy to implement library. Aware.js will track a reader's visits, and provide information about the reader's habits, making information available to developers via CSS classes AND via a JavaScript reader object.

In addition, the reader object contains this same information, along with some specific information about previous visits. This is useful for JavaScript developers who want to add more dynamic features to their site based on this information (and who don't want to query the DOM for classes).

This simple information can be used to mildly or drastically alter the layout of a page. For example, first time visitors can be shown a special introduction, while repeat visitors are shown only the newest things. Visitors who haven't come in a while can be presented with a recap of recent, important items.

Aware.js can also flag content on a page as new to the reader, helping them keep up-to-date without remembering what they read last visit.

jQuery.smarttruncation truncates the text within the assigned element to fit and updates the string length while resizing the window.

The used technique is very responsive, since it calculates the width for each character in a pre-define set ahead of time. The generated sizes dictionary is cached and re-used if the plugin is called on an element with identical font properties.

Sometimes (in about 3-5% of all cases), due to characteristics of certain fonts, a string will still not fit. In this case the plugin will go the "common" way of chopping off on character at a time until the string fits.

tabIndent.js is a JavaScript library which does two things to enhance the traditional text-box: It disables the default browser behavior (moving to the next input box) and enhances the existing textbox to capture the "tab" key and replicate behavior similar to that found in editors. (Inserting a tab character, indentation).

Multi-line highlighted text is also tab-able, and shift-tab removes a tab character instead.

Volley is a jQuery plugin for dividing elements into rows/columns based on their visual position. Volley requires all elements to be positioned in a grid, i.e. their widths and heights has to match (otherwise there is no point for calling volley really).

Nov 29, 2012

Konami.js is a tiny JavaScript implementation of the Konami Code, but also monitors any arbitrary keyboard sequence. Konami.code(…) creates an event handler which you attach to any element you would like.

The Konami Code, known in Japan as the Konami Command, is a cheat code that appears in many Konami video games, although the code also appears in some non-Konami games.

The code was first used in the 1986 release of Gradius for the Nintendo Entertainment System but was popularized among North American players in the NES version of Contra, for which it was also dubbed both the "Contra Code" and "30 Lives Code".

During the title screen before the game demo begins, the player could press the following sequence of buttons on the game controller to enable the cheat: ↑ ↑ ↓ ↓ ← → ← → B A

Division isn't anything revolutionary when it comes to grids or grid customization. Inspired indirectly by Foundation, yet designed with the undesigner in mind. Division is responsive with mobile specific options.

There are a couple major differences between Division and a grid like Foundation or Twitter Bootstrap. First is the naming convention, which is set up for lightning fast prototyping. You no longer have to be concerned with how many columns an element must be in order to be two thirds, or one third, or three-fifths. This is an excellent starting point for designers who are doing rapid prototyping of a concept before handing it over to developers.

Second is the amount of clutter. Division runs a very clean shop in comparison to other popular grids. While using a simple CSS reset, thanks to Eric Meyer, Division keeps the rest of the grid to a minimum. You don't need to "undo" styles in order to apply your own. Especially to elements like forms, lists, buttons, and blockquotes. Your design is yours, and Division lets it to stay that way. The grid weighs in at only 8KB, and 12KB including the CSS reset.

Division also includes Respond.js, a great script for adding CSS3 Media Query support to older versions of IE, and is fully compatible with Division, unlike with some other grids.

Gator is a small (~0.78 kb minified + gzipped), simple, standalone, event delegation library. If you are familiar with jQuery then it may look familiar to you. Out of the box gator works in Chrome, Safari 5+, Firefox 3.6+, and Internet Explorer 9+. The legacy.js plugin adds support for Safari < 5, and Firefox < 3.6 and Internet Explorer 6, 7, and 8.

Why Use Event Delegation?

There are already a number of articles about event delegation and the advantages over traditional event handling. Here are just a few:

improved performance/memory usage - If you have a table with hundreds of cells, and you want to do something when the user clicks on a cell, without delegation you would have to bind the event to each cell. With delegation you could bind a single click handler to the table element.

No need to re-attach events - If you use AJAX to dynamically insert/update content on the current page then you don't have to worry about removing/adding the events every time the content changes. You can bind the events once to a higher level element.

Fewer functions to manage - Without delegation you would have to manage a lot of callback functions. If you remove a bunch of elements you would have to make sure to remove all the events associated with them.

Nov 28, 2012

FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome - no matter how many columns of data you may have in them. FooTable transforms your HTML tables into expandable responsive tables. This is how it works:

It hides certain columns of data at different resolutions (we call these breakpoints).

Rows become expandable to show the data that was hidden.

All the data that is hidden can always be seen just by clicking the row.

Another goal of FooTable was to make it super extensible. If you look at the code you will see that there is a plugin framework within the plugin, so extra mods can be attached just by including another JavaScript file.

Scrubby is a JavaScript library which allows you to perform JavaScript source transformation to support Bret Victor-style value-scrubbing interfaces with the information without having to recompile code every time the value changes. Scrubby adds a button to the top-left of the page for each script you specify that's scrubbable. Clicking on that button will open a new window with the code in it, and you can scrub live immediately.

Scrubby works by transforming your code using esprima and escodegen to replace any literal references by a reference into a global table of values. When you scrub a value, scrubby just updates the global table, so the next time your code references that literal, it receives the edited value. When you scrub a value, scrubby updates the global $values object with the edited value. When the code runs again, it automatically uses the new value.

jStat is a statistical library written in JavaScript that allows you to perform advanced statistical operations without the need of a dedicated statistical language (i.e. MATLAB or R). The majority of jStat functions can be used independently of any other libraries. However, the plotting functionality of jStat is based on the jQuery plugin - flot. Therefore, to generate plots using jStat the following dependencies are required:

jQuery - version 1.4.4+

jQuery UI - version 1.8.9+

flot - version 0.6+

jStat only uses elements that adhere to the jQuery UI ThemeRoller styles so any jQuery UI theme can be used. jStat uses numerous advanced statistical functions that require considerable processing power. This requirement results in differing user experiences depending upon your browser choice. Currently, the fastest browser is Google Chrome. However, most browsers provide satisfactory performance, with the exception of Internet Explorer which has a significant performance hit.

Orion is an open source project under the Eclipse top-level project. Orion's objective is to create a browser-based open tool integration platform which is entirely focused on developing for the web, in the web. Tools are written in JavaScript and run in the browser.

Unlike other attempts at creating browser-based development tools, this is not an IDE running in a single tab. Links work and can be shared. You can open a file in a new tab. Great care has been taken to provide a web experience for development.

Orion components are individually consumable and examples of this are Mozilla Firefox Scratchpad, Scripted Editor. All the components of Orion together can be viewed at the public facing OrionHub site where anyone can create an account and try Orion out.

All you need is a modern web browser, from there you can write code using a great editor, link to a repository, create a site. Develop your software where ever you go. It'll be there, in the cloud, right where you left it. Just login from a web browser on desktop, laptop, tablet, at an airport, on a bus or even in your office. Orion incorporates leading edge client technologies together to make an extensible tooling platform. Others fork components like the editor to create their own tooling solutions.

Loader.io is a free load testing service that allows you to stress test your web apps/APIs with thousands of concurrent connections. It provides a simple web-interface or well-documented API to get consistent and reliable load test results. Loader.io allows you to send upto 50, 000 concurrent requests to your web application.

UA-Parser.js is a lightweight JavaScript-based User-Agent String Parser. It can extract detailed type of web browser, layout engine, operating system, and device purely from user-agent string. It works both in the browser and as a Node.js module.

CHAP Links Library is a web based visualization library for displaying graphs, networks, and timelines. The tools are developed as Google Visualization Charts for JavaScript and GWT. CHAP Links Library is developed by Almende as part of CHAP, the Common Hybrid Agent Platform.

The library contains the following components: Graph, Graph3d, Network, Timeline and a TreeGrid.

Graph - The Graph is an interactive visualization chart to draw (measurement) data in time. You can freely move and zoom in the graph by dragging and scrolling in the window. The time scale on the axis is adjusted automatically, and supports scales ranging from milliseconds to years. The Graph is specially designed for handling large amounts of data.

Graph3D - Graph3d is an interactive visualization chart to draw data in a three dimensional graph. You can freely move and zoom in the graph by dragging and scrolling in the window. Graph3d also supports animation of a graph.

Network - Links Network is an interactive chart to visualize networks. It allows creating nodes, links between the nodes, and interactive packages moving between nodes. Interaction can be real time or can be animated from a set of historical data. The visualization supports custom styles, colors, sizes, images, and more.

Timeline - The Timeline is an interactive visualization chart to visualize events in time. The events can take place on a single date, or have a start and end date (a range). You can freely move and zoom in the timeline by dragging and scrolling in the Timeline. Events can be created, edited, and deleted in the timeline. The time scale on the axis is adjusted automatically, and supports scales ranging from milliseconds to years.

TreeGrid - TreeGrid is a visualization which represents data in a hierarchical grid view. It is designed to handle large amouts of data, and has options for lazy loading. Items in the TreeGrid can contain custom HTML code. Information in one item can be spread over multiple columns, and can have action buttons on the right.

Batch is a lovingly designed and crafted suite of 300 icons for web and user interface design. Each icon is a single Photoshop shape layer, meaning they can be scaled up—and down—without loss of quality. Adding layer styles and blend modes is also a breeze.

The download includes the Batch PSD, SVGs (128x128) and PNGs (16x16, 32x32, 64x64).

X-editable is a JavaScript library which allows you to create editable elements on your page. It can be used with any engine (Twitter Bootstrap, jQuery UI or jQuery only) and includes both popup and inline modes.

It's new life of bootstrap-editable plugin that was strongly refactored and improved. Please try out demo to see how it works.

jQuery UI (1.9+) - Starting from jQuery UI 1.9 it has Tooltip plugin. In combination with Button widget it is very suitable for editable form and popup. You can apply any theme of jQuery UI Themeroller.

jQuery (+ poshytip plugin) - The simplest build of X-editable. For inline mode you need only jQuery. For popup mode it uses Poshytip plugin. To show date picker you should include jQuery UI date picker. Or surely you can write your own inputs.

simpleCart.js is a free and open-source JavaScript shopping cart that easily integrates with your current website. simpleCart.js requires no databases, no programming, no headaches. A simple JavaScript shopping cart that you can setup in minutes. It's lightweight, fast, simple to use, and completely customizable.

Features

No Databases, just simple HTML & JavaScript – The motto has always been that all you need to know is basic HTML to use simpleCart(js). If you’re able to copy and paste a few lines of JavaScript and put class names on your HTML tags, you’ll have no trouble adding a fully functioning and completely customized ecommerce store to your site in a matter of minutes.

Extremely Flexible Design Options - Its simple, you just add class names to your existing HTML to make a product or display cart information. The display of what is in a user’s cart can be outputted as a table or divs with complete control over the language, order, content, and styling of those items. Just bring your own CSS and simpleCart(js) is a perfect fit for any content management system even a basic static HTML site.

Multiple Payment Gateways - The simpleCart(js) free core comes with the ability to checkout with PayPal express, Google checkout, and amazon payments. We’re always working on adding new payment gateways and checkout options.

High Performance - Studies show that you lose 7% of sales for every extra second your store takes to load. So the last thing you need is a large over bloated shopping cart. With its extraordinary small footprint (8kb minified & gzipped) and ability to operate independent of a database, simpleCart(js) keeps your ecommerce store running fast. It is trusted for use on high traffic websites when most other carts are not up to the task.

International Language Agnostic - Every piece of text viewable on your website is written by you, which means you choose what language your cart is in. There is no need to download language packs or do translations. it’s completely agnostic to whatever language your customers speak.

International Currency Support - Selling goods outside of the USA? simpleCart(js) supports a wide array of currencies from the US Dollar to the Thai Baht.

BBC GEL Icons - Free Iconic Web Font

The BBC Global Experience Language (GEL) is a set of icons from the BBC which was originally designed to complement their website by supplying a new set of icons to provide a visual guide to navigation.

The icons themselves are available in different formats such as PNG, Photoshop, Illustrator formats as well as an iconic web font. There is a grand total of 96 superb icons which you can use in your next project.

Brandico - Free Iconic Web Font

Brandico is a "crowdsourced" collection of popular logos like Facebook, Twitter, Google Plus and more. It includes only icons for links to pages in social networks, messengers icons and "login via..." icons.

The whole set contains 32 icons of various popular services from around the web.

Dot Com - Free Iconic Web Font

Dot Com is a font which contains over 150 glyphs, which can be used as a web font. The theme of this font is mostly arrows, as you will find many arrow of different shapes and styles within it. The font is provided in the TTF format, but can be converted to other formats for use as a web font.

Elusive Icons For Twitter Bootstrap - Free Iconic Web Font

Elusive Icons is a new iconic web font released meant to be used with Twitter Bootstrap or Zurb Foundation 2 front-end frameworks. The web fonts contains a whopping 268 glyphs meant mostly for web and mobile applications and websites.

It can be used as an alternative to Font Awesome, the default web font packaged with Twitter Bootstrap. The web font is released under the SIL Open Font License.

The Entypo Pictogram Suite - Free Iconic Web Font

Entypo is a set of 250+ carefully crafted pictograms. The package contains an icon font — OpenType, TrueType and @font-face — EPS, PDF and PSD files. All released for free under the license CC BY-SA 3.0. The font itself is released under the SIL Open Font License though.

The latest release of the Entypo Pictogram suite added more icons, with a social extension pack, as well as several improvements to several old icons. There is also a character map for you to peruse at your ease and a glyph guide as RTF.

Erler Dingbats - Free Iconic Web Font

Erler Dingbats is a font which is available in the TTF format which contains a set of general purpose glyphs which can be used as a web font. The designers of this font have tried to group together a related number of glyphs and this font is the product.

Font Awesome - Free Iconic Web Font

Font Awesome is the iconic font designed for use with Twitter Bootstrap. It contains more the 220 icons classified in various categories like web application icons, text editor icons, directional icons, video player icons and social icons.

Font Awesome works even in IE7, is screen-reader compatible and has infinite scalability like all other fonts. Using an icon is as simple as including a CSS file in your project and assigning a class to an element.

Foundation Icon Fonts 2 - Free Iconic Web Font

Foundation Icon Fonts 2 is a custom icon set that is stored in a handy web font and are coded to be more accessible. There is a total of four sets of icons available in the Foundation Icon Set 2, as follows: General, General Enclosed Set, Social Set and Accessibility Set.

The General & General Enclosed Icon Sets contain as their name suggest, general purpose icons. The social icon set contains icons of various social services such as Twitter, Facebook, Reddit and more. Finally, the Accessibility set contains icons to improve accessibility by providing icons for helpful visual cues.

GeoBats - Free Iconic Web Font

GeoBats is a free font, available in the TTF format which can be used as a web font. It has over 150 icons representing the various countries of the world along with one which represents the world map.

Glyphyx - Free Iconic Web Font

Glyphyx is a web font which contains a set of glyphs which are from the transportation theme. The icon set itself contains more than 90 glyphs, and you can download it in various formats for various uses.

The website need registration for you to be able to download the icon, which itself is free. You get a nice package with instructions on how to use the web font generated for you.

Grands - Free Iconic Web Font

Grands is a set of 80 icons which can be used as a web font. It includes popular social media websites logo and various known websites’ logo from the web. The font is also available in SVG and Vector formats.

Guifx v2 Transports - Free Iconic Web Font

Guifx v2 Transports is an icon, which can also be used as an iconic web font. It features glyphs usually used for media player interfaces, such as play, pause, skip, etc. The font format is TTF and the font itself contains 58 glyphs.

Hazard - Free Iconic Web Font

Heydings Icons - Free Iconic Web Font

Heydings Icons is a decently sized collection of 60 glyphs specifically intended for the accessorization and classification of textual cues such as hyperlinks, navigation elements and buttons.

Of course, you are free to use it in any other way you want. Characters have been mapped to the glyphs alphabetically. The Heydings web font should find use in simple web applications as well as on websites.

IcoMoon - Free Iconic Web Font

The web font is not provided per say, but you can use IcoMoon’s web font generating application, which is free to generate your own custom version of the IcoMoon free icons pack or any other icon if you wish to.

The icons can be imported into the application SVG or as fonts itself. Once generated, you can download web font and use it in your web application.

Iconic - Free Iconic Web Font

Iconic is an open source icon web font which consists of 171 icons which are available in various formats such as PNG, SVG, SWC, OFT/TTF/EOT and Omnigraffle stencil formats. The author also provides the tools used to generate the icons in those various formats in the form of JSX and Python scripts.

Iconic was designed with a vision to be easy to deploy, scalable, clear, attractive and open source. Iconic icons can scale from 8px upto any size you want while maintaining clarity. All icons are subtly styled and are unique and attractive, fit for any for your future projects.

Ligature Symbols - Free Iconic Web Font

Ligature Symbols is a free icon web font with ligature features. Ligature Symbols contains over 250 icons in the set, covering a wide variety of use cases and also includes more than 30 common logos like Apple, Android, Windows, etc.

Meteocons - Free Iconic Web Font

Meteocons is a free weather web font, which will suit your new weather-related web project perfectly.

This web font contains 40+ icons available in PSD, CSH,EPS, SVG, Desktop font and Web font. There are various weather-related icons like clouds, sun, moon, thermometer and more.

Meteocons Font is a typeface available in Truetype, OpenType format and a complete @font-face kit to be used freely in your projects. Its use is very simple, once loaded font-face kits in the main CSS is already ready for use.

Modern Pictograms - Free Iconic Web Font

Modern Pictograms is a free iconic web font which contains 89 icons which covert a wide category of objects. The iconic font was originally designed for a WordPress theme, and has since been released for general use to the web community.

The icons look great from the size of 18px but look best from size of 24px and upwards.

Mun - Free Iconic Web Font

Mun is a free font which is moon-themed. It is available in three versions: extrabold, circled (circled) and striped (striped). The download package contains the three different versions as three separate TTF files.

OpenWeb Icons - Free Iconic Web Font

OpenWeb Icons is an extension to Font Awesome web font because the latter had no RSS-icon. OpenWeb Icons contains several additional icons which can be used alongside the original Font Awesome web font.

Peculiar - Free Iconic Web Font

Peculiar, although not really a font, can be used via CSS by assigning classes to span and other HTML elements. It contains a set of general accessibility icons which can be used on websites or web applications.

Pictogramz - Free Iconic Web Font

Pictogramz is a free font which can be used as a web font. It contains more than 60 glyphs of mostly real-life signs. The font is available in TFF format. The use of this font requires a donation, though it can be downloaded for free.

Pictonic - Free Iconic Web Font

Pictonic Free is a free web font which contains 259 free icons. It contains a wide variety of icons which fall in these various categories: Social, Browsers, Programming, Frameworks, Sharing, Operating Systems, Databases and Version Control.

In the web font, you will find icons for various social media service like Google+, Facebook, Twitter and more and the iconic font comes in various formats such as EOF, SVG, WOFF and TTF.

PulsarJS - Free Iconic Web Font

PulsarJS is a free web font which contains 73 icons. It is free for use and comprises the most used icons in mobile development. It’s a small and neat web font, which you can use freely under the SIL Open Font License.

Signify Lite - Free Iconic Web Font

Signify Lite includes 38 beautiful, hand-crafted icons at your disposal for any use. It is a nice set of general purpose icons which can be used personally or commercially, but with attribution to the original website. Icons are available in EOF, SVG, WOFF and TTF formats.

Siruca Pictograms - Free Iconic Web Font

Siruca Pictograms is a free iconic web font with over 80 glyphs. Its glyphs are mostly traffic sign themed icons. Registration is required to download the font, where you can generate a @font-face kit.

Socialico - Free Iconic Web Font

Socialico is a web font which has 74 social media icons, combined within a single weight font. There are icons for nearly every social media services out there such as Twitter, Facebook, Skype and more.

The icons have been specially assigned to a particular key on your keyboard such that the lower caps of the basic Latin alphabet produces an enclosed version of the social media icon while the upper caps of the same produces a non-enclosed one.

StateFace - Free Iconic Web Font

StateFace is a web font which has glyphs for the 50 states in the USA along with that of D.C. It also contain a map of continental US. The state glyphs are simplified versions of the real maps and the web font weights in at only 22KB.

Sym­bol Signs - Free Iconic Web Font

Sym­bol Signs is a font which can be easily be used as a web font. It contains 50 symbols meant for sig­nage & wayfind­ing projects. The font is released under the OTF format, but can be easily converted to other formats as well.

Symbolix - Free Iconic Web Font

Symbolix is a free font which can be used as a web font. It contains 28 glyphs which are mostly warning sign like the hazard sign, no smoking sign, etc. The font comes in the TTF format, which can be converted to other formats to be used as an iconic web font.

Typicons - Free Iconic Web Font

Typicons is a free web font which contains more than 80 icons which can be used for a variety of projects. The icons are available in EOF, SVG, WOFF TTF and EPS formats. The CSS for @font-face inclusion is also provided for simple integration into a web project.

Web Symbols Typeface - Free Iconic Web Font

Web Symbols is a web font which contains the most commonly used graphics by web designers. These include icons of popular social media websites, navigational icons, and more. The icons are available in the EOF, SVG, WOFF and TTF formats.

Zocial CSS Social Buttons – Free Iconic Web Font

Zocial CSS Social Buttons is a set of fully vector buttons, whose icons can be used as @font-face icons. It contains icons for about 83 different services, like Google, Facebook, Dropbox, etc. It works splendidly on any browser supporting @font-face and the CSS3 degrades gracefully in IE8 and below.

The icons are released under various formats such as EOF, SVG, WOFF and TTF.