設計師必備的TinyPNG 與TinyPNG4Mac套件

 

TinyPNG是一個老牌子線上壓縮圖檔的網站，雖然叫做Tiny"PNG"，其實JPG也可以壓縮，效果都還不錯，對於會在意網站上圖檔K數的公司或外廣是很重要的工具！

reset你的reset.css...unreset.css | 前端

好饒口的標題呀🤣

reset.css是一個網頁常用的CSS重置方式，他把標準的HTML TAG所自帶的屬性全部拔掉，減輕了不少設計師的痛苦，這一用也不知道多少年了，真的是一個很棒的方法！

這兩天在討論區看到一個有趣的問題，有人在問怎樣只有網頁的某一部份拔掉reset.css的效果，讓他還原到初始狀態，也就是reset原本的reset.css😂，原本想到最土法鍊鋼的做法，就是自己用<style>...</style>把基本樣式寫回來，後來看到，阿呀，原來有人做好了💡，也就是今天要分享的unreset.css！

unreset.css是由Binary Stash所寫好的，原理很簡單，把需要還原的部份多包一層後給他加上class="unreset"，就可以了，方便好用！但還是建議大家，盡量不要做這麼無聊的事情好嗎😅

Feather 羽量級Icon Font | 前端

 

最近工作上學到一些小東西覺得還蠻實用的，又怕之後忘記，所以老樣子，寫起來XDDD

這次介紹的是Feather，他一套羽量級級的Icon Font，比起主流的fontawesome來說，精簡了許多，只有留下兩百多個較常用的Icon

使用方式也蠻簡單的，雖然官網寫的有點多，但大概就是分三步驟

STEP 1. 安裝  

看是安裝或是使用CDN方式都可，我是使用CDN，官方提供兩個，擇一即可～

<script src="https://unpkg.com/feather-icons"></script>

<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

STEP 2. 加上JS 

以下這段要記得貼

<script> feather.replace()</script> 

STEP 3. 選Icon

ICON的預設HTML格式為

<i data-feather="circle"></i>

只要將circle替換成要使用的Icon名就可以

Icon在首頁就有完整列表可以使用，不過設計有點怪，點到名字都變下載SVG，有點不方便XD

Feather在使用上是真的蠻簡單好用的，如果網站需求不大，可以考慮使用看看！～

Sublime Text個人常用套件 | 前端

在網頁設計的這條不歸路上，最早接觸的編輯軟體應該跟大多數七年級生一樣都是Frontpage，想當初我們還是從IE內建的版本開始使用，後來則出現了Dreamweaver，隨著Frontpage改名(現在也消失了?)後，也就變成Dreamweaver獨佔天下好一陣子。

近幾年，純文字編輯器又開始夯了，在之前的公司時，一直聽到F2E介紹Sublime Text，當時只覺得這一團黑的鬼東西誰要用呀，後來才知道這東西其實超！好！用！！！

原本我都是用Sublime Text 2，之前也已經出Sublime Text 3好一陣子，新增一些還不錯的地方想說來更新一下，但套件不能夠自動繼承過去(有些甚至不相容)，剛好前陣子Macbook Air重灌Yosemite，就順便把LIST寫一寫，以防之後又忘記自己裝過那些XDDD