今天在邮件中收到一个由 Dimi Navrotskyy在Github上发布的前端收藏夹，里面的资源太丰富了。我在想很多同学肯定喜欢。本想直接发个链接与大家分享，但时间久了，找起来辛苦。特意copy了一份发在w3cplus上。而且我在后面还增加了一份我自己整理的学习资源链接，在这些链接我初步分了一下类，附在后面。自认为还是蛮有吸引力的教程。希望对大家有所帮助。
后面这部分资源内容，需要特别感谢林小志（林大大）的辛苦付出整理出链接地址,同时也要非常感谢＠CJ(大神)通过神技帮我把相关链接的标题抓取出来。在此跟两位大大道声“谢谢！”！
我们专门向大家推出一个前端资源收藏夹——《前端收藏夹》，将不断为大家推出有关于前端相面的资源。如果您有相关的资源，可以在评论中给我们留下地址，我们将会按类录入。如果您想知道更多的前端资源，请猛击：
- Guides
-
Architecture
- BEM
- Atomic Design
- Polymer Project
- Aura is an event-driven architecture for developing scalable applications using reusable widgets.
- Terrific.js provides you a Scalable Javascript Architecture, that helps you to modularize your jQuery/Zepto Code in a very intuitive and natural way
- Patterns For Large-Scale JavaScript Application Architecture
- Video: Nicholas Zakas: Scalable JavaScript Application Architecture
- Book: Learning JavaScript Design Patterns
- Book: Eloquent JavaScript
- Book: Single page apps in depth
- jQuery Application Architecture Chart
- How To Manage Large jQuery Apps
- Scalable and Modular Architecture for CSS
- Comparison between different Observer Pattern implementations
-
Workflow
- Video: Javascript Development Workflow of 2013 by Paul Irish + Slides
- 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.
- Web development is getting complex. Let's go shopping.
- GruntStart: A Grunt-enabled head-start with the H5BP, jQuery, Modernizr, and Respond. The building blocks to quickly get started with Grunt to create an optimized website.
- A beginner’s guide to Grunt
- Grunt - Synchronised Testing Between Browsers/Devices
- 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
- Roots
- 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.
- Brunch is an assembler for HTML5 applications. It‘s agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology.
- Automaton: Task automation tool built in JavaScript.
- Cartero
- Mod is a task-based workflow tooling for web, it help developers quickly build robust and high-performance web applications.
Frameworks
JavaScript
- Choosing a framework
-
Angular
- Github
-
Learning
- AngularJS-Learning: huge list of Angular learning resources
- AngularJS Screencasts
- Building Huuuuuge Apps with AngularJS
- What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
- AngularJS from Basics to Dependency Injection
- AngularJS To Do List App
- AngularJS vs Ember
- The Hitchhiker’s Guide to the Directive
- Frontend Workflows with Grunt and Angular JS
-
Integration
- angular-requirejs-seed: this is a fork of Angular Seed but with changes needed for requireJS support.
- Writing Reusable AngularJS Components with Bower
- Native AngularJS directives for Twitter's Bootstrap.
- Automating AngularJS With Yeoman, Grunt & Bower
- Optimizing Angular Templates with Grunt on Heroku
- Building Offline Applications With AngularJS and PouchDB
- jQuery
- dojo
- Backbone
- Meteor
- React by Facebook
- Flight is an event-driven web framework, from Twitter
- 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
- 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
- A Comprehensive Collection Of Javascript Application Frameworks
- JavaScript Data Binding Frameworks
CSS
- A collection of best frameworks
-
Twitter Bootstrap
- Home Page
- Github
- Download
- Bootstrap Hero List: The big badass list of bootstrap resources
-
Widgets
- Color and Date Picker
- WYSIHTML5 RTE for Bootstrap
- Bootstrap Image Gallery
- jQuery UI Bootstrap
- Pines Notify: JavaScript notifications for Bootstrap or jQuery UI.
- fuelUX: Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls.
- A date range picker for Twitter Bootstrap
- Bootbox.js: alert, confirm and flexible dialogs for Twitter's Bootstrap framework
- Time Picker
- Date/Time Picker
- ReCaptcha
- Bootstrap Modal: Extends Bootstrap's native modals to provide additional functionality.
- SelectBoxIt
- File Upload
- BootPag: BootPag - dynamic pagination jQuery plugin for twitter bootstrap
- Bootstrap Arrows: A simple jQuery plugin and add-on to the popular Twitter Bootstrap framework to include the use of arrows at any angle in your UI designs.
- X-editable: In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
- Pagination
- Slider
- Application Wizard
-
Themes
- Bootswatch: Theme catalog.
- Jumpstart UI: Another catalog for paid themes
- Darkstrap: A dark theme.
- jQuery Mobile Boostrap: A jQuery Mobile theme based on Twitter Bootstrap
- Wrapbootstrap
- Wordpress
- CSS3 Microsoft Modern Buttons
- BootMetro: Metro style web framework
- Cosmo: Windows 8 inspired theme
- Bootstrap Generator: Simply alter the options below and click "Generate" to get your compiled Bootstrap CSS file.
- Inspiritas
- Google+
- Flatstrap
- Pinstrap
-
Misc
- Boilerstrap: A blank slate for the modern web. Just add creativity.
- Bootstrap GUI PSD: a toolkit designed to kickstart webdesign of webapps and sites.
- Font Awesome: The iconic font designed for use with Twitter Bootstrap
- Typo3 Extension
- Bootstrap CDN Free CDN for Twitter Bootstrap
- Bootstrap Tour Quick and easy way to build your product tours with Twitter Bootstrap Popovers.
- Bootsnipp: Design elements and code snippets for Bootstrap HTML/CSS/JS framework
- Form Builder
- PaintStrap: Generate beautiful Twitter Bootstrap themes using the Adobe kuler / COLOURlovers color scheme
- TODC: A Google-styled theme for Twitter Bootstrap.
- Layoutit!
- Responsive Grid System
- Responsive Grid System (2)
- Golden Grid System
- Compass
- Pondasee
- Centurion
- Foundation 3
- ProfoundGrid
- Groundwork
- skelJS
- Ink
- neat
- 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.
Cross Browser
Cross Device
-
Responsive
- Video: Responsive Design Workflow by Stephen Hay + Slides
- Responsive Patterns
- Responsinator
- How to make a Responsive Newspaper-like layout
- The State Of Responsive Web Design
- Facing The Challenge: Building A Responsive Web Application
- Tables
- Events
-
Images
- Fluid Images
- How to Use Responsive Images to Make Your Site Shine on Any Platform
- Adaptive Images
- Why We Need Responsive Images
- Riloadr: A cross-browser framework-independent responsive images loader.
- jQuery Picture
- Picturefill
-
Text
- FitText: A jQuery plugin for inflating web type
- Out Of Words!: The responsive typography framework behind Words App
- Responsive Font Sizing: Making your font size respond to your screen size, easy & maintainable.
- Responsive Measure
-
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
- 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
-
Gestures
- jGestures jQuery plugin enables you to add gesture events such as ‘pinch’, ‘rotate’, ‘swipe’, ‘tap’ and ‘orientationchange’ just like native jQuery events.
- hammer.js is a focused, standalone JavaScript library, only for multi-touch gestures.
- Touchy: is a highly configurable jQuery plugin. It exposes event data (velocity, etc.) for longpress, drag, pinch, rotate and swipe.
- TouchSwipe
- TipTap
- jQuery.event.swipe
- toe.js is a tiny library based on jQuery to enable sophisticated gestures on touch devices.
- Jester
- JS Touch Layer
- Touch Events and Abstractions
-
DOM Objects Manipulation
- jQuery.event.move
- WKTouch: A JavaScript plugin for touch-capable devices, enabling multi-touch drag, scale and rotate on HTML elements.
-
Tap Acceleration
- Energize
- Tappable is a simple, standalone library to invoke the tap event for touch-friendly web browsers.
- Fastclick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers.
- Lightning Touch
- Creating Fast Buttons for Mobile Web Applications
-
Layout
- 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.
-
Reacting to Device Sensors
- lenticular.js is a jQuery plugin for creating image animations that response to tilting or mouse events.
- This End Up: Using Device Orientation
-
iOS
- Safari Image Delivery Best Practices
- Safari Graphics, Media, and Visual Effects Coding How-To's
- Safari CSS Visual Effects Guide
- Safari Web Content Guide
- Getting Started with iOS Web Apps
- The iPad Web Design & Development Toolbox
- Targeting the iPhone 4 Retina Display with CSS3 Media Queries
- How do I lock the orientation to portrait mode in a iPhone Web Application?
- jQuery Retina Display Plugin
- retina.js
- Retina Images
-
Frameworks
- Printers
-
Responsive
Patterns & Snippets
- Responsive Patterns
- CSS3 Code Snippets
- The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration.
DOM Manipulation
Typography
- Quick guide to webfonts via @font-face
- How To Achieve Cross-Browser @font-face Support
- Google Fonts
- Adobe Edge Web Fonts: Get started with free web fonts.
- Typekit: easy way to use commercial web font on your site.
- Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite
- Typeset.css
- typecast
- CSSTypography
- SO: @font-face fonts only work on their own domain
- FitText: A jQuery plugin for inflating web type
- TypeButter
- slabText
- Baseline.js
- jKerny
- Lettering.js
- Trunk8 is an intelligent text truncation plugin to jQuery. It will cut off just enough text to prevent it from spilling over
- bacon is a jQuery plugin that allows you to wrap text around a bezier curve or a line.
- CSS Typography cheat sheet: Small roundup on CSS features that will enhance your web typography.
Services (Free & Commercial)
- TheToolbox
- colourco
- Color Scheme Designer: find resonate colors for a great design.
- HTML Entity Character Lookup
- SpritePad
- Responsinator
- HTML Shell
- Form Builder
- Zen BG
- Prepros
- site44
- CSS3 Media Query Builder
- jsFiddle
- codepen is an HTML, CSS, and JavaScript code editor right in your browser with instant previews of the code you see and write.
- Website Builders
Programming & Markup Languages
- CSS
-
JavaScript
- Javascript Closures
- Combinator Recipes for Working With Objects in JavaScript
- Prototypes and Inheritance in JavaScript
- JavaScript Study Guide
- ECMA 262-3 in detail
- JavaScript Garden
-
Extensions
- RubyJS is a JavaScript implementation of all methods from Ruby classes like Array, String, Numbers, Time and more.
- Mout is a collection of modular JavaScript utilities that can be used in the browser as AMD modules or on node.js (without any overhead).
- bacon.js: A small functional reactive programming lib for JavaScript.
-
Flow Control
- Coroutine Event Loops in Javascript
- How To Node Article on promises describing both sides: node.js and browser
- Video by Douglas Crockford on monads which is touching Promises
- Не надо давать обещания, или Promises наоборот
- Promises are the monad of asynchronous programming
- A Study on Solving Callbacks with JavaScript Generators
- What's The Point Of Promises?
- Promises/A+ Spec
- Callbacks vs Coroutines
- This document is intended to explain how promises work
-
Libraries
- Standalone-Deferred
- Standalone-Deferred
- Flowy
- Step
- kew is a lightweight promise library optimized for node.js
- jQuery Timing
- RSVP.js
- q
- Watch.js
- Video: Monads and Gonads (YUIConf Evening Keynote)
- 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.
- 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
Animation
- 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.
- $fx(): A compact, lightweight Javascript Library for animation.
- 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.
- 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.
Widgets
-
Kits
- AlloyUI
- Kendo UI
- jQuery UI Bootstrap
- Zebra: JavaScript library that follows easy OOP concept, provides HTML5 Canvas based Rich UI and includes Java to JavaScript converter tool
- File Upload
- Sitemap
- Table Of Contents
- Modals
- Notifications
- Gallery Sliders
- Pagination
- Selects
- Progress Bars
- Trees
- Navigation
- Tooltips
-
Misc
- jQuery Knob
- DopelessRotate
- jQuery Addresspicker
- Fangle: create interactive documents from plain text.
-
Kits
Visualization
- Photon
- CSS3 shapes
- Morris.js
- Cube
- Cubism.js
- D3.js
- Crossfilter
- Datavisualization.ch
- jQuery.Gantt
- easy pie chart
- Gauge.js
- Google Chart Tools
- Piecon
- Viskit.js
- jStat
- CHAP Links Library
- bonsai
- Smoothie Charts
- DataMaps
- mxgraph
- Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
- Timeline.js: A Storytelling Timeline built in JavaScript.
- xCharts is a JS library for creating attractive, custom data-driven chart visualizations. It uses HTML, CSS, and SVG to create dynamic, fluid charts that can be easily customized and integrated.
- jQuery Gantt editor
- amCharts is a robust charting tool that will suit any dataviz need.
- Responsive vertical timeline
Validation & Forms
- 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
Transitions
Numbers
Time and Dates
Search
Testing
- FiveUI Extensible/open browser extension & headless system for testing UI Consistency guidelines (or anything else you can test with injected JS).
- Writing Testable JavaScript
- Writing Testable Frontend Javascript Part 1 – Anti-patterns and their fixes
- Introduction to BDD
- cucumber
- cucumber.js
- Gherkin is the language that Cucumber understands.
Template Engines
- ICanHaz.js
- Hogan.js
- Handlebars.js
- Transparency
- doT.js
- Walrus
- Chibi
- Templayed.js
- ECT: Fastest JavaScript template engine with CoffeeScript syntax
- pithy: An internal DSL for generating HTML in JavaScript
- T: T.js is a template engine that uses simple Javascript data structure to represent html/xml data.
- Nunjucks is a full featured templating engine for javascript.
- Jade
- Linked.in Dust.js
Routing And URLs
- Crossroads.js
- Hash.js
- director
- Davis.js
- path.js
- URI.js
- Roadcrew.js
- jQuery Address
- page.js
- speakingurl: generate a so called "static", "Clean URL", "Pretty URL" or "slug" from a string.
Rich Text Editors
Code Viewers & Editors
- Rainbow.js
- Intelligist
- Prism.js
- Brackets: An open source code editor for the web, written in JavaScript, HTML and CSS by Adobe.
- CodeMirror
- Scripted
- tabIndent.js
- Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in.
Refactoring
Performance
- Writing Fast, Memory-Efficient JavaScript
- CSS-only: Load images on demand
-
Videos
- Faster HTML and CSS: Layout Engine Internals for Web Developers: by David Baron of Mozilla
- Google I/O 2012 - Breaking the JavaScript Speed Limit with V8
- DOM, HTML5, & CSS3 Performance: A video by Paul Irish
- Nicholas Zakas | High Performance Javascript
- Building A Performant HTML5 App with Trunal Bhanse and Akhilesh Gupta (LinkedIn)
- General Information
- Memory
-
Tools
- Chrome Developer Tools
-
V8
- Optimizing for V8 - very technical series on the V8 engine
- I-want-to-optimize-my-JS-application-on-V8 checklist
- Performance tips for JavaScript in V8
- JavaScript Leak Finder
- Navigation Timing
- Firebug Paint Events
- Locache: JavaScript caching framework for client side caching in the browser using localStorage
-
DOM Manipulation
- Rendering: repaint, reflow/relayout, restyle
- Reflows & Repaints: CSS Performance making your JavaScript slow?
- The new game show: "Will it reflow?"
- When does reflow happen in a DOM environment?
- Speeding up JavaScript: Working with the DOM
- Efficient JavaScript on dev.opera.com
- When Does JavaScript trigger reflows and rendering
- How (not) to trigger a layout in WebKit
-
Animation
- requestAnimationFrame for smart animating
- Leaner, Meaner, Faster Animations with requestAnimationFrame
- Collie - high performance Animation library
- Using requestAnimationFrame to Optimize Dragging Events
- requestAnimationFrame API: now with Sub-Millisecond Precision
- Why moving elements with translate() is better than pos:abs top/left
- Hardware Acceleration
-
Browser Internals
- How Browsers Work: Behind the scenes of modern web browsers
- How Browsers Work - Part 1 - Architecture
- Know Your Engines at O’Reilly Velocity 2011
- Video: GDC 2012: From Console to Chrome
- Fast CSS: How Browsers Lay Out Web Pages
- Video: What Browsers Really Think of Your App
- WebKit blog five-part series on rendering
- Video: Alex Russell - Life Of A Button Element
- How a web page loads
- Video: The Fundamentals, Primitives and History of HTML5
- The JavaScript engine family tree
- How JavaScript compilers work
- JavaScript compiler strategies
- The future for JavaScript
- HTTP Transport
Modularity & Loaders
- Lazy Module Declaration - JavaScript Module-Assembler for building better web applications
- UMD (Universal Module Definition) patterns
- Browserify
- require.js
- CrapLoader
- Writing Modular JavaScript With AMD, CommonJS & ES Harmony
- Путь JavaScript модуля
- Modular JavaScript with RequireJS
- LABjs & RequireJS: Loading JavaScript Resources the Fun Way
- JavaScript Inheritance and Public/Private members
- Deep dive into the murky waters of script loading
- Terminology: Modules
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
Image Manipulation
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.
Error Handling & Debugging
- Tracing.js - Javascript function tracing.
- JavaScript error handling anti-pattern
- Tattletale
Documentation
- 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.
- 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
Windows 8 Style
- Metro UI CSS
- BootMetro
- metro-bootstrap
- Metro UI Template
- Droptiles – Metro-Style Web Dashboard
- Metro JS
- Windows Metro tiles with Javascript and CSS3
- Cosmo
- Video: What Web Developers Need to Know When Building Metro style Apps
- CSS3 Microsoft Modern Buttons
- Visual Studio 2012 Image Library - 5,000+ Images Downloadable Now
- Metro User Interface Implementation and Resources
- Windows-8-like animations with CSS3 and jQuery: a demo made by Sara Soueidan about creating a Modern UI design like in Windows 8.
Video
Audio
Library Collections
- 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.
- pineapple.io: A central hub of Tutorials, Tools and Assets for developers and designers
Chat
- XMPP using JSON
- Converse.js is an open source, webchat client, that runs in the browser and can be integrated into any website.
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.
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.
Misc
- zip.js
- simpleCart.js
- Aware.js is a simple jQuery plugin that allows a site to customize and personalize the display of content based on a reader's behavior without requiring login, authentication, or any server-side processing.
- How to directly upload files to Amazon S3 from your client side web app
html & CSS
- CSS3 regions: Rich page layout with HTML and CSS3 | Adobe Developer Connection
- MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
- Offsetting an HTML element in a flexible container | maratz.com
- Jonathan T. Neal | Understand the Favicon
- The Definitive Guide to Using Negative Margins | Smashing Coding
- 70 Expert Ideas For Better CSS Coding | Smashing Coding
- Blend Tutorial Part 4: Create a Flexible Layout—Memory Game | BlendInsider
- MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
- Case Study — The Evolution Of The BEM Methodology | Smashing Coding
- The truth about structuring an HTML5 page | Feature | .net magazine
- The Problem Of CSS Form Elements | Smashing Coding
- Maintainable Code — Using White Space For Readability In HTML And CSS | Smashing Coding
- Using SVG | CSS-Tricks
- The Z-Index CSS Property: A Comprehensive Look | Smashing Coding
- In Search of the Holy Grail · An A List Apart Article
- Horizontally Centered Drop-Down Menus with Pure CSS
- Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.
- Horizontal centering using CSS fit-content value - RedTeamDesign
- CSS Style guide: 10 essential techniques | Features | Web Designer
- The Lengths of CSS | CSS-Tricks
- Adapting To The Ink — Tips And Tricks For Print Style Sheets | Smashing Coding
- Front End Development Guidelines
- CSS Architectures: Principles of Code Cleanup
- About HTML semantics and front-end architecture – Nicolas Gallagher
- The Best Way to Learn CSS | Webdesigntuts+
- CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS | Mobify
- CSS Architectures: Refactor Your CSS
- Taking the “Erm..” Out of Ems | Webdesigntuts+
- Taking Ems Even Further | Webdesigntuts+
- ‘Scope’ in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
- CSS Architectures: Refactor Your CSS
- CSS Architectures: Scalable and Modular Approaches
- Fifty Shades of BEM — Le ministère de l'intégration
- The Pastry Box Project | 3 June 2013, baked by Oli Studholme
- Loading Images on Demand with Pure CSS | Flippin' Awesome
性能方面
- Front-end performance for web designers and front-end developers – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
- Media Query & Asset Downloading Results - TimKadlec.com
- Performance Calendar » 2011
- Don’t use IDs in CSS selectors? ❧ Oli.jp (@boblet)
- About CSSLint
- CSS Selectors: Should You Optimize Them To Perform Better? - Vanseo Design
- Perfection kills » Profiling CSS for fun and profit. Optimization notes.
- Writing efficient CSS selectors – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
- 10 Easy Steps to Great Website Optimization. - Wojo Design
- Scott Logic » Css Performance – Part 1
- iOS CSS animations performance | Alberto Gasparin
- Performance Calendar » Beyond Bandwidth: UI Performance
- Debunking Responsive CSS Performance Myths - igvita.com
- Optimize browser rendering - Make the Web Faster — Google Developers
- Stubbornella » Blog Archive » Reflows & Repaints: CSS Performance making your JavaScript slow?
- Why you should care about CSS page performance | Boagworld - Web & Digital Advice
- Writing efficient CSS - Web developer guide | MDN
- Jens O. Meiert · Web Design, Web Development, Accessibility, and Usability
- Efficiently Rendering CSS | CSS-Tricks
- Performance Calendar » CSS Selector Performance has changed! (For the better)
- Performance aspects of Google’s HTML/CSS Style Guide | Zoompf
- Book - Scalable and Modular Architecture for CSS
- CSS Performance and Maintainability | Wayne Moir
- Base64 vs. CSS Sprites: battle for performance
- Javascript Full Screen API
- CSS Performance Test · jsPerf
- Different CSS techniques and their performance | screwlewse.com
- CSS performance, who cares? | The Bright Lines
- kelly norton: On Layout & Web Performance
- Coding Q&A: CSS Performance, Debugging, Naming Conventions | Smashing Coding
- Myth busting the HTML5 performance of transform:translate vs. top/left - Tumult Company Blog
- Improving UX Through Front-End Performance · An A List Apart Article
javascript
- Creating jQuery-style functions in JavaScript, hasClass, addClass, removeClass, toggleClass
- DailyJS: Backbone.js Tutorial: Build Environment
- Superhero.js
- Perfection kills » Global eval. What are the options?
jquery
- 12 jQuery Notification Bar Options like the Hello Bar
- 10 Useful jQuery Lightbox Plugins
- Writing Your Own jQuery Plugins - Treehouse Blog
- 5 Things You Should Stop Doing With jQuery | Flippin' Awesome
移动端
- A Comparison of Methods for Building Mobile-Optimized Websites
- iPhone 5 Web Design Kyle Larson Web Design Articles
- iOS6 gives us two new CSS3 properties | css3files.com
- CSS Media Queries for iPads & iPhones | Stephen Gilbert
- Top 10 iPhone Development Blogs | WebDesignerGeeks - Web Designer, Web Developer blog
- Web Development For The iPhone And iPad: Getting Started | Smashing Mobile
- Tips and Tricks for iOS Web Development | Bernskiold Learning
- Responsive Email Design | Campaign Monitor
- New iPhone 5 and iOS 6 Features for HTML 5 Developers | Mobile Zone
- Designing Mobile Sites | Chicago Internet Marketing Services | Electric Easel, Inc.
- iPhone Development: 12 Tips To Get You Started Article - SitePoint
- » Seven Things I Learned While Making an iPad Web App Cloud Four Blog
- Boost Your Mobile E-Commerce Sales With Mobile Design Patterns | Smashing UX Design
- Off Canvas
- The Holy Grail of Mobile Layout | CSS3 Wizardry
- Converting The Prototype — iOS Prototyping With Adobe Fireworks And TAP (Part 3) | Smashing Fireworks
- Building The Prototype — iOS Prototyping With TAP And Adobe Fireworks (Part 2) | Smashing Fireworks
- Laying The Foundation — iOS Prototyping With TAP And Adobe Fireworks (Part 1) | Smashing Fireworks
- Solving The Back Button | Meng To - UI/UX Designer
- Guidelines For Mobile Web Development | Smashing Magazine
- Design lessons from Gmail web app | Radesign
- Designing for Mobile, Part 1: Information Architecture - UX Booth | UX Booth
- Designing for Mobile, Part 2: Interaction Design - UX Booth | UX Booth
- Issues with position fixed & scrolling on iOS
- jtyjty99999/mobileTech · GitHub
- webkit webApp 开发技术要点总结 - pifoo - 博客园
retina
- Developing a responsive, Retina-friendly site (Part 1) — PaulStamatiou.com
- Michiel de Graaf - Retina for web workflow - Designer and writer of CSS & HTML
- Retina Ready Images and Responsive Web Design - Designmodo
- CSS Techniques for Retina Displays
- Designing a responsive, Retina-friendly site — PaulStamatiou.com
- How to Prepare for The High-Resolution Web | MediaLoot
- Retina Display - The Future of Web Design? Overview - PSD to HTML Blog
- Retina Display – The Future of Web Design. Internet Overview | Responsive Design Blog
- retina | Bram.us
- coderwall.com : establishing geek cred since 1305712800
- Retina Sprites: Ratios — glue 0.3 documentation
- How to serve high-resolution website images for retina displays (new iPad/iPhone4+) - benfrain.com - blog of technology writer and web designer Ben Frain.
- Improving Image Quality on the Retina Display | Webdesigntuts+
- Master CSS pixels for Retina displays | Tutorial | .net magazine
- Retina Displays: Good for Web Design? - DBS Interactive | DBS Interactive
- Designing for iPhone 4 Retina Display: Techniques and Workflow | Smashing Mobile
- Articles about the App Store, design and Bjango
- Articles about the App Store, design and Bjango
- How to Design for the Retina Display | Fuel Your Creativity
- Retina Display Media Query | CSS-Tricks
- Exporting Retina designs from Photoshop with Slicy | Veerle's blog 3.0
- Optimising Graphics & Images For Retina Devices – Mobile Website Design | Nick Hurst Web Design
- Creating Retina Images for Your Website
- Coding for Retina Displays with RetinaJS Tutorial
- A tip for designing for Retina displays | Common Agency - iPhone, iPad and Mobile developers - Huddersfield, Yorkshire
- A Quick-fix to: Blurry Text on MacBook Pro with Retina Display
- Ready or Not, Here Comes HD Web Design | Design Shack
- How to Prepare for The High-Resolution Web | MediaLoot
- Tutoriel vidéo HTML-CSS : Ecran Retina | Grafikart.fr
- Retina revolution
- Making Dolphin Retina-Display-Ready
- Designing for iPhone 4 Retina Display: Techniques and Workflow | Smashing Mobile
- Realmac Blog - Designing for Retina
- How to Create a Responsive, Retina-ready Website | John Dyer's Code
- CSS Image Sprites for Retina (HiRes) Devices | Alex Thorpe
- HD & Retina Display Media Queries | UI Fuel
- Adaptive Images in HTML
- High DPI Images for Variable Pixel Densities - HTML5 Rocks
- Serving Images Efficiently to Displays of Varying Pixel Density
- Retina Image Replacement for the New iPad
- Retina Display and CSS Background Images | WeedyGarden
- Realmac Blog - Coding for Retina on the web
- Designing for Retina Display | InsertHTML
- Implementing retina ready images on the web.
- Designing for Retina Displays, Optimize Website for @2x Images - Designmodo
- The Clambake — ZURBplayground — ZURB.com - ZURB Playground - ZURB.com
- Designing for high resolution Retina displays
- A guide for creating a better retina web - Ivo Mynttinen / User Interface Designer
- 5 Ways to Support High-Density Retina Displays - SitePoint
- Responsive Retina-Ready Menu | Codrops
- 4 Ways to Convert Your Site to Retina
responsive
- Responsive Design with Twitter Bootstrap
- Responsive Web Design: Using Fonts Responsively - SitePoint
- » Responsive Design for Apps — Part 1 Cloud Four Blog
- Responsive Web Design Resources | This Is Responsive
- Focal Point: Intelligent Cropping of Responsive Images | Design Shack
- Responsive Design of the Future with Flexbox - Treehouse Blog
- Responsive Web Design
- CSS3 Animated Media Queries
- Fluid-first: creating a future proof fluid and responsive website
- display: none; | Laura Kalbag
- Responsive Menu Concepts | CSS-Tricks
- Responsive Web Design Guidelines and Tutorials | Smashing Magazine
- 15+ Comprehensive Responsive Web Design Tutorials | gonzoblog
- Responsive WebDesign | Scoop.it
- Focal Point: Intelligent Cropping of Responsive Images | Design Shack
- Creating a CSS3 Responsive Menu
- | Always Twisted. Front-End Development.
- Five steps to gettin’ flexy in responsive web design | Feature | .net magazine
- What if we could use CSS to alter HTML attributes? - Andy Davies
- A Flexible Approach to Responsive Navigation | Webdesigntuts+
- Stuff & Nonsense > Responsive Web Design
- Drop Down Responsive Menu with CSS3 and jQuery Tutorial
- Big Menus, Small Screens: Responsive, Multi-Level Navigation | Webdesigntuts+
- Responsive Web Development as a Standard, Step-by-Step
- Responsive jQuery Masonry · Osvaldas Valutis
- Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples
- 18 Useful Responsive Menu Navigation Tutorials
- [What I'm Reading] The responsive edition
- HTMLBOY - Stop using the viewport meta tag (until you know how to use it)
- IE10 Snap Mode and Responsive Design - TimKadlec.com
- Debugging CSS Media Queries Johan Brook
- Fluid Images · An A List Apart Article
- Fluid Images — Unstoppable Robot Ninja
- Build a responsive site in a week: designing responsively (part 1) | Tutorial | .net magazine
- Build a responsive site in a week: typography and grids (part 2) | Tutorial | .net magazine
- Build a responsive site in a week: images and video (part 3) | Tutorial | .net magazine
- Build a responsive site in a week: media queries (part 4) | Tutorial | .net magazine
- Prototyping Responsive Typography
- Build responsive emails | Tutorial | .net magazine
- The Foundation for Responsive Design – Flexibility | Web Resources | WebAppers
- RWD & Device Detection? — Building A Better Responsive Website | Smashing Mobile
- Responsible Considerations For Responsive Web Design | Smashing Coding
- Ten things you need to know about responsive design | Adobe Developer Connection
- Developing a responsive, Retina-friendly site (Part 1) — PaulStamatiou.com
- Developing a responsive, Retina-friendly site (Part 2) — PaulStamatiou.com
- Optimization — Responsively Retrofitting An Existing Site With RWD Retrofit | Smashing Mobile
- Device Size Matters — Responsive Web Design With Physical Units | Smashing Mobile
- » Responsive Design for Apps — Part 3 Cloud Four Blog
- 10 Infographics for Learning About Responsive Web Design
- On Responsive Layout and Grids – David Bushell – Web Design & Front-end Development
- Responsive WebDesign | Scoop.it
- Responsive Web Design Interactive Infographic | Template Monster
- Responsive Web Design Guidelines and Tutorials | Smashing Magazine
- Adobe Explores the Future of Responsive Digital Layout with National Geographic Content | Web Platform Team Blog
- » Behavioral Breakpoints: Beyond Media Queries Cloud Four Blog
- Designing Experiences for Responsive Web Sites
最后在此感谢： Dimi Navrotskyy、林小志（林大大）和＠CJ(大神)。
特别声明：如需转载，需要附上下面相关链接地址：