給徒弟說一下前端開發工程師的19個救生工具

時間 2020-07-07

標籤徒弟一下前端開發工程師救生工具简体版

原文原文鏈接

今天看見徒弟寫個css屬性這麼慢，是在是看不下去了，就問了他有沒有用過一些輔助工具，他說沒有，額。。。我也是很無語，沒辦法，誰叫我是他師傅呢。仍是要盡到一個師傅的責任。因此就利用休息時間給他講了19個輔助工具，滿滿的乾貨呀。我這也是第一次給別人說這麼多，這麼詳細，想一想還不錯，教給別人東西的感受是不同的，別說是徒弟呢。css

CSS代碼生成器

我："你曾經是否是想記住如何聲明漸變，文本陰影，Flexbox或Grid的CSS屬性。前端

徒弟："是的"webpack

我：「那你還真是不容易呀，你若是不是一直在用某些css功能和屬性，否則很難記住這些玩意兒呀，除非你是記憶大師，可是你也不是呀。就算是精通css的人有時也要進行屬性的複習。師傅我就是這樣，不斷去複習，不是說看一遍就ok了。這裏師傅就給你推薦一個輔助工具，css生成器」程序員

徒弟：「謝謝師傅」web

我：「都是打工的，別說客氣話，作技術的要懂得分享嘛。若是都掖着藏着，也很難提高本身。來，看這，仔細聽好了」數據庫

CSS3 Generator

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

輸入所需的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應用。其特色包括：

預渲染（Next支持服務器端渲染）
零配置
可擴展性
CSS-in-JS
很棒的文檔
和更多。

Gatsby

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

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

React，webpack，現代JavaScript和CSS的強大功能
豐富的數據插件生態系統
漸進式Web應用程序生成
超級簡單的部署
爲不一樣的用例定製的預先打包的Gatsby站點
和更多。

SVG 優化器

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

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

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

SVGOMG

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

SVG Optimizers

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

動畫庫

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

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

Animate.css

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

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

功能包括：

使用npm，Yarn或CDN快速安裝
使用方便簡單
使用CSS自定義屬性（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?

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

如下是功能列表：

你能夠經過在文本框中輸入要測試的站點的URL，或從任何地方使用瀏覽器上的「Am I RWD」書籤來從該應用程序的網站中使用該應用程序。
http://localhost/ works。
能夠在顯示你網站的每一個設備上單擊並滾動以進行測試。

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。