作為前端,需要知道這些工具,解放我的重複勞動力

前端小智發表於2022-04-19
本文首發於微信公眾號:大遷世界, 我的微信:qq449245884,我會第一時間和你分享前端行業趨勢,學習途徑等等。
更多開源作品請看 GitHub https://github.com/qq449245884/xiaozhi ,包含一線大廠面試完整考點、資料以及我的系列文章。

大家好,我是小智,作為前端開發者,我們必須知道一些好的工具來我們自動生成程式碼,提高我們的開發效率(摸魚),今天,介紹12個常用的工具,希望對你所有幫助。

1.Coolers

地址:https://coolors.co/

Coolers 為我們提供一個配色方案生成器連同許多受歡迎的配色方案。

image.png

2. ColorBox

地址:https://colorbox.io/

ColorBox 允許我們使用各種選項引數來建立自己的配色方案。

image.png

3. Adobe Color

地址:https://color.adobe.com/

圍繞著色輪旋轉,透過與它們一起玩耍,瞭解更多關於顏色的知識,同時還有許多令人難以置信的漂亮的顏色方案可供搜尋!

image.png

4. Wordmark

地址:https://wordmark.it/

輸入句子/單詞,然後滾動檢視它在網路安全字型中的效果!

image.png

5. PNGtoSVG

將 png 轉成 svg

地址:https://pngtosvg.com/

image.png

6. CSS3 Generator

地址:http://css3generator.com/

提供完美的CSS3程式碼,在每個瀏覽器上都可以使用。

image.png

7. CSS Filters

對圖片進行濾鏡的處理。

地址:https://www.cssfilters.co/

image.png

8. Fancy Border Generator

地址:https://9elements.github.io/f...

厭倦了那些基本的邊框半徑的東西,在這裡為你的Divs或按鈕或任何你喜歡的元素建立花哨的邊框!

image.png

9. Blob Maker

地址:https://passionhacks.com/blob...|ffc371&o=0

給你的網站增加一些滴狀斑點,讓網站看起來更可愛些。

image.png

10. Blob Maker 2

地址:https://www.blobmaker.app/

image.png

11. Get Waves

地址:https://getwaves.io/

建立波浪形工具。

image.png

12. Clippy

地址:https://bennettfeely.com/clippy/

我最常使用的最佳剪貼工具。有助於建立非常漂亮的剪貼路徑!

image.png


程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug

原文:https://dev.to/knaagar/become...

交流

有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

相關文章