Web Developer Tools & Resources
SVG Morpheus is a JavaScript library that lets you create SVG icons that morph into one another. It’s easy to use and works with Material Design’s Delightful Details transitions.
Charted is an open source chart creation tool that creates beautiful charts automatically. All you have to do is paste in the URL of a .csv or Google Sheets file to get started.
Four Shadows allows you to include time-aware shadows on your icons or other elements. Never again have a 5 o’clock shadow at 9 0’clock in the morning.
Contents makes it simple to automatically create a table of contents based on the headings within a document. The resulting TOC is generated as an ordered list, appended to the #contents container.
The CSS Specificity Graph Generator makes it simple to create specificity graphs for your stylesheets, for better insight into how well structured they are. It uses d3, css-parser, and specificity to create interactive visualizations.
Lining.js makes it easy to apply CSS to any individual lines within your text, rather than just the first line. It does so by creating an ::nth-line selector, where you can define your own lines to control.
JuliusJS is a speech recognition library for the web. It includes real-time transcription, and you can even write your own grammar for it.
Purplecoat.js lets you create labeled overlays that can be triggered with a click.
Guardian is a jQuery plugin for all-purpose form validation. It’s easy to extend and very flexible to meet your needs.
Labelauty is a lightweight jQuery plugin that makes it simple to create more beautiful checkboxes and radio buttons. It also allows for custom labels for the status of checked/unchecked inputs.
Multiple Select is a straightforward jQuery plugin for selecting multiple elements with checkboxes. It supports showing multiple elements in a single row, grouping of elements, and more.
Gulp Fiction is an easy to use online app for visual editing of your gulp files. It lets you shorten the build setup, and you can save your completed files to Dropbox or copy them.
Vivus is a JavaScript class for animating SVGs with no dependencies necessary. It offers asynchronous animations, delayed animations, and line-by-line animations.
Stairtower is a database server for schema-free, JSON documents. It’s built on React, uses a restful API, and is entirely written in PHP.
Stitches is an easy to use HTML5 sprite sheet generator. Just drag and drop images onto the app and it will generate both the sprite sheet and necessary CSS.
Furtive is a forward-thinking CSS micro-framework that comes in at just 2.5kB. It’s mobile-first, with nearly all the dimensions done in rem, and is a great starting point for your project.
Angular-kickstart makes it faster to develop with AngularJS. It combines AngularJS, GulpJS, and Bower, while also keeping your code reusable and with a modular structure.
Apper is a restful, real-time application framework for single-page apps. It’s very easy to set up, with plug-and-play capabilities.
FixedContent.js is a mobile friendly jQuery plugin for content that persists while scrolling, including sidebars and nav. It includes settings for the top nav, as well as width and position on load and refresh.
Material UI is a CSS framework and set of React components that incorporate Google’s Material Design. Components include buttons, drop downs, menus, switches, toolbars, and more.
Permit.js is a jQuery plugin that makes it easier to build multi-state, interactive prototypes. It’s easy to implement, and it’s persistent across pages and sections.
Rekapi is a JavaScript library for making canvas and DOM animations, as well as CSS keyframe animations. It’s perfect for working with complex animation timelines.
Hamlet lets you create simple, powerful reactive templates. It uses CoffeeScript, has a small footprint, and is a great fit for smaller projects, as well as large ones.
Melchior.js is module loader with a Chainable Module Definition API that lets you get rid of long lines of AMD declaring and duplicate module names. It’s easy to get started, easy to configure, and just 3KB when minified.
Brackets is a hackable open source text editor specifically for web designers from Adobe. It includes focused digital tools, preprocessor support, and includes tools for pulling clean, minimal CSS straight from Photoshop.
jQuery Autotab is a plugin that gives you auto tabbing and filtering of text fields within a form. It greatly improves form usability and helps reduce the amount of bad data submitted.
Screenful.js is a simple wrapper for cross-browser usage of the Fullscreen API. It smooths out all the implementation differences between browsers while letting you make any element or page full screen.
Swing is a Tinder-like swipeable cards interface that lets you swipe left or right for yes or no inputs. Cards snap back into place if they aren’t dragged far enough, and cards can be thrown back into the stack.
Walkway.js is an easy way to animate your simple SVG elements. It includes built-in easing functions, and also has options for selector and duration.
Motherplate is a bare bones HTML5, CSS3, and SCSS responsive boilerplate. It doesn’t include any visual styling or components, just bare bones CSS to get started with.