README.md

Looking for something else? Take a look at the awesome collection of other awesome lists.

• Guides
  • Bento: a collection of guides for web development.
  • Hack Design: An easy to follow design course for people who do amazing things.
  • Designer School: A group of passionate professionals teaching web development
  • Web Style Guide - 3rd Edition covers all the elements from CSS and typography to HTML and the structure of prose.
  • Talks To Help You Become A Better Front-End Engineer In 2013
  • Web Development Teaching Materials: This site hosts a variety of CC-licensed web development curriculum which was designed to be taught, but it may be useful to students as well.
  • Learn HTML5, CSS3, and Responsive WebSite Design in One Go
  • Codecademy: Learn to code interactively, for free.
  • Codeschool teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts.
  • TheExpressiveWeb: This site by Adobe is a resource and showcase of some of the newest, and most expressive features being added to the web today.
  • Treehouse: Learn HTML, CSS, iPhone apps and more.
  • General Assembly Dash: Learn HTML, CSS, and Javascript through fun projects you do in your browser.
  </li>
• Architecture
• Workflow
  • Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.
  • Grunt is a task-based command line build tool for JavaScript projects.
  • Gulp is a build system that makes use of node's streams.
  • Mod is a task-based workflow tooling for web, it help developers quickly build robust and high-performance web applications.
  • Brunch is an assembler for HTML5 applications. It‘s agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology.
  • FIS: A front-end integrated solution which included automation tool, development framework, development environment
  • Roots A light, super fast, and intuitive build system meant for rapid advanced front end development.
  • Sparky.js is a client-side application scaffold which helps those who want to have organized structure in their app, but don't want to subscribe to a particular client-side MVC framework.
  • Mimosa is a batteries included modern web development toolkit. Bower, RequireJS, Transpilers, Pre-Processors, Micro-Templating, Linting, Optimization, Serving. To start.
  • Automaton: Task automation tool built in JavaScript.
  • Cartero: A modular client side asset manager.
  • Front-end Process - Flat Builds and Automation
  • CSSCSS: A CSS redundancy analyzer that analyzes redundancy.
  • Helium: JavaScript tool to scan your site and show unused CSS.
  • JSLint for detecting errors or problems by static analysis of JavaScript programs.
  • JSHint for more flexible static analysis of JavaScript programs.
  • JSLint Error Explanations for explanations of the warnings given by JSLint and JSHint.
  • ImageOptim-CLI: Make lossless optimisation of images part of your automated build process.
  • jpegoptim: Utility to optimize/compress JPEG files.
  • Pngcrush is an optimizer for PNG (Portable Network Graphics) files.
  • Glue is a simple command line tool to generate CSS sprites.
  • Wraith is a screenshot comparison tool.
  • Penthouse: Critical path CSS generator.
  • Browser-sync: is a tool to sync all input, scrolling, and clicking across all the devices in your testing workflow.
  • Video: JavaScript Development Workflow of 2013 by Paul Irish + Slides
  </ul> </li>
  • Podcasts
  • Weekly & Daily Resources
  • Programming & Markup Languages
    • CSS
    • JavaScript
    • HTML
    • Higher Level Languages
      • Dart: Typed language compiled to JavaScript. By Google.
      • Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
        • Bourbon: A simple and lightweight mixin library for Sass.
        </ul> </li>
        • Less extends CSS with dynamic behavior such as variables, mixins, operations and functions.
        • Roole is a language that compiles to CSS.
        • Stylus: Expressive, dynamic, robust CSS
        • TypeScript is a typed superset of JavaScript that compiles to plain JavaScript (by Microsoft)
        • CoffeeScript is a little language that compiles into JavaScript.
        </ul> </li> </ul> </li>
        • Frameworks
          • JavaScript
            • Choosing a framework
            • Angular
            • jQuery
            • dojo
            • Backbone
            • Meteor: An open-source platform for building top-quality web apps in a fraction of the time.
            • Zepto.js: A minimalist JavaScript library for modern browsers with a largely jQuery-compatible API.
              • Github
              • Zepto Builder Generate a custom version of Zepto that just includes the modules you need
              </ul> </li>
              • Minified.js: Minified.js is a client-side JavaScript library, comparable to jQuery and MooTools in scope. Its features include DOM manipulation, animation, events, cookies and HTTP requests.
              • React by 非死book
              • Qooxdoo is a universal JavaScript framework for building rich, interactive application, native-like apps for mobile devices, light-weight single-page oriented web applications or even applications to run outside the browser.
              • jQWidgets is jQuery based framework and set of widgets for building web-based applications that work on PC, Touch and Mobile devices
              • Flight is an event-driven web framework, from 推ter
              • Singool.js Lightweight JavaScript framework for developing single-page web applications
              • Knockout: Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern
              • rAppid.js: a declarative (XAML) Rich Internet Application JavaScript MVC Framework
              • Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.
              • Ember.js: A framework for creating ambitious web applications.
              • Maria: The MVC framework for JavaScript applications. The real MVC. The Smalltalk MVC. The Gang of Four MVC.
              • Terrific Composer is a Frontend Development Framework specifically designed for building deluxe frontends based on the Terrific concept
              • Rivets.js: Lightweight and powerful data binding + templating solution for building modern web applications.
              • Synapse: Data Binding For The Rest Of Us
              • Cappuccino: An open source framework that makes it easy to build desktop-caliber applications that run in a web browser.
              • A Comprehensive Collection Of JavaScript Application Frameworks
              • JavaScript Data Binding Frameworks
              • Underscore.js
              </ul> </li>
              • CSS
                • A collection of best frameworks
                • Bootstrap
                • IceCream: Simple and light responsive grid system.
                • Responsive Grid System
                • Responsive Grid System (2)
                • Golden Grid System
                • Compass: An open-source CSS Authoring Framework.
                • Pondasee: Front-end starter kit combined with the power of SCSS & Compass.
                • Centurion: A responsive web framework that scales with your device.
                • Foundation by Zurb: The most advanced responsive front-end framework in the world. + Foundation 3 Documentation + Foundation 4 Documentation + Stylus based port
                • Gumby
                • ProfoundGrid
                • GroundworkCSS 2: A responsive HTML5, CSS & Javascript framework created and maintained by Gary Hepting
                • skelJS
                • Ink: Ink is a set of tools for quick development of web interfaces.
                • neat: A lightweight semantic grid framework for Sass and Bourbon.
                • Kube
                • rwdgrid
                • Simple Grid
                • One% CSS Grid
                • Workless
                • inuit.css - a powerful, scalable, Sass-based, BEM, OOCSS framework.
                • Kraken is a lightweight, mobile-first boilerplate for front-end web developers.
                • Axis - clean Stylus-based foundation to build your styles upon
                • Jeet next gen responsive grid
                • Susy - Responsive grids for Compass
                • Pure - Minimal, flat, responsive CSS modules.
                • Topcoat is a CSS library evolved from the Adobe design language developed for Brackets, Edge Reflow, and feedback from the PhoneGap app developer community.
                • Cascade Framework - a powerful, scalable and responsive high performance OOCSS framework that supports both old and new browsers
                • Cascade Framework Light - Cascade Framework stripped down to the bare essentials, for when a minimal footprint is more important than bells and whistles
                • Semantic UI empowers designers and developers by creating a language for sharing UI.
                </ul> </li> </ul> </li>
                • Cross Browser
                • Cross Device
                  • Responsive
                  • E-Mail
                  • Mobile
                    • Frameworks
                      • jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
                      • jQTouch is a Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.
                      • Junior
                      </ul> </li>
                      • Emulators
                      • Scrolling
                        • jSwipeKinetic is a jQuery plugin that enables you to add kinetic scrolling on your touch optimized projects. jSwipeKinetic is build on top of jGestures (jgestues.codeplex.com).
                        • jQuery.pep.js: A lightweight plugin for kinetic-drag on mobile/desktop.
                        • Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser.
                        • Zynga Scroller
                        • pull-to-refresh.js
                        • Overthrow
                        • Antiscroll
                        • iscroll
                        • JScrollPane is a jQuery plugin by Kelvin Luck which converts a browser's default scrollbars (on elements with a relevant overflow property) into an HTML structure.
                        </ul> </li>
                        • Gestures
                        • DOM Objects Manipulation
                        • Tap Acceleration
                        • Layout
                          • Screensizes
                          • Snap.js A JavaScript Library for creating beautiful mobile shelfs in JavaScript (非死book and Path style side menus)
                          • Flickable.js allows you to make any element touchable; useful for flicking between sections, or sliding elements around the page.
                          • PageSlide is a jQuery plugin which slides a webpage over to reveal an additional interaction pane.
                          • Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic.
                          • Swiper: Mobile touch slider with hardware accelerated transitions.
                          • jQuery Mobile Pagination Plugin
                          • SwipeSlide: A Zepto Plugin for iOS like swipe navigation.
                          • stackable.js is an invaluable jQuery plugin that stacks your tables for small screens. It’s a huge advantage in terms of usability on mobile devices.
                          </ul> </li>
                          • Reacting to Device Sensors
                          • iOS
                          </ul> </li>
                          • Printers
                          </ul> </li>
                          • Patterns & Snippets
                          • Typography
                          • Services (Free & Commercial)
                          • Animation
                            • Velocity.js: Re-implementation of jQuery's $.animate() that adds 20x the speed while also drastically improving the UI animation workflow.
                            • Animo.js: A powerful little tool for managing CSS animations
                            • Stylie
                            • animate.less, is a bunch of cool, fun, and cross-browser animations converted into LESS for you to use in your Bootstrap projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
                            • Canvas Advanced Animation Toolkit is an scene graph director-based animation framework for javascript based in the concept of a timeline.
                            • tween.js: Super simple, fast and easy to use tweening engine which incorporates optimised Robert Penner's equations.
                            • Janis is a lightweight JavaScript framework that provides simple animations via CSS transitions for modern browsers on the web as well as mobile devices.
                            • Rekapi: A keyframe animation library for JavaScript
                            • CanvasScript3 is a JavaScript library for the new HTML5 Canvas with an interface similar to ActionScript3. This library enables Sprite Groups, Layers, Mouse Events, Keyboard Events, Bitmap Effects, Tween Animations etc.
                            • Shifty is a tweening engine built in JavaScript. It is designed to fit any number of tweening needs.
                            • emile.js is a no-frills stand-alone CSS animation JavaScript framework.
                            • Firmin: a JavaScript animation library using CSS transforms and transitions.
                            • Keanu is a micro-lib for animation on Canvas/JS.
                            • jsAnim is a powerful, yet easy to use library for adding impressive animations to websites, without sacrificing standards or accessibility. Weighing in at just under 25 kilobytes, jsAnim packs a lot of punch for such a little application.
                            • GreenSock Animation Platform is a suite of tools for scripted animation.
                            • scripty2 is an open source JavaScript framework for advanced HTML-based user interfaces. Or simply put, scripty2 helps you build a more delicious web.
                            • Animator.js: JavaScript animation library.
                            • Processing.js: is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.
                            • jQuery Transit: Super-smooth CSS3 transformations and transitions for jQuery.
                            • Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant.
                            • Collie is a JavaScript library that helps to create highly optimized animations and games using HTML 5.
                            • Year Of Moo: Angular.js Animations
                            • animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
                            • Approach
                            • Magic is a CSS3 framework with many animations, it's simple to use and many animations are cross-browser compatible.
                            </ul> </li>
                            • Widgets
                              • Kits
                                • AlloyUI
                                • Kendo UI
                                • jQuery UI Bootstrap: Bootstrap theme for jQuery UI
                                • jQuery Bootstrap: Integration of Bootstrap and jQuery UI
                                • Cascade Framework: high performance widgets allow you to define the UI status directly in the DOM
                                • Zebra: JavaScript library that follows easy OOP concept, provides HTML5 Canvas based Rich UI and includes Java to JavaScript converter tool
                                </ul> </li>
                                • File Upload
                                • Sitemap
                                • Table Of Contents
                                • Modals
                                • Notifications
                                • Gallery Sliders
                                • Pagination
                                • Selects
                                • Progress Bars
                                • Trees
                                • Navigation
                                • Tooltips
                                • Misc
                                </ul> </li>
                                • Visualization
                                • Validation & Forms
                                  • Mention.js Lightweight wrapper for adding @user mention functionality to 推ter Bootstraps Typeahead plugin
                                  • ALAJAX
                                  • Parsley.js: Validate your forms, frontend, without writing a single line of javascript!
                                  • mailcheck.js: A jQuery plugin that suggests a right domain when your users misspell it in an email address.
                                  • one-validation is a collection of regular expressions for general validation purposes.
                                  • nextVal is an easy-to-use, flexible and robust form validation plugin for jQuery.
                                  • Fields.js creates collections of fields. Each field is constantly evaluated for validity, and is accessible through the collection.
                                  • IV.js was created to provide a intutive way to provide validation filters that are useful in processing user input.
                                  • Ladda: A UI concept which merges loading indicators into the action that invoked them.
                                  • jQuery Super Labels
                                  • jQuery Validation Engine: jQuery validation engine is a JavaScript plugin aimed at the validation of form fields in the browser
                                  </ul> </li>
                                  • Transitions
                                  • Numbers
                                  • Time and Dates
                                    • moment.js: A 5.5kb javascript date library for parsing, validating, manipulating, and formatting dates.
                                    • XDate
                                    • Pikaday
                                    </ul> </li>
                                    • Search
                                      • Fullproof
                                      • lunr.js is a simple full text search engine for your client side applications.
                                      </ul> </li>
                                      • Testing
                                      • Template Engines
                                      • Routing And URLs
                                      • Rich Text Editors
                                      • Code Viewers & Editors
                                      • Refactoring
                                      • Performance
                                        • General Information
                                        • Memory
                                        • Tools
                                        • DOM Manipulation
                                        • Animation
                                        • Hardware Acceleration
                                        • Browser Internals
                                        • Images
                                        • HTTP Transport
                                        </ul> </li>
                                        • Modularity & Loaders
                                        • Package Management
                                          • bower
                                          • volo
                                          • parcel is easy package management using a file server and path conventions, with built in support for Amazon S3. It is designed to encode package metadata, including name, version and OS within a path. The conventions allow this metadata to be queried, without the need for a database.
                                          • jam.js
                                          • component
                                          </ul> </li>
                                          • Image Manipulation
                                          • Icons
                                          • HTTP
                                          • WebSocket
                                            • Specification
                                            • socket.io aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms.
                                            • engine.io is the implementation of transport-based cross-browser/cross-device bi-directional communication layer for Socket.IO.
                                            • SockJS is a browser JavaScript library that provides a WebSocket-like object. SockJS gives you a coherent, cross-browser, JavaScript API which creates a low latency, full duplex, cross-domain communication channel between the browser and the web server.
                                            </ul> </li>
                                            • Error Handling & Debugging
                                            • Documentation
                                              • DevDocs is an all-in-one API documentation reader with a fast, organized, and consistent interface.
                                              • dexy is a free-form literate documentation tool for writing any kind of technical document incorporating code.
                                              • docco is a quick-and-dirty, hundred-line-long, literate-programming-style documentation generator.
                                              • styledocco generates documentation and style guide documents from your stylesheets.
                                              • Ronn builds manuals. It converts simple, human readable textfiles to roff for terminal display, and also to HTML for the web.
                                              • dox is a JavaScript documentation generator written with node. Dox no longer generates an opinionated structure or style for your docs, it simply gives you a JSON representation, allowing you to use markdown and JSDoc-style tags.
                                              • YUIDoc is a Node.js application that generates API documentation from comments in source, using a syntax similar to tools like Javadoc and Doxygen.
                                              • coddoc is a jsdoc parsing library. Coddoc is different in that it is easily extensible by allowing users to add tag and code parsers through the use of coddoc.addTagHandler and coddoc.addCodeHandler. coddoc also parses source code to be used in APIs.
                                              • sphinx a tool that makes it easy to create intelligent and beautiful documentation
                                              • Using JSDoc
                                              • Beautiful docs is a documentation viewer based on markdown files.
                                              • Daux.io is an documentation generator that uses a simple folder structure and Markdown files to create custom documentation on the fly.
                                              </ul> </li>
                                              • Windows 8 Style
                                              • Video & Audio
                                                • SublimeVideo: Modular Video Player Framework.
                                                • Video.js: The open source HTML5 video player.
                                                • FlowPlayer: The video player for the web.
                                                • longtailVideo: dual-mode HTML5 & Flash player.
                                                • howler.js
                                                • Stratus 2 soundcloud player
                                                • jPlayer is the completely free and open source (MIT) media library written in JavaScript.
                                                • MediaElement.js: HTML5 audio and video players in pure HTML and CSS.
                                                • audio.js is a drop-in javascript library that allows HTML5’s "audio" tag to be used anywhere.
                                                </ul> </li>
                                                • Library Collections
                                                  • pullpush: A curated collection of jQuery/JavaScript plugins with additional stats from GitHub.
                                                  • Unheap: A tidy repository of jQuery plugins
                                                  • jster
                                                  • MicroJS helps you discover the most compact-but-powerful microframeworks.
                                                  • JSPkg: reference library and package manager
                                                  • jquer.in is a curated collection of jQuery plugins.
                                                  • JSDB.io: great source of the best JavaScript frameworks, plugins, and tools.
                                                  </ul> </li>
                                                  • Other Front End Collections
                                                  • Chat
                                                  • Prototyping
                                                  • JSON
                                                    • JSON Query Language is a query and processing language specifically designed for the popular JSON data model.
                                                    • Oboe.js makes it really easy to start using json from a response before the ajax request completes; or even if it never completes.
                                                    • JSONLint
                                                    </ul> </li>
                                                    • Presentations
                                                    • Scrolling
                                                    • Keyboard
                                                    • Tables & DataGrids
                                                    • Security
                                                    • Layout
                                                      • Shapeshift is a plugin which will dynamically arrange a collection of elements into a column grid system similar to Pinterest.
                                                      • CollagePlus: This plugin for jQuery will arrange your images to fit exactly within a container.
                                                      • Masonry JavaScript Cascading grid layout library
                                                      • MixItUp jQuery plugin providing animated filtering and sorting.
                                                      </ul> </li>
                                                      • Jobs & Hiring
                                                      • Misc
                                                      </ul>

                                                      原文来自 → github.com