Web Developer Tools & Resources
Durandal is a single page app framework built on jQuery, Knockout, and RequireJS. It includes eventing, modals, message boxes, app bundling and optimization, the ability to make your own templatable and bindable widgets, and more.
Atom is a hackable text editor built by the folks at GitHub. You can configure it to your heart’s content, or use it productively right out of the box.
ImageLightbox.js is an incredibly simple, responsive, touch-friendly lightbox script. It’s extensible and configurable, minimalistic (and only 4kb if minified), and uses CSS transform and transition for moving images.
Gitter, currently in beta, offers up free chat rooms for all of your public repositories. You can see who’s read your messages, it offers full emoji support, and stores infinite chat history in the cloud so you can always access it.
Cute Grids is a grid system that offers a clean start for your responsive design. It’s mobile first, includes five media queries, and is well documented.
Custom Elements is a gallery of web components (a collection of standards working their way through the W3C) for use in modern web applications. You can browse the existing components or submit your own.
localForage improves your web app’s offline experience via asynchronous storage. It has fallbacks that make it compatible with every browser, though asynchronous storage is used for virtually all modern desktop and mobile browsers.
The LivingStyleGuide Gem is an easy way to create front-end style guides using Sass and Compass. Just add Markdown to your Sass to create your guides.
Zen Grids is a responsive grid system built with Sass. It greatly simplifies creating your layout by removing most of the complicated markup you’d need to create responsive grid-based designs with pure CSS and HTML.
Susy is a responsive grid system for Compass. It lets you quick add new media-query breakpoints to your layouts, using their math or your own (with helpers).
Decss is a mostly CSS-driven presentation framework that uses CSS3 for transitions. It offer responsive layouts, flexbox for content layout, and even supports presenter notes.
PageRes is a PhantomJS-based script that lets you quickly and easily grab tons of screenshots in different resolutions, perfect for testing your responsive designs. It’s fast, too; it can grab 100 screenshots from 10 different websites in just over a minute!
Wagtail is a new open source Django CMS from Torchbox, that’s elegant and easy to use. It’s lightweight, agile, and fast.
Keyframer is an incredibly easy to use CSS3 animation creation tool. Just click the timeline to add a keyframe, then click the circle button to add your animation’s CSS, or the X button to delete the current keyframe, and that’s all there is to it!
Monstra is a fast, extensible, modern CMS that’s flexible and easy to use. It has Twitter Bootstrap built-in for the front-end framework, is multi-user friendly, and it’s database-free.
The Lazy Load Plugin for jQuery delays the loading of images in long pages until they’re actually in the visitor’s viewport. The page will load faster and it can even reduce server load if your visitor doesn’t scroll through the entire page.
InstantClick is a JavaScript library that can make your website dramatically faster, effectively making your navigation instant. It preloads links your visitors are likely to click on, and can be configured to start loading on a variety of actions, including “mousedown”.
The Vafpress Framework makes it easy to create a custom administration panel for your WordPress theme. It has full documentation to make it easy to configure, and tons of powerful features including tons of available fields, client-side data validation, and more.
WOW.js makes it easy to call CSS animations as your user scrolls down the page. It does not require jQuery, is only 3kb, and is easy to use.
Progre(c)ss makes it easy to create pure CSS progress bars. Just include the stylesheet, add the class to the appropriate element, and then add a data attribute.
Overthrow is a tiny, no-frills targeted overflow: auto polyfill for use in responsive designs. It’s framework-independent and uses lightweight, decoupled JavaScript.
This library of Sublime CSS Completions for Sublime Text is much more complete than those that come standard with Sublime Text. Currently only properties are autocompleted, though at some point in the future valid values may autocomplete as well.
Normalize.css is an HTML5-ready alternative to browser resets. It will make all elements render more precisely and uniformly across browsers, targeting only the styles that need normalizing by detecting browser defaults.
You Might Not Need jQuery can show you exactly whether you need jQuery to enable certain features based on the oldest version of IE that you need to support. While using jQuery is great if it makes your life easier, requiring it as a dependency in your libraries might not be necessary.
This barebones Hackathon Starter Template is a quick way to get up and running on your next Bootstrap project. It includes a bit of text, some basic HTML, and that’s about it.
Nightwatch makes it easy to write straightforward JavaScript end-to-end tests in Node.js using a simple but powerful syntax. It uses the Selenium WebDriver API to perform commands and assertions on DOM elements, managing the Selenium server automatically.
This Music Player Python module provides core audio player functionality while leaving you to write the high-level functionality (like playlist logic) yourself. It has a very simple interface, support for the most common audio file formats, and supports any sample rate, among other features.
This Sublime Text Cheat Sheet will let you quickly find the keyboard shortcuts you need to become more efficient with Sublime. It’s broken down by category, to make it much quicker to find the shortcut you need.