節約 Web 開發時間的 67 個工具、庫和資源
簡評:作者沒有討論大型的前端框架如 React,Angular,Vue 等等,也沒有討論流行的程式碼編輯器如 Atom,VS Code,Sublime 等等,而是羅列出了一些加速開發者工作流的工具、資源和庫。
JavaScript 庫
Particles.js —— 在網頁上建立炫酷的漂浮例子的庫,在網站首頁比較常見。
Three.js —— 在網頁上建立 3D 物件和空間的庫,常用於網頁遊戲。
Fullpage.js —— 輕鬆建立全屏滾動的網頁。
Typed.js —— 實現打字機的效果。
Waypoints.js —— 實現滾動一個元素觸發一個函式的最簡單的方式。
Highlight.js —— 自動檢測語言及高亮語法。
Chart.js —— 純 JavaScript 實現炫酷圖表。
Instantclick —— 大大提升網頁載入效率,在滑鼠懸停時預載入資源。
Chartist —— 另一個圖表庫。
Motio —— 實現基於 sprite 的動畫和平移效果的庫。
Animstion —— css 動畫頁面切換效果的 JQuery 外掛
Barba.js —— 流暢和平滑的頁面過渡效果。
TwentyTwenty —— 一個視覺差異工具,突出兩個影象之間的差異。
Vivus.js —— 用於在 SVG 上繪製動畫的庫。
Wow.js —— 滾動時顯示動畫。
Scrolline.js —— 顯示頁面的滾動進度條。
Velocity.js —— 快速、平滑的 JavaScript 動畫。
Animate on scroll —— 另一個滾動顯示動畫的庫。
Handlebars.js —— JavaScript 模版。
jInvertScroll —— 輕量級的水平視差外掛。
One page scroll —— 與 FullPage 類似。
Parallax.js —— 視覺引擎,對智慧裝置的方向做出反應。
Typeahead.js —— 自動匹配搜尋。
Dragdealer.js —— 相當酷的實現拖動效果的庫。
Bounce.js —— 建立炫酷的 CSS3 動畫。
Pagepiling.js —— 又一個 one page scroll.
Multiscroll.js —— 實現多列滾動皮膚效果。
Favico.js —— 動態圖示。
Midnight.js —— 無縫切換固定標題。
Anime.js —— 動畫庫。
Keycode —— 獲得按鍵的 JavaScript 鍵碼。
Sortable —— 拖動排序控制元件。
Flexdatalist —— 輸入補全。
Slideout.js —— 在網頁上實現抽屜效果的側邊導航欄。
Jquerymy —— 使用 jquery 的兩種資料繫結方式。
Cleave.js —— 格式化輸入內容。
Page —— 小型客戶端路由庫。
Selectize.js —— 用於新增標籤的選擇框。
Nice select —— 用於建立奈斯型選擇框。
Tether —— 可以有效地固定絕對定位的元素。
Shepherd.js —— 實現指導使用者使用應用的效果。
Tooltip —— 提示資訊。
Select2 —— 豐富的自定義選擇框。
IziToast —— 容易實現的 JS 通知。
IziModal —— 容易實現的 JS 彈窗。
CSS 庫/設計類
Animate.css —— 動畫庫。
Flat UI Colors —— 簡單有效的顏色。
Material design lite —— 基於 Google 的 Material Design。
Materialui.co —— 許多 Material Design 框架的資源。
Colorrrs —— 隨機顏色生成器。
Section separators —— CSS 分割線。
Topcoat —— 簡單快速的 CSS 框架。
Create ken burns effect —— 使用 CSS 動畫的 Ken Burns 效果。
DynCSS —— 為 CSS 新增函式,讓它變成動態的。
Magic animations —— 人如其名。
CSSpin —— CSS 旋轉控制元件集合。
Feather icons —— 圖示。
Ion icons —— 圖示。
Font awesome —— 圖示。
Font generator —— 組合多種字型,生成一個混合體。
On/Off switch —— 開關按鈕。
UI Kit —— 輕型的模組化框架。
Bootstrap —— 這個就不談了。
Foundation —— 號稱最先進的響應式前端框架。
有用的產品/連結
<head> cheatsheet —— 可以進入 <head> 標籤的所有內容列表。
Ghost —— 基於 node.js 的簡單部落格平臺。
What runs —— 發現一個網站使用什麼技術的 Chrome 外掛。
Learn anything —— 以思維導圖形式提供各種學習資源,你值得擁有。
英文原文:67 useful tools, libraries and resources for saving your time as a web developer
推薦閱讀:
StackBlitz - 針對 Web 開發者的線上 IDE
55 個頂尖 Web 設計與開發網站
100+ 值得收藏的 Web 開發資源
相關文章
- 最節約時間的Web開發工具網址大全Web
- 67 個拯救前端開發者的工具、庫和資源前端
- 合成資料: 利用開源技術節約資金、時間和減少碳排放
- 50 個能幫你節省時間的開發工具
- 程式設計開發中最浪費時間和資源的7個錯誤程式設計
- Infinum:開發iOS應用要比開發Android應用節省約30%時間iOSAndroid
- 移動web設計和開發45個實用資源Web
- 8個最佳Web開發資源推薦Web
- 6個好用的Web開發工具Web
- 常用的幾個提高iOS開發效率的開源類庫及工具iOS
- RAC 資料庫節點間的關係及資源管理資料庫
- 20個雲端web開發工具Web
- web前端開發工具有哪些?8個好用的web前端開發常用工具Web前端
- 回顧 Web 開發者熟悉的 10 個經典開源專案和工具Web
- Web 開發會用到的20款優秀的開源工具Web開源工具
- iOS開發中可以節省50%編譯等待時間的幾個措施iOS編譯
- Learun,已開源,一個.net web快速開放工具Web
- Gris是一個混合資料庫/電子表格的開源工具資料庫開源工具
- Mac上的高效工具:One Switch為你節省時間和精力Mac
- tomcat發請求,檢視各個環節的耗時時間Tomcat
- 日常工作中有哪些很好的節約時間的技巧?
- 提高Android開發效率的9個Web工具AndroidWeb
- 25個超有用的 AngularJS Web 開發工具AngularJSWeb
- 資料庫和開發行業中的IDE工具資料庫行業IDE
- 40個最佳免費和開源NoSQL資料庫SQL資料庫
- 極大提高Web開發效率的8個工具和建議(含教程)Web
- 2016年最好的15個Web設計和開發工具Web
- Java 中節省 90% 時間的常用的工具類Java
- 分享十佳Web開發資源Web
- Web前端開發資源大薈萃Web前端
- 移動Web前端開發資源整合Web前端
- Windows xp如何節約記憶體資源Windows記憶體
- So Easy!讓開發人員更輕鬆的工具和資源
- 為開源作者賦能,為此我花了一個月時間做了個工具平臺
- 高併發Web服務的演變:節約系統記憶體和CPUWeb記憶體
- 18個最好的響應式Web設計工具和庫Web
- Web 開發中 20 個很有用的 CSS 庫WebCSS
- PouchDB:一個開源的 JS 資料庫JS資料庫