Web Developer Tools & Resources
Deckard is a library for creating slide decks using the Web Animations API. There are no dependencies, except for the Web Animations Polyfill if you want it to work in browsers that don’t yet support the API.
Hatchshow is a typesetting plugin for jQuery that balances measures, auto-fitting type to the column width. It’s great for complex typographic layouts, as each line’s code can be handled differently.
Pakyow is an open-source Ruby framework for the modern web. The front-end and back-end are isolated from one another, offering more UI control to the designer, while logicless views mean there’s nothing new to learn.
Steady.js is a jank-free module for adding logic to onscroll events, without performance regressions in responsive environments. It offers up built-in trackers (including bottom, top, width, and scrollLeft), and even lets you roll your own trackers.
jCalculator is a jQuery plugin for inserting calculator functionality into your site or app. It’s simple to use and easy to install, with no configuration required.
TukTuk is a responsive 12-colum grid framework with plenty of flexibility. It’s suitable for blogs, landing pages, profile pages, and web apps, among other types of sites.
Active Admin is a framework for business-critical Ruby on Rails applications. It includes global navigation, user authentication, filters, index styles, and much more.
HTML Minifier is a simple web app that minifies your HTML code according to options you select. You can opt to remove comments, collapse whitespace, remove optional tags, and more.
Can I Use? is a complete table of up-to-date browser support for various modern font-end web technologies. Search by keyword to quickly find what you’re looking for, select specific browsers to compare, or even download the raw support data.
Concise is a front-end CSS framework that has a number of preprocessors built-in, including Vanilla CSS, SASS, and LESS. It’s mobile-first and includes tons of components like buttons, drop-downs, and more.
Politespace lets you add spaces to numeric entries in your forms, like credit cards, to make them easier to read. You can easily configure it to put spaces at intervals you choose, whether regular or irregular.
Smallworld.js is a utility for generating simple map previews with GeoJSON and HTML5 Canvas. It has no dependencies, and comes with a simple wrapper for use with jQuery and Zepto.
CSS Shrink makes it simple to shrink your CSS files while keeping the markup pretty and well-formatted. It has a couple of options for only removing spaces and comments or for keeping browser-specific markup.
Trumbowyg is a lightweight WYSIWYG editor that’s fast and lightweight while being HTML5 ready. The design and options are fully customizable to meet your needs.
Soma-template is a web template engine that manipulates DOM nodes instead of producing a “template string” that’s injected into the DOM, keeping the workflow much more similar to regular HTML templating. It’s well-documented and the library aims to reduce DOM node destruction as much as possible.
jQuery.vibrate.js lets you trigger vibrations on mobile devices in the pattern and duration you choose. It’s very simple to use, with a number of options for when to trigger vibrations and how long those vibrations should last (there’s even a handy chart so you can check out the durations for yourself).
Touche.js makes it simple to re-map click events to touch events for mobile UIs. It works with or without jQuery, and removes the 300ms delay applied by all touchscreen devices so they respond immediately.
Breach is a new browser built entirely in JavaScript that’s hackable and modular, and entirely free. The entire UI is built from interchangeable HTML, JavaScript, and CSS modules, with Chromium and Node.js under the hood.
Clank is an open source HTML and CSS framework for prototyping native mobile and tablet apps. It uses modern CSS techniques, with Sass and Compass, and it’s component based so you can pick and choose what you need.
Hammer.js makes it simple to add touch gestures to your website, recognizing touch gestures as well as mouse gestures and pointerEvents. It even has support for multiple instances at the same time, so you can create multi-user touch interfaces.
Tips is a tooltip implementation built entirely with CSS. It triggers tooltips on tap or hover, and is simple to configure.
Intense Image Viewer brings “fully full screen” photos to your designs. When an image is clicked, it fills the entire browser viewport, allowing users to pan around the image by moving their mouse.
CSS Colorguard helps you maintain the color set of your projects, and even warns you when you use a color that is too similar to one already found in your stylesheet. And it’s all configurable to meet your needs.
jQuery-doubleTapToGo makes it easy to make drop-down navigation work on touch devices. It’s built as a jQuery UI widget, with a single option for the number of navigation levels.
CoverVid is a simple jQuery extension that lets you use an HTML5 video as a cover-size background image on a website. It’s easy to use and scales to whatever the parent element is.
Wavepot is a JavaScript app for creating music and other audio tracks. There are tons of demos and examples available, and overall it’s very simple to use.
OuiBounce is a small library for creating modal windows that trigger when a user leaves your site. It aims to lower your bounce rate and increase your conversions, while offering a number of customizable options.
Passwordless is a token-based password authentication middleware for Express and Node.js. It’s faster to deploy, with just a single form and text field, with no need for separate registration, login, and lost password pages.
Epoch is a real-time, general purpose charting library for building high-performance visualizations. It’s built for developers and is easy to extend and adapt, and offers unified styling with a CSS querying engine that lets you style SVG and Canvas elements from one stylesheet.
Boba.js is an easily extensible JavaScript library for working with Google Analytics. It works with ga.js and analytics.js, and makes tracking everything child’s play.
Agile CSS3 Engine lets you generate pure CSS3 animations using JavaScript. It’s easy to use and cross platform compatible.