반응형

25 New Script Libraries and Plugins on GitHub

 

http://mashable.com/2013/06/09/github-script-libraries/?utm_campaign=Feed%3A+Mashable+%28Mashable%29&utm_cid=Mash-Product-RSS-Pheedo-All-Partial&utm_medium=feed&utm_source=feedburner

 

1. Unveil.js

Unveil.js is a lightweight version of LazyLoad, with support for serving high-resolution images to devices with Retina display. The LazyLoad plugin has some neat options, such as custom effects, but if you don't use any of those you can reduce the file size considerably, leaving just the essential code. This is exactly what Unveil.js is.

2 Chardin.js

Chardin.js (named after the French painter Jean-Baptiste-Siméon Chardin) lets you add simple overlay instructions on existing elements, on any of your apps, using JavaScript. It was inspired by the recent Gmail new composer tour, and is a simple solution that works well and looks incredible.

3. Superhero.js

Superhero.js isn't strictly a JavaScript library itself, but rather, a library of articles on how to create, test and maintain a large JavaScript code base. This is a continuously updated collection of the best articles, videos and presentations on the topic, which helps explain the syntax of JavaScript, how to organize projects, how to test your code and what's on the horizon.

4. Snap.js

Snap.jsis a library for creating beautiful mobile shelfs in JavaScript, which appear when clicking a button or dragging the entire view. It uses CSS3-powered animations with IE fallbacks, and features flick support, event hooks, drag support and an event-based API, so it's simple to hook into existing interfaces.

5. Least.js

Least.js creates beautiful, random and responsive HTML5 and CSS3 image galleries using LazyLoad. Installation is simple and straightforward; just download the script and insert the appropriate code before the </head> and after the <body> tags.

6. Verlet.js

Verlet.js is a simple Verlet physics engine written in JavaScript, with particles, distance constraints and angular constraints, all supported. It's based off an iterative technique called Verlet Integration, which simplifies force and motion calculations. With it, you can easily model intricate objects and dynamic behaviors.

7. Bespoke.js

Bespoke.js is a DIY micro-presentation framework that makes it simple to create animated deck-style slideshows. It's less than 1kb minified and gzipped, with no dependencies, and uses keyboard and touch events to add classes to your slides, while you provide the CSS transitions. There are five basic themes, and both production and development versions are available to download.

8. Lazy.js

Lazy.js is a utility library for JavaScript, similar to Underscore and Lo-Dash, but it uses "lazy evaluation," which can translate to superior performance in many cases, especially when dealing with large arrays and "chaining" multiple methods. With no external dependencies, you can get started straight away.

9. Chart.js

Chart.js is an object-oriented graphing system for designers and developers that uses JavaScript and HTML5 Canvas to create six different types of charts. Each chart can be animated and fully customized, with support on Retina displays and all modern browsers, and with polyfills to provide support for IE7/8. It's dependency free, lightweight (only 4.5kb when minified and gzipped) and offers a wealth of customization options.

10 . Pixi.js

Pixl.js is a super fast HTML5 2D rendering engine that uses webGL with canvas fallback, to provide a fast, lightweight library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. It features a super easy-to-use API, asset loaders, full mouse and multi-touch interaction, support for texture atlases and much more.

11 . SocialFeed.js

With SocialFeed.js, you can create a feed with your latest interactions on different social media, designed to be both modular and plugable. By default, no social site is added; each has be explicitly added, and is implemented as its own module. It's extremely customizable with an API, which exposes several functions and events.

12 . Intro.js

Intro.js provides a better way to create a new feature introduction and step-by-step user guide for your website and project. It's simple to set up: Just include the JavaScript and CSS files and "add data-step" and "data-intro" to your code. It's lightweight (only 2.5kb gzipped) and includes keyboard and mouse navigation, with cross-browser compatibility on all modern browsers, from IE8 and up.

13. Datamock.js

Datamock.js lets you easily add fake data to your mockups, with straightforward usage and a handy demo to see it work in action. Use data attributes to bind mocked data; it includes other value types, such as emails and names. With a bookmarklet task included in the build script, you can quickly generate a page with test sample data.

14. Imageloader.js

Imageloader.js is a jQuery plugin for pre-loading images, with simple implementation. However, it has minimal customization options outside the array of image URLs to load. The demo shows off its functionality.

15. SimplePagination.js

SimplePagination.js is a simple jQuery pagination plugin that includes three CSS themes and features Bootstrap support. It has options for configuring the page links, next and previous text, one-click events, style attributes and more. There is also an API for selecting pages, and support for Bootstrap was recently added.

16. Sco.js

A collection of jQuery plugins for the web, inspired by the Twitter Bootstrap components, Sco.js plugins can replace the Bootstrap equivalents. Several plugins are unique, and in cases where Sco.js replaces Bootstrap plugins, the underlying markup has been simplified and the reliance on IDs reduced.

17. StreamTable.js

StreamTable.js streams data for tables in the background, and updates and renders them using templating frameworks like Mustache.js and HandleBars.js. It provides fast rendering of the pages or tables, without the "loading data" delays, and with fast client-side filtering. It can also manage various JSON data formats.

18. fpsmeter.js

Fpsmeter.js is a simple JavaScript library to display the frames-per-second of an animation. It can measure the number of milliseconds between frames and the number of milliseconds it takes to render one frame. It supports theming, so it can be customized to suit new and existing interfaces, and can cope with multiple instances on a page.

19. Behave.js

Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in. It supports all modern browsers, with partial support for IE6/7. It has no dependencies and allows for custom code and behavior fencing, multi-line indentation and un-indentation.

20. Chartkick.js

Chartkick.js helps you create beautiful Javascript charts with minimal code. It supports Google Charts and Highcharts, and works with most browsers (including IE6). It works with Ruby, using the "chartkick" gem. Use it to create line charts, pie charts, column charts and multiple series.

21. Gif.js

Gif.js is a JavaScript GIF encoder that runs in your browser. It uses typed arrays and web workers to render each frame in the background. It works in browsers supporting Web Workers, File API and Type Arrays by generating the GIF images in the background, using Web Workers.

22. ColtJS

ColtJS is a simple framework that allows for easy deployment of a JavaScript Application using asynchronous module definition. Its only dependency is RequireJS, and it builds off simple principles of a centralized router, loading modules only when requested to produce an efficient, easy-to-manage application structure. You can use the ColtJS boilerplate for a quick start and view the documentation on the ColtJS website.

23. Anima.js

Anima.js makes it easy to animate over a hundred objects at a time, and each item has its mass and viscosity to emulate reallife objects. It helps improve upon some of the limitations of CSS animations, such as calculating percents for keyframes, giving you greater control over the flow of animations, along with the ability to use delays and durations normally.

24. Navi.js

Navi makes it easy to dynamically display content on your sites. Instead of cluttering up your site tree with extra files, you can easily write all your HTML code for multiple pages in one file. It uses the current hash to change content, leaving your visitor's back button functional, with built-in support for Ajax, Google Analytics, breadcrumbs, page titles, along with easy HTML and JavaScript markup.

25. Fartscroll.js

Would any recent GitHub script roundup be complete without Fartscroll.js? Created by The Onion, it can install on any webpage to produce gassy noises as you scroll up and down the browser window. Try the Google Chrome extension for a more immersive experience.

반응형

+ Recent posts