Web Developer Tools & Resources
Fool.js is a jQuery plugin for implementing April Fool’s jokes on your unsuspecting users. It’s easy to use, and lets you do everything from Rick-Rolling (playing Rick Astley’s “Never Gonna Give You Up” when someone clicks a link expecting something entirely different) your users to making you users’ scrollbars fall over. You can even make [...]
If you use Sublime Text Editor for your JavaScript editing, then Sublime Web Inspector allows you to debug from the same program you edit with. It works on top of WebInspectorProtocol, with all information displayed in console and text files.
Faker.js makes it simple to create massive amounts of fake data in Node.js and the browser. It has an easy-to-use API that allows you to generate things like names, addresses, phone numbers, companies, email addresses, user names, domain names, IP addresses, lorem ipsum, random numbers, and much more.
Sails.js is designed to resemble the MVC architecture from frameworks like Ruby on Rails but for creating enterprise-grade Node.js apps. It has support for more modern, data-oriented web app development, particularly useful for creating realtime things like chat functions.
Pixi.js is a fast, lightweight 2D renderer that works across devices. It lets you take advantage of hardware acceleration without prior knowledge of webGL. There’s documentation available, as well as a few demos you can check out.
Rapidash gives you a standard core for building a client for your RESTful API. It’s easy to install, and there are screencasts that can show you how to use Rapidash. And there are example clients to give you an idea of how to use Rapidash for your own projects.
Intro.js makes it easy to create step-by-step user guides or new feature intros for your websites and projects. It’s fast and small, just a 4KB JavaScript file and a 2KB CSS file. It’s licensed under teh MIT license for personal and commercial use, and works with all modern browsers.
Preboot’s original variables and mixins became the precursor to Bootstrap, but since then it has been further developed to become a comprehensive and flexible collection of LESS utilities. Preboot includes variables for things like color and links, vendor and utility mixins, and a grid system. If Bootstrap is too powerful for your projects, Preboot might [...]
Tern locates information it’s asked for within JavaScript. When combined with an editor plugin, it makes it easier to program JavaScript by doing things like giving you output and function argument hints and more.
Grunt is a JavaScript task runner that automates repetitive tasks for you, meaning you have less manual work to deal with. Things like minification, compilation, unit testing, linting, and more can all be handled by Grunt.
Need to build a large-scale web app? Thorax is an opinionated Backbone and Handlebars framework for doing just that. It’s battle-tested by organizations like Walmart, ASDA, and Metalab, and has extensive documentation to get you started.
jQuery lockfixed lets you stick elements within the viewport when a user scrolls. Position:fixed is toggled on only after scrolling the viewport, replicating the proposed future CSS position:sticky. And on mobile and tablet browsers, it degrades gracefully.
Rendering HTML into canvas is severely limited for security reasons. rasterizeHTML.js circumvents these limitations by loading external images, fonts, and stylesheets and storing them inline via data: URIs or inline style elements, giving you a lot more freedom in what you can do with canvas.
Hhhhold! lets you pull safe-for-work, attributed images from ffffound to use as placeholders in your designs where user-contributed content would be used in the final project. This makes it easier to design around the variables inherent in including user content in a project, giving you a better final result.
Headtrackr allows for real-time headtracking and fact tracking in relation to a user’s computer screen, via their webcam. This then allows you to develop websites or applications that interact with a viewer’s movements.
Song of GitHub creates a “song” of sorts based on a user’s GitHub contributions. It’s a neat, fun way to look at a user’s activity, though of course it holds no real practical value.
Diagnostic CSS can be installed via Rails or Sinatra, and will visually highlight a variety of problems with your HTML files, including inline styles, invalid links, empty elements, elements missing required attributes, and deprecated elements. Once it’s installed, it will be injected into an HTML page automatically.
Am I Responsive? lets you load your site in four different viewports (desktop, laptop, iPad, and iPhone) to see exactly how it looks. You can even interact with the site on each device, and move the devices around. It works with http://localhost/, and you can grab a link to share your site, too.
Letterpress is a minimalist blogging system that uses static files with no dynamic HTML generated from a database, no commenting, no PHP, and no RSS/Atom feeds. The main feature it offers is a great writing experience with Markdown support.
PowerTip is a jQuery tooltip plugin with a flexible design that’s easy to customize. Implementation is straightforward and is easy to customize, has smooth fade-ins and fade-outs, and even gives you a number of different ways you can use those tooltips (including complex content).
Extra Strength Responsive Grids create more pliant responsive grids that are fluid and percentage-based. Alignment is easy, you can nest your grids, and it uses easy-to-remember classes. It’s even SASS-enabled.
Boxen manages all of your dependencies for you, simplifying and automating your dev environment. Each time you run it, it updates to the latest release, is fully configurable, and makes it easy to use different databases and languages. You can even install Minecraft with it!
Seer’s SEO Toolbox is built for marketers rather than programmers. It’s based on spreadsheets rather than complex code, so if you can use the SUM() function, you’re all set. It makes it easy to create mashups, analyze your data, and more.
Bolt is a simple, lightweight, and sophisticated tool for content management. It’s quick and easy to set up and configure, and great to use. Full documentation and support (via forum) is available. Be sure to check out the showcase of sites built on Bolt.
Imageloader.js is a jQuery plugin for preloading images. The code is simple to implement, with minimal customization options outside of the array of image URLs to load.
Anima.js makes it easy to animate a hundred or more objects at a time with CSS and JavaScript. It also gives more control over your animations, and can even create CSS-only animations (though those offer less control and the feature is only experimental at the moment).
Durandal is an SPA framework built on familiar libraries like jQuery, Knockout, and RequireJS, making it easy to dive right into developing. It includes MVC, MVP, MVVM, messaging, navigation, modals, and many more features you’re likely to need, making it possible to build virtually any kind of app you might need. It works with any [...]
Navi.js simplifies the display of dynamic content on your site. Write all of your pages in a single HTML file and keep your site tree uncluttered. It uses the current hash to change content, leaving your visitors’ back button functional.
Event Spy is a Chrome extention that lets you dissect large web apps. It makes it easy for developers to find events and corresponding event handlers for a web app or website. It hooks into application code and registers all events with event handlers, and displays information in the bottom pane with the rest of [...]
Sassaparilla makes starting responsive web projects faster using Sass and Compass. It focuses heavily on better typography with exceptional vertical rhythm, and lets you work in px while compiling in ems, eliminating a lot of math designers often need to do. It supports variables using Sass for things like color.
Typeahead.js is a fast, fully-featured autocomplete library from Twitter. It prefetches data, stores it in localStorage, and then searches it on the client. It can even be configured to prefetch multiple datasets.