前端開發(fā)超級(jí)工具

朱凱定

CSS代碼生成器

你是否曾經(jīng)嘗試記住如何生成漸變、文本陰影、Flexbox或Grid的CSS屬性，僅舉幾例？不容易。除非使用某些CSS功能及其屬性，否則很難記住所有這些功能。但是，即使是精通CSS的人有時(shí)也需要對(duì)某些屬性進(jìn)行復(fù)習(xí)，尤其是有一段時(shí)間沒有使用它們的時(shí)候。如果你需要一些最新的CSS快速幫助，這里有CSS生成器來拯救。

CSS3 Generator

CSS3 Generator是一款免費(fèi)的在線應(yīng)用，它可以讓你快速編寫一些現(xiàn)代CSS功能的代碼，如Flexbox、漸變、過渡和變換等。只要輸入所需的CSS值，實(shí)時(shí)預(yù)覽結(jié)果，復(fù)制并粘貼生成的代碼。此外，還會(huì)顯示支持CSS代碼的瀏覽器及其版本的列表。

終極CSS Generator

CSS Generator是一個(gè)免費(fèi)的在線應(yīng)用程序，可生成CSS動(dòng)畫、背景、漸變、邊框和濾鏡等的代碼，界面友好。可支持CSS功能的相關(guān)瀏覽器信息清晰易發(fā)現(xiàn)，生成的代碼干凈準(zhǔn)確。

CSS Grid布局生成器

CSS Grid非常棒，用代碼創(chuàng)建網(wǎng)格可以讓你完全控制最終的結(jié)果，然而，在編碼的時(shí)候，有一個(gè)可視化的網(wǎng)格表示是很有幫助的。雖然一些主要的瀏覽器已經(jīng)有了很好的工具來實(shí)現(xiàn)可視化網(wǎng)格，但開發(fā)人員可以做出一些額外的幫助。這是CSS Grid生成器可能派上用場(chǎng)的地方。

Dmitrii Bykov編寫的CSS Grid Layout Generator是免費(fèi)的，可以在線訪問，并且非常靈活。試了一下，發(fā)現(xiàn)它在網(wǎng)格容器級(jí)別和網(wǎng)格項(xiàng)目級(jí)別上可提供很多控制，以及不錯(cuò)的預(yù)覽功能和簡(jiǎn)潔的代碼。

如果需要幫助，請(qǐng)單擊“如何使用（How to Use）”按鈕，然后觀看演示視頻。

靜態(tài)站點(diǎn)生成器

使用手動(dòng)編碼的靜態(tài)網(wǎng)站和完整的CMS之間進(jìn)行折衷，同時(shí)保留二者的好處。本質(zhì)上，會(huì)生成一個(gè)靜態(tài)的純HTML網(wǎng)站，使用類似CMS的概念（例如模板）?？梢詮臄?shù)據(jù)庫(kù)中提取內(nèi)容。

Next.js

Next.js是一個(gè)免費(fèi)的開源框架，用于靜態(tài)導(dǎo)出的React應(yīng)用。其特點(diǎn)包括：

預(yù)渲染（Next支持服務(wù)器端渲染）；

零配置；

可擴(kuò)展性；

CSS-in-JS；

很棒的文檔以及其他功能。

Gatsby

Gatsby是基于React的免費(fèi)開源框架，可幫助開發(fā)人員建立快速的網(wǎng)站和應(yīng)用程序。Gatsby提供了大量功能，例如：

React、webpack、現(xiàn)代JavaScript和CSS；

豐富的數(shù)據(jù)插件生態(tài)系統(tǒng)；

漸進(jìn)式Web應(yīng)用程序生成；

超級(jí)簡(jiǎn)單地部署；

為不同的用例定制的預(yù)先打包的Gatsby站點(diǎn)以及其他功能。

SVG優(yōu)化器

網(wǎng)絡(luò)上的性能至關(guān)重要：訪問者在等待內(nèi)容加載時(shí)可能會(huì)不耐煩，搜索引擎往往會(huì)懲罰速度緩慢的網(wǎng)站。

優(yōu)化圖形是構(gòu)建快速網(wǎng)站和應(yīng)用程序的必要步驟，SVG圖形也不例外。為確保SVG代碼干凈整潔，使用SVG優(yōu)化器已成為前端開發(fā)人員工作流程中必不可少的步驟。

以下是2個(gè)出色的SVG優(yōu)化器，它們被專業(yè)開發(fā)人員廣泛使用。

SVGOMG

SVGOMG是一個(gè)免費(fèi)的在線應(yīng)用程序，可將許多優(yōu)化選項(xiàng)應(yīng)用于SVG代碼并預(yù)覽最終結(jié)果，易于使用，也可以離線使用。

SVG Optimizers

這是另一個(gè)很棒的免費(fèi)在線SVG優(yōu)化工具，可用于修剪SVG代碼，直觀易用。

動(dòng)畫庫(kù)

動(dòng)畫在網(wǎng)絡(luò)上隨處可見，無(wú)論是微妙的微效果，還是大塊內(nèi)容在屏幕上逐漸展開的故事性運(yùn)動(dòng)，都是動(dòng)畫。

雖然現(xiàn)代的CSS和JavaScript包含了創(chuàng)建酷炫網(wǎng)頁(yè)動(dòng)畫所需的功能，但下面列出的庫(kù)肯定能讓你更快地完成工作，并獲得一些驚人的效果。

Animate.css

Animate.css是一個(gè)可在Web項(xiàng)目中使用的即用型跨瀏覽器動(dòng)畫庫(kù)，非常適合強(qiáng)調(diào)、首頁(yè)、滑塊和引導(dǎo)注意的提示。

顧名思義，這個(gè)庫(kù)是純CSS的，在預(yù)包裝的效果中會(huì)發(fā)現(xiàn)彈跳和閃爍效果、后方入口和出口、淡入和淡出等引人注意的效果以及其他大量效果。它的功能和優(yōu)點(diǎn)包括：

使用npm、Yarn或CDN快速安裝；

使用方便簡(jiǎn)單；

使用CSS自定義屬性（CSS變量）自定義動(dòng)畫持續(xù)時(shí)間，延遲和交互的選項(xiàng)；

用于延遲、速度變化和重復(fù)的實(shí)用類。

GreenSock動(dòng)畫平臺(tái)（GSAP）

GSAP提供“針對(duì)現(xiàn)代網(wǎng)絡(luò)的超高性能的專業(yè)級(jí)動(dòng)畫”。

其高度直觀的JavaScript驅(qū)動(dòng)語(yǔ)法可以立即構(gòu)建出色的動(dòng)畫。從DOM元素和JavaScript對(duì)象到SVG、Canvas和WebGL身臨其境的體驗(yàn)，可以使用GSAP進(jìn)行動(dòng)畫制作的對(duì)象沒有任何限制。此外，GSAP是跨瀏覽器的，并且向后兼容，同時(shí)提供了出色的文檔和支持社區(qū)。

Anime.js

Anime.js是一個(gè)輕量級(jí)的JavaScript動(dòng)畫庫(kù)，具有簡(jiǎn)單而強(qiáng)大的API。它與CSS、SVG、DOM屬性和JavaScript對(duì)象一起使用。

完全開源，憑借其直觀的語(yǔ)法和出色的文檔，可以立即使用Anime.js并開始運(yùn)行。

跨瀏覽器測(cè)試

開發(fā)人員無(wú)法控制使用者要從哪種設(shè)備訪問其網(wǎng)站或應(yīng)用程序。在2019年，超過一半的網(wǎng)絡(luò)流量來自移動(dòng)設(shè)備。從整體上看，屏幕尺寸從臺(tái)式機(jī)、平板電腦到智能手機(jī)和可穿戴技術(shù)都有所不同。

作為前端開發(fā)人員，確保網(wǎng)頁(yè)在任何屏幕尺寸下都可以使用是工作的核心組成部分。雖然沒有什么比得上直接在不同的瀏覽器和平臺(tái)上測(cè)試網(wǎng)站和應(yīng)用程序，但以這種方式不是大多數(shù)人的選擇。下面列出的服務(wù)和應(yīng)用程序可以提供幫助。

BrowserStack

BrowserStack是一項(xiàng)受歡迎的付費(fèi)服務(wù)，可在2 000多種真實(shí)設(shè)備和瀏覽器上測(cè)試網(wǎng)站或應(yīng)用程序。它開箱即用，完全安全。

Caniuse

當(dāng)你需要了解瀏覽器對(duì)任何HTML、CSS、SVG和Java Script功能支持的最新信息時(shí)，無(wú)論這些功能是多么新奇或晦澀難懂———Caniuse都是首選網(wǎng)站。

你將獲得全球和特定國(guó)家/地區(qū)級(jí)別的最新統(tǒng)計(jì)結(jié)果，以及有關(guān)特定問題和資源等的信息。

Am I Responsive

這是一個(gè)免費(fèi)的在線應(yīng)用程序，可快速檢查網(wǎng)站在不同屏幕尺寸下的外觀。

可以通過在文本框中輸入要測(cè)試站點(diǎn)的URL，或從任何地方使用瀏覽器上的Am I RWD書簽，即可從該應(yīng)用程序的網(wǎng)站中使用該應(yīng)用程序。

Responsive Web Design Checker

Responsive Web Design Checker，即響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)檢查器，是另一個(gè)免費(fèi)的在線應(yīng)用，可以測(cè)試網(wǎng)站在不同的屏幕尺寸和各種設(shè)備上的外觀。其中包括各種臺(tái)式機(jī)和筆記本電腦，Apple iPad Retina和Amazon Kindle Fire等平板電腦，以及Apple iPhone 6/7 Plus，三星Galaxy等智能手機(jī)。

代碼協(xié)作和游樂場(chǎng)

以下是一些很棒的工具，可快速共享代碼、原型和測(cè)試項(xiàng)目構(gòu)想。

CodePen

CodePen已經(jīng)存在了很多年，并且受到前端開發(fā)人員社區(qū)的喜愛和廣泛使用，它非常適合嘗試概念、原型設(shè)計(jì)、學(xué)習(xí)編碼和代碼共享。由其團(tuán)隊(duì)定義如下：

CodePen是一個(gè)社交化的開發(fā)環(huán)境。從本質(zhì)上講，它允許在瀏覽器中編寫代碼，并在構(gòu)建時(shí)查看結(jié)果，對(duì)于任何開發(fā)人員來說，這是一個(gè)有用的和自由的在線代碼編輯器，特別是對(duì)于學(xué)習(xí)代碼的人來說，這是一個(gè)賦能。我們主要專注于前端語(yǔ)言，例如HTML、CSS、JavaScript和可轉(zhuǎn)化為這些內(nèi)容的預(yù)處理語(yǔ)法。

JSFiddle

JSFiddle是一個(gè)在線IDE服務(wù)和在線社區(qū)，用于測(cè)試和展示用戶創(chuàng)建和協(xié)作的HTML、CSS和JavaScript代碼片段，即fiddles，同時(shí)，它允許模擬AJAX調(diào)用。2019年，JSFiddle在編程語(yǔ)言（PYPL）人氣指數(shù)的搜索次數(shù)，排名全球和美國(guó)第二，直接排在Cloud9 IDE之后，成為最受歡迎的在線IDE之一。

SoloLearn

SoloLearn是可測(cè)試HTML，CSS和JavaScript代碼。它還免費(fèi)提供基本的編碼課程，以及發(fā)人員和學(xué)習(xí)者使用的論壇，是一個(gè)很棒的在線交流平臺(tái)。

jsrun.net

這是一個(gè)國(guó)內(nèi)版的CodePen，JSFiddle雖好，但是由于服務(wù)器在國(guó)外，速度非常慢。而jsrun.net速度非常快。