前端開發超級工具

朱凱定

CSS代碼生成器

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

CSS3 Generator

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

終極CSS Generator

CSS Generator是一個免費的在線應用程序，可生成CSS動畫、背景、漸變、邊框和濾鏡等的代碼，界面友好?？芍С諧SS功能的相關瀏覽器信息清晰易發現，生成的代碼干凈準確。

CSS Grid布局生成器

CSS Grid非常棒，用代碼創建網格可以讓你完全控制最終的結果，然而，在編碼的時候，有一個可視化的網格表示是很有幫助的。雖然一些主要的瀏覽器已經有了很好的工具來實現可視化網格，但開發人員可以做出一些額外的幫助。這是CSS Grid生成器可能派上用場的地方。

Dmitrii Bykov編寫的CSS Grid Layout Generator是免費的，可以在線訪問，并且非常靈活。試了一下，發現它在網格容器級別和網格項目級別上可提供很多控制，以及不錯的預覽功能和簡潔的代碼。

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

靜態站點生成器

使用手動編碼的靜態網站和完整的CMS之間進行折衷，同時保留二者的好處。本質上，會生成一個靜態的純HTML網站，使用類似CMS的概念（例如模板）?？梢詮臄祿熘刑崛热荨?/p>

Next.js

Next.js是一個免費的開源框架，用于靜態導出的React應用。其特點包括：

預渲染（Next支持服務器端渲染）；

零配置；

可擴展性；

CSS-in-JS；

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

Gatsby

Gatsby是基于React的免費開源框架，可幫助開發人員建立快速的網站和應用程序。Gatsby提供了大量功能，例如：

React、webpack、現代JavaScript和CSS；

豐富的數據插件生態系統；

漸進式Web應用程序生成；

超級簡單地部署；

為不同的用例定制的預先打包的Gatsby站點以及其他功能。

SVG優化器

網絡上的性能至關重要：訪問者在等待內容加載時可能會不耐煩，搜索引擎往往會懲罰速度緩慢的網站。

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

以下是2個出色的SVG優化器，它們被專業開發人員廣泛使用。

SVGOMG

SVGOMG是一個免費的在線應用程序，可將許多優化選項應用于SVG代碼并預覽最終結果，易于使用，也可以離線使用。

SVG Optimizers

這是另一個很棒的免費在線SVG優化工具，可用于修剪SVG代碼，直觀易用。

動畫庫

動畫在網絡上隨處可見，無論是微妙的微效果，還是大塊內容在屏幕上逐漸展開的故事性運動，都是動畫。

雖然現代的CSS和JavaScript包含了創建酷炫網頁動畫所需的功能，但下面列出的庫肯定能讓你更快地完成工作，并獲得一些驚人的效果。

Animate.css

Animate.css是一個可在Web項目中使用的即用型跨瀏覽器動畫庫，非常適合強調、首頁、滑塊和引導注意的提示。

顧名思義，這個庫是純CSS的，在預包裝的效果中會發現彈跳和閃爍效果、后方入口和出口、淡入和淡出等引人注意的效果以及其他大量效果。它的功能和優點包括：

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

使用方便簡單；

使用CSS自定義屬性（CSS變量）自定義動畫持續時間，延遲和交互的選項；

用于延遲、速度變化和重復的實用類。

GreenSock動畫平臺（GSAP）

GSAP提供“針對現代網絡的超高性能的專業級動畫”。

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

Anime.js

Anime.js是一個輕量級的JavaScript動畫庫，具有簡單而強大的API。它與CSS、SVG、DOM屬性和JavaScript對象一起使用。

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

跨瀏覽器測試

開發人員無法控制使用者要從哪種設備訪問其網站或應用程序。在2019年，超過一半的網絡流量來自移動設備。從整體上看，屏幕尺寸從臺式機、平板電腦到智能手機和可穿戴技術都有所不同。

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

BrowserStack

BrowserStack是一項受歡迎的付費服務，可在2 000多種真實設備和瀏覽器上測試網站或應用程序。它開箱即用，完全安全。

Caniuse

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

你將獲得全球和特定國家/地區級別的最新統計結果，以及有關特定問題和資源等的信息。

Am I Responsive

這是一個免費的在線應用程序，可快速檢查網站在不同屏幕尺寸下的外觀。

可以通過在文本框中輸入要測試站點的URL，或從任何地方使用瀏覽器上的Am I RWD書簽，即可從該應用程序的網站中使用該應用程序。

Responsive Web Design Checker

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

代碼協作和游樂場

以下是一些很棒的工具，可快速共享代碼、原型和測試項目構想。

CodePen

CodePen已經存在了很多年，并且受到前端開發人員社區的喜愛和廣泛使用，它非常適合嘗試概念、原型設計、學習編碼和代碼共享。由其團隊定義如下：

CodePen是一個社交化的開發環境。從本質上講，它允許在瀏覽器中編寫代碼，并在構建時查看結果，對于任何開發人員來說，這是一個有用的和自由的在線代碼編輯器，特別是對于學習代碼的人來說，這是一個賦能。我們主要專注于前端語言，例如HTML、CSS、JavaScript和可轉化為這些內容的預處理語法。

JSFiddle

JSFiddle是一個在線IDE服務和在線社區，用于測試和展示用戶創建和協作的HTML、CSS和JavaScript代碼片段，即fiddles，同時，它允許模擬AJAX調用。2019年，JSFiddle在編程語言（PYPL）人氣指數的搜索次數，排名全球和美國第二，直接排在Cloud9 IDE之后，成為最受歡迎的在線IDE之一。

SoloLearn

SoloLearn是可測試HTML，CSS和JavaScript代碼。它還免費提供基本的編碼課程，以及發人員和學習者使用的論壇，是一個很棒的在線交流平臺。

jsrun.net

這是一個國內版的CodePen，JSFiddle雖好，但是由于服務器在國外，速度非常慢。而jsrun.net速度非?？臁?/p>