30 個前端開發人員必備的頂級工具

在本文中，我爲前端 Web 開發人員彙總了 30 種頂級工具，從代碼編輯器和代碼遊樂場到 CSS 生成器，JS 庫等等。

CSS 代碼生成器

你是否曾經嘗試記住如何聲明漸變，文本陰影，Flexbox 或 Grid 的 CSS 屬性，僅舉幾例？不容易。除非你一再使用某些 CSS 功能及其屬性，否則很難記住所有這些功能。但是，即使是精通 CSS 的人有時也需要對某些屬性進行復習，尤其是如果他們有一段時間沒有使用它們了。

如果你需要一些最新和最偉大的 CSS 的快速幫助，這裏有 CSS 生成器來拯救。輸入數值，預覽結果，抓取生成的代碼並運行。

CSS3 Generator

CSS3 Generator 是一款免費的在線應用，它可以讓你快速編寫一些現代 CSS 功能的代碼，如 Flexbox、漸變、過渡和變換等。

輸入所需的 CSS 值，實時預覽結果，複製並粘貼生成的代碼。此外，此應用程序還會顯示支持 CSS 代碼的瀏覽器及其版本的列表。

終極 CSS Generator

CSS Generator 是一個免費的在線應用程序，可讓您生成 CSS 動畫，背景，漸變，邊框，濾鏡等的代碼。

界面友好，你感興趣的 CSS 功能的瀏覽器支持信息清晰易發現，生成的代碼乾淨準確。

CSS Grid 佈局生成器

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

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

如果你需要幫助，請單擊 “如何使用（How to Use）” 按鈕，然後觀看應用作者提供的演示視頻。

靜態站點生成器

靜態網站生成器代表

… 在使用手動編碼的靜態網站和完整的 CMS 之間進行折衷， 同時保留兩者的好處。本質上，會生成一個 靜態的純 HTML 網站，使用類似 CMS 的概念（例如模板）。可以從數據庫中提取內容，但是更典型地， 使用 Markdown 文件。

這是 StaticGen 網站上列出的前兩個靜態網站生成器。

Next.js

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

Gatsby

Gatsby 是基於 React 的免費開源框架，可幫助 開發人員建立快速的網站和應用程序。

Gatsby 提供了大量功能，例如：

SVG 優化器

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

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

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

SVGOMG

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

SVG Optimizers

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

動畫庫

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

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

Animate.css

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

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

功能包括：

GreenSock (GSAP)

GSAP（GreenSock 動畫平臺）提供 “針對現代網絡的超高性能，專業級動畫”。

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

Anime.js

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

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

跨瀏覽器測試

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

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

Caniuse

我不知道你是怎麼想的，但當我需要了解瀏覽器對任何 HTML、CSS、SVG 和 JavaScript 功能支持的最新信息時 -- 無論這些功能是多麼新奇或晦澀難懂——caniuse 是我的首選網站。

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

Am I Responsive?

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

以下是功能列表：

Responsive Web Design Checker

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

BrowserStack

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

代碼協作和遊樂場

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

GitHub

這個無需多言

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，強力推薦！Codepen、JSFiddle 雖好，但是由於服務器在國外，四度非常慢。而 jsrun.net 速度非常快。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/SsmtdDY7lhe_YMwi59kI2A

猜你喜歡