【好物分享】分享給前端開發的28個資源(網站、軟體、外掛),簡直是提高效率必備

語言: CN / TW / HK

theme: fancy highlight: atom-one-light


Hi~,我是一碗周,如果寫的文章有幸可以得到你的青睞,萬分有幸~

🍇 寫在前面

對於開發來說,尤其是前端開發,有一個好的開發環境真的很提升工作效率,這裡我整理了28個頂級資源,包括但不限於網站、軟體和外掛(瀏覽器外掛、VScode外掛),可以點贊收藏保留一下,萬一在什麼時候需要的

🍈 網站分享

🍉 學習類

做前端的都一直有一個感覺,就是卷不動了,這裡整理了幾個學習網站,除此之外,每個技術的官方文件是學習它的最簡單的方式

MDN Web Docs

說道學習網站,首先第一個推薦的肯定是MDN啊,這個我就不多解釋了

01.png

W3Cchools

同MDN類似,也是一個老牌的前端學習網站

02.png

現代 JavaScript 教程

以最新的 JavaScript 標準為基準。通過簡單但足夠詳細的內容,為你講解從基礎到高階的JavaScript相關知識。

03.png

Learn Git Branching(學習Git分支)

Learn Git Branching在網站提供的沙盒中學習Git中的分支操作,從簡入難漸進學習,非常的有趣。

04.png

力扣(刷演算法必備)

這個我就不多嗶嗶了,刷演算法必備。

05.png

CSSBattle(通關式學習CSS)

該網站內建了很多關卡,使用CSS復原每個關卡中內容,可以逐步的精進我們的CSS技術。

06.png

VisuAlgo(資料結構和演算法動態視覺化)

這個網站提供了很多資料結構和演算法的視覺化,通過該網站學習資料結構和演算法時會方便很多。

07.png

🍊 工具類

Can I Use

檢視HTML標籤、CSS屬性和各種API的相容器非它莫屬,前端必備。

08.png

Readme.so(用最簡單的方式建立README)

有寫過README的同學都知道這個東西寫起很麻煩,這個網站提供了一個編輯器以及一些模板,編寫非常的方便和快捷。

09.png

Carbon(程式碼片段轉圖片)

Carbon是一個用於將原始碼轉換成圖片的一個網站,支援多種語言以及多種主題。

10.png

Responsively(預覽神器)

如果你在開發一個響應式的Web程式,還在為了切換不同的螢幕解析度而苦惱時,這個網站幫你解決了這個問題,可以讓你在一個視窗畫面中觀看各個螢幕尺寸下的畫面狀態。

11.png

圖片壓縮工具(Picdiet、TinyPNG)

12.png

13.png

convertio(檔案格式轉換器)

一個線上的檔案格式轉換器

14.png

Excalidraw(畫圖神器)

這個網站可以畫一些流程圖之類的圖片,很多jy都在用。

15.png

🍋 CSS相關

Animista(CSS動畫參考)

這個網站中提供了很多CSS的動畫參考,如果動畫不會寫了,可以來這個網站找一些參考。

16.png

Neumorphism.io(視覺化陰影調整)

這個網站給你提供了一些配置項,可以視覺化的調整CSS中的陰影。

17.png

Clippy-CSS

通過CSS中的clip-path屬性來裁剪出各種奇形怪狀的圖形。

18.png

FANCY-BORDER-RADIUS(異形邊框)

通過broder-radius屬性製作異性邊框。

19.png

cubic-bezier(動畫曲線視覺化)

該網站提供了可以用於設定貝塞爾曲線的視覺化頁面,以及用於動畫的效果對比。

20.png

CSS Gradient(漸變視覺化)

提供一個視覺化頁面設定線性漸變以及徑向漸變,還提供了對應的CSS程式碼。

21.png

CSS Grid Generator

一個Grid佈局生成器。

22.png

🍌 軟體分享

這裡筆者是Windows,只能給你分享一些Windows的軟體,像VSCode這種就不推薦了,前端人都知道的軟體不會推薦。

Windows Terminal

win11的預設終端,在win10中我強烈推薦安裝。

23.png

draw.io

一個畫圖軟體,我文章中的所有圖幾乎全部都出自這個軟體。

24.png

這個軟體有Vscode外掛版以及網頁版

PowerToys

微軟自己做的一款小工具,內部包括很多實用的小外掛,用微軟的話說就是優化Windows體驗,提供工作效率。

25.png

uTools

新一代效率工具平臺,用過之後真的離不開了,真的挺良心的一款國產軟體。

26.png

🍍 外掛分享

外掛分享在掘金中到處都是,這裡我就分享幾個我覺得比較不錯的,太常見的我就不佔文章篇幅了。

🥭 瀏覽器外掛

Global Speed: 影片速度控制

影片學習(追劇)必備,統一所有網站的影片倍速,不用開啟一個影片開一次二倍速。

27.png

iGuge

懂得都懂吧,這裡不介紹了。

28.png

🍎 VScode外掛

暫時沒啥推薦的,感覺我用的外掛大家都在用,後面有了新鮮的在更新吧~

🍏 寫在最後

到這文章就結束了,這篇文章將會持續更新,有好的資源將會在文章中進行更新,趕緊收藏一波吧。

各位看官如果有好的資源可以在評論區進行評論,會增加到文章中的呦\~