成人无码三区,大香蕉国产在线看,全部免费的毛片在线看,十八禁日韩,色在线视频网,影音先锋在线资源自拍,黄片亚洲视频,夜夜嗨AV一区二区三区网页

來(lái)源 |?https://www.jianshu.com/p/182b69e54fe8

今天跟你分享一些目前比較熱門(mén)新鮮度靠前的50款前端工具，希望對(duì)你有所幫助。

一、構(gòu)建工具

1、 Parcel

地址：https://parceljs.org/

Parcel是一款極速零配置WEB應(yīng)用打包工具，快速、幾乎零配置是它最大的特點(diǎn)，開(kāi)箱即用。相比webpack，Parcel對(duì)于新手來(lái)說(shuō)未嘗不是一個(gè)很好的選擇。

2、 Critters

地址：github.com

一款webpack的插件，它可以很方便的配置內(nèi)聯(lián)關(guān)鍵css( critical CSS ),其余的css部分則會(huì)異步加載，由于它不使用無(wú)頭瀏覽器(headless browser)呈現(xiàn)內(nèi)容，因此快速輕巧。

3、sucrase

地址：sucrase.io

如果你用typscript構(gòu)建React項(xiàng)目，sucrase將是一個(gè)不錯(cuò)的選著，它的編譯速度將是Babel的20倍。sucrase——一款ES6+編譯器，重點(diǎn)關(guān)注非標(biāo)準(zhǔn)語(yǔ)言，例如Typescript，JSX和Flow。

4、Webpack Config Tool

地址：webpack.jakoblind.no

一款可視化的在線工具網(wǎng)站，你只需要選擇前端項(xiàng)目運(yùn)用到技術(shù)和相關(guān)配置，就能一鍵幫你生成webpack.config.js，省去你不少的麻煩。

5、JSUI

地址：github.com/kitze/JSUI

JSUI 是一個(gè)可視化分類、構(gòu)建和管理 JavaScript 項(xiàng)目的工具。不管是前端應(yīng)用還是后端應(yīng)用，也不論使用的是哪種框架，只要項(xiàng)目有一個(gè) package.json ，即可進(jìn)行管理。

6、PWA Universal Builder

地址：pwa.cafe/

一款腳手架構(gòu)建工具，方便創(chuàng)建基于Preact，React，Vue和Svelte的項(xiàng)目，開(kāi)箱及支持Babel，Bublé，Browserlist，TypeScript，PostCSS，ESLint，Prettier和Service Workers！

7、VuePress

地址：vuepress.vuejs.org/

VuePress 由兩部分組成：第一部分是一個(gè)極簡(jiǎn)靜態(tài)網(wǎng)站生成器，它包含由 Vue 驅(qū)動(dòng)的主題系統(tǒng)和插件 API，另一個(gè)部分是為書(shū)寫(xiě)技術(shù)文檔而優(yōu)化的默認(rèn)主題，它的誕生初衷是為了支持 Vue 及其子項(xiàng)目的文檔需求。

每一個(gè)由 VuePress 生成的頁(yè)面都帶有預(yù)渲染好的 HTML，也因此具有非常好的加載性能和搜索引擎優(yōu)化（SEO）。同時(shí)，一旦頁(yè)面被加載，Vue 將接管這些靜態(tài)內(nèi)容，并將其轉(zhuǎn)換成一個(gè)完整的單頁(yè)應(yīng)用（SPA），其他的頁(yè)面則會(huì)只在用戶瀏覽到的時(shí)候才按需加載。

二、框架和庫(kù)

8、 PWA Starter Kit

地址：pwa-starter-kit.polymer-project.org/

通過(guò)功能豐富的WEB組件快速幫你構(gòu)建功能齊全的PWA網(wǎng)站項(xiàng)目，幾乎零配置，完成了構(gòu)建、測(cè)試和快速部署。

9、PaperCSS

www.getpapercss.com/

一個(gè)不太常規(guī)的CSS框架，如果你希望你的網(wǎng)站有手繪風(fēng)格感覺(jué)，選擇它準(zhǔn)沒(méi)錯(cuò)。

10、boardgame.io

地址：boardgame.io/

BOARDGAME.IO是 Google 開(kāi)源的一個(gè)游戲框架，旨在允許游戲作者將游戲規(guī)則從本質(zhì)上轉(zhuǎn)化為一系列簡(jiǎn)單的函數(shù)，這些函數(shù)用于描述當(dāng)一個(gè)指定動(dòng)作發(fā)生時(shí)游戲的狀態(tài)變化，框架負(fù)責(zé)處理表述性狀態(tài)傳遞。無(wú)需再手動(dòng)編寫(xiě)任何網(wǎng)絡(luò)或后端代碼。功能特性：

狀態(tài)管理：自動(dòng)跨瀏覽器、服務(wù)器和存儲(chǔ)器無(wú)縫管理游戲狀態(tài)；

快速成型：在渲染游戲之前調(diào)試界面以模擬更改。

多人游戲：所有連接到同一游戲的瀏覽器都實(shí)時(shí)同步，無(wú)需刷新。

私密狀態(tài)：私密信息可從客戶端隱藏。

日志：游戲日志可查看任意時(shí)間的信息。

UI 工具包：常用于游戲中的 React 組件。

11、Stimulus

地址：stimulusjs.org

Stimulus是一個(gè)適度的前端框架，它并不試圖接管整個(gè)前端的方方面面，不關(guān)心如何渲染HTML，相反用來(lái)增強(qiáng)HTML的相關(guān)行為。如果你的團(tuán)隊(duì)規(guī)模較小，但又想要和那些使用比較費(fèi)力的主流方案的較大團(tuán)隊(duì)競(jìng)爭(zhēng)，那么這是一個(gè)比較適合的前端框架方案。

12、sapper

地址：sapper.svelte.technology/

Sapper是一個(gè)類似Next.js的框架，具有極高的性能和內(nèi)存效率，具備代碼分割，服務(wù)端渲染的現(xiàn)代框架功能，是一款軍工級(jí)別的框架。

13、Reakit

地址：reakit.io/

使用這個(gè)框架能讓你快速搭建漂亮的React UI 交互站點(diǎn)。

14、Evergreen

地址：evergreen.segment.com/

更為強(qiáng)大的React UI 框架，有一套非常標(biāo)準(zhǔn)的UI設(shè)計(jì)語(yǔ)言幫你構(gòu)建企業(yè)級(jí)的具有國(guó)際范設(shè)計(jì)風(fēng)格的WEB應(yīng)用，這個(gè)框架類似我們國(guó)內(nèi)的ant.design（https://ant.design/docs/spec/colors-cn）

三、HTML和CSS工具

15、 keyframes.app

地址：keyframes.app

一款基于時(shí)間關(guān)鍵幀，在線制作網(wǎng)頁(yè)動(dòng)畫(huà)的網(wǎng)站，你無(wú)需在編輯器和瀏覽器直接互相切換，及所見(jiàn)即所得。keyframes.app提供在線制作和谷歌瀏覽器擴(kuò)展插件兩種形式。制作完成后，你能很方便的將自動(dòng)產(chǎn)生的CSS代碼復(fù)制到你的項(xiàng)目中。

16、 Emotion

地址：emotion.sh/

Emotion是一款用JavaScript編寫(xiě)css的庫(kù)，支持字符串和對(duì)象兩種方式聲明CSS變量，如果你在使用React，試用這個(gè)庫(kù)將讓你以更加優(yōu)雅的方式用JavaScript編寫(xiě)CSS。

17、modern-normalize

地址：github.com

normalize.css可以讓瀏覽器以接近標(biāo)準(zhǔn)的方式一致地渲染所有元素，而且不同于cssrest，只針對(duì)需要正常化的元素。modern-normalize只針對(duì)現(xiàn)代瀏覽器，而且足夠現(xiàn)代，甚至IE和Edge都已經(jīng)放棄。

18、layerJS

地址：layerjs.org/

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

19、css-blocks

地址：css-blocks.com/

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

20、usebasin

地址：usebasin.com/

一款你只需要設(shè)計(jì)表單，無(wú)需編寫(xiě)后端代碼，就能很方便的將表單應(yīng)用集成到你的項(xiàng)目里。

21、mustard

地址：mustard-ui.com/

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

四、javascript工具

22、ScrollHint

地址：appleple.github.io

一個(gè)JS庫(kù)，用于指示元素可以水平滾動(dòng)，并帶有指針圖標(biāo)，如果你在做一個(gè)新手引導(dǎo)，這個(gè)工具將會(huì)是一個(gè)不錯(cuò)的選擇。

23、ToastUI editor

地址：github.com

強(qiáng)大的Markdown編輯器tui.editor,方便集成到你的項(xiàng)目里，這款強(qiáng)大的富媒體編輯器有以下特點(diǎn)：

支持 CommonMark 與 GFM（GitHub Flavored Markdown）兩種標(biāo)準(zhǔn)

支持豐富的擴(kuò)展插件，如顏色選擇器、圖表、UML、表格合并

提供了所見(jiàn)即所得與 Markdown 這兩種模式，在編輯過(guò)程中可以隨時(shí)切換，非常方便。在所見(jiàn)即所得模式下，可以直接從瀏覽器、 Excel、PPT等復(fù)制文本，并且保留原來(lái)的格式

24、FilePond

地址：github.com

Filepond 是一個(gè)用于文件上傳的 JavaScript 庫(kù)，可以上傳任何內(nèi)容，優(yōu)化圖像以獲得更快的上傳速度，并提供一個(gè)出色的，可訪問(wèn)的，流暢的用戶體驗(yàn)。

Filepond 提供了多種上傳方式：拖放，復(fù)制和粘貼文件，瀏覽文件系統(tǒng)或僅使用庫(kù)的API。gzip 壓縮后僅有 21KB ，并且內(nèi)置了圖像優(yōu)化和圖像自動(dòng)調(diào)整功能。

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

25、Dinero.js

地址：sarahdayan.github.io/dinero.js/

一個(gè)用來(lái)創(chuàng)建、計(jì)算和格式化貨幣價(jià)值的不可變的框架。

無(wú)論在銀行應(yīng)用程序、電子商務(wù)網(wǎng)站還是證券交易所平臺(tái)，我們每天都在與金錢(qián)互動(dòng)。我們也越來(lái)越依賴技術(shù)來(lái)處理問(wèn)題。

然而，關(guān)于如何以編程處理貨幣價(jià)值尚無(wú)共識(shí)。雖然金錢(qián)是現(xiàn)代社會(huì)中普遍存在的概念，但相較于日期和時(shí)間之類的東西，它并不是任何主流語(yǔ)言中的一流數(shù)據(jù)類型。結(jié)果，每一種軟件都有自己的處理方式，且伴隨著陷阱。

Dinero.js遵循Fowler的模式更多一點(diǎn)兒。它允許你在JavaScript中創(chuàng)建、計(jì)算和格式化貨幣值。你可以進(jìn)行數(shù)學(xué)運(yùn)算、解析和格式化對(duì)象，使你的開(kāi)發(fā)過(guò)程更加輕松。

該庫(kù)設(shè)計(jì)為不可變和可鏈接的模式。它支持全局設(shè)置，具有擴(kuò)展格式選項(xiàng)，并提供本機(jī)國(guó)際化支持。

26、Swup

地址：github.com/gmrchk/swup

一款適合初學(xué)者的框架，方便靈活易用，讓你能快速制作專業(yè)級(jí)的頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果。

27、Selection.js

地址：simonwep.github.io/selection/

簡(jiǎn)單易用的可視化，支持鼠標(biāo)拖拽、使用Cmd/Ctrl+click 選擇頁(yè)面元素的庫(kù)（支持分組選擇），大大節(jié)省了你的開(kāi)發(fā)時(shí)間。只有3KB大小，不依賴jQuery。

28、Glider.js

地址：nickpiscitelli.github.io/Glider.js/

一個(gè)超快速(25毫秒加載)，輕量級(jí)(小于3KB)，無(wú)依賴性(不需要jQuery)的制作幻燈效果的前端庫(kù)，支持響應(yīng)式，易于擴(kuò)展，方便自定義事件等...，更多特性等待你的發(fā)現(xiàn)！

29、ScrollOut

地址：scroll-out.github.io/

一款幫你制作專業(yè)級(jí)Scroll滾動(dòng)效果（滾動(dòng)視差）的框架，框架大小不到1KB,使用回調(diào)的方式將相關(guān)動(dòng)畫(huà)元素的屬性進(jìn)行實(shí)時(shí)分配，方便你做出個(gè)性化的動(dòng)態(tài)效果。

自己是從事了五年的前端工程師，不少人私下問(wèn)我，2019年前端該怎么學(xué)，方法有沒(méi)有？

沒(méi)錯(cuò)，年初我花了一個(gè)多月的時(shí)間整理出來(lái)的學(xué)習(xí)資料，希望能幫助那些想學(xué)習(xí)前端，卻又不知道怎么開(kāi)始學(xué)習(xí)的朋友。

五、圖標(biāo)、圖表工具

30、Orion Icon Library

地址：orioniconlibrary.com/

多達(dá)6000專業(yè)免費(fèi)的SVG矢量圖標(biāo)，還支持深度的定制，比如更換配色，更改線條粗細(xì)，變換圖標(biāo)風(fēng)格(細(xì)線條、粗線條、扁平)，一鍵生成相關(guān)代碼。

31、Frappe Charts

地址：frappe.io/charts

一款簡(jiǎn)單、專業(yè)、開(kāi)源、現(xiàn)代風(fēng)格的SVG報(bào)表工具,不需要任何依賴庫(kù)，代碼風(fēng)格簡(jiǎn)單，簡(jiǎn)單易用。支持一鍵導(dǎo)出svg代碼。

32、SVGator

地址：www.svgator.com/

如果您希望將Web圖形提升到一個(gè)新的水平，那么動(dòng)畫(huà)SVG就是您的選擇，而SVGator是您可以用來(lái)創(chuàng)建它們的最簡(jiǎn)單的工具之一。

一款專業(yè)級(jí)的SVG動(dòng)畫(huà)制在線制作工具。SVGator還具有代碼管理器面板，因此您可以準(zhǔn)確地看到應(yīng)用程序生成的代碼。SVGator導(dǎo)出干凈，格式良好的代碼。

33、ApexCharts

地址：apexcharts.com/

ApexCharts.JS 是一個(gè)現(xiàn)代化 JavaScript 圖表庫(kù)，用于使用簡(jiǎn)單的 API 構(gòu)建交互式圖表和可視化，功能十分強(qiáng)大。方便你將圖表嵌入到你的Vue、React項(xiàng)目中。

34、MapKit JS

地址：developer.apple.com

一款蘋(píng)果公司提供的地圖工具，如果想制作和蘋(píng)果官方網(wǎng)站一樣的地圖風(fēng)格，這個(gè)工具將是一個(gè)不錯(cuò)的選擇，允許你在地圖上添加交互事件，豐富你的地圖應(yīng)用。

35、Img2

地址：github.com

一款圖片自動(dòng)預(yù)加載和緩存工具，防止圖片閃爍，并使用模糊濾鏡預(yù)先顯示圖片延遲圖片加載，提高網(wǎng)頁(yè)加載速度，使用起來(lái)非常簡(jiǎn)單，你只需要使用

50個(gè)好用的前端框架，千萬(wàn)收好以留備用!