Vim Page Scroll in Terminal.app
修改 Terminal 的鍵盤設定:
- Home :
\033[1~ - End :
\033[4~ - PageUp :
\033[5~ - PageDown :
\033[6~
Foundation 4 Grid hack for IE8
修改 HTML:
|
1 2 3 4 5 |
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
/* The Grid ---------------------- */ .lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; } .lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; } .lt-ie9 .row.large-collapse .column, .lt-ie9 .row.large-collapse .columns { padding: 0; } .lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; } .lt-ie9 .row .row.large-collapse { margin: 0; } .lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; } .lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; } .lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; } .lt-ie9 [class*="column"] + [class*="column"].end { float: left; } .lt-ie9 .large-1, .lt-ie9 .row .large-1 { width: 8.33333%; } .lt-ie9 .large-2, .lt-ie9 .row .large-2 { width: 16.66667%; } .lt-ie9 .large-3, .lt-ie9 .row .large-3 { width: 25%; } .lt-ie9 .large-4, .lt-ie9 .row .large-4 { width: 33.33333%; } .lt-ie9 .large-5, .lt-ie9 .row .large-5 { width: 41.66667%; } .lt-ie9 .large-6, .lt-ie9 .row .large-6 { width: 50%; } .lt-ie9 .large-7, .lt-ie9 .row .large-7 { width: 58.33333%; } .lt-ie9 .large-8, .lt-ie9 .row .large-8 { width: 66.66667%; } .lt-ie9 .large-9, .lt-ie9 .row .large-9 { width: 75%; } .lt-ie9 .large-10, .lt-ie9 .row .large-10 { width: 83.33333%; } .lt-ie9 .large-11, .lt-ie9 .row .large-11 { width: 91.66667%; } .lt-ie9 .large-12, .lt-ie9 .row .large-12 { width: 100%; } .lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; } .lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; } .lt-ie9 .row .large-offset-3 { margin-left: 25%; } .lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; } .lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; } .lt-ie9 .row .large-offset-6 { margin-left: 50%; } .lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; } .lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; } .lt-ie9 .row .large-offset-9 { margin-left: 75%; } .lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; } .lt-ie9 .pull-2 { right: 16.66667%; } .lt-ie9 .pull-3 { right: 25%; } .lt-ie9 .pull-4 { right: 33.33333%; } .lt-ie9 .pull-5 { right: 41.66667%; } .lt-ie9 .pull-6 { right: 50%; } .lt-ie9 .pull-7 { right: 58.33333%; } .lt-ie9 .pull-8 { right: 66.66667%; } .lt-ie9 .pull-9 { right: 75%; } .lt-ie9 .pull-10 { right: 83.33333%; } .lt-ie9 .push-2 { left: 16.66667%; } .lt-ie9 .push-3 { left: 25%; } .lt-ie9 .push-4 { left: 33.33333%; } .lt-ie9 .push-5 { left: 41.66667%; } .lt-ie9 .push-6 { left: 50%; } .lt-ie9 .push-7 { left: 58.33333%; } .lt-ie9 .push-8 { left: 66.66667%; } .lt-ie9 .push-9 { left: 75%; } .lt-ie9 .push-10 { left: 83.33333%; } /* Nicolas Gallagher's micro clearfix */ .lt-ie9 .row { *zoom: 1; } .lt-ie9 .row:before, .row:after { content: " "; display: table; } .lt-ie9 .row:after { clear: both; } |
轉移 beyond.com.tw
決定將 beyond.com.tw 轉到跟 starcklin.com 同一台主機上, 方便以後的管理。
預計的工作內容為:
DNS 設定(已完成)Server 的 Apache 設定(已完成)檔案上傳到 Server(已完成)用 WordPress 的 import / export 轉移資料)(已完成)更新 WordPress(已完成)- 調整 Plugins 與 starcklin.com 一致
Redirect in BASH
# 執行 command, 標準輸出結果轉到 correct.txt, 錯誤輸出結果轉到到 error.txt $ [command] 1> correct.txt 2> error.txt
要讓錯誤輸出結果不顯示, 可以利用/dev/null:
$ [command] 1> result.txt 2> /dev/null
example:
# 顯示 gem 的規格, 如果沒有這個 gem 則不顯示任何訊息 $ gem spec [gem name] 2>/dev/null # gem spec zurb-foundation 2>/dev/null
beyond inc. ASCII Art
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* .o8 .o8 "888 "888 888oooo. .ooooo. oooo ooo .ooooo. ooo. .oo. .oooo888 d88' `88b d88' `88b `88. .8' d88' `88b `888P"Y88b d88' `888 888 888 888ooo888 `88..8' 888 888 888 888 888 888 888 888 888 .o `888' 888 888 888 888 888 888 `Y8bod8P' `Y8bod8P' .8' `Y8bod8P' o888o o888o `Y8bod88P" Inc. .o..P' `Y8P' */ |
Modern Testing with Laravel 4
Behavior-Driven Development
簡稱 BDD, 簡單地說就是用一種情境設定的方式來進行開發的過程。
在 Laravel 4 我們需要以下三種組合之一:
- Codeception
- [email protected] and Mink – (optional)
- Selenium2, PhantomJS and Mink – (optional)
Codeception Installation
# 下載 codecept $ wget http://codeception.com/codecept.phar # 初始化 codecept, 它會建立所需的檔案在目前的目錄中的 tests 資料夾 $ php codecept.phar bootstrap
查看有什麼指令可以使用:
php codecept.phar
修改 tests/functional.suite.yml:
|
1 2 3 |
class_name: TestGuy modules: enabled: [Laravel4, TestHelper] |
因為我們新增了一個 Laravel4 的 module, 所以讓 Codeception 再次重新建立所需的 Class:
php codecept.phar build
Codeception Usage
建立第一個測試:
php codecept.phar generate:cept acceptance Fisrt
Codeception 會在 tests/acceptance/ 下建立一個 FirstCept.php 檔案
內容為:
|
1 2 |
<?php $I = new WebGuy($scenario); |
First Scenario
- 我要到
/(網站首頁)。 - 我看到了
Hello World!這段文字出現在首頁上。
這樣的情境，寫成測試檔就變成如下:
|
1 2 3 4 5 |
<?php $I = new WebGuy($scenario); $I->wantTo('goto homepage, and see hello word'); $I->amOnPage('/'); $I->see('Hello World!'); |
執行測試:
php codecept.phar run
Zombie.JS and Mink
由於 Codeception 的 PhpBrowser 是基於 PHP Curl 去實現模擬 Browser 的操作, 所以面對一些會有 Javascript 互動的網頁，在測試上就會顯得力不從心。還好 Codeception 提供了 ZombieJS module, 我們可以得到一個更真實的模擬測試。
Zombie.JS
Zombie.JS 是一個 NPM 的 package, 所以在這之前我們必須先安裝好 NPM 的環境。
將 zombie 1.4.1 版安裝到全域環境:
sudo npm install -g [email protected]
2013-06-18 註: 經測試, 目前只能裝 1.4.1 的版本, 版本太新 Mink 不支援.
開啟 ~/.bashrc, 加上 NODE_PATH 的設定
export NODE_PATH="/usr/local/lib/node_modules"
Mink
在 composer.json 中加入到 require:
"behat/mink": "1.5.*@dev"
重新更新 composer:
composer update
目前已知問題：
checkOption(),uncheckOption(),executeJs()無作用
Selenium2 and PhantomJS
比起 Zombie.JS, 我更喜歡 PhantomJS, 更穩定且資源豐富. 主要看到官方的一些範例, 真得相當地強大, 甚至可以 Screenshot… (Codeception 用來當發生測試失敗時會將快照存在 log 資料夾, 相當地方便!)
要使用 PhantomJS 當作 Browser, 我們需要 Selenium2 作 driver.
先執行 Selenium2:
java -jar selenium-server-standalone-2.33.0.jar
將會啟動一個 Selenium2 Server, 預設會使用 port 4444, 如需修改可在後面加上 -port 參數:
java -jar selenium-server-standalone-2.33.0.jar -port 8888
08:17:34.571 INFO - Java: Apple Inc. 20.45-b01-451 08:17:34.572 INFO - OS: Mac OS X 10.7.5 x86_64 08:17:34.584 INFO - v2.33.0, with Core v2.33.0. Built from revision 4e90c97 08:17:34.691 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub 08:17:34.692 INFO - Version Jetty/5.1.x 08:17:34.692 INFO - Started HttpContext[/selenium-server/driver,/selenium-server/driver] 08:17:34.693 INFO - Started HttpContext[/selenium-server,/selenium-server] 08:17:34.693 INFO - Started HttpContext[/,/] 08:17:34.738 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@56d73c7a 08:17:34.738 INFO - Started HttpContext[/wd,/wd] 08:17:34.746 INFO - Started SocketListener on 0.0.0.0:4444 08:17:34.746 INFO - Started org.openqa.jetty.jetty.Server@54cbf30e
接著啟動 PhantomJS 跟 Selenium2 連接:
phantomjs --webdriver=4444
PhantomJS is launching GhostDriver... [INFO - 2013-06-18T00:17:27.627Z] GhostDriver - Main - running on port 4444
然後設定 Codeception 的 tests/acceptance.suite.yml 設定檔, 指定用 Selenium2 module:
|
1 2 3 4 5 6 7 8 9 |
modules: enabled: [Selenium2] config: Selenium2: url: 'http://starck-macmini' browser: firefox capabilities: unexpectedAlertBehaviour: 'accept' # delay: 500 |
- url (required) – start url for your app
- browser (required) – browser that would be launched
- host – Selenium server host (localhost by default)
- port – Selenium server port (4444 by default)
- delay – To set delay between actions in milliseconds (1/1000 of second) if they run too fast
- capabilities – To set Selenium2 desired capabilities. Should be a key-value array.
Laravel 4 – Resources
Starter
Package
- Laravel4 Theme
- Laravel Administrator
- Intervention Image Class
- Sentry 2 – authorization and authentication package
- Entrust – Role-based Permissions
- Basset – Asset Management package
- Ardent – Self-validating, secure and smart models for Laravel 4’s Eloquent O/RM
- TwigBridge – Give the power of Twig to Laravel 4
- Latchet – WebSockets with Laravel 4
IDE helper
Use ownCloud to build your own network drive
Install linux packages
apt-get update and some libraries:
|
1 2 3 4 5 |
sudo apt-get update sudo apt-get upgrade sudo apt-get install php5-gd php-xml-parser php5-intl smbclient curl libcurl3 php5-curl sudo a2enmod rewrite sudo a2enmod headers |
Ubuntu 13.04:
|
1 2 3 4 5 6 7 |
sudo su echo 'deb http://download.opensuse.org/repositories/isv:ownCloud:community/xUbuntu_13.04/ /' >> /etc/apt/sources.list.d/owncloud.list apt-get update apt-get install owncloud wget http://download.opensuse.org/repositories/isv:ownCloud:community/xUbuntu_13.04/Release.key apt-key add - < Release.key |
Download web installer
|
1 2 |
cd /var/www/{your web root} wget https://download.owncloud.com/download/community/setup-owncloud.php |
Server Web-DAV Installation
Open your browser, run the web installer script, ex: http://{domain.name}/setup-owncloud.php
follow the steps in installer, finish it.
Sync-Client Installation
for MacOS:
Reference
PHP – passthru with output buffering
將 passthru 輸出內容存在變數中:
|
1 2 3 |
ob_start(); passthru('php artisan', $return); $return = ob_get_clean(); |
Laravel – Inject inline content into a section.
手動注入 section 內容:
|
1 2 |
$view = View::make('layouts.scaffold'); $view->getEnvironment()->inject('main',$return); |
layouts/scaffold.blade.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Scaffold</title> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <style> table form { margin-bottom: 0; } form ul { margin-left: 0; list-style: none; } .error { color: red; font-style: italic; } body { padding-top: 20px; } </style> </head> <body> <div class="container"> @if (Session::has('message')) <div class="flash alert"> {{ Session::get('message') }} </div> @endif @yield('main') </div> </body> </html> |