發表文章

目前顯示的是 2015的文章

Sublime Text 默默吃爆你硬碟的神秘目錄

圖片
Sublime Text 3 主程式目錄大小才 10MB...,但是你可以想像嗎,隨著使用時間的增長,這個目錄竟然會長到 1GB 多! 我到底是餵它什麼好料!? 竟然可以這樣越用越肥... 對此感到十分好奇的我,決定來研究一下找出原因! 檔下直覺懷疑是「 Log 檔」或是「索引資料」所造成,於是去檢查相關目錄, 其實也還好,容量雖然不小,但也頂多幾十 MB 而已~ 但無意間發現一個可疑的「Backup」目錄, 查了一下...竟然有 1GB 多! 就是它在肥的啦! 路徑在: Application Support/Sublime Text 3/Backup 原來這個目錄是 Package Control 的備份檔, 每次 upgrade package 時都會將套件進行備份! 難怪會那麼肥~~ 改善方法: 刪除掉舊的備份檔。 並修改設定 (Preferences.sublime-settings) 將檢查更新的頻率由預設的 1 小時檢查一次,修改成 8 小時檢查一次就好囉。 "auto_upgrade_frequency": 8, 降低檢查的頻率還有個好處,有些套件每次更新完 Sublime 都需要重新啟動,會導致像 live reload 那些都需要重新設定...||  會嚴重影響工作流程... 之前就遇過某個套件一天更新的好幾次的... 參考資料: http://superuser.com/questions/870148/sublime-text-2-keeps-growing-due-to-backup-folder https://sublimetext.com/forum/viewtopic.php?f=3&t=7627      Bobo內心旁白:「人肥必有因,工具不也是...請關心您的工具,替它安排個健康檢查或是瘦身計畫!?」 

Sketch3 行雲流水的 UI design 工具,有 Sublime Text 輕快的體驗!

圖片
前言: 以前使用 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...

[Mac] 顯示輸入過的無線網路密碼

圖片
近期有不少社群活動都辦在「 新北創力坊 」,地點位在捷運「台北橋站」的捷運共構大樓,出捷運站就到了!交通實在有夠便利。 有次帶新朋友去那裡需要使用無線網路,但找不到 wifi 密碼,問了一輪大家都不知道密碼... 因為大家在第一次輸入時就按記憶密碼,沒有人記得也是正常的 @__@ 那麼是否辦法將已輸入的密碼顯示呢? 記得以前在 Windows 可以使用偷看密碼的工具,而 Mac 其實不用那麼麻煩,直接有內建的方法可以查看喔! 以下來介紹該如何顯示輸入過的無線網路密碼: 1.由於 Mac 會幫我們管理所有儲存過的密碼,我們可使用 Spotlight 呼叫「鑰匙圈存取」來檢視: 點選右上角「放大鏡」(或是按快捷鍵 control + space),並輸入「key」 2.列出曾經連線過的無線基地台名稱: 點選新北創力坊的 wifi 名稱:innosquare 3.勾選「顯示密碼」,並輸入系統登入密碼: 4.密碼就顯示出來囉!完成! 新北創力坊 wifi 密碼:newtaipei Bobo內心旁白:「 有人的地方,就有江湖,有密碼的地方,就有忘記密碼的需求...Mac 實在是真貼心~ 」。

5分鐘加強技術英文聽力網站:The five minute geek show

圖片
因為接下來有機會去國外參加 Conference,想趕緊加強技術相關的英文聽力, 目前除了有在聽 Pearson English One 課程之外(主題比較偏向商業環境的英文) 想說如果有和 Web Development 技術相關的主題那就更好了! 找了一下發現這個  The five minute geek show ,聽了一陣子覺得還挺有趣的,推薦給大家 這是由 Laravel 社群相當知名的大神 Matt Stauffer 所主持, 閒聊的主題相當廣泛,包含了 Frontend dev, backend dev, audio, design, podcasts 等。 一週有兩集,每次只要短短的5分鐘(雖然最近幾次都是超過5分鐘,講得太盡興了XD), 如果想看畫面的話也有影片版本:YouTube Matt Stauffer 頻道   Bobo內心旁白:「最後的嬰兒聲好可愛呀~ The 5 minutes geek show~」。

推薦2個好用的 PHP Refactoring 重構工具

圖片
1. PhpStorm  PHP 的夢幻逸品 IDE PhpStorm 支援多種重構方法 鼎鼎大名的 PhpStorm IDE 功能超級強大! 對於重構的部分也支援多種方法,官網有 詳細的介紹 : Change Signature Copy/Clone Extract Constant Extract Field Extract Interface Extract Method Extract Parameter Extract Variable Extract Variable for Sass Inline Move Refactorings Pull Members up Push Members down Rename Refactorings Safe Delete 這邊以 Extract function 來示範: Before After <? php if ( ' POST ' != $_SERVER [ ' REQUEST_METHOD ' ]) { header ( ' Allow : POST ' ); header ( ' HTTP / 1.1 405 Method Not Allowed ' ); header ( ' Content - Type : text / plain ' ); exit ; } ?> <? php function printEmptyHeader () { header ( ' Allow : POST ' ); header ( ' HTTP / 1.1 405 Method Not Allowed ' ); header ( ' Content - Type : text / plain ' ); } if ( ' POST ' != $_SERVER [ ' REQUEST_METHOD ' ]) { ...

Laravel 5.1 即將登場,LTS 版本且將支援 PSR-7

圖片
在 Twitter 上宣佈 Laravel5.1即將推出 Laravel 5.1 將在6月9號正式推出!! 這將是 Laravel 的第一個 LTS 版本,伴隨許多新功能,文件也預期會有大幅更動。 因為是架構在 Symfony2.7 之上,預期也將會支援 PSR-7。 其他像是 Lumen、 Silex 也是使用了 Symfony 的 HttpFoundation component,所以也一樣會支援 PSR-7。 補充: LTS (Long Term Support, 長期支援)版本意味著更加穩定與可信賴,有2年的 bug 修復支援,以及3年的安全性問題支援,朝企業級軟體等級邁進。 而為了完整支援 PSR-7,Symfony2.7 先使用了 https://github.com/zendframework/zend-diactoros 來相容原有的 requests 和responses。

使用 Feedly 訂閱 Ptt 的 RSS,讓手機少裝一些 App

圖片
手機上 Ptt 一定要額外安裝 App 嗎? 之前為了在手機上瀏覽 Ptt 的文章,和大多數人一樣都額外安裝了一些 App 用了一陣子後發現有幾個問題: 多半時間僅是瀏覽文章,而發文、推文等功能相對少用(就…潛水呀@_@) 相對地這些 App 使用頻率低,還會佔用系統資源。 需要去習慣這些 App 的瀏覽操作。 相較於 BBS,大家多半還是比較習慣 Web 的操作。 某天在捷運上滑手機時,突然想到 Ptt 應該有提供 RSS feed 吧? 上網查一下發現~ 果然有!而且還是官方提供的! 既然有那麼事情就簡單了,直接搭配 Feedly 這套好用的 RSS 訂閱器,把 Ptt 各版的 RSS 文章匯入就可啦! 如此,不論是 BBS 或是一般網站來源,都可以 在 Feedly 這裡有一致性的瀏覽體驗 !超讚! 批踢踢的 RSS 格式如下: http://rss.ptt.cc/板名.xml 。 例如電影版就是 http://rss.ptt.cc/movie.xml PHP 版就是 http://rss.ptt.cc/php.xml 只要知道版名,就可以使用 RSS 訂閱你的最愛看板囉! 甚至還可以搭配 IFTTT 服務來追蹤 ptt 特定板塊~ 而有不少應用(發現新大陸中)。

Demo Syntax Highlighter

圖片
在 blog 顯示程式碼,除了先把 code 貼到 codepen、gist、pastebin 等第三方服務再使用嵌入程式碼的方始顯示,也可直接在編輯畫面使用 Syntax Highlighter 來高亮程式碼區塊,以下 Demo 幾種不同語言的程式碼。 bash Syntax Highlight ls -lh cat 1.txt PHP Syntax Highlight <?php echo "Hello bobo~" Route::get('/', 'WelcomeController@index'); Route::get('home', 'HomeController@index'); Route::controllers([ 'auth' => 'Auth\AuthController', 'password' => 'Auth\PasswordController', ]); JavaScript Syntax Highlight 'use strict'; $(function () { // Sidebar Menu var accordionWidth = $('#accordion').width(); $('#accordion').sticky({ 'topSpacing': 60 }).width(accordionWidth); // Editor $('.html').summernote(); // Cancel $('.cancel').on('click', function (e) { e.preventDefault(); if (confirm('Are you sure to leave this page?')) { window.h...

Node.js 框架比較: Express vs. Koa vs. Hapi

圖片
原文: Node.js Framework Comparison: Express vs. Koa vs. Hapi 目前在 Node.js 上面最熱門的 3 套 Framework ,這篇文章從框架的背景與實作一個 Server 和最常用的 Routes 等面向來討論各種框架的特色與優缺點。 評比結果:還是由最出名的老大哥 Express 在各方面表現亮眼,不管是現有社群資源、框架成熟度都是大推,而 koa 則是後起之秀,最先擁抱 ES6 和 Web component 的思維,也頗值得關注。 心得:先摸熟 Express ,然後等 ES6 熟悉之後再來摸 koa,或是藉由 koa 來熟悉 ES6 似乎也不錯XD~

各種常用 htaccess 範例大補帖

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

RWD、AWD 幾種常見的排版線上切換比較

圖片
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 檔、低解析度的圖檔等等,檔案內容不必包山包海,也因為要針對不同裝置設計不同的流程,相對起來較費工。

Rails Beginner Cheat Sheet

圖片
Rails Beginner Cheat Sheet 起初是 PragTob 在 Rails Girls Berlin 活動所建立的專案,後來發現有不少人有 看小抄 的需求,確認 release 出來可以造福更多 Rails 社群的朋友,因此在 GitHub 上就有這個專案了 : ) 專案放在GitHub: https://github.com/PragTob/rails-beginner-cheatsheet Cheat Sheet 網頁版: http://www.pragtob.info/rails-beginner-cheatsheet/ 也可以直接下載 PDF: RailsBeginnerCheatSheet.pdf

Laravel 套件 Sqli:讓 Artisan 提供 SQL 互動介面

圖片
Laravel 套件 Sqli:讓 Artisan 提供 SQL 互動介面 sqli 是一個有趣的 Laravel 4 套件(by Antonio Ribeiro),可以擴充 Artisan 功能,使其可以執行 SQL 查詢語句。 類似像 tinker 那樣可以互動介面來與你的 Laravel 應用程式互動(包含操作 Eloquent) 安裝方式: 使用 composer 安裝,只要在命令列環境下輸入 $ composer require "pragmarx/sqli" "0.*" service provider to your app/config/app.php: 'PragmaRX\SqlI\Vendor\Laravel\ServiceProvider', 使用方式 進入 SQL 互動畫面 $ php artisan sqli 輸入 SQL 查詢字串 $ postgresql:laravel> select email from users; 即可得到 SQL 查詢結果 +----+------------------------------+ | id | email | +----+------------------------------+ | 1 | arnold@schwarzenegger.com | | 2 | danny@devito.com | +----+------------------------------+ GitHub: antonioribeiro/sqli

LaraDiner(拉拉快餐車) 本週四晚上開始試營運囉!

LaraDiner(拉拉快餐車) 本週四晚上開始試營運囉! 由我們幾位社群同好共同發起的 Laravel 讀書會,每個月將不定週舉辦 2 次。 地點在 Ville Cafe (近公館捷運站、台電大樓捷運站) 台北市中正區羅斯福路三段284巷5號 活動詳情: https://www.facebook.com/events/942421959103592 == Update == 第二、三次活動地點都在 InnoSquare 新北創力坊 地址:新北市三重區重新路一段108號3樓(捷運台北橋站3樓)