Viewport Percentage Lengths

Viewport Percentage Lengths 有四個不同的單位，分別如下：

• vh (viewport height): 瀏覽器高度百分比。
• vw (viewport width): 瀏覽器寬度百分比。
• vmin (viewport minimum length): vh 與 vw 中較小的值。
• vmax (viewport maximum length): vh 與 vw 中較大的值。

如果想要讓某個元素佔滿整個瀏覽器，就只要像下面這樣寫，很簡單的：

1
2
3
4

div {
  width: 100vw;
  height: 100vh;
}

閱讀全文

這篇主要是在講說，在一個 Table 裡面有多個 Foreign Keys 會指向同一個 table。例子如下，一首歌 Song 會有歌手 (singer_id) 跟作曲者 (composer_id)，都會指向同一個 Singer 的 table。

1
2
3
4
5
6
7
8

┌──────────────────┐                ┌─────────────────────┐
│      Singer      │                │        Song         │
├──────────────────┤                ├─────────────────────┤
│   id:integer     │←───────┐       │ id:integer          │
│   name:string    │        ├───────│ singer_id:integer   │
│                  │        └───────│ composer_id:integer │
│                  │                │ title:string        │
└──────────────────┘                └─────────────────────┘

閱讀全文

先建立一個 Tempfile，然後隨便輸入一些資料進去。

1
2
3
4
5

require 'tempfile'

f = Tempfile.new ''
f.puts("akii")
f.close

Tempfile 在程式結束的時候會 f.unlink 刪除檔案，所以在結束之前可以使用 File.rename 移動檔案，讓檔案逃脫免於被刪除的命運。

1
2

# File.rename("afile", "afile.bak")
File.rename(f, "cat.txt")

閱讀全文

這個在 rails 裡面，資料有關聯的時候，會產生的一些效能上的問題，假設我們的例子如下：

1
2
3
4
5
6
7

┌──────────────────┐                ┌───────────────────┐
│      Author      │                │       Book        │
├──────────────────┤                ├───────────────────┤
│   id:integer     │←───────┐       │ id:integer        │
│   name:string    │        └───────│ author_id:integer │
│                  │                │ title:string      │
└──────────────────┘                └───────────────────┘

當我們在 books controllers 拿了一群東西，像是有 all 或是 where

1
2

@books = Book.all
@books = Book.where(author: @author)

常常接著又在 view 裡面使用 each 抓取了關聯的東西 author，這時 @books 不知道 author 的內容所以又必須呼叫一次 SQL 指令去拿資料，所以當資料量一大的時候，會產生效能上的問題。

1
2
3

@books.each do |book|
  book.author
end

閱讀全文

重設 Database 的方法

Status

在重新設置資料庫前先執行 db:migrate:status，看看現在資料庫的 migrate 的狀態是什麼。

1
2
3
4
5
6
7
8

# rake db:migrate:status
database: dev

 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20161114101612  Enable uuid extension
   up     20161115193547  Create singers
   up     20161115193548  Create songs

Basic

在重新設置資料庫時，最簡單的方法就是先把資料庫刪除，然後重新建一個，最後在 migrate：

1
2

db:drop db:create db:migrate
rake db:migrate:reset

閱讀全文

文字絕對置中

範例如下，div 內部的文字置中，h1 只有將字型放大的功能。

Html

1
2
3
4
5

<div class='abs-text-center'>
  <h1>
    Hello World!
  </h1>
</div>

Scss

• 垂直置中：讓 height 跟 line-height 的高度相同。
• 水平置中：讓 text-align 為 center。

1
2
3
4
5
6
7
8

$box-height: 100px;

.abs-text-center {
  height: $box-height;
  line-height: $box-height;

  text-align: center;
}

閱讀全文

Canvas Usage

html canvas 簡單來說就是個 image，只是它可以使用 Javascript 來 render 你所想要的樣子，所以能操作的東西十分的多，可以拿來做動畫或是遊戲等等的，有其他的套件輔助會比較方便。

1
2
3
4
5
6
7
8
9
10
11
12

// 建立 canvas
// context 暫時沒有用到
var canvas  = document.createElement('canvas');
var context = canvas.getContext('2d');

// 設定 canvas 的大小，就像是一張圖片的大小是 800 x 400
canvas.width  = 800;
canvas.height = 400;

// css 裡的 style，用來縮放，還有很多有的沒的......
canvas.style.width  = '400px';
canvas.style.height = '300px';

Load Image From Url

用 Javascript Image 物件來建立圖片。

1
2
3
4
5

var img = new Image();
img.onload = function(){
  // 完整載入圖片之後才會執行這一段
};
img.src = 'http://i.imgur.com/ImageHere';

閱讀全文

絕對置中 absolute center

顧名思義就是水平置中加上垂直置中，讓內層的 div 會在外層的 div 的正中間。

Html

1
2
3
4

<div class='outer'>
  <div class='inner'>
  </div>
</div>

Scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.outer {
  position: relative;

  .inner {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

.outer {
  width: 500px;
  height: 500px;
  background-color: rgba(0,0,0,.2);
}

.inner {
  width: 100px;
  height: 100px;
  background-color: rgba(0,0,0,.2);
}

任意註解掉 top left bottom right 的參數，可以將內層的 div 對齊在外層的九個位置上，即可解決水平置中與垂直置中的問題。

閱讀全文

Circle Gradient

Sass

參數說明：

• shift: 從中心點移動多少位置，如果是 120px 則會從上一層的 div 左上角的原點，往右邊且往下個移 120px。
• step: 多少 pixel 換另一個顏色。
• colors: 每一層的顏色，由內到外排序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$shift: 120px;
$step: 30px;
$colors: ( #fbffa0 #cfff76 #a2e27a #4ab9aa #2c678d #07171f );

@for $i from 0 to length($colors) {
  $color: unquote(nth($colors, $i + 1));

  .layer-#{$i} {
    position: absolute;
    background: transparent;

    border-radius: ($i + 1) * $step;
    border: $step solid $color;
    padding: 0px;

    top: $shift - ($i + 1) * $step;
    left: $shift - ($i + 1) * $step;
    width: 2 * $i * $step;
    height: 2 * $i * $step;
  }
}

閱讀全文

OptionParser

這個東西在 python 應該是 setup script，而在 ruby 不知道叫什麼 google 了老半天終於被我找到了。用法上很簡單大概看 ruby doc 的範例就會使用了。

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

require 'optparse'
require 'optparse/time'

options = {}
OptionParser.new do |opts|
  opts.banner = "Usage: example.rb [options]"

  opts.on("-v", "--[no-]verbose", "Run verbosely") do |v|
    options[:verbose] = v
  end

  # 傳入參數
  opts.on("-nNAME", "--name=NAME", "pass NAME arg with assignment") do |v|
    options[:verbose] = v
  end

  # 傳入參數
  opts.on("-r", "--require LIB", "pass LIB arg") do |v|
    options[:verbose] = v
  end

  # 檢查型態
  opts.on("-t", "--time [TIME]", Time, "pass TIME arg and check type") do |v|
    options[:verbose] = v
  end
end.parse!

p options
p ARGV

閱讀全文