AMT Blog

Imagine you’re filling a complex form on site, or typing effervescent and extensive comment. And when you’re almost done with that browser is crashed, or you closed tab mistakenly, or electricity is turned off, or something else break your efforts.

With this Sisyphus.js on site you just reopen page in your modern (with HTML5 support) browser and see all your changes at that forms. It’s lightweight (3.5 KB) jQuery plugin uses Local Storage to prevent your work being lost. And Sisyphus is easy to use and needs you just to select forms to protect. Sisyphus.js is freely available on GitHub with a MIT License.

Check out the demo here…

Like what we post? Share your thoughts on the comments below. If you wish to get regular updates on what we post, do subscribe to our RSS Feed

Adobe's Brackets is an open source code editor for HTML, CSS and JavaScript that's built in HTML, CSS and JavaScript. 

(download)

Click here to download:

brackets-adobe-s-open-source-ide-for-html-css-javascript-in-the-works-JfffdBwdDruGGJaDDdIh.zip (86 KB)

Abobe assures that Brackets would provide a better experience for developers and designers than other IDE’s with the following key parameters…

• Tools shouldn't get in your way. Instead of cluttering up your coding environment with lots of panels and icons, the Quick Edit UI in Brackets puts context-specific code and tools inline.
• Brackets is in sync with your browser. With Live Development, Brackets works directly with your browser to push code edits instantly, set breakpoints, and jump back and forth between your real source code and the browser view.
• Do it yourself. Because Brackets is open source, and built with HTML, CSS and JavaScript, you can help build the best code editor for the web.

As the IDE is in the very early stages of its development, it's not yet ready for general use. It might be missing many basic editor features, and probably has bugs. Adobe invites the open source community to contribute and built the best code editor of the web.

Although Brackets is built in HTML/CSS/JS, it currently runs as a desktop application in a thin native shell, so that it can access your local files. (If you just try to open the index.html file in a browser, it won’t work yet.) The native shell for Brackets lives in a separate repo, adobe/brackets-app, which includes this repo as a submodule. 

Read more…

Like what we post? Share your thoughts on the comments below. If you wish to get regular updates on what we post, do subscribe to our RSS Feed

Dataset is a free JavaScript library, which simplifies client-side data transformation and management. It allows better handling of client side data while considering loading, parsing, sorting, querying & manipulating data from all sorts of sources.

Data access lies at the heart of a great deal of interactive content. Dataset solves common problems with the traversal, manipulation and management of that data

Unlike client-side frameworks that focus on entity modelling, Dataset is designed exclusively for working with matrices/tables of data. This allows a rich set of number crunching capabilities and helps optimise the handling of large numbers of rows

In addition to helping load and parse data, Dataset makes it easy to query and select subsets of data, creating "views" that automatically update when the underlying data changes. By binding to events, it's easy to create interfaces onto realtime or user-manipulated data. Dataset provides some standard computations such as min and max and derivatives such as groupings and moving averages.

Check out the Dataset pages to view some examples which showcase the different stages of a data transformation and management process. The main example shows Cabinet Office Spending and is presented as an interactive tree map to demonstrate selecting and connecting to remote data files as well as grouping data.

If this open source project interests you, here are some really helpful tutorials and complete access is provided to the API documentation and the source code via GitHub.

Read more…

Like what we post? Share your thoughts on the comments below. If you wish to get regular updates on what we post, do subscribe to our RSS Feed

Kalendae is useful, open souce javascript date picker which is framework agnostic. Kalendae provides the following features:

1. Fully portable, no dependencies. No jQuery, no Prototype, no MooTools; just add the script and the stylesheet and you're good to go.
2. Fully and easily skinable. The default theme uses only one image file (a mask for the previous and next buttons), everything else is styled using CSS.
3. Supports all modern browsers and IE8.
4. Support single day, multiple day, or day range selection.
5. Configurable number of months to be displayed at once.
6. Can be displayed on the page as an inline widget, or attached to one or more input fields as a popup control.
7. Can be attached to any page element, not just named elements.
8. Configurable blackouts, defined either as an array of dates or via a callback function
9. Output selected dates in a variety of formats
10. Leverages moment.js for smart and easy date parsing.

(download)

Click here to download:

kalendae-a-nice-javascript-date-picker-DFshnkozxCgryjghJqwA.zip (67 KB)

Read more…

Like what we post? Share your thoughts on the comments below. If you wish to get regular updates on what we post, do subscribe to our RSS Feed.

QUnit is a powerful, easy-to-use, JavaScript test suite. It's used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code (and even capable of testing JavaScript code on the server-side).

QUnit is especially useful for regression testing: Whenever a bug is reported, write a test that asserts the existence of that particular bug. Then fix it and commit both. Every time you work on the code again, run the tests. If the bug comes up again - a regression - you'll spot it immediately and know how to fix it, because you know what code you just changed.

Having good unit test coverage makes safe refactoring easy and cheap. You can run the tests after each small refactoring step and always know what change broke something.

QUnit is similar to other unit testing frameworks like JUnit, but makes use of the features JavaScript provides and helps with testing code in the browser, e.g. with its stop/start facilities for testing asynchronous code.

Read more…

Like what we post? Share your thoughts on the comments below. If you wish to get regular updates on what we post, do subscribe to our RSS Feed

Meteor is an ultra-simple environment for building modern websites faster than ever before.

Meteor provides developers with a modular platform for developing applications in pure JavaScript (though other languages may be used as well.) It is built on one unifying idea: Servers should serve data, not HTML, to clients, and should push updates to clients whenever data changes.

With Meteor, you write apps:

• in pure Javascript
• that send data over the wire, rather than HTML
• using your choice of popular open-source libraries

Read more…

Like what we post? Share your thoughts on the comments below. If you wish to get regular updates on what we post, do subscribe to our RSS Feed

Filtrify is a handy open source plugin for advanced tag filtering, inspired by Chosen multiple select feature and Orman Clark’s Vertical Navigation Menu. This free plugin developed by Luís Almeida, lets you search tags within the tags, filter items by multiple tags from different categories, and get a live feedback on the number of items containing related tags.

How Filtrify Works

Filtrify makes use of the new HTML5 "data" attribute to store the metadata. All you have to do is include a "data" attribute for each item in your list with the respective tags (metadata). If you have more than one category of tags, include them in another "data" attribute. You can add as much categories of tags as you need.

Filtrify will then go through all the data attributes you included in your items and it will create a search menu with as many fields as the different number of categories (data-attributes) you provided. Each field label in the menu fires a "popup" filtering panel and there's where all the magic happens.
The plugin instanciation is very simple, you just have to pass a "containerID" and a "placeHolderID" which is the ID of the element where you want to place the menu.

Read more…

Like what we post? Share your thoughts on the comments below. If you wish to get regular updates on what we post, do subscribe to our RSS Feed

Locache is a useful JavaScript caching framework for client side caching in the browser using localStorage. With a memcache inspired API usage is very easy and familiar. locache has no dependencies and is very small.

Locache gracefully degrades when the browser doesn't support localStorage. Usually this will be IE6 or IE7, you will not get any errors, but caching attempts will be silently dropped and lookups will always appear to be a cache miss.

Setting, getting and removing values

Values can be stored one at a time as shown below, these values will never expire and will only be removed when you (or the browser) removes them.

locache.set("my_key", "my_value");

locache.get("my_key");
// my_value

locache.remove("my_key");

When you store an object, that's what you'll get back. For example, a number:

locache.set("counter", 1);
typeof locache.get("counter");
// number

Storing complex objects isn't a problem too. Just make sure they are JSON serializable.

locache.set('user', {
    'name': "Dougal Matthews",
    'alias': d0ugal
})

var result = locache.get('user');

//{
//    'name': "Dougal Matthews",
//    'alias': d0ugal
//}

You can also perform batch operations.

locache.setMany({
    'name': 'locache',
    'language': 'JavaScript'
});

locache.getMany(['name', 'language']);
// ['locache', 'JavaScript'];

locache.removeMany(['name', 'language']);

Setting values that expire

seconds = 5;
locache.get("expiring_key", "expiring_value", seconds);

// After 5 seconds this will return null.
locache.get("expiring_key");

Incrementing and decrementing? Sure.

locache.incr("counter");
// 1
locache.incr("counter");
// 2
locache.decr("counter");
// 1
locache.decr("counter");
// 0
locache.decr("counter");
// -1

Flushing the cache

Use the following to clear only the locache values stored in localStorage.

locache.flush();

Performing cleanup

Since localStorage doesn't support expiring values, they will still be left around. This may or may not be a problem for you. If you want to make sure they are cleaned up, use the following method on page load, or with a setTimeout loop.

locache.cleanup();

Read more…

Like what we post? Share your thoughts on the comments below. If you wish to get regular updates on what we post, do subscribe to our RSS Feed

String.js is a JavaScript library that brings such extra string functions with a tiny footprint (<2kb gzipped) for Node.js or Browsers.

It is standalone and has a jQuery-like syntax with chaining support.

There are 25+ functions where each of them can find a use in any JavaScript-heavy projects.

String.js can definitely be a handy extra package, as you might have experienced that JavaScript still lacks functions which are regularly required in most scenarios.

Think of "looping a string", "if a variable includes given characters" or "capitalizing letters".

Unless you use a JavaScript framework, these will require having custom functions (JS frameworks lack some of such functions as well which makes sense to keep libraries small).

Read more…

Don't like to miss out any of our posts? Do Subscribe to our Feed

Foresight.js is a cool open source JavaScript library developed by Adam Bradley, which gives webpages the ability to tell if the user's device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server. Additionally, it judges if the user's device currently has a fast, enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage. It modifies context image requests, specifically img src attribute, but the server does the image resizing. Media queries however should be used when dealing with CSS background-images, while foresight.js is used to handle inline img elements (or until current web standards are improved).

This project's overall goal is to tackle these current issues faced by web developers designing for hi-res: Challenges for High-Resolution Images. Foresight.js aims at providing a lightweight, cross-browser and framework independent tool for a high-resolution web. Check out the demos here.

Features

• Request hi-res images according to device pixel ratio
• Detect network connection speed
• Does not make multiple requests for the same image
• Javascript library and framework independent (ie: jQuery not required)
• Cross-browser and cross-platform
• Image dimensions set by percents will scale to the parent element's available width and device pixel ratio
• Fully customizable through global configuration options and individual img attributes
• Default images will load without javascript enabled
• Minifies down to roughly 5K

Read more…

Like what we post? Share your thoughts on the comments below. If you wish to get regular updates on what we post, do subscribe to our RSS Feed