Archives for June 2013

Correct the Issue of Category Display

Log — Posted by Starck on June 25, 2013

修正 index.php:

// the_category(',') => the_category(', ')
<div class="meta">
  <?php the_category(', ') ?> &#8212; <?php the_tags(__('Tags: '), ', ', ' &#8212; '); ?>   Posted by <?php echo ucwords(get_the_author()) ?> on <?php the_time('F j, Y') ?> <?php edit_post_link(__('Edit This')); ?>
</div>

// the_category(',') => the_category(', ')

<?php the_category(', ') ?> — <?php the_tags(__('Tags: '), ', ', ' — '); ?> Posted by <?php echo ucwords(get_the_author()) ?> on <?php the_time('F j, Y') ?> <?php edit_post_link(__('Edit This')); ?>

</div>

Comments (0)

Guard is My Best Friend

Coding, Design — Tags: Guard — Posted by Starck on June 24, 2013

Guardfile 語法說明

guard :<plugin> : 使用 plugin
group :<group name> … end : 定義一個 task 分類區塊
%w[] : Ruby 宣告 Array 的方式, 用空白區分
:key => value : 宣告 Hashes 的 key/value
%r{} : Regexen 正規表達式, 可到 rubular 測試

Ruby語法參考, Guard語法參考

Group

example:

group :tb2 do
    guard :concat, 
        :type => 'css', :files = > %w[boostrap bootstrap-responsive], 
        :input_dir => 'app/assets/css,
        :output => 'public/css/bootstrap.css
end

group :zf4 do
    guard :concat, 
        :type => 'css', :files = > %w[normalize foundation4], 
        :input_dir => 'app/assets/css,
        :output => 'public/css/foundation.css
end

group :tb2 do

guard :concat,

:type => 'css', :files = > %w[boostrap bootstrap-responsive],

:input_dir => 'app/assets/css,

:output => 'public/css/bootstrap.css

end

group :zf4 do

guard :concat,

:type => 'css', :files = > %w[normalize foundation4],

:input_dir => 'app/assets/css,

:output => 'public/css/foundation.css

end

Plugins

CoffeeScript

guard-coffeescript

編譯 CoffeeScript

input : .coffee 路徑
output : .javascript 輸出路徑

example:

guard :coffeescript, 
    :input => "app/assets/coffee", 
    :output => "public/js"

guard :coffeescript,

:input => "app/assets/coffee",

:output => "public/js"

Concat

guard-concat

合併檔案

type : 檔案類型 (副檔名), ex: css, js…
files : 哪些檔案要被合併, 用 Array 的方式定義
input_dir : 來源路徑
output : 合併後的檔案 (去除.副檔名)

example:

guard :concat, 
    :type => "css", 
    :files => %w[bootstrap-responsive bootstrap button], 
    :input_dir => "public/css", 
    :output => "public/css/styles.min"

guard :concat,

:type => "css",

:files => %w[bootstrap-responsive bootstrap button],

:input_dir => "public/css",

:output => "public/css/styles.min"

# This will concatenate the javascript files a.js and b.js in public/js to all.js
guard :concat, type: "js", files: %w(b a), input_dir: "public/js", output: "public/js/all"

# analog css example
guard :concat, type: "css", files: %w(c d), input_dir: "public/css", output: "public/css/all"

# js example with *

guard :concat, type: "js", files: %w(vendor/* b a), input_dir: "public/js", output: "public/js/all"
# will concatenate all files in the vendor dir, then b then a (watch out of dependencies)

# This will concatenate the javascript files a.js and b.js in public/js to all.js

guard :concat, type: "js", files: %w(b a), input_dir: "public/js", output: "public/js/all"

# analog css example

guard :concat, type: "css", files: %w(c d), input_dir: "public/css", output: "public/css/all"

# js example with *

guard :concat, type: "js", files: %w(vendor/* b a), input_dir: "public/js", output: "public/js/all"

# will concatenate all files in the vendor dir, then b then a (watch out of dependencies)

Livereload

guard-livereload

Blocks/Closures
watch : 偵測什麼的檔案變化, 可以用 %r 正規表達式

example:

# .+       任意字元
# (?<!)    zero-width negative look-behind assertion.
# (?<!\.min\.(css|html|js|blade\.php)$)
# 不包含 .min 文字但以 css 或 html 或 js 或 blade.php 結尾

guard 'livereload' do
    watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})
end

# .+ 任意字元

# (?<!) zero-width negative look-behind assertion.

# (?<!\.min\.(css|html|js|blade\.php)$)

# 不包含 .min 文字但以 css 或 html 或 js 或 blade.php 結尾

guard 'livereload' do

watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})

end

可用參數:

:host => '127.3.3.1'     # default '0.0.0.0'
:port => '12345'         # default '35729'
:apply_css_live => false # default true
:override_url => false   # default false
:grace_period => 0.5     # default 0 (seconds)

:host => '127.3.3.1' # default '0.0.0.0'

:port => '12345' # default '35729'

:apply_css_live => false # default true

:override_url => false # default false

:grace_period => 0.5 # default 0 (seconds)

example:

guard 'livereload', :host => '127.3.3.1', :port => '12345' do
    watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})
end

guard 'livereload', :host => '127.3.3.1', :port => '12345' do

watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})

end

Minify

cssmin
jsmin

example:

min_js = 'public/js/bootstrap.min.js'
watch 'public/js/bootstrap.js' do |m|
  js = File.read(m[0])
  File.open(min_js, 'w') { |file| file.write(JSMin.minify(js)) }
  puts min_js + " has minify."
end

min_js = 'public/js/bootstrap.min.js'

watch 'public/js/bootstrap.js' do |m|

js = File.read(m[0])

File.open(min_js, 'w') { |file| file.write(JSMin.minify(js)) }

puts min_js + " has minify."

end

watch('public/css/styles.min.css') do |m|
    css = File.read(m[0])
    File.open(m[0], 'w') { |file| file.write(CSSMin.minify(css)) }
end
watch('public/js/scripts.min.js') do |m|
    js = File.read(m[0])
    File.open(m[0], 'w') { |file| file.write(JSMin.minify(js)) }
end

watch('public/css/styles.min.css') do |m|

css = File.read(m[0])

File.open(m[0], 'w') { |file| file.write(CSSMin.minify(css)) }

end

watch('public/js/scripts.min.js') do |m|

js = File.read(m[0])

File.open(m[0], 'w') { |file| file.write(JSMin.minify(js)) }

end

PHP Unit Testing

# 
# PHP Unit Testing
# 
guard :shell, :all_on_start => false do
  watch(%r{^app/tests/.+Test\.php$}) { `phpunit` }
end

# PHP Unit Testing

guard :shell, :all_on_start => false do

watch(%r{^app/tests/.+Test\.php$}) { `phpunit` }

end

參考完整 Guardfile 範例

Laravel-Guard Example:

guard :coffeescript, :input => "app/assets/coffee", :output => "public/js"

guard :concat, :type => "css", :files => %w[bootstrap-responsive bootstrap button], :input_dir => "public/css", :output => "public/css/styles.min"

guard :concat, :type => "js", :files => %w[bootstrap], :input_dir => "public/js", :output => "public/js/scripts.min"

# Refresh the browser on save
guard 'livereload' do
  watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})
end

guard :phpunit, :all_on_start => false, :tests_path => 'app/tests/', :cli => '--colors -c phpunit.xml' do
  # Run any test in app/tests upon save.
  watch(%r{^.+Test\.php$})

  # When a view file is updated, run tests.
  # Tip: you probably only want to run your integration tests.
  watch(%r{app/views/.+\.php}) { Dir.glob('app/tests/**/*.php') }

  # When a file is edited, try to run its associated test.
  # Save app/models/User.php, and it will run app/tests/models/UserTest.php
  watch(%r{^app/(.+)/(.+)\.php$}) { |m| "app/tests/#{m[1]}/#{m[2]}Test.php"}
end

module ::Guard
  class Refresher < Guard
    def run_all
      # refresh
    end

    def run_on_additions(paths)
      refresh
    end

    def run_on_removals(paths)
      refresh
    end

    def refresh
      `php artisan guard:refresh`
    end
  end
end

require 'cssmin'
require 'jsmin'

guard :refresher do
  watch(%r[public/js/.+])
  watch(%r[public/css/.+])
  watch(%r{app/config/packages/way/guard-laravel/guard.php}) do |m|
    `php artisan guard:refresh`
  end
  watch('public/css/styles.min.css') do |m|
    css = File.read(m[0])
    File.open(m[0], 'w') { |file| file.write(CSSMin.minify(css)) }
  end
  watch('public/js/scripts.min.js') do |m|
    js = File.read(m[0])
    File.open(m[0], 'w') { |file| file.write(JSMin.minify(js)) }
  end
end

guard :sass, :input => 'app/assets/sass', :output => 'public/css'

guard :coffeescript, :input => "app/assets/coffee", :output => "public/js"

guard :concat, :type => "css", :files => %w[bootstrap-responsive bootstrap button], :input_dir => "public/css", :output => "public/css/styles.min"

guard :concat, :type => "js", :files => %w[bootstrap], :input_dir => "public/js", :output => "public/js/scripts.min"

# Refresh the browser on save

guard 'livereload' do

watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})

end

guard :phpunit, :all_on_start => false, :tests_path => 'app/tests/', :cli => '--colors -c phpunit.xml' do

# Run any test in app/tests upon save.

watch(%r{^.+Test\.php$})

# When a view file is updated, run tests.

# Tip: you probably only want to run your integration tests.

watch(%r{app/views/.+\.php}) { Dir.glob('app/tests/**/*.php') }

# When a file is edited, try to run its associated test.

# Save app/models/User.php, and it will run app/tests/models/UserTest.php

watch(%r{^app/(.+)/(.+)\.php$}) { |m| "app/tests/#{m[1]}/#{m[2]}Test.php"}

end

module ::Guard

class Refresher < Guard

def run_all

# refresh

end

def run_on_additions(paths)

refresh

end

def run_on_removals(paths)

refresh

end

def refresh

`php artisan guard:refresh`

end

require 'cssmin'

require 'jsmin'

guard :refresher do

watch(%r[public/js/.+])

watch(%r[public/css/.+])

watch(%r{app/config/packages/way/guard-laravel/guard.php}) do |m|

`php artisan guard:refresh`

end

watch('public/css/styles.min.css') do |m|

css = File.read(m[0])

File.open(m[0], 'w') { |file| file.write(CSSMin.minify(css)) }

end

watch('public/js/scripts.min.js') do |m|

js = File.read(m[0])

File.open(m[0], 'w') { |file| file.write(JSMin.minify(js)) }

end

guard :sass, :input => 'app/assets/sass', :output => 'public/css'

My Laravel Example :

require 'cssmin'
require 'jsmin'

group :tb2 do

  all_js = 'bootstrap.all'
  all_css = 'bootstrap.all'

  min_js = 'public/js/bootstrap.min.js'
  min_css = 'public/css/bootstrap.min.css'

  # Compile CoffeeScript
  guard :coffeescript, :input => "app/assets/coffee", :output => "app/assets/js"

  # Compile SASS
  guard :sass, :input => 'app/assets/sass', :output => 'app/assets/css'

  # Concat CSS
  guard :concat, :type => "css", :files => %w[bootstrap bootstrap-responsive button], :input_dir => "app/assets/css", :output => "public/css/" + all_css

  # Concat JS
  guard :concat, :type => "js", :files => %w[jquery.1.9.1 bootstrap jqBootstrapValidation], :input_dir => "app/assets/js", :output => "public/js/" + all_js

  # 
  # Minify JS
  # 
  watch 'public/js/'+ all_js +'.js' do |m|
    js = File.read(m[0])
    File.open(min_js, 'w') { |file| file.write(JSMin.minify(js)) }
    puts min_js + " has minify."
  end

  # 
  # Minify CSS
  # 
  watch 'public/css/'+ all_css +'.css' do |m|
    css = File.read(m[0])
    File.open(min_css, 'w') { |file| file.write(CSSMin.minify(css)) }
    puts min_css + " has minify."
  end

end

# 
# Live Reload
# 

guard 'livereload' do
  watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})
end

# 
# PHP Unit Testing
# 

guard :phpunit, :all_on_start => false, :tests_path => 'app/tests/', :cli => '--colors -c phpunit.xml' do
  # Run any test in app/tests upon save.
  watch(%r{^.+Test\.php$})

  # When a view file is updated, run tests.
  # Tip: you probably only want to run your integration tests.
  watch(%r{app/views/.+\.php}) { Dir.glob('app/tests/**/*.php') }

  # When a file is edited, try to run its associated test.
  # Save app/models/User.php, and it will run app/tests/models/UserTest.php
  watch(%r{^app/(.+)/(.+)\.php$}) { |m| "app/tests/#{m[1]}/#{m[2]}Test.php"}
end

require 'cssmin'

require 'jsmin'

group :tb2 do

all_js = 'bootstrap.all'

all_css = 'bootstrap.all'

min_js = 'public/js/bootstrap.min.js'

min_css = 'public/css/bootstrap.min.css'

# Compile CoffeeScript

guard :coffeescript, :input => "app/assets/coffee", :output => "app/assets/js"

# Compile SASS

guard :sass, :input => 'app/assets/sass', :output => 'app/assets/css'

# Concat CSS

guard :concat, :type => "css", :files => %w[bootstrap bootstrap-responsive button], :input_dir => "app/assets/css", :output => "public/css/" + all_css

# Concat JS

guard :concat, :type => "js", :files => %w[jquery.1.9.1 bootstrap jqBootstrapValidation], :input_dir => "app/assets/js", :output => "public/js/" + all_js

# Minify JS

watch 'public/js/'+ all_js +'.js' do |m|

js = File.read(m[0])

File.open(min_js, 'w') { |file| file.write(JSMin.minify(js)) }

puts min_js + " has minify."

end

# Minify CSS

watch 'public/css/'+ all_css +'.css' do |m|

css = File.read(m[0])

File.open(min_css, 'w') { |file| file.write(CSSMin.minify(css)) }

puts min_css + " has minify."

end

# Live Reload

guard 'livereload' do

watch(%r{.+(?<!\.min)\.(css|html|js|blade\.php)$})

end

# PHP Unit Testing

guard :phpunit, :all_on_start => false, :tests_path => 'app/tests/', :cli => '--colors -c phpunit.xml' do

# Run any test in app/tests upon save.

watch(%r{^.+Test\.php$})

# When a view file is updated, run tests.

# Tip: you probably only want to run your integration tests.

watch(%r{app/views/.+\.php}) { Dir.glob('app/tests/**/*.php') }

# When a file is edited, try to run its associated test.

# Save app/models/User.php, and it will run app/tests/models/UserTest.php

watch(%r{^app/(.+)/(.+)\.php$}) { |m| "app/tests/#{m[1]}/#{m[2]}Test.php"}

end

Comments (0)

Vim Page Scroll in Terminal.app

Log — Posted by Starck on June 24, 2013

修改 Terminal 的鍵盤設定:

Home : \033[1~
End : \033[4~
PageUp : \033[5~
PageDown : \033[6~

Comments (0)

Foundation 4 Grid hack for IE8

Design — Tags: CSS, Foundation, IE — Posted by Starck on June 24, 2013

修改 HTML:

<!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]-->

<!DOCTYPE html>

<html class="no-js">

CSS:

/* 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; }

/* 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; }

Comments (0)

轉移 beyond.com.tw

Log — Posted by Starck on June 24, 2013

決定將 beyond.com.tw 轉到跟 starcklin.com 同一台主機上, 方便以後的管理。

預計的工作內容為:

~~DNS 設定~~ (已完成)
~~Server 的 Apache 設定~~ (已完成)
~~檔案上傳到 Server~~ (已完成)
~~用 WordPress 的 import / export 轉移資料)~~ (已完成)
~~更新 WordPress~~ (已完成)
調整 Plugins 與 starcklin.com 一致

Comments (0)

Redirect in BASH

Log — Tags: bash — Posted by Starck on June 23, 2013

# 執行 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

Comments (0)

beyond inc. ASCII Art

Log — Posted by Starck on June 20, 2013

/*
 
 
     .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'                                        

*/

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

Comments (0)

Modern Testing with Laravel 4

Coding, Log — Tags: Laravel, PHP, Thinking — Posted by Starck on June 18, 2013

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:

class_name: TestGuy
modules:
    enabled: [Laravel4, TestHelper]

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 檔案

內容為:

<?php
$I = new WebGuy($scenario);

1 2	<?php $I = new WebGuy($scenario);

First Scenario

我要到 / (網站首頁)。
我看到了 Hello World! 這段文字出現在首頁上。

這樣的情境，寫成測試檔就變成如下:

<?php
$I = new WebGuy($scenario);
$I->wantTo('goto homepage, and see hello word');
$I->amOnPage('/');
$I->see('Hello World!');

<?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:

modules:
   enabled: [Selenium2]
   config:
      Selenium2:
         url: 'http://starck-macmini'
         browser: firefox
         capabilities:
             unexpectedAlertBehaviour: 'accept'
             # delay: 500

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.

Comments (0)

Laravel 4 – Resources

Coding — Tags: Laravel, PHP — Posted by Starck on June 14, 2013

Starter

Package

IDE helper

Comments (1)

Use ownCloud to build your own network drive

Log — Tags: Cloud, Mac, Ubuntu — Posted by Starck on June 12, 2013

Install linux packages

apt-get update and some libraries:

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

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:

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

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

cd /var/www/{your web root}
wget https://download.owncloud.com/download/community/setup-owncloud.php

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:

download

Reference

How to setup owncloud 5 on ubuntu 12.10

mobile01 – OwnCloud, 一套適合自建的網路同步硬碟

Comments (0)