iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
1
Modern Web

穢土轉生之術~ 重構那些自己寫的Code ~系列 第 13

[day13]-假日分享系列之「前端必備小工具」

前端必備工具介紹


因為Amos老師在之前有創了一個Line團名為阿摩斯的推坑教,很快的就達到500人滿團
(好險我有趕快加進去/images/emoticon/emoticon07.gif
在裡面各式各樣的問題都可以問,生活啊~技術啊等等~
有興趣的人還有2團可以加入,或是Tommy老師開的賴群也可以加入,想加入的話在底下留言吧~

今天因為在Line團認識了很多前端的朋友,有一位朋友因為剛入前端,想知道我用什麼工具及剛入行要注意什麼事情,所以寫了這一篇文,希望可以幫助大家~


Chrome外掛 - 輔助格線類

Design Grid Overlay
連結:(https://chrome.google.com/webstore/detail/design-grid-overlay/kmaadknbpdklpcommafmcboghdlopmbi )

在2017年的鐵人賽有介紹一款輔助格線外掛-Bootstrap Grid,今天要來介紹另外一款格線外掛-Design Grid Overlay

這一款的格線外掛多了水平線、格線系統可以調的更細緻,例如版面從Large到Small的尺寸可以設定斷點,還有Columns也可以自由設定要多少欄,還有可以看一鍵看網站的Labels尺寸為多少(這個功能我剛剛才發現XD)。
最近因為在做一個平台版面的斷點都是客製化的,所以常用到這個外掛。

Bootstrap 3 Helper (Resizes, Duplicates, Doc)
連結:(https://chrome.google.com/webstore/detail/bootstrap-3-helper-resize/bnkadmnhdpkpbfmaehgjeijgopkjinbl)

其實他是一款複合式的外掛,可以直接連到官方網站看文件(不過文件是Bootstrap 3的),又可以直接縮放到Bootstrap的斷點,通常我都是使用他視窗縮放的這個功能,加上用手拉視窗的時候他也會偵測到是哪個斷點,顯示在視窗的右上角,好用推薦!

Chrome外掛 - 分析類

WhatRuns
連結:(https://www.whatruns.com/)

WhatRuns主要的功能是可以分辨出當下的頁面用了哪些網頁技術,身為前端開發者知己知彼 百戰百勝,看到不錯的頁面想知道別人怎麼做的?用這個外掛就可以知道是用什麼技術和包了什麼東西在裡面,可以參考看看。
先說WhatRunswappalyzer是差不多的,我會喜歡一個網站的話,打開這兩個外掛分析一下是用什麼技術做的,因為有可能wappalyzer沒分析到的WhatRuns有,WhatRuns沒有wappalyzer有,交叉比對一下!

Perfmap
連結:(https://chrome.google.com/webstore/detail/perfmap/hgpnhiajcdppfbogcpfdgcceepgkhdmk)

Perfmap是一款可用在網頁優化的外掛,他可以偵測網頁的圖片載入的時間並顯示載入熱度圖,越偏紅色代表載入速度越慢,反之越偏綠色表示載入越快,在製作網站的時候可以自己測測看網站有哪個圖片是需要改進的,做為優化網站的一個測試。

Markdown Viewer
連結:(https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk)

這是一款可以即時預覽Markdown格式文件的外掛,影片可看出有裝和沒裝Markdown Viewer的差別。
不知道大家需不需要寫程式相關的文件?
Markdown的目標是實現「易讀易寫」屬於輕量級標記式語言,像github等等的平台都使用Markdown格式來寫程式文件,而這個外掛可以將md顯示不同平台的風格,方便撰寫時閱覽~

應用程式工具類

xScope
連結:(https://xscopeapp.com/)

超強大測量軟體!這是我去上Amos老師的客製化進階 RWD 手機版網頁設計班-假日班時,看到老師在用的測量工具!心之音:果然是師傅啊~連工具都這麼強大!
他量測的範圍不限制在網頁裡,所有東西都可以量測!光是測量點不限制在網頁就很值得下載來用~
不過他是需要付費的軟體,像我因為用太久了就會跳出剩下可用的時間,這些時間已經很夠用了。
xScope還有其他的功能,像是尺規、格線等等,可至官網觀看其餘功能~

Magnet
連結:(http://magnet.crowdcafe.com/)

"整理你的工作環境"
誠如slogan所說,這是一款視窗整理軟體,幫你排好視窗的位置,要切上下左右、幾分之幾都可,讓你的視窗乖乖排好不再雜亂的開發~

以上是我在開發上常用的協助工具,用好的工具可以提升開發的效率!今天分享給大家~

希望大家有什麼想知道的內容,歡迎在底下留言讓我知道,感激不盡!

文後


今天去了海邊散散心,大海真漂亮:)


團隊主題連結

CssCoke - Amos 老師

塔塔默



上一篇
[day12]-使用網頁開啟相機掃描QR Code之WebRTC小小Demo
下一篇
[day14]-使用網頁開啟相機掃描QR Code-instascan介紹+實際應用
系列文
穢土轉生之術~ 重構那些自己寫的Code ~30

1 則留言

0
jing_5566
iT邦新手 5 級 ‧ 2020-12-21 21:32:26

想加 line 還有機會嗎 QQ

你好:不好意思滿人了耶QQ不過你可以加入二團~
如果有興趣在拉你進來~^^

我要留言

立即登入留言