HTML和CSS工具

15、 keyframes.app

keyframes.app

一款基於時間關鍵幀，在線制作網頁動畫的網站，你無需在編輯器和瀏覽器直接互相切換，及所見即所得。keyframes.app提供在線制作和谷歌瀏覽器擴展插件兩種形式。制作完成後，你能很方便的將自動產生的CSS代碼復制到你的項目中。

16、 Emotion

emotion.sh/

Emotion是一款用JavaScript編寫css的庫，支持字符串和對象兩種方式聲明CSS變量，如果你在使用React，試用這個庫將讓你以更加優雅的方式用JavaScript編寫CSS。

17、modern-normalize

github.com/sindresorhu…

normalize.css可以讓瀏覽器以接近標準的方式一致地渲染所有元素，而且不同於c***est，只針對需要正常化的元素。modern-normalize只針對現代瀏覽器，而且足夠現代，甚至IE和Edge都已經放棄。

18、layerJS

layerjs.org/

一款你只需要編寫HTML就能很輕松實現菜單、畫框、彈出層、滾動視察、縮放、觸摸手勢等眾多效果的框架，這個框架代碼壓縮版只有30KB,很方便與各種前端框架集成(Angular,VueJS,React),支持響應式和觸摸，並且不依賴任何庫就能實現。

19、css-blocks

css-blocks.com/

一款受 CSS Modules, BEM 和 Atomic CSS 框架啟發，為你的web應用組件提供完美的CSS模塊方案。

20、usebasin

usebasin.com/

一款你只需要設計表單，無需編寫後端代碼，就能很方便的將表單應用集成到你的項目裏。

21、mustard

mustard-ui.com/

一款適合初學者的CSS框架，但是看起來還蠻不錯，模塊化，開源，壓縮版只有6KB，支持FLEX,Grid布局和自帶一些漂亮UI,比如進度條，表單、按鈕等，雖然小，但功能齊全。

javascript工具

22、ScrollHint

appleple.github.io/scroll-hint…

一個JS庫，用於指示元素可以水平滾動，並帶有指針圖標，如果你在做一個新手引導，這個工具將會是一個不錯的選擇。

23、ToastUI editor

github.com/nhnent/tui.…

強大的Markdown編輯器tui.editor,方便集成到你的項目裏，這款強大的富媒體編輯器有以下特點：

• 支持 CommonMark 與 GFM（GitHub Flavored Markdown）兩種標準
• 支持豐富的擴展插件，如顏色選擇器、圖表、UML、表格合並
• 提供了所見即所得與 Markdown 這兩種模式，在編輯過程中可以隨時切換，非常方便。在所見即所得模式下，可以直接從瀏覽器、 Excel、PPT等復制文本，並且保留原來的格式

24、FilePond

github.com/pqina/filep…

Filepond 是一個用於文件上傳的 JavaScript 庫，可以上傳任何內容，優化圖像以獲得更快的上傳速度，並提供一個出色的，可訪問的，流暢的用戶體驗。

Filepond 提供了多種上傳方式：拖放，復制和粘貼文件，瀏覽文件系統或僅使用庫的API。 gzip 壓縮後僅有 21KB ，並且內置了圖像優化和圖像自動調整功能。

Filepond 適用於 React ， Vue ， Angular 和 jQuery 。

25、Dinero.js

sarahdayan.github.io/dinero.js/

一個用來創建、計算和格式化貨幣價值的不可變的框架。

無論在銀行應用程序、電子商務網站還是證券交易所平臺，我們每天都在與金錢互動。我們也越來越依賴技術來處理問題。

然而，關於如何以編程處理貨幣價值尚無共識。雖然金錢是現代社會中普遍存在的概念，但相較於日期和時間之類的東西，它並不是任何主流語言中的一流數據類型。結果，每一種軟件都有自己的處理方式，且伴隨著陷阱。

Dinero.js遵循Fowler的模式更多一點兒。它允許你在JavaScript中創建、計算和格式化貨幣值。你可以進行數學運算、解析和格式化對象，使你的開發過程更加輕松。

該庫設計為不可變和可鏈接的模式。它支持全局設置，具有擴展格式選項，並提供本機國際化支持。

26、Swup

github.com/gmrchk/swup

一款適合初學者的框架，方便靈活易用，讓你能快速制作專業級的頁面轉場動畫效果。

27、Selection.js

simonwep.github.io/selection/

簡單易用的可視化，支持鼠標拖拽、使用Cmd/Ctrl+click 選擇頁面元素的庫（支持分組選擇），大大節省了你的開發時間。只有3KB大小，不依賴jQuery。

28、Glider.js

nickpiscitelli.github.io/Glider.js/

一個超快速(25毫秒加載)，輕量級(小於3KB)，無依賴性(不需要jQuery)的制作幻燈效果的前端庫，支持響應式，易於擴展，方便自定義事件等...，更多特性等待你的發現！

29、ScrollOut

scroll-out.github.io/

一款幫你制作專業級Scroll滾動效果（滾動視差）的框架，框架大小不到1KB,使用回調的方式將相關動畫元素的屬性進行實時分配，方便你做出個性化的動態效果。

自己是從事了五年的前端工程師，不少人私下問我，2019年前端該怎麽學，方法有沒有？

沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助那些想學習前端，卻又不知道怎麽開始學習的朋友。

這裏推薦一下我的前端學習交流群：731771211，裏面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裏面學習交流，每天都會有大牛定時講解前端技術!

點擊：加入

這50款前端熱門工具簡直不要太好用了！（2）