Smashing magazine has posted a really useful long list of plugins and utilities to make web development easy and faster. You can view the full list here:
http://coding.smashingmagazine.com/2012/09/23/useful-javascript-libraries-jquery-plugins-web-developers/
I thought I'd highlight some of the most interesting items I saw on the list:
Sisyphus.js
This script allows Gmail-like auto-saving of drafts. It stores form data to the HTML5 local storage of the user’s browser and restores it when the user reloads or reopens the page or opens the page in a new tab. The data is cleared from local storage when the user submits or resets the form.
http://coding.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
Avgrund: Better Modal Boxes
A jQuery plugin for displaying a depth illusion between popup and page. The original script by Hakim El Hattab uses CSS transitions and transformations, and the plugin gracefully degrades in those that do not support transitions and transforms. MIT licensed.
http://labs.voronianski.com/jquery.avgrund.js/
Validate.js
A lightweight JavaScript form validation library. You can validate form fields using over a dozen rules and set custom messages; the library doesn’t have any dependencies and you can define your own validation callbacks for custom rules. Works in all major browsers (even IE6!).
http://rickharrison.github.com/validate.js/
cryptico
An encryption system utilizing RSA and AES for JavaScript.
https://github.com/wwwtyro/cryptico
FTColumnflow
Developed by the development team of Financial Times, this library is essentially a polyfill that fixes the inadequacies of CSS column layouts. With the library, you can provide configurable column widths, gutters and margins, define elements spanning columns, keep-with-next to avoid headings at the bottom of a column, group columns into pages and standardize line height to align text baseline to a grid.
https://github.com/ftlabs/ftcolumnflow
SlabText.js
The script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.
http://www.frequency-decoder.com/demo/slabText/
Smart Time Ago
This little jQuery library provides you with an intelligent way of updating relative timestamps in your documents. Smart Time Ago checks and updates every 60 seconds the relative time, within a scope which you specify at the start. It checks the newest time in your scope and tunes the checking time interval to a proper value. The tool can be used as a jQuery plugin, or – if using node – can be installed from npm.
http://pragmaticly.github.com/smart-time-ago/
Piecon
Piecon is a tiny JavaScript library for dynamically generating progress pie charts in your favicons. It has been tested to work in Chrome 15+, Firefox 9+ and Opera 11+.
http://lipka.github.com/piecon/
geolib
A small library to provide some basic geo functions like distance calculation, conversion of decimal coordinates to sexagesimal and vice versa.
https://github.com/manuelbieh/geolib
zip.js
A JavaScript library to zip and unzip files. zip.js provides a low-level API for writing and reading large zip files (up to 4GB with File Writer API). Works with Chrome, Firefox, Safari 6 and (unfortunately) Internet Explorer 10+. With Safari 5 and IE9, you must disable Web Workers and use a Typed Array polyfill.
http://gildas-lormeau.github.com/zip.js/
Leaflet: Open-Source Interactive Maps With JavaScript
A library for creating tile-based interactive maps for desktop and mobile browsers. An easy-to-use API is available, and the tool emphasizes usability, performance, flexibility and excellent browser support. The library offers a variety of map layers, including tiles, markers, pop-ups, image overlays and GeoJSON. It supports panning on both mobile and desktop browsers, double-tap zoom on mobile browsers (plus multi-touch zoom on iOS) and more. On iOS, hardware acceleration is enabled, and Leaflet has a modular structure that lets you reduce the size of the library to make it even faster. The project is open source and available for further development and forking on GitHub.
http://leaflet.cloudmade.com/
SVGeezy: a JavaScript plugin for SVG fallbacks
A JavaScript library which detects SVG images on your website and automatically “looks” for a standard image fallback for those older, less capable browsers. Created by Ben Howdle and Jack Smith.
http://twostepmedia.co.uk/svgeezy/
A Magnifying Glass With CSS3 And jQuery
This technique achieves an aesthetically pleasing visual effect. The CSS3 box-shadow and border-radius properties are used to create the magnifying glass itself, while jQuery is used to detect the cursor coordinates and mouse movements and present the larger image. And when your cursor moves off the image, the magnifying glass elegantly fades away. The included tutorial makes it very easy to learn and understand how to achieve this effect. The technique includes both a small and a large image in the markup, so optimizing the technique to load a larger image on demand might be a good idea.
http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
Data Visualization JavaScript Libraries
A growing, curated collection of data visualization JavaScript libraries that make it easier to create meaningful and beautiful data visualizations. If you haven’t one a useful data visualization library in the list above, you’ll definitely find the right one in this overview.
http://selection.datavisualization.ch/
Trunk8
Trunk8 is a text truncation jQuery plugin that cuts off just enough text from a large block of text to prevent it from spilling over. While conventional truncation just limits the character length, this library is able to measure the content area for spill-over and chooses the text that best fits into a given space.
https://github.com/rviscomi/trunk8
Handsontables: Excel-Like Tables For The Web
This jQuery library allows you to use auto-expanding and auto-complete as well as add new rows and columns. It also includes a legend, scrolling (so as your table grows, it won’t take up your entire page and become unwieldy), context menus, conditional formatting and other features. You can even set it to track changes made to the table. And, all the data you enter in Handsontable can be copied and pasted to Excel, Google Spreadsheet, or LibreOffice.
http://warpech.github.com/jquery-handsontable/
Csonv.js
Paul Engel has released a tiny library to fetch relational CSV data client-side (JSON). When using CSV, one file represents one entity; the librarycan also nest relational data within the resulting objects as if you are joining SQL tables.
http://archan937.github.com/csonv.js/
Resumable.js
The library is designed to introduce fault-tolerance into the upload of large files through HTTP. It thus provides multiple, simultaneous and resumable uploads through the HTML5 File API. That means, losing the networks connection doesn’t require a completely new upload. Users can also manage their uploads without loss of data. However, due to the reliance on the HTML5 File API, support is currently limited to Firefox 4+ and Chrome 11+.
https://github.com/23/resumable.js
History.js
The library gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. You can modify the URL directly, without needing to use hashes.
https://github.com/balupton/History.js/
Touchy.js
A JavaScript library which handles touch events without any dependencies. It’s an easy way to assign hand functionality for touchscreen devices to your website. You might want to check out Hammer.js as well.
https://github.com/jairajs89/Touchy.js
CSSrefresh
A useful small script file that immediately implements changes on your browser made to your CSS-files, by surveying the CSS files in your Web page. Saved CSS-files are executed right away.
http://cssrefresh.frebsite.nl/
Filer.js
Eric Bidelman released a wrapper library for the HTML5 Filesystem API. Filer.js reuses familiar UNIX commands and makes the HTML5 API more approachable for developers that have done file I/O in other languages. Repetitive operations (renaming, moving, duplicating) are easier to manage. You might want to check out DownloadBuilder.js, a library that supports concatenation of local files and uses session storage to cache Ajax/JSONP requests.
https://github.com/ebidel/filer.js
http://coding.smashingmagazine.com/2012/09/23/useful-javascript-libraries-jquery-plugins-web-developers/
I thought I'd highlight some of the most interesting items I saw on the list:
Sisyphus.js
This script allows Gmail-like auto-saving of drafts. It stores form data to the HTML5 local storage of the user’s browser and restores it when the user reloads or reopens the page or opens the page in a new tab. The data is cleared from local storage when the user submits or resets the form.
http://coding.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
Avgrund: Better Modal Boxes
A jQuery plugin for displaying a depth illusion between popup and page. The original script by Hakim El Hattab uses CSS transitions and transformations, and the plugin gracefully degrades in those that do not support transitions and transforms. MIT licensed.
http://labs.voronianski.com/jquery.avgrund.js/
Validate.js
A lightweight JavaScript form validation library. You can validate form fields using over a dozen rules and set custom messages; the library doesn’t have any dependencies and you can define your own validation callbacks for custom rules. Works in all major browsers (even IE6!).
http://rickharrison.github.com/validate.js/
cryptico
An encryption system utilizing RSA and AES for JavaScript.
https://github.com/wwwtyro/cryptico
FTColumnflow
Developed by the development team of Financial Times, this library is essentially a polyfill that fixes the inadequacies of CSS column layouts. With the library, you can provide configurable column widths, gutters and margins, define elements spanning columns, keep-with-next to avoid headings at the bottom of a column, group columns into pages and standardize line height to align text baseline to a grid.
https://github.com/ftlabs/ftcolumnflow
SlabText.js
The script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.
http://www.frequency-decoder.com/demo/slabText/
Smart Time Ago
This little jQuery library provides you with an intelligent way of updating relative timestamps in your documents. Smart Time Ago checks and updates every 60 seconds the relative time, within a scope which you specify at the start. It checks the newest time in your scope and tunes the checking time interval to a proper value. The tool can be used as a jQuery plugin, or – if using node – can be installed from npm.
http://pragmaticly.github.com/smart-time-ago/
Piecon
Piecon is a tiny JavaScript library for dynamically generating progress pie charts in your favicons. It has been tested to work in Chrome 15+, Firefox 9+ and Opera 11+.
http://lipka.github.com/piecon/
geolib
A small library to provide some basic geo functions like distance calculation, conversion of decimal coordinates to sexagesimal and vice versa.
https://github.com/manuelbieh/geolib
zip.js
A JavaScript library to zip and unzip files. zip.js provides a low-level API for writing and reading large zip files (up to 4GB with File Writer API). Works with Chrome, Firefox, Safari 6 and (unfortunately) Internet Explorer 10+. With Safari 5 and IE9, you must disable Web Workers and use a Typed Array polyfill.
http://gildas-lormeau.github.com/zip.js/
Leaflet: Open-Source Interactive Maps With JavaScript
A library for creating tile-based interactive maps for desktop and mobile browsers. An easy-to-use API is available, and the tool emphasizes usability, performance, flexibility and excellent browser support. The library offers a variety of map layers, including tiles, markers, pop-ups, image overlays and GeoJSON. It supports panning on both mobile and desktop browsers, double-tap zoom on mobile browsers (plus multi-touch zoom on iOS) and more. On iOS, hardware acceleration is enabled, and Leaflet has a modular structure that lets you reduce the size of the library to make it even faster. The project is open source and available for further development and forking on GitHub.
http://leaflet.cloudmade.com/
SVGeezy: a JavaScript plugin for SVG fallbacks
A JavaScript library which detects SVG images on your website and automatically “looks” for a standard image fallback for those older, less capable browsers. Created by Ben Howdle and Jack Smith.
http://twostepmedia.co.uk/svgeezy/
A Magnifying Glass With CSS3 And jQuery
This technique achieves an aesthetically pleasing visual effect. The CSS3 box-shadow and border-radius properties are used to create the magnifying glass itself, while jQuery is used to detect the cursor coordinates and mouse movements and present the larger image. And when your cursor moves off the image, the magnifying glass elegantly fades away. The included tutorial makes it very easy to learn and understand how to achieve this effect. The technique includes both a small and a large image in the markup, so optimizing the technique to load a larger image on demand might be a good idea.
http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
Data Visualization JavaScript Libraries
A growing, curated collection of data visualization JavaScript libraries that make it easier to create meaningful and beautiful data visualizations. If you haven’t one a useful data visualization library in the list above, you’ll definitely find the right one in this overview.
http://selection.datavisualization.ch/
Trunk8
Trunk8 is a text truncation jQuery plugin that cuts off just enough text from a large block of text to prevent it from spilling over. While conventional truncation just limits the character length, this library is able to measure the content area for spill-over and chooses the text that best fits into a given space.
https://github.com/rviscomi/trunk8
Handsontables: Excel-Like Tables For The Web
This jQuery library allows you to use auto-expanding and auto-complete as well as add new rows and columns. It also includes a legend, scrolling (so as your table grows, it won’t take up your entire page and become unwieldy), context menus, conditional formatting and other features. You can even set it to track changes made to the table. And, all the data you enter in Handsontable can be copied and pasted to Excel, Google Spreadsheet, or LibreOffice.
http://warpech.github.com/jquery-handsontable/
Csonv.js
Paul Engel has released a tiny library to fetch relational CSV data client-side (JSON). When using CSV, one file represents one entity; the librarycan also nest relational data within the resulting objects as if you are joining SQL tables.
http://archan937.github.com/csonv.js/
Resumable.js
The library is designed to introduce fault-tolerance into the upload of large files through HTTP. It thus provides multiple, simultaneous and resumable uploads through the HTML5 File API. That means, losing the networks connection doesn’t require a completely new upload. Users can also manage their uploads without loss of data. However, due to the reliance on the HTML5 File API, support is currently limited to Firefox 4+ and Chrome 11+.
https://github.com/23/resumable.js
History.js
The library gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. You can modify the URL directly, without needing to use hashes.
https://github.com/balupton/History.js/
Touchy.js
A JavaScript library which handles touch events without any dependencies. It’s an easy way to assign hand functionality for touchscreen devices to your website. You might want to check out Hammer.js as well.
https://github.com/jairajs89/Touchy.js
CSSrefresh
A useful small script file that immediately implements changes on your browser made to your CSS-files, by surveying the CSS files in your Web page. Saved CSS-files are executed right away.
http://cssrefresh.frebsite.nl/
Filer.js
Eric Bidelman released a wrapper library for the HTML5 Filesystem API. Filer.js reuses familiar UNIX commands and makes the HTML5 API more approachable for developers that have done file I/O in other languages. Repetitive operations (renaming, moving, duplicating) are easier to manage. You might want to check out DownloadBuilder.js, a library that supports concatenation of local files and uses session storage to cache Ajax/JSONP requests.
https://github.com/ebidel/filer.js
No comments:
Post a Comment