Yijen's blog

關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 324196

    累積人氣

  • 60

    今日人氣

    0

    訂閱人氣

10個前端工程師必備實用網路小工具推薦 (10 helpful web tools for F2E and web developers)

4. tinypng.com — 超棒的圖片無損壓縮熊貓醬 前往

嗨!大家好,跟你們介紹牠是熊貓先生,牠喜歡吃竹子,也喜歡吃掉圖片多餘的 size XDD!這是一個線上的 PNG 圖片無損壓縮服務 for free of course!
用過一次就愛上了,壓縮的效果真的很強,而且初期只支援壓縮 .png 檔案的 Panda 最近也支援 .jpg / .jpeg 圖檔的壓縮了。在追求速度的網路世界,如果你的網站精美炫麗,但開啟它出來需要等個30秒至1分鐘,使用者早跑了。上面提到 PageSpeed 對於網站優化其中另一項最大重點就是,圖片(尺寸)的最小化,這是一個很基本的要求!所以才會有這些「(畫質)無損壓縮」的服務出來,而熊貓是目前用過最好用的,一般 Designer 慣用 Adobe Photoshop 來處理輸出圖片,但很詭異的是,PS 輸出的圖檔,往往尺寸無法壓得很低,輸出之後再丟上 tinypng.com 壓過一遍往往可以再減輕 30~40% 左右,重點是品質不變!

5. www.jpegmini.com 前往

同上,也是另一個圖片壓縮工具,它的特色是上傳後可以即時顯示 Before/After 讓你看到圖片壓縮前後的變化,不過這個工具的網路介面只是 Trail Version ,它另外提供不同版本的軟體下載,就需要付費了,如果你要處理的圖片量十分地龐大,可以在試用過後再考慮是否購買下載。

6. Placeholt.it 前往

又是一個 ☆☆☆☆☆ 殺手級超好用的網路工具 — placehold.it 。簡單說,它提供了一個快速的圖片代用服務,當一個專案還在建構 wireframe or mockup 的期初,網頁開發者想先建立一個靜態 template Demo 的同時,不必尋求設計師切一些暫用的圖片來用,只要透過 placehold.it 來做,就可以立刻獲得圖片,且圖片上面註明了它本身的 dimemsion 長x寬,更利於 Demo。

How to use it?

只要把你想要呈現的圖片尺寸 寬 x 高 帶入該網址後方 / 當成 parameter,然後將其設置於 img tag 中的 src 屬性即可。

http://placehold.it/300x200 fake img

輸出的圖片預設是灰底白字,然而,你也可以帶入第2層(背景色)或第3層(字體色)來客製化你的 temp image

http://placehold.it/300x200/007C2D/FFF200 fake img with custom bg color and font color

可以想像成它是一個快速的免空圖片,讓開發者不必為了找圖片來完成 template 呈現而糾結 :D (當然,這 tool 只是讓你方便 demo ,網頁正式上線後還是得換上自己家(domain)的圖片哦!

7. http://mydevice.io 前往

曾經為了手機版網頁開發而傷腦筋?不同的 Device Viewport width 是多少? dpi 是多少?能支援哪一些 CSS3 / HTML5 / JS API? 沒問題! mydevice.io 通通告訴你。當初發現這個 tool 時我好像發現金礦一樣,眼睛都亮了!它的介面很簡單卻把所有「手機版網頁開發所需要的資訊」都告訴你,網站有良好的排版也支援 RWD(Responsive web design) ,透過大手機小手機或是平板瀏覽都可以。網頁最頂上設計了尺標,能讓你一目瞭然目前視窗的寬度。

其中羅列 device viewport width, css/js width and height, pixel ratio, resolution, root font-size, orientation, support css/js/html5 features, even User Agent info... 最後還貼心地放了一張 width 320px 的參考圖,讓你用 Mobile Device 上瀏覽 mydevice.io 時可以知道 w320 圖片在你的 device 上看起來是佔多少比例!

8. Resizer 前往

緊接著這一個比較特別,它也是 web tool 但是非網頁,正確說法它是一串 JavaScript Code 。將其 code 加入我的最愛(書籤工具列),在瀏覽網頁時,按它一下,它會在網頁上方帶出一個 Resizer 小工具,裡面的 icon 幫助你來用模擬各種不同(解析度)裝置的呈現,如果你正在瀏覽的網頁 CSS 有利用 media query 來做 RWD, Resizer 就可以幫助你來看看網頁在各種尺寸螢幕上的呈現,不必大費周章自己動手放大縮小瀏覽器或是換手機來檢查。當然,再提醒一次,這僅限於有使用 css 的 media query 作的網頁,若是動態網站作的是 detect user agent 採用 mobile only 的作法,那麼切換到小尺寸也是看不出差異的喔。

9. caniuse.com 前往

「我可不可以用 ○○○ 功能?」
Domain Name 已經告訴你本網站是做什麼用的了, Caniuse.com 就是一個 Cross Browser compatibility Check Tool 跨瀏覽器相容性檢測站。對前端工程師(開發人員)來說實用程度非常地高,比起 w3school.com 要好得多。它最大的特色就是可用「關鍵字搜尋」,輔以「表格式的圖表呈現」,讓 Web Developer 可以以最快的速度,查到所需相容性情報。
不只如此,查詢結果包含了「目前、過去、未來」各種瀏覽器版本的支援程度,讓你可以掌握開發的難易度及時程。

除了 css attributes, javascript API, HTML5 以外,其他例 SVG 等等與 Web Develop 相關的技術的相容性都可以查,總之,想知道什麼就輸入關鍵字吧!

10. DevDocs.io 前往

如果說 caniuse.com 在 Web Development 領域裡算是一本 QA大全,那麼 DevDocs.io 就是一本厚實的「百科全書」了。除了 FrontEnd 相關的 HTML, CSS, JS 之外,它也收藏了一些熱門的 Framework e.g. jQuery, Angular, Backbone, D3.js, Grunt, Sass, Less etc. 甚至 BackEnd 的 PHP, C#, Ror 等等也全都有,分類齊全同時也一樣有 Search 功能,讓你在一個網站中就可以查到所有你想查 Documents 包含定義、用法、範例,以及 Browser compatibility (當然!這部分還是 caniuse.com 更優良),如果你今天想要深入研究某一個語言或API裡的某一個 Method 用法,來這裡查準沒錯 :D

結語

又要總結了,咳咳。零零總總寫了不少字,這些 Web Tools 在我當 FrontEnd 的這七八年來,幫助很大,全都加在自己的 Bookmarks 且分類分得很好(是秘笈啊!)。其中一些 Web Service 不僅免費,功能還一年比一年更加優化,造福了不少網頁開發者。於是小弟在此分享給網民,期望有助於一些 F2E 或是 Web Developer 哈哈! That's all.

~おわり~

相簿設定
標籤設定
相簿狀態