Web Developer Tools & Resources
SeuratJS is a JavaScript library that extends Raphaël and allows for the creation of vivid animations and pixelated artwork using minimal code. It does this by extacting color data from an image of your choice and rebuilding the original with filled graphical primitives in SVG. Homepage: http://seuratjs.com/ GutHub: https://github.com/gsmith85/seuratjs
RefineSlide is a simple jQuery plugin for displaying responsive, image-based content with animations. CSS transitions are used wherever possible, which currently makes for varied performance across browsers and platforms. It is best to check it out in Safari, and will become much smoother elsewhere as other browsers move towards offloading CSS transitions to the GPU. [...]
Sprite3D wraps HTML elements with the necessary behaviours to easily control their 3D-position using a simple Javascript syntax. To create a Sprite object, you can either supply an existing DOM object or let the library create an empty <div> (you can apply a CSS class to the DOM element after its creation). 3D positionning is [...]
Uptime is a simple remote monitoring utility using Node.js and MongoDB. You can monitor thousands of websites, tweak the frequency of the monitoring and receive instant web alerts on every page when a check goes down. Homepage: http://fzaninotto.github.com/uptime/ GitHub: https://github.com/fzaninotto/uptime
Here is a free set of 43 buttons with three different styles (Beveled, Rectangle and Rounded) and six different colors (Orange, Magenta, Cyan, Red, Black and Green) and using the Entypo webfont pictograms for replacing the images. Homepage: http://www.webstuffshare.com/2012/05/css3-pictogram-button GitHub: http://webstuffshare.com/demo/ButtonPictogram/index.html
dancer.js is a high-level audio API, usable with both Mozilla's Audio Data API and Webkit's Web Audio API, designed to make sweet visualizations. It uses real-time audio frequency data and maps it to any arbitrary visualization and can even leverage beat detection into your visualizations. Homepage: http://jsantell.github.com/dancer.js/ GitHub: https://github.com/jsantell/dancer.js
Handsontable is a minimalistic (60 KB unminified) approach to Excel-like table editor in HTML and jQuery. Homepage: http://warpech.github.com/jquery-handsontable/ GitHub: https://github.com/warpech/jquery-handsontable
QuoJS is a micro, modular, Object-Oriented and concise JavaScript Library that simplifies HTML document traversing, event handling, and Ajax interactions for rapid mobile web development. It allows you to write powerful, flexible and cross-browser code with its elegant, well documented, and micro coherent API. Homepage: http://quojs.tapquo.com/ GitHub: https://github.com/soyjavi/quojs
iOS.js contains a set of features that can improve the way your web app looks and feels. As soon as you import iOS.js, you’ll experience improvements, here are some examples: In Mobile Safari, there are 16 different sizes your page can be loaded into. To reduce this number, iOS.js always maximizes the window to the [...]
Complexify helps you to accurately gauge the quality of a user's password to give them visual feedback, and to enforce a minimum level of security. It aims to give a good measure of password complexity for websites to use both for offering hints to users in the form of strength bars, and for enforcing a [...]
Understanding-Viewport is a set of simple HTML pages with various viewport and media query settings, that will help you better understand the working of the viewport meta tag and its @viewport CSS-based counterpart. Here is a presentation, using these templates, which explains the working of the viewport mechanism, media queries, and more: Homepage: https://github.com/andreasbovens/understanding-viewport
pageguide.js is an interactive visual help guide for elements on a web page. Instead of cluttering your interface with static help message, or explanatory text, pageguide lets your users learn about new features and functions. Homepage: http://tracelytics.github.com/pageguide/ GitHub: https://github.com/tracelytics/pageguide
“What if there was better WordPress code reference. More comprehensive and up-to-date than Codex. More friendly and convenient than raw code and cross-references.” There is! QueryPosts is a far better WordPress code reference than the codex. Homepage: http://queryposts.com/
SelectNav.js is a JavaScript plugin that lets you convert your website navigation into a <select> drop-down menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices. Homepage: http://lukaszfiszer.github.com/selectnav.js/ GitHub: https://github.com/lukaszfiszer/selectnav.js
The easy to use and install Query.PercentageLoader (10kb minified)_is a plugin for displaying a progress widget in a beautiful way in comparison to a typical horizontal progress bar. It makes use of HTML5 canvas for a rich graphical appearance and uses vectors rather than images so that they can be easily used at various sizes. [...]
IE Alert is a handy jQuery plugin that shows a well designed warning message to the visitor who's trying to view your site with an older version of Internet Explorer browser, this warning message will convince your visitors to upgrade their browser to a newer version of Internet Explorer or to an another web browser. [...]
Singool.js is a lightweight framework built on top of Backbone.js that helps you develop single-page web applications. It has a structure similar to popular server-side MVC frameworks, and supports plugins and themes. Homepage: http://fahad19.github.com/singool/ Demo: http://singool-tasks.herokuapp.com/#!/tasks GitHub: https://github.com/fahad19/singool
wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles. Here are some of its features: It’s fast and lightweight (smaller than TinyMCE, Aloha, …) Auto-linking of [...]
tablecloth.js is a jQuery plugin that helps you easily style HTML tables with some simple customizations. It builds off the Twitter Bootstrap and also includes popular jQuery table manipulation plugins like tablesorter. Homepage: http://tableclothjs.com/ Docs: http://tableclothjs.com/ GitHub: https://github.com/bwsewell/tablecloth
Gumby 960 is a new responsive CSS grid framework. Inside of the framework, they’ve packaged up tons of styles and common interface elements (forms, buttons, tabs, and pure CSS dropdowns) to help you quickly put together functional prototypes. You have a choice of either downloading the 12 column version, 16 column version, hybrid 12/16 column [...]
jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the [...]
ddSlick is a free light weight jQuery plugin that allows you to create a custom drop down with images and description. Homepage: http://designwithpc.com/Plugins/ddSlick Demo: http://designwithpc.com/Plugins/ddSlick#demo
Socialite.js provides a very easy way to implement and activate a range of social sharing buttons — any time you wish. On document load, on article hover, on any event. Socialite won’t cause document rendering to hang while waiting for 50kb of social media. Homepage: http://socialitejs.com/ Demo: http://socialitejs.com/demo/hover.html GitHub: http://github.com/dbushell/Socialite/
Responsive Ad Checker lets you check HTML5 banner ads at multiple sizes. Enter the URL of a responsive ad and it will be displayed at a variety of common sizes (both flexible and static). Adjust the size of your browser window to see how the flexible banners respond. Homepage: http://matthewjamestaylor.com/responsive-ad-checker >
jQuery Vector Maps is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML. Homepage: http://jqvmap.com/ GitHub: https://github.com/manifestinteractive/jqvmap
Responsive Tables is a simple JS/CSS combo that will let your tables adapt to small device screens without everything going to wrong. In other words, it’s a CSS/JS solution for tables that allows them to shrink on small devices without sacrificing the data. Homepage: http://www.zurb.com/playground/responsive-tables Demo: http://www.zurb.com/playground/playground/responsive-tables/index.html GitHub: https://github.com/zurb/responsive-tables
Responsive IE6 lets you test your site’s responsiveness in Internet Explorer 6. Responsive web design is here to stay. Unfortunately, older browsers don’t quite understand these media queries or whatnot. With this tool, just put in a URL, and resize. Homepage: http://responsiveie6.com/
dynamo.js is a dead-simple way to generate dynamic bits of HTML and add subtle effects to your content. Cycle through various bits of text to add subtle variations to your work, or to draw attention to portions of your webpage. Homepage: http://jordanscales.com/dynamo/ GitHub: https://github.com/prezjordan/dynamo.js
Responsify lets you quickly and effortlessly generate your own responsive grid framework and customise it (how many columns, the amount of gutter width etc.) as you see fit, all through an easy to use interface. It allows you to customise the grid to suit your content, rather than trying to make the content fit the [...]
GMaps.js allows you to use the potential of Google Maps in a much, much simpler way. You will not need to sift through extensive documentation or plow through large amounts of code. Using GMaps.js is as easy as: Homepage: http://hpneo.github.com/gmaps/ Demo: http://hpneo.github.com/gmaps/examples.html