發表文章

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...