Actively maintained list of useful web developments tools, libraries, assets and any other open-source goodies.
Shamelessly aggregated from the following resources:
- A Baseline For Frontend Developers
- Brunch plugin wiki
- Tooling & The Webapp Development Stack: Notes from a talk by Paul Irish
- Smashing Magazine: Best web-development magazine
- Hipster Dev Stack: A curated directory of artisanal development tools that we used to like before they went mainstream.
- NetTutsPlus: Web development tutorials, from beginner to advanced
- Sublime Text Workflow That Beats Coda and Espresso
"★" recommended and currently used by the maintainer
- ★ HTML5 Spec for Web Developers: This specification is intended for authors of documents and scripts that use the features defined in this specification.
- Hypertext Transfer Protocol -- HTTP/1.1: you should read through it at least once
- ReFiddle: Regular Expression (regex) tester... better than the rest
- When can I use...: Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
- HTML5 & CSS3 Readiness: We don't have to wait for entire specs to be completed, we can start using some hawtness now.
- HTML5 Please: Use the new and shiny responsibly.
- HTML5 Polyfills
- HTTPArchive Performance stats and trends for the worlds most popular sites
Chrome Developer Tools for chrome
Firebug for firefox
DragonFly for opera
Fixing These jQuery how to debugger to debug jquery
- gRaphael SVG charts
- Sencha Touch Charts - paid
- HighCharts - paid
- Fusion Charts
- MilkCharts for MooTools weirdos
- Google Chart Tools API based
- ★ Docco: Quick and dirty, literate-programming documenation generator
- Groc: is an attempt to further enhance the idea [of Docco]
Total process build tools, Assemblers, et al
- ★ Yeoman: a robust and opinionated client-side stack, comprised of tools and frameworks that can help developers quickly build beautiful web applications.
- ★ Brunch: A lightweight approach to building HTML5 applications with an emphasis on elegance and simplicity.
- ★ Middleman: a static site generator using all the shortcuts and tools in modern web development.
- Lumbar: Lumbar is a js-build tool that takes a general codebase and list of platforms to generate modular platform specific applications. (from Walmart Labs)
- LiveReload: CSS edits and image changes apply live. CoffeeScript, SASS, LESS and others just work. (OSX app only)
- CodeKit: CodeKit helps you build websites faster and better. (OSX app only)
- Modernizr: detects HTML5 and CSS3 features in the user’s browser.
- lodash: same api, but faster, and more trendy
- JSON3: JSON parser/stringifier
- ZombieJS: Insanely fast, headless full-stack testing using Node.js
- UglifyJS: js minifier, beautifier
- Closure Compiler
- r.js (RequireJS optimizer)
Modules and Script loaders
- RequireJS The awesomest AMD script loader
- LabJS script loader
- YepNope conditional loader for polyfills
- Bower package manager for the web
- Volo Create front end projects from templates, add dependencies, and automate the resulting projects
- Ender the no-library library
- ★ JSbooks: crazy collection of free JS books
- jQuery: Write less; do more.
- Zepto: jQuery alternative for mobile apps (super light-weight)
- jQAPI: Alternative jQuery Documentation
- 10 Things I Learned From the jQuery Source
- jQuery Fundamentals Massively awesome online course/ebook
Useful jQuery Plugins
- Fresco beautiful, responsive lightbox
- jQuery File Upload best uploader on the planet
- Jasmine JSTD adapter for using Jasmine
- Chai: assertions lib
- should: foo.should.be.a('string')
- expect: expect(foo).to.be.a('string')
- assert: assert.typeof(foo, 'string')
- should.js 'should' style assertions
- expect.js 'expect' style assertions
Mocks, stubs, spies
- IcedCoffeeScript: drop-in replacement interpreter for CoffeeScript with async control flow semantics.
- LiveScript: aims for increased expressiveness and code beauty, while adding features to assist in functional style programming, imperative and object oriented programming, and has an optional class system with inheritance, calls to super, and more.
RivetsJS declarative data-binding; framework agnostic
- Template Chooser
- Handlebars as featured in Ember
- DustJS fast, streaming
- HoganJS super lightweight, mustache-compatible
- Jade Templates as featured in Express/Node
- Google Closure Templates
- Underscore Templates
- PerfectionKills JS Quiz
- Rebecca Murphey's Challenge
- NetTuts Quiz: jQuery Basics
- CSS3.info: All you ever needed to know about CSS3
- CSS3 Please: The Cross-Browser CSS3 Rule Generator
- Semantic Grid System: Page layout for tomorrow (SCSS, LESS, Stylus)
- Recess Twitter's CSS hinter
- Sass: Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
- LESS: The dynamic stylsheet language
- Stylus: Expressive, dynamic, robust CSS
Sublime Text 2
Install and use Sublime Text 2 Package Control for these and other plugins.
- ★ ZenCoding: editor plugin for high-speed HTML coding and editing
- ★ Markdown Preview: A simple plugin to help you preview your markdown files; works with LiveReload.
- ★ LiveReload: A web browser page reloading plugin.
- ★ Sidebar Enhancements: Enhancements to Sublime Text sidebar. Files and folders.
- ★ SublimeREPL:run an interpreter inside ST2
- ★ Git: Plugin for some git integration
- ★ SublimeLinter: Inline lint highlighting
- ★ JsFormat: javascipt formatting plugin (prettifier)
- Sublime Prefixr: run CSS through the Prefixr API
- Search StackOverflow: Simple search on Stack Overflow utility
Themes (TextMate or SublimeText)
- ★ FontAwesome: The iconic font designed for use with Twitter Bootstrap
- IconSweets: a huge FREE icon set containing over a 1,000+ icon
- Glyphicons: designed primarily for toolbars and navigation bars in OS X Lion, the application for iPhone, iPhone 4, iPad and other Apple devices. (CC license)
- Glyphish: Free set published under a Creative Commons Attribution license
- FamFamFam: oldie, but goodie
- LED Icon Set: .png icons make a professionally looking small icon set and are totally free in commercial and open source apps / websites.
- Fugue Icons: 3,480 icons are included in PNG format (16x16 pixels) + bonus. (CC license)
- Beautiful Web Type: A showcase of the best typefaces from the Google web fonts directory.
- FontBomb: To blow up other websites, drag and drop this link fontBomb to your favorites bar
Web Font Services
- typekit: the easiest way to use real web fonts, by Adobe (paid, but free/limited version available)
- Google web fonts: free, easy to use, lots of fonts (500+)
- Piecon: Pie charts in your favicon!
- CodeAcademy: the easiest way to learn to code. It's interactive, fun, and you can do it with your friends.
- Stanford OpenClassroom: Full courses. Short Videos. Free for everyone.