Web Developer Tools & Resources
Fitter Happier Text makes it simple to create fully fluid text headings. It replaces each node with an SVG text node and sets the viewBox attribute based on width and height.
Wyrm is some handy starter SASS for your Bourbon and Neat projects. It includes things like buttons, alerts, and typography.
Takana is a live editor for SCSS and CSS, that shows you changes in the browser as you make them. Just install it, along with the JavaScript snippet in your HTML, and you’re all set.
Midnight.js lets you switch headers on the fly. All you have to do is create your nav (or header) as you normally would (as long as it works with position:fixed), and then Midnight.js helps you change that header when necessary for different sections.
Hello.js is an OAuth 2 authentication (and OAuth1 with an oauth proxy) client-side JavaScript SDK that standardizes paths and responses to common API’s, including Facebook Graph and Google Data Services. It’s well documented and modular, so new services are being added all the time.
scrollReveal.js offers a simple way to create declarative on-scroll reveal animations. It makes it easy control how elements fade in when they enter the viewport.
Paths.js is a JavaScript library for generating SVG paths that can then be used along with a template engine like Mustache or Handlebars for displaying those SVG shapes in the browser. It offers three APIs, of increasing abstraction.
Flexible.gs is a responsive flexible grid system that has breakpoints for a variety of devices, including tablets and smartphones in both landscape and portrait modes. It’s easy to use and compatible with a variety of mobile and desktop browsers (including IE7+).
Gradient Inspector is an extension that adds the ability to inspect the gradient of elements to Chrome’s Developer Tools. You can even toggle each gradient individually.
Animsition is a jQuery plugin that makes it easy to add CSS animated page transitions. It offers 18 different animations, including various fades, rotations, flips, and zooms.
CommonMark is a strict syntax for Markdown that eliminates some of the ambiguity present in the original version of Markdown. It proposes a standard, unambiguous syntax specification, as well as a suite of testing tools.
jQuery FocusPoint offers up more intelligent cropping options for flexible images in your responsive designs. It lets you set a focal point around which your images will be cropped.
Bragi is a browser tool for JavaScript logging, designed for Chrome (but at least somewhat compatible with other browsers). It includes colors, custom log levels, and server reporting functionality.
This Color CSS Gradient Background Generator makes it easy to create complex backgrounds gradients using CSS. Forget about simple two color gradients, and instead create gradients with up to four different layers!
EnjoyHint makes it easy to create interactive hints and tips, with a fast setup and simple configuration. It includes auto-focus highlighting and timeout settings, among other features.
Caesar is a CSS tool that makes it simple to create easing animations. Choose from height, width, opacity, or direction (or combine effects).
jQuery.fontFlex is a lightweight jQuery plugin that gives you fonts that dynamically change size based on browser width. It’s meant to be used with responsive or adaptive CSS layouts.
Papa Parse is an in-browser CSV parser that lets you parse JSON to CSV and vice versa. It offers header row support, lets you stream local and remote files, and lets you skip commented lines, among other features.
The Fibonacci Flexbox Composer is an easy-to-use WYSIWYG tool for creating Flexbox layouts. Just use the intuitive tools to split up the layout boxes and then export the HTML and CSS.
UILang is a UI-focused programming language specifically for web designers. It makes it easy to build interfaces with things like pop overs, galleries, tabs, overlays, and more.
Bumpkit is a still-in-progress DAW-inspired library for the Web Audio API. It lets you create mixers, sampler instruments, and more.
Jekyll Now makes it easier to set up a Jekyll blog by eliminating a lot of the front end setup. It eliminates the need to do anything in the command line, and eliminates the need to install runtime dependencies and more.
Orbit is an experiment with CSS preprocessors that creates an orbit effect for DOM elements. You can tweak and customize it to make it behave the way you want.
Chartist.js makes it simple to create highly customizable responsive charts. It’s completely built and customizable with SASS, uses SVG, and is DPI independent.