JavaScript Blog Posts

Echo.js – Simple JavaScript Image Lazy Loading Plugin

16 January 2014
899 Views

Echo is a standalone JavaScript lazy-loading image tool. Echo is fast and uses HTML5 data-* attributes. Echo works in IE8+. Echo.js is probably as simple as image lazy loading gets, it’s less than 1KB minified and is library agnostic (no jQuery/Zepto/other). Lazy-loading works by only loading the assets needed when the elements ‘would’ be in view, which it’ll get from the server for you upon request, which is automated by simply changing the image src attribute. This is also an asynchronous process which also benefits us.
Echo.js – Simple JavaScript Image Lazy Loading Plugin

Bootstrap 3.0 Released with Brand New Customizer

10 September 2013
1699 Views

Bootstrap 3.0 is finally released in the wild. It’s a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. Nearly everything has been redesigned and rebuilt to start from your handheld devices and scale up. With four tiers of grid classes—phones, tablets, desktops, and large desktops, you can do some super crazy awesome layouts. The Customizer has been redesigned, is now compiled in the browser instead of Heroku, has better dependency support, and even has built-in error handling. Better yet, they now save your customizations to an anonymous Gist for easy reuse, sharing, and modifications.
Bootstrap 3.0 Released with Brand New Customizer


SlimerJS: A Scriptable Browser for Web Developers

10 September 2013
1858 Views

SlimerJS is a scriptable browser for web developers. It allows you to manipulate a web page with a Javascript script: opening a webpage, clicking on links, modifying the content and etc. It is useful to do functional tests, page automaton, network monitoring, screen capture etc.
SlimerJS: A Scriptable Browser for Web Developers

Paragraph, Word & Character Counting with Countable.js

27 April 2013
1686 Views

Countable.js is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element. Countable does not rely on any libraries and is very small in size.

Countable takes the value from an HTML element and counts paragraphs, words and characters (without and with spaces). Those numbers are then returned in an object, accessible by a single parameter in the callback function. Countable has been tested in Chrome (latest), Safari (latest), Firefox (latest), Opera (latest) and Internet Explorer (7+). It is built to support both newer and older browsers.
Paragraph, Word & Character Counting with Countable.js

Check HTML Source Code Conforms to Coding Standard

06 December 2012
2401 Views

HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own “sniffs”.

HTML_CodeSniffer will provide a list of known and potential violations to the calling script. It also comes with a pop-up auditor interface, accessible via a bookmarklet, letting you browse through messages emitted from one of the defined standards. Where possible, the auditor also points you to the HTML element causing the problem. HTML_CodeSniffer is released under a BSD-style licence.
Check HTML Source Code Conforms to Coding Standard

Format And Manipulate Numbers With Numeral.js

08 November 2012
2563 Views

Numeral.js is a JavaScript library for formatting and manipulating numbers. The library allows you to format numbers as currency, percentages, time, or even plain old numbers with decimal places, thousands, and abbreviations. If numbers come in a formatted string, you can use the library to change their format, so they can be more useful to you. You can also create your own formatting languages and manipulate numbers or clone them.
Format And Manipulate Numbers With Numeral.js

Bringing Database Features into JavaScript Applications

30 August 2012
1878 Views

TaffyDB is The JavaScript Database. How you ever noticed how JavaScript object literals look a lot like records? And that if you wrap a group of them up in an array you have something that looks a lot like a database table? TaffyDB is a libary to bring powerful database funtionality to that concept and rapidly improve the way you work with data inside of JavaScript.

The file size is small with extremely fast queries. It supports database features such as count, update, and insert. It is robust with cross browser support. It is compatible with any DOM library (jQuery, YUI, Dojo, etc).

Bringing Database Features into JavaScript Applications

Create Keyboard Shortcuts & Sequences with Mousetrap

16 July 2012
2472 Views

Mousetrap is a simple library for handling keyboard shortcuts in Javascript. It is around 1.6kb minified and gzipped and 3kb minified, has no external dependencies. The bind method is the main call you will be making. This will bind a specified keyboard command to a callback method.

There is a third argument you can use to specify the type of event to listen for. It can be keypress, keydown or keyup. Any keys separated by a space will be considered a sequence. If you type each key in order the final one in the sequence will trigger the callback. Mousetrap has been tested and should work in Internet Explorer 6+, Safari, Firefox, Chrome.
Create Keyboard Shortcuts & Sequences with Mousetrap

A Powerful Library for Data-Heavy Applications

10 July 2012
1921 Views

Recline.js is a simple but powerful library for building data applications in pure Javascript and HTML. It supplies components and structure to data-heavy applications by providing a set of models (Dataset, Record/Row, Field) and views (Grid, Map, Graph etc).

You can view and edit your data in clean grid interface. You can also bulk update or clean your data using an easy scripting UI. Recline.js is freely redistributable under the terms of the MIT license.

A Powerful Library for Data-Heavy Applications

XDate - A Modern JavaScript Date Library

29 February 2012
2585 Views

XDate is a thin wrapper around JavaScript's native Date object that provides enhanced functionality for parsing, formatting, and manipulating dates. It implements the same methods as the native Date, so it should seem very familiar.

Also, it is non-destructive to the DOM, so it can safely be included in third party libraries without fear of side effects.

XDate - A Modern JavaScript Date Library