Github資源匯集
突然發現申請博客園已經兩年有余,沒有發表過一篇文章,十分慚愧。
言歸正傳,先分享一下兩年來收集的部分編程資源,大部分為Github上的項目。雖然網上這樣的分享已不在少數,但不如我理想中的集中,實用。如果早些時間我有這些資源,估計少走了很多彎路。
篇幅有限,僅列出綜合資源, JavaScript, CSS的,限于篇幅,其于的在
Github
上,就不列出來了。
綜合資源
資源鏈接匯集
- awesome ?- 各種主流語言的優秀項目匯集
- github_star.md ?- 同上
- lists ?- 資源集合的匯集
- frontend-dev-bookmarks ?- Github上最火的前端開源項目匯集
- awesome-bootstrap ?- bootstrap 資源匯集
- awesome-sysadmin ?- 系統管理員資源匯集
- awesome-wpo ?- Web性能優化資源匯集
- awesome-react ?- Facebook React庫相關資源匯集
- manong ?- 碼農周刊整理: 按語言或技術分類的資料匯集
- awesome-resources ?- 開發資源總結
電子書
- GitHub秘籍 ?- 本秘籍收錄了一些Git和Github非常酷同時又少有人知的功能
- free-programming-books ?- 編程學習資源電子書
- free-programming-books-zh_CN ?- 編程學習資源電子書中文版
- The-Art-Of-Programming-By-July ?- 此為《程序員編程藝術:面試和算法心得》的初稿,于14年6月轉移到Word上優化,紙質版15年上市
- learn-with-open-source ?- 借助開源項目,學習軟件開發
- Front-end-Developer-Interview-Questions ?- 前端工作面試問題
- You-Dont-Know-JS ?- 深入JavaScript語言核心機制的系列圖書
- es6tutorial ?- 《ECMAScript 6入門》是一本開源的JavaScript語言教程,全面介紹ECMAScript 6新增的語法特性
- fks ?- 前端技能匯總
- book ?- 雨痕C/Go/Python學習筆記
優秀網站
- 綜合
- stackexchange.com ?- 包含 Stack Overflow 在內的43個不同領域站點的問答社區的總和
-
codeproject ?- 開源的程序設計網站,主要的使用者是Windows平臺上的程序員,每一篇文章幾乎都附有來源碼和例子
- 新聞類
-
Hacker News ?- 關于電腦黑客和創業公司的社會化新聞網站
- 博客類
-
伯樂在線 ?- 小而精的精選博客,優秀的原創/譯文
個人博客
- 粉絲日志 ?- 跨界的IT博客|Hadoop家族, R, RHadoop, Nodejs, AngularJS, KVM, NoSQL, IT金融
-
夢想天空(山邊小溪)的博客園 ?- 前端開發技術/網頁設計資源/HTML5 & CSS3技術分享
- 前端相關
- codepen.io ?- 優秀HTML和CSS展示網站 :+1:
- front-end-collect ?- 前端開發相關的優秀網站、博客、以及活躍開發者
- codrops ?- 包含大量的優秀的前端交互案例,有大量炫酷的HTML5特效、CSS3特效、Js特效,有大量的前端設計教程
- Java相關
- programcreek ?- Java 代碼大全 :+1:
-
ImportNew ?- 專注Java & Android 技術分享
- 其它
-
Algomation ?- 查看、創建和分享算法的學習平臺
工具
- jsdelivr ?- 免費開源的 CDN 解決方案,用于幫助開發者和站長。包含 JavaScript 庫、jQuery 插件、CSS 框架、字體等等 Web 上常用的靜態資源)
- freecdn ?- 前端公共庫cdn
- soundjay ?- 用于網站使用的各種聲音特效
- docker ?- 開源的應用程序容器引擎
API && 文檔 && 規范
- Best practices for modern web development
- 谷歌 Web 開發最佳實踐手冊(伯樂在線中文版)
- google-styleguide ?- Google 風格指南
- AngularJS風格指南
- angularjs-style-guide ?- AngularJS風格指南
- angularjs-styleguide ?- AngularJS風格指南(中文版)
- AngularJS-Learning ?- AngularJS指南
- gradle 中文文檔
- Gradle-2-User-Guide (Gradle 2 User Guide 中文翻譯)
- gradledoc (Gradle 用戶手冊) - 翻譯中
- material_design_zh ?- Material Design 中文協同翻譯
- websocket-protocol ?- websocket協議翻譯
- TLCL ?- The Linux Command Line(中文版)
JavaScript
- JavaScript
- 包管理器 (Package Managers)
- 加載器 (Loaders)
- 測試框架 (Testing Frameworks)
- QA工具 (QA Tools)
- 構建工具 (Building Tools)
- MVC框架 (MVC Frameworks and Libraries)
- 非MVC框架 (Non-MVC Frameworks)
- UI 框架 (UI Frameworks)
- 模板引擎 (Templating Engines)
- 數據綁定 (Data Binding)
- 文件上傳 (File Upload)
- 編輯器 (Editors)
-
實用工具
- 工具 (Utility)
- 文件 (Files)
- 格式化 (Code Formatting)
- 函數式編程 (Functional Programming)
- 響應式編程 (Reactive Programming)
- Promise
- 數據結構 (Data Structure)
- 時間 (Date)
- 字符串 (String)
- 數字 (Number)
- 存儲 (Storage)
- 顏色 (Color)
- 國際化和本地化 (I18n And L10n)
- 類 (Class)
- 流程控制 (Control Flow)
- 路由 (Routing)
- 安全 (Security)
- 日志 (Log)
- 正則表達式 (RegExp)
- 多媒體 (Media)
- 語音指令 (Voice Command)
- API
- 視覺檢測 (Vision Detection)
-
UI
- 代碼高亮 (Code Highlighting)
- 加載狀態 (Loading Status)
- 延遲加載 (Lazy Load)
- 數據驗證 (Validation)
- Keyboard Wrappers
- Tours And Guides
- 通知 (Notifications)
- 滑塊 (Sliders)
- 范圍滑塊 (Range Sliders)
- 表單組件 (Form Widgets)
- 工具提示 (Tooltips)
- 定位 (Positioning)
- 模態框和彈出窗 (Modals and Popups)
- 滾動 (Scroll)
- 菜單 (Menu)
- 表格/網格 (Table/Grid)
- 分頁 (Pagination)
- 可編輯的 (Editable)
- 排序 (Sortable)
- 圖表 (Chart)
- WebGL
- 圖形庫 (Graphics Library)
- 圖片相關 (Images)
- 背景 (Background)
- 特效組件 (Effects Widgets)
- 導航 (Navigation)
- 響應式 (Responsive)
- 拖放 (Drag/Drop)
- 相冊 (Gallery)
- Material
- SVG手繪動畫
-
移動端
- 地圖 (Maps)
- 動畫 (Animations)
====
Package Managers
在遠程主機存放JavaScript庫,并提供工具下載到本地或打包上傳
- bower (twitter 推出的一款包管理工具,基于nodejs的模塊化思想,把功能分散到各個模塊中,讓模塊和模塊之間存在聯系,通過 Bower 來管理模塊間的這種聯系)
- spm ?- Brand new static package manager.
Loaders
JavaScript模塊或加載系統
- headjs (The only script in your HEAD)
- RequireJS ?- A file and module loader for JavaScript.
- SeaJS ?- A Module Loader for the Web.
Testing Frameworks
- qunit ?- An easy-to-use JavaScript Unit Testing framework.
- jasmine (DOM-less simple JavaScript testing framework)
- jquery-mockjax (The jQuery Mockjax Plugin provides a simple and extremely flexible interface for mocking or simulating ajax requests and responses)
- jquery-mockjax ?(模擬ajax請求和響應)
QA Tools
- JSHint ?- JSHint is a tool that helps to detect errors and potential problems in your JavaScript code.
Building Tools
- generator ?(為你提供項目腳手架的生成系統, 完成新建文件、安裝模塊、類庫等重復性操作)
MVC Frameworks and Libraries
- angular.js ?- HTML enhanced for web apps.
- backbone ?- Give your JS App some Backbone with Models, Views, Collections, and Events.
Non-MVC Frameworks
非MVC結構框架,主要是綜合性的工具類庫
- ember.js (A JavaScript framework for creating ambitious web applications)
- react (A declarative, efficient, and flexible JavaScript library for building user interfaces.)
- aralejs (開放、簡單、易用的前端基礎類庫)
- todomvc (Backbone.js, Ember.js, AngularJS及更多框架版本的TODO應用)
UI Frameworks
- fuelux (Extends Twitter Bootstrap with additional lightweight JavaScript controls.)
-
ionic
(Advanced HTML5 mobile development framework and SDK. Build great hybrid apps with web technologies you already know and love. Best friends with AngularJS.
)
Data Binding
- way.js (簡單、輕量級、穩定的雙向數據綁定庫)
- bindonce (Zero watches binding for AngularJs)
- swarm (JavaScript replicated model (M of MVC) library)
Templating Engines
使用戶界面與業務數據(內容)分離,提高開發效率
- handlebars.js (JavaScript語義模板庫,通過對view和data的分離來快速構建Web模板)
- mustache.js (Minimal templating with {{mustaches}} in JavaScript)
- artTemplate (性能卓越的 js 模板引擎)
Data Visualization
以圖表或圖形化方式展示數據
Timeline
- TimelineJS (A Storytelling Timeline built in JavaScript)
Gantt
- jQueryGantt (jQuery Gantt editor)
Mind Map
- treed (Powerful Tree Editor)
- springy (A force directed graph layout algorithm in JavaScript)
- arbor (a graph visualization library using web workers and jQuery)
PPT
- nodePPT (這可能是迄今為止最好的網頁版PPT)
- impress.js (It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.)
Flowchart
- mermaid (Generation of diagram and flowchart from text in a similar manner as markdown)
File Upload
- jQuery-File-Upload (功能強大的 文件上傳 組件,你值得擁有)
- plupload (Plupload is a JavaScript API for dealing with file uploads it supports features like multiple file selection, file type filtering, request chunking, client side image scaling and it uses different runtimes to achieve this such as HTML 5, Silverlight and Flash. )
- webuploader (It's a new file uploader solution!)
- angular-file-upload (An AngularJS directive for file upload using HTML5 with FileAPI polyfill for unsupported browsers)
Editors
- brackets (開源的JavaScript、HTML、CSS網頁代碼編輯器)
- CodeMirror
Utility
JavaScript實用工具庫
- underscore (JavaScript工具庫,提供了常用的功能函數,而不繼承任何JavaScript內置對象)
- jquery-mousewheel (A jQuery plugin that adds cross-browser mouse wheel support.)
- 101 (A modern JS utility library)
- jsqrcode (Javascript QRCode scanner)
- ChromeSnifferPlus (Chrome探測器,可以探測正在使用的開源軟件或者js類庫)
- zeroclipboard (The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.)
- jsdoc (An API documentation generator for JavaScript. )
- FeHelper (Web前端助手--FeHelper(Chrome擴展))
- minimap (A preview of full webpage or its DOM element with flexible positioning and navigation support :+1:)
Files
Code Formattring
- js-beautify (javascript 代碼格式化)
Functional Programming
把運算過程盡量寫成一系列嵌套的函數調用的"結構化編程"的JavaScript庫
- underscore ?- JavaScript's utility _ belt.
Reactive Programming
更加有效率地處理事件流,而無需顯式去管理狀態
- RxJS (The Reactive Extensions for JavaScript)
- ripple (A tiny foundation for building reactive views)
Data Structure
- immutable-js (Immutable Persistent Data Collections for Javascript)
- seamless-immutable (Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objects.)
- sift.js ?(受MongoDB啟發的數組過濾庫)
Date
- moment (Parse, validate, manipulate, and display dates in javascript.)
- date (Date() for humans)
- timezone-js (Timezone-enabled JavaScript Date object. Uses Olson zoneinfo files for timezone data.)
String
- underscore.string (String manipulation extensions for Underscore.js javascript library. )
- string.js (Extra JavaScript string methods.)
Number
- numbers.js (Advanced Mathematics Library for Node.js and JavaScript)
- accounting.js (A lightweight JavaScript library for number, money and currency formatting - fully localisable, zero dependencies)
- buddy.js (Magic number detection for JavaScript)
- jquery-number (Easily format numbers for display use. Replace numbers inline in a document, or return a formatted number for other uses.)
Promise
- q (A tool for making and composing asynchronous promises in JavaScript)
- promise (Bare bones Promises/A+ implementation)
- promisejs (Lightweight javascript implementation of promises.)
Storage
- localForage (Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API)
- jStorage (jStorage is a simple key/value database to store data on browser side)
- cross-storage (Cross domain local storage, with permissions)
- Cookies (JavaScript Client-Side Cookie Manipulation Library)
- jquery-cookie (簡單、輕量級的cookie操作的jQuery插件)
Color
- jquery.adaptive-backgrounds.js (A jQuery plugin for extracting the dominant color from images and applying the color to their parent)
- jquery-minicolors (jQuery MiniColors Plugin :+1:)
- TinyColor (Fast, small color manipulation and conversion for JavaScript)
- jquery-simplecolorpicker (Very simple jQuery color picker)
- color-thief (Grabs the dominant color or a representative color palette from an image. Uses javascript and canvas)
- randomColor (A color generator for JavaScript)
- jquery-color (jQuery plugin for color manipulation and animation support)
- color (color visualization in 3D)
I18n And L10n
國際化和本地化
- i18n-js (It's a small library to provide the I18n translations on the Javascript. It comes with Rails support)
- i18next (internationalisation (i18n) with javascript the easy way (incl. jquery plugin))
- jquery-i18n (A jQuery plugin for doing client-side translations in javascript)
- l10n.js (Passive localization JavaScript library)
Class
JavaScript類繼承模型
- klass (A utility for creating expressive classes in JavaScript)
Control Flow
- wind (Wind.js是很有特點的一個JavaScript異步編程類庫(其前身為Jscex), Wind.js的唯一目的便是“改善編程體驗”,改善的“程度”以及改善的“方式”便是Wind.js與其他異步流程控制方案最大的區別)
- co (The ultimate generator based flow-control goodness for nodejs (supports thunks, promises, etc))
- step (An async control-flow library that makes stepping through logic easy.)
Routing
- director (a tiny and isomorphic URL router for JavaScript)
- page.js (Micro client-side router inspired by the Express router (~1200 bytes))
- crossroads.js (JavaScript Routes)
- pathjs (Simple, lightweight routing for web browsers)
- app-router (Router for Web Components)
- jquery-address ?(jQuery Address - Deep linking for the masses)
- history.js (gracefully supports the HTML5 History/State APIs)(pushState, replaceState, onPopState) in all browsers)
- js-url (簡單、輕量級的url解析器)
- ui-router (The de-facto solution to flexible routing with nested views)
Security
- H5SC (HTML5 Security Cheatsheet)
- js-xss (Sanitize untrusted HTML (to prevent XSS) with a configuration specified by a Whitelist. 根據白名單過濾HTML(防止XSS攻擊))
- DOMPurify (DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG.)
Log
- log (Console.log with style)
- console.image (The one thing Chrome Dev Tools didn't need.)
RegExp
- regexr (RegExr is a HTML/JS based tool for creating, testing, and learning about Regular Expressions)
- JSVerbalExpressions (Create regular expressions using chained methods)
- regulex (JavaScript Regular Expression Parser & Visualizer)
- xregexp (Extended JavaScript regular expressions)
- regexpbuilderjs (Create regular expressions using chained methods)
Media
播放器或CSS3媒體查詢
- video.js (open source HTML5 & Flash video player)
- muplayer (An open source web audio player from Baidu Music, support HTML5 and Flash engine on different platforms(百度音樂播放內核))
- clappr (An extensible media player for the web)
- mediaelement (HTML5
- matchMedia.js (matchMedia polyfill for testing media queries in JS)
Voice Command
- annyang (A javascript library for adding voice commands to your site, using speech recognition)
- voicechat (VoiceChat is a set of APIs to create conference rooms on the fly to be used in the browser. Its built using the Plivo WebSDK and APIs)
API
- jscapture (Screen recording and capturing with pure client-side JavaScript.)
- brocco (在瀏覽器在將源碼和注釋抽離顯示在兩側,方便閱覽)
Vision Detection
- tracking.js (A modern approach for Computer Vision on the web :+1:)
- jsfeat (JavaScript Computer Vision library)
Code Highlighting
- highlight.js (Javascript syntax highlighter)
Loading Status
加載狀態指示器庫,一般用于Ajax請求時
- nprogress (For slim progress bars like on YouTube, Medium, etc)
- spin.js (A spinning activity indicator)
- progress.js (ProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page.)
- progressbar.js (Beautiful and responsive progress bars)
- bootstrap-progressbar (progressbar interactions for twitter bootstrap 2 & 3 :+1:)
- Ladda (Buttons with built-in loading indicators)
- is-loading (Simple jQuery plugin to show visual feedback when loading data or any action that would take time)
- GridLoadingEffects (Some inspiration for loading effects of grid items using CSS animations.)
- flipload (Flipping elements and show a loading indicator easily.)
- jquery-loading-overlay (jQuery Loading Overlay Plugin)
Lazy Load
延遲(異步)加載資源,提高頁面訪問速度
- echo (Lazy-loading images with data-* attributes)
- jquery_lazyload (jQuery plugin for lazy loading images)
- lazysizes (High performance lazy loader for images (responsive and normal), iframes and scripts, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.)
- basket.js (A script and resource loader for caching & loading files with localStorage)
- text (An AMD loader plugin for loading text resources)
- eCSSential (An experiment in optimized loading of mobile-first responsive CSS)
Validation
- jquery-validation ?(成熟的jQuery表單驗證插件)
- Parsley.js (Validate your forms, frontend, without writing a single line of javascript)
- bootstrapvalidator ?(基于Twitter Bootstrap的表單驗證)
- validator.js (String validation and sanitization)
- h5Validate (An HTML5 form validation plugin for jQuery)
- jqBootstrapValidation (A JQuery validation framework for bootstrap forms)
Keyboard Wrappers
鍵盤事件
- mousetrap (Simple library for handling keyboard shortcuts in Javascript)
- jquery.hotkeys (jquery.hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination)
- KeyboardJS (A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts)
鍵盤UI
- Keyboard (Virtual Keyboard using jQuery UI)
Tours And Guides
- bootstrap-tour (Quick and easy product tours with Twitter Bootstrap Popovers)
- hopscotch (A framework to make it easy for developers to add product tours to their pages)
- jquery-tourbus (A jQuery tour/walkthrough plugin)
- shepherd (Guide your users through a tour of your app #hubspot-open-source)
Notifications
- toastr (Simple javascript toast notifications)
Sliders
- unslider (最簡單的jQuery滑塊插件)
- slick (the last carousel you'll ever need)
- Ideal-Image-Slider (Quite simply the ideal Image Slider in vanilla JS.)
- jquery.smoothState.js (A jQuery plugin to stop the jank of page loads.)
- bxslider-4 (Responsive jQuery content slider)
- slider (Bootstrap Javascript jQuery Carousel/Slider/Slideshow/Gallery/Banner Responsive Image :+1:)
Range Sliders
- ion.rangeSlider (jQuery only range slider)
- bootstrap-slider ?(bootstrap范圍滑塊)
- jQRangeSlider (A jquery UI range selection slider that supports dates)
- rangeslider.js (HTML5 input range slider element polyfill)
- noUiSlider (輕量級的jQuery范圍滑塊插件,支持大多數設備的touch事件,包括IOS, Android, Windows 8 和 Windows Phone 8)
Form Widgets
select 下拉選擇框架
- select2 ?- 支持搜索、遠程數據訪問、無限下拉滾動 :ok_hand:
- jquery.selectBoxIt.js ?- 兼容移動端的、bootstrap風格的jQuery選擇框插件,Wonderful!
- multi-select ?- 一個替換標準選擇框的、用戶友好的多屬性添加與移除選擇框
- bootstrap-select ?- 基于Twitter Bootstrap的下拉選擇框
- selectize.js ?- 個基于jQuery的自定義select UI 控件,具有自動完成、類似原生選擇框的鍵盤導航及較好的用戶體驗
-
bootstrap-multiselect
?- 基于Bootstrap的
多選下拉框
jQuery插件
input 文本輸入框自動完成
- visualsearch ?- 增強的、可自動完成的搜索框jQuery插件
- typeahead.js ?- is a fast and fully-featured autocomplete library
- floatlabels.js ?- Follows the famous Float Label Pattern. Built on jQuery.
輸入框掩碼
- jQuery-Mask-Plugin ?- 表單字段和頁面元素掩碼jQuery插件
- formatter.js ?- Format html inputs to match a specified pattern
- jquery.inputmask ?- jQuery Input Mask plugin
- intl-tel-input ?- 輸入和驗證國際電話號碼的jQuery插件
標簽管理
- bootstrap-tagsinput ?- 基于Twitter Bootstrap的可編輯標簽jQuery插件)
- tagmanager ?- A jQuery plugin (working nicely with twitter bootstrap)
按鈕
- Ladda ?- Buttons with built-in loading indicators.
Tooltips
- qTip2 (Pretty powerful tooltips)
- tipsy (Facebook-style tooltips plugin for jQuery)
- tooltipster (A jQuery tooltip plugin)
- toolbar (A tooltip style toolbar jQuery plugin :+1:)
- jquery-powertip (A jQuery plugin that creates hover tooltips)
- cssarrowplease (生成工具提示箭頭CSS類)
- jquery-validation-bootstrap-tooltip (A drop in extension replacing error labels from jQuery Validation plugin with Twitter Bootstrap tooltips)
Positioning
- tether (A positioning engine to make overlays, tooltips and dropdowns better)
- fixto (A jQuery plugin for sticky positioning)
- position (Position Utility)
- fixed-sticky (A position: sticky polyfill that works with filamentgroup/fixed-fixed for a safer position:fixed fallback)
Modals and Popups
- jBox ?(強大靈活的彈窗、消息提示、通知...jQuery插件 :clap:)
- flippant.js (一個迷你、依賴少的DOM節點翻轉UI庫 :+1: )
- sweetalert (A beautiful replacement for JavaScript's "alert")
- bootstrap-sweetalert (Bootstrap implementation)
- noty (noty is a jQuery plugin that makes it easy to create alert - success - error - warning - information - b messages as an alternative the standard alert dialog. Each notification is added to a queue.)
- alertify.js
Scroll
- scrollup ?(創建自定義“回到頂部”的jQuery插件)
- jquery.scrollTo
- jquery.nicescroll (類似iphone/ipad的滾動條)
- jQuery-slimScroll ?(可以把任何Div轉換成帶漂亮滾動條的可滾動區域)
- nanoScrollerJS (同上)
- antiscroll (OS X Lion style cross-browser native scrolling on the web that gets out of the way.)
- skrollr (Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love))
- onepage-scroll (Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin)
- smooth-scroll (A simple vanilla JS script to animate scrolling to anchor links.)
- reveal.js (The HTML Presentation Framework)
- scrollReveal.js (Easily reveal elements as they enter the viewport.)
視差滾動
- parallax (Parallax Engine that reacts to the orientation of a smart device)
- jQuery-Parallax (Used to recreate the Nike Better World parallax effect)
- Parallaxjs (A Library for Javascript that allows easy page parallaxing)
Table/Grid
- jquery-dynatable ?(A more-fun, semantic, alternative to datatables:thumbsup:)
- grid (Drag and drop library for two-dimensional, resizable and responsive lists)
Pagination
- jquery-bootpag (boostrap dynamic pagination jQuery plugin)
Editable
- x-editable (In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery :thumbsup:)
Sortable
- html5sortable (Lightweight jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.)
Chart
- echarts ?(來自百度的直觀,生動,可交互,可個性化定制的數據可視化圖表庫 :thumbsup:)
- peity (Progressive <svg> pie, donut, bar and line charts)
- morris.js (Pretty time-series line graphs)
- jquery.sparkline (A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser)
- morris.js (漂亮、簡單的折線圖)
WebGL
- MathBox.js (WebGL數學圖形庫)
Graphics Library
- raphael (JavaScript Vector Library)
- AlloyImage (基于HTML5的專業級圖像處理開源引擎)
- d3 (A JavaScript visualization library for HTML and SVG.)
- lazy-line-painter (A JQUERY PLUGIN FOR SVG PATH ANIMATION)
- SVG-Morpheus (實現SVG圖標變形成另外一個SVG 圖標的過渡效果的JavaScript庫,借鑒了Material風格的過渡效果 :+1:)
- obelisk.js ?(Obelisk.js是個非常酷的JS庫,它本質上是一個創建等距對象的JavaScript引擎)
Images
- holder ?- 客戶端圖片占位器
Menu
- jQuery-menu-aim (用于電商網站的多級商品菜單)
- jQuery.mmenu ?(The best jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.)
- jQuery-contextMenu (contextMenu manager)
- metisMenu (Easy menu jQuery plugin for Twitter Bootstrap 3)
- toc (根據頁面內容生成目錄的jQuery插件)
- jquery.tocify.js (Bootstrap風格的目錄jQuery插件)
Background
- Vide (視頻背景效果Jquery插件)
- jquery-backstretch ?(動態伸縮頁面元素、幻燈片式輪播背景圖片)
Effects Widgets
- jquery.pin (將任意頁面元素“釘”在某個容器頂部,而且在尺寸小的屏幕上能夠自動禁用這種效果)
- stickUp (讓頁面目標元素 “固定” 在瀏覽器窗口的頂部)
- headroom.js (為頁面頂部多留些空間。在不需要頁頭時將其隱藏)
- fullPage.js ?(fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple)
- jquery-focuspoint (jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.)
- shine.js (A library for pretty shadows.)
- real-shadow (Module that casts photorealistic shadows)
- gif.js (JavaScript GIF encoding library)
- jquery-collagePlus (Create an image gallery like Google+ Albums)
- zoom.js (zoom in on any element in the DOM)
- Blur.js (blur.js is a jQuery plugin that produces psuedo-transparent blurred elements over other elements.)
- tip_cards (Create a card layout that let your user flip through it like you see on Google Tips)
- purplecoat.js (Simple Labeled Overlays)
- textillate (A simple plugin for CSS3 text animations :+1:)
- focusable (Set a spotlight focus on DOM element adding a overlay layer to the rest of the page)
Navigation
- intro.js (A better way for new feature introduction and step-by-step users guide for your website and project.)
- navgoco (Multi-level slide navigation with session storage and accordion effect for JQuery)
- TinyNav.js (Responsive navigation plugin that weighs just 443 bytes)
- flexnav (A jQuery plugin for responsive menus)
- jquery-steps (A powerful jQuery wizard plugin that supports accessibility and HTML5.)
- intro.js (以一種更好的方式展示新特性,非常適合用于在你的網站或項目上一步一步引導用戶)
Responsive
- Respond (A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more))
- responsive-nav.js (Responsive navigation plugin without library dependencies and with fast touch screen support.)
Drag Drop
- dropzone (簡單地拖放庫,支持圖片預覽,有好看的進度條。)
- jquery.pep.js (Pep, a lightweight plugin for kinetic drag on mobile/desktop)
- jquery-filedrop (drag and drop desktop files and POST to a URL to handle files)
- Bootstrap-Form-Builder (Web app for drag drop building bootstrap forms)
- formbuilder (Formbuilder is a small graphical interface for letting users build their own webforms)
- dragdealer (Drag-based JavaScript component, embracing endless UI solutions)
- Nestable (可拖拽的層級列表,兼容移動端touch的jQuery插件)
Gallery
- Bootstrap-Image-Gallery ( 漂亮的Bootstrap相冊)
Material
- material (Material design for Angular)
Hand-drawing Animation
- vivus (JavaScript library to make drawing animation on SVG)
- walkway (An easy way to animate simple SVG elements.)
Animations
- jQuery-Animate-Enhanced (Extend $.animate() to detect CSS transitions for Webkit, Mozilla, IE>=10 and Opera and convert animations automatically.)
- sprite.js (An efficient javascript sprite animation framework)
Other Resources
- idiomatic.js ?(書寫具備一致風格、通俗易懂 JavaScript 的原則)
- javascript-patterns
- [html5-boilerplate] ( https://github.com/h5bp/html5-boilerplate )(一套專業的前端模版,用以開發快速、健壯、適應性強的app或網站)
- angularjs-book (Examples and Code snippets from the AngularJS O'Reilly book)
CSS
- CSS
- bootstrap ?(簡潔、直觀、強悍的前端開發框架,讓web開發更迅速、簡單:thumbsup:)
- uikit ?(輕量級和模塊化的前端框架,快速開發web程序)
- Semantic-UI (語義化設計的前端框架,為攻城師而制作的可復用的開源前端框架)
- amazeui ?(中國首個開源 HTML5 跨屏前端框架)
- switchery ?(IOS7風格的checkbox)
- animate.css ?(簡單的、跨瀏覽器的CSS動畫庫)
- Buttons (A CSS button library built using Sass and Compass)
- bootstrap-switch (Turn checkboxes and radio buttons in toggle switches. :+1:)
- iCheck (Highly customizable checkboxes and radio buttons (jQuery & Zepto) )
- messenger (Growl-style alerts and messages for your app. #hubspot-open-source)
- css3patterns (The popular CSS3 patterns gallery)
- 960-Grid-System (The 960 Grid System is an effort to streamline web development workflow.)
- SubtlePatterns (All the patterns)
- colors (Smarter defaults for colors on the web. )
- ratchet (Build mobile apps with simple HTML, CSS, and JS components. )
- colour-schemes (Colour schemes for a variety of editors created by Dayle Rees. )
- bootswatch (Themes for Bootstrap)
- ionicons (The premium icon font for Ionic Framework)
- bootstrap-material-design (Material design theme for Bootstrap 3)
- HoverEffectIdeas (Some inspiration and modern ideas for subtle hover effects.)
- dashboards (Responsive dashboard templates for Bootstrap)
- flipboard-layout (An experimental page layout that let's you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard.)
- textillate (A simple plugin for CSS3 text animations)
- magic (CSS3 Animations with special effects)
博客園的排版實在搞不定,請見諒。大家的排版為什么那么漂亮,有什么好的教程嗎?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
