Bobo的技術時光屋

前言： 以前使用 Windows 的時候，一直有耳聞搞設計的都熱愛用 Mac，而自己使用了 Mac 一陣子卻感覺不出來差異，直到最近遇到了 Sketch3！這套設計界的神兵利器，讓我眼睛為之一亮！ 這顆「黃鑽石」可以說是設計界的 Sublime Text，都是很輕量、又支援超多外掛，用起來就是一整個行雲流水呀~ 尤其在 web design 與圖形設計方面，平常使用幾乎可以取代 photoshop、illustrator。 Sketch3 亮點整理如下： 超輕量，讓你愛上的瞬開的體驗 外掛超多，各種神奇的套件都有 操作容易上手，行雲流水的境界 可自訂 symbols、text styles 方便 reuse 各種尺寸的圖片輸出 支援向量圖檔編輯 可快速切換像素預覽 常見的 web design 應用： mock up 開發 RWD 超方便，可快速切換在不同解析度下做預覽 還可以輸出 Asset、CSS 自建 template 搭配 Bootstrap 3 UI Kit 快速建立 mock up [ 教學 ] 下載 Bootstrap 3 Vector UI圖示   http://bootstrapuikit.com/ 可將 arborad 輸出到 zeplin 有支援 Google 官方 Material Design  sketch toolbox  // 套件管理工具，必裝！之後其他套件都透過它來安裝 Content Generator // 自動填充假文、假圖，方便 mock up 佔位內容 Dynamic Button  // button 會隨內文寬度調整 sketch measure // 量測尺寸 AEFlowchart  // 畫流程圖 用 Skala Preview 丟到手機上預覽 Sketch Notebook // 來標註設計稿說明有哪些圖，以及它們的名稱是什麼，讓RD開發起來更有效率。 Sketch...

一直沒有時間好好去研究 htaccess 的寫法，發現參考別人的範例來學習似乎是個不錯的方法，無意間就在萬能的 GitHub 上發現這個 .htaccess Snippets。 而且 Star 數竟然有8千耶(大驚... GitHub： phanan/htaccess

RWD、AWD 幾種常見的排版線上切換比較 這幾年在行動裝置的多種解析度需求之下，Responsive Web Design (RWD) 已經成為網頁排版的顯學，除此之外其實還有 Adaptive Web Design (AWD)，你知道他們的差別嗎？ Liquidapsive 這個網站讓你可以輕鬆地切換RWD、AWD、Liquid layout、Static layout 做個比較，來試試看吧。 最後來複習一下這兩種 Web Design 實作上的差異： Responsive Web Design (RWD, 響應式設計)：在瀏覽器端判別裝置的解析度大小，再藉由 CSS3 的 Media Query 方法來載入對應的CSS，讓同一個網頁自動套用不同的 CSS 變化版面配置，。 Adaptive Web Design (AWD, 適應式設計)：由伺服端判斷後，因應不同裝置而回傳不同版本的網頁內容給瀏覽器顯示，這種方式可以針對個別裝置設計一套專屬的檔案，例如小尺寸螢幕有特別設計的 HTML 檔、低解析度的圖檔等等，檔案內容不必包山包海，也因為要針對不同裝置設計不同的流程，相對起來較費工。