庫&插件&框架&工具

nodejs 入門

nodejs 入門教程，你們能夠在 github 上提交錯誤

2016 年最好用的表單驗證庫 SMValidator.js

前端表單驗證工具分享

淺談前端線上部署與運維

說到前端部署，可能大多數前端工程師在工做中都是使用的公司現成的部署系統，與SRE對接、一塊兒完成前端的部署操做。若是我如今給你一臺新註冊的雲主機，那麼你應該怎麼作才能把一個前端工程部署到一臺雲主機上，成爲一個能夠訪問的網頁呢？今天咱們就來聊聊前端的部署~ 首先，一個前端工程要變成…

一個 jQuery 前端插件庫

很實用的一個前端插件庫，包含了輪播、滾動條、彈出框、城市聯動等控件。

原生 js 和 jquery 兩種處理 cookie 的插件介紹

原生 js 和 jquery 兩種處理 cookie 的插件介紹

tesseract.js - 從圖片裏抓取文字

從任意圖片裏摳出文字來，純 JavaScript 實現，還支持包含中文的多語言

聖誕節，把網站全部的js代碼都壓縮成聖誕樹吧。

本文分兩章節，分別講解如何使用js2image這個庫生成能夠運行的聖誕樹代碼 和 js2image的原理。 github地址：https://github.com/xinyu19873... ps:求star 效果預覽：http://assets.souche.c…

能在安卓上滾起上萬個 dom 的 H5 滑動插件 JRoll 發佈 v2.3.2

JRoll，一款能滾起上萬條數據，具備滑動加速、回彈、縮放、滾動條、滑動事件等功能，兼容 CommonJS/AMD/CMD 模塊規範，開源，免費的輕量級 html5 滾動插件。

Threejs之二:相機詳解

透視投影相機(THREE.PerspectiveCamera) 所謂透視投影相機(PerspectiveCamera),基本等同於人的眼睛,意思就是:離的遠的物體會顯得比較小,近處的物體會比較大.透視投影相機的構造函數: PerspectiveCamera(fov,aspect…

【翻譯向】webpack2 指南（下）

webpack2 官方指南翻譯，包括內容：

• 緩存
• 墊片（Shimming）
• 編寫一個庫

Vonic 正式版發佈！附中文文檔

成功收尾，本月終於能夠向 2.0 邁進了！O(∩_∩)O

100+ 超全的 web 開發工具和資源整理

[2016.09.06 更新] 整合 WEB 開發包含的 JavaScript 庫，前端框架，Web 應用框架，任務批處理工具 / 包管理器，編程語言 / 開發平臺，數據庫，icon 圖標，本地開發環境搭建，協做工具，Web 開發社區等收集分類......

Bilibili 數據接口整理（不按期更新）

Bilibili 數據接口整理（不按期更新）

【翻譯向】webpack2 指南（上）

webpack2 正式版已經發布了，翻譯了一下官方指南。

一些有用的 sass mixins

一些有用的 sass mixins，包括 rem 轉換、小箭頭、三角形、媒體查詢等

Webpack 中文指南

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader 的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

JS 運動搞不定 你缺乏一個運動框架而已

能夠解決的運動：

1. 元素的上下左右勻速 緩衝運動
2. 圖片的透明度變化
3. 圖片輪播
4. 元素高度 寬度 邊框像素的變化
5. 適用於多個物體運動以及鏈式運動
6. 改變元素的位置

對不起，咱們來遲了——webpack 中文社區

webpack2.x 正式版本發佈！隨之而來，webpack 官方給中文開發者送了一份新春大禮： webpack 官方中文社區正式成立！ 迷茫與行動 我使用 webpack 已經有一年多了。這些日子裏，許許多多身邊的同事，還有開發者，開始加入 webpack 的使用大潮之中。一方面，同事們對…

2016 年 50 個最佳的輕量級 JavaScript 框架和庫

回顧今年已發佈的 JS 框架和庫，咱們針對地篩選了一些可以提供直接和具體功能的免費 JavaScript 插件和庫，與你們分享。

移動Web利器transformjs入門

簡介 在過去的兩年，愈來愈多的同事、朋友和其餘不認識的童鞋進行移動web開發的時候，都使用了transformjs，全部必要介紹一下，讓更多的人受益，提升編程效率，並享受編程樂趣。（固然transformjs不只僅支持移動設備，支持CSS3 3D Transforms的瀏覽器都…

逐行閱讀 Bootstrap 源碼

Bootstrap 做爲最受歡迎的前端 CSS 框架，它到底寫了什麼 tricky 代碼，使得開發者的效率可以大幅提高呢？基於本身的我的開發經驗，一塊兒來看個究竟！揭祕 Bootstrap 和 CSS 中不被注意的部分。

CSS Modules 入門 Ⅰ：它是什麼？爲何要使用它？

這是一個教你如何使用 CSS Modules 實現模塊化的系列教程

移動端下拉刷新插件

有原生與 vue 兩個版本

[[PostCSS] 入門指南：讓你輕鬆開始嘗試 PostCSS](https://juejin.im/entry/58117...

昨天咱們發了一個開篇，今天這篇是一個入門指南教程。這篇教程爲用戶提供了 (我認爲是) 一個優秀的基本配置，讓你可以容易地嘗試 PostCSS 並在之後去深刻細節。

jQuery 插件開發全解析

jQuery 插件開發全解析

開源編程字體全家桶

總有一款適合你

particles.js - 輕量的粒子動效 JS 開源庫

輕量美觀的實現粒子動效的 JS 開源庫。

城市多級聯動插件

最新的城市區劃數據，城市三級聯動插件十分方便

webpack 教程資源收集

資源不在多，找到你想要的就好！最近在坑 webpack，歡迎來指點...（掘金沒有 IM，那就評論區見吧~）

50 本前端書籍整理，高清 PDF

發現了一個下載前端書籍的地方，分享給你們。

從零到一：用 Phaser.js 寫意地開發小遊戲（Chapter 4 - 遊戲即將開始）

遊戲即將開始

Jade 模板引擎讓你飛

Jade 模板跟 NodeJs 真配

flv.js - B 站 HTML5 播放器內核開源

B 站 HTML5 播放器內核開源， 超棒的 HTML5 播放器，純 JavaScript 實現，告別 Flash 啦！

webpack 很不錯的中文文檔

很不錯的，翻譯者辛苦了

最新的15 個有趣的前端庫（December 2016）

「英」原文連接 github ? ? ? 還有許多其餘有趣的收集 ? Deck.gl Deck.gl是由Uber開源的數據可視化庫，基於WebGL的可視化圖層。可以支持大規模數據的2D和3D可視化。 能夠在React中使用，也能夠單獨使用； ? Svelte Svel…

你必須『收藏』的Github技巧

一秒鐘把Github項目變成前端網站 GitHub Pages你們可能都知道，經常使用的作法，是創建一個gh-pages的分支，經過setting裏的設置的GitHub Pages模塊能夠自動建立該項目的網站。這裏常常遇到的痛點是，master遇到變動，常常須要去sync到gh-p…

移動端時間選擇器（更新 1.2.0 版本）

LazyPicker LazyPicker 是一個簡單的移動端時間選擇器，支持多種主題。 用手機掃描體驗： 1.2.0 版本體驗： 使用方法 引入 CSS 和 JavaScript 腳本： <link rel="stylesheet" href="lazyPicker.min.css" /…

使用 mock.js 讓前端開發與後端獨立

Mock.js實現的功能。 基於數據模板生成數據。 基於HTML模板生成數據。 攔截並模擬Ajax請求。 本文僅演示使用mock.js進行模擬並攔截Ajax請求。 首先頁面中先引用： <script src="http://cdn.bootcss.com/jquery/3.1.…

前端技能圖譜

概述 Web 前端要學習的內容。html 就是一堆標籤，而後能夠在頁面顯示出一些控件，例如表格，輸入框，按鈕等。而 css 的做用在於控制 html 的標籤位置，效果等，若是不是 css 的話，咱們不會見到平時那些如此美觀的頁面。js 的做用主要是提供運算功能，動態操做頁面的元素，還能夠經過網絡與服務器通信（傳說中的 ajax），動畫效果不少時候也是 js 弄出來的。

AlloyTouch Button 插件 - 再也不愁 click 延遲和點擊態

移動端不能使用 click，由於 click 會有 300ms。全部有了 fastclick 這樣的解決方案。而後 fastclick 並無解決點擊態（用戶點擊的瞬間要有及時的外觀變化反饋）的問題。hover 會有不消失的問題，全部你們通常用: active。利用 :active 僞類來設置某元…

【翻譯向】webpack2 指南（中）

webpack2 已經發布了，翻譯了一下官方指南。
包括內容：

• 動態模塊替換
• 開發環境配置
• 爲生產環境構建
• React 懶加載
• Public Path

移動Web觸摸與運動解決方案AlloyTouch開源啦

傳送門 Github地址：https://github.com/AlloyTeam/... 簡介 AlloyTouch的本質是運動一個數字，把數字的物理變化映射到你想映射的任何屬性上。因此帶來了普遍的應用場景。不論實在應用、遊戲、操做系統等許多層面，監聽用戶觸摸，…

bootstrap 之 affix 附加導航

使用 affix 效果開發一個 API 文檔頁面

Webpack 2 入門教程

本文寫於 Webpack 2 正式發佈以前（完善文檔階段）。
不只是一篇 Webpack 2 的入門教程，也讓你們瞭解什麼是 Webpack，值得收藏，長文慎入。

Vue高效UI組件庫—iView開發實踐

前段時間在微軟參加活動，分享了 TalkingData 開源的基於 Vue.js 的高效 UI 組件庫 iView 的一些開發經驗，現整理成文，和你們探討。本文首發於掘金，轉載請註明出處和做者。 GitHub：https://github.com/iview/iview 關於 …

echarts 畫圖實例講解

前兩天分享了一個項目 (http://hyuhan.com/2016/11/17/...，裏面用到了 echarts（一個純 Javascript 的圖表庫）來畫圖，項目中用到了它的字符雲圖，地圖，柱狀圖，餅圖等，今天就給你們分享一些一些實現的細節。建議先去看看五分鐘上手 Echarts 再來看這篇博客。

讓你的 Web 項目有趣起來！

不少有趣的工具，贊！

Git學習與環境配製

這偏補充以前hexo+github的git使用. 版本管理 集中型(SVN) 1.特色:只有一個倉庫,集中放在一個服務器,優勢便於管理.缺點就是開發者不能鏈接服務器就沒法獲取最新的版本. 分散型 能夠folk,多個倉庫,能夠沒必要鏈接遠程倉庫就能夠開發 註冊github，首先你需…

一套絕佳的圖標字體庫和CSS框架

Font Awesome爲您提供可縮放的矢量圖標，您可使用CSS所提供的全部特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。

和 transformjs 一塊兒搖擺

寫在前面 記得之前 facebook 作過一款 HTML5 遊戲。開場動畫是一塊軟體相似豆腐的東西一塊兒搖擺。相似的效果以下面的 gif 所示： facebook 當時使用的是 createjs 下的子項目 easeljs 和 tweenjs 去製做，基於 Canvas 的動畫。基本的原理主要是：循環運動 Ca…

基於 vue2.0+vuex 的日期選擇組件

一個基於 vue2.0+vuex 的簡單日期選擇組件

Typr.js - 網頁字體 Parser

和 opentype.js 相似，解析字體文件並存在 ArrayBuffer 的內存裏面，並能夠得到 glyph 數據

超全面 + 最流行的「前端速查表」高清版大全

目前最新最流行的前端速查表（Cheat sheet），包含：CSS3 Flexbox、ES六、jQuery 3 以及最新的 Bootstrap 4，前端人員能夠將這些看成是備忘表或速記手冊，使用時能夠快速查閱，至關便捷。推薦收藏備用！

實現小小的 fullpage

今天運營給了一個需求，要作個引導頁，也就是全屏滾動。考慮到只有 3 張圖，就本身碼個吧！遇到一些坑！

專一於移動端的fullPage.js

可實現移動端的單頁滾動效果，可自定義參數，提供回調接口，和公開接口。

入門 Webpack，看這篇就夠了

做者語：閱讀本文以前，先看下面這個 webpack 的配置文件，若是每一項你都懂，那本文能帶給你的收穫也許就比較有限，你能夠快速瀏覽或直接跳過；若是你和十天前的我同樣，對不少選項存在着疑惑，那花一段時間慢慢閱讀本文，你的疑惑必定一個一個都會消失；若是你之前沒怎麼接觸過 Webpack，若是你對 webpack 感興趣，本文中有一個貫穿始終的例子，若是你能把這個例子本身動手寫一次，寫完之後你會發現你已明明白白的走進了 Webpack 的大門。

文／zhangwang（簡書做者）

直播音頻小庫 voiceLive.js

利用 howerl.js 封裝出 voiceLive.js，針對語音直播的一系列需求整理出的一個業務小庫。

基於 jquery 的 UI 庫

基於 jquery 的 UI 庫

transformjs 污染了 DOM? 是你不瞭解它的強大 | 掘金技術徵文

原文連接: https://github.com/AlloyTeam/... 寫在前面 上星期在React微信羣裏，有小夥伴以爲transformjs直接給DOM添加屬性太激進，不可取（因爲不在那個微信羣，不明白…

30 分鐘 Qunit 入門教程

30 分鐘讓你瞭解 Javascript 單元測試框架 QUnit，並能在程序中使用。補充了控制檯輸出測試結果相關內容。 題外話 有些童鞋可能會問，單元測試真的有必要嗎？實際上，相信咱們寫完代碼至少都會進行一些簡單的輸入輸出測試，檢查代碼是否會報錯。可是這相對比較手工，當咱們代碼…

基於 Vue.js 和 ionic 樣式的 UI 框架

DEMO: https://wangdahoo.github.io/v...

預計本月發佈正式版，歡迎關注。

github 上 jquery 彈出層插件你值得擁有

功能強大、樣式簡單、文檔齊全

一款 HTML5 在線音樂播放器，帶音頻圖譜

包含功能：在線音樂（酷狗）播放，音樂收藏，歌詞顯示，音頻圖譜；收藏和歌詞采用本地存儲。

輕量級的JavaScript表單驗證，字符串驗證validator.js

輕量級的JavaScript表單驗證，字符串驗證。沒有依賴，支持UMD，~3kb。 Github: validator.js validator.js官網=>實例應用 安裝使用 模塊 在應用中引用 validator.min.js 文件 $ npm install valida…