五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar


# Designing Case Study: Ruby x Elixir Conf Taiwan 2018

一年一度的 Ruby Conf Taiwan 今年邁入第七屆，這次 Ruby Taiwan 特別和 Elixir Taiwan 合作，共同推出史無前例的雙程式語言研討會 [Ruby x Elixir Conf Taiwan 2018](https://2018.rubyconf.tw/)，於今年 4/28 圓滿落幕 🎉

![Ruby x Elixir Conf Taiwan 2018](https://cdn-images-1.medium.com/max/2000/1*i4ia5oJIXzx_ewsBngb2CA.png)

本次研討會，超過 250 位會眾熱情參與，來自世界各地的講者與開發者齊聚一堂，一同共襄盛舉。活動酬備期長達半年以上，在設計方面更面臨 Ruby 與 Elixir 雙程式語言的挑戰 💪🏻

這次設計的主軸為「交流」，期盼讓 Ruby 和 Elixr 能獨立發揮又能互相激盪。雖然一行又一行的程式碼難以用視覺來理解，所幸許多程式語言都各自擁有代表的圖像，如代表 Ruby 的「紅寶石」與象徵 Elixir 的「煉金藥水」。

然而，一剛一柔的組合卻也讓 Logo 的設計一度卡關。曾經嘗試將流動的藥水裝進寶石形狀的瓶子裡，不僅導致 Elixir 變成 Ruby 的一部分，且融合的意象遠大過交流的目標。

![Logo 設計第一次提案](https://cdn-images-1.medium.com/max/1600/1*YDk2zYnjdB0oRcmPj8RC9Q.jpeg)

為了讓兩者達到完美的平衡，在後續的修正上盡可能讓紅寶石與煉金藥水各自獨立、互不干擾，卻又能站在同一個舞台上。經過一番研究，最終以「沙漏」的意象巧妙地將兩者連結 —— 紅寶石上寬下窄的形狀恰巧符合沙漏的上半部，而水滴狀的煉金藥水自然地成為沙漏的下半部。將兩者放在一個 8 形的瓶子裡，為 2018 的 Ruby x Elixir Conf Taiwan 展開序幕。

![Logo Design for Ruby x Elixir Conf Taiwan 2018](https://cdn-images-1.medium.com/max/2000/1*qvNraTSHBjzj60emOp6gaA.png)

這次選用的字體為 Google Fonts 提供的 [Righteous](https://fonts.google.com/specimen/Righteous)。[Righteous](https://fonts.google.com/specimen/Righteous) 的設計靈感來自匈牙利籍藝術家 Róbert Berény 的作品，其海報具有濃烈的 Art Deco 風格。因此，[Righteous](https://fonts.google.com/specimen/Righteous) 同樣採用嚴謹的幾何手法繪製而成，使其在工業風格中保有一定的藝術性。此外，大小寫字體完備的特性使之成為標準字的不二人選，為這次的研討會增添不少俏皮感。

![Righteous — Google Fonts](https://cdn-images-1.medium.com/max/2000/1*yktq2yn3iEpq9kS1yCIFSg.png)

顏色漸層在扁平化設計（Flat Design）盛行的時候沉寂一時，直到最近捲土重來，帶動一波新的網頁設計趨勢。因此，這次的 Ruby x Elixir Conf Taiwan 2018 更不能錯過這股浪潮，以 Ruby 代表的紅色融合 Elixir 代表的紫色，從 Logo 、網站到各式印刷品，廣泛且大膽地運用。

漸層不僅能提升物件的層次、擺脫生硬的感覺，好的漸層配色也能幫助整體風格更加活潑。這次選用飽和的紅紫漸層做為主色，展現熱情又神秘的感覺，令人不禁想一探究竟 — — 究竟今年的 Ruby x Elixir Conf Taiwan 2018 有什麼驚喜等著大家呢？

![Ruby x Elixir Conf Taiwan 2018 Official Website](https://cdn-images-1.medium.com/max/2000/1*FG2y7vyxXqaVUeGfiOUVOQ.png)

以往在活動頁面的架構上多採用單頁式設計，眾多的講者、豐富的議程與踴躍的贊助商常常導致頁面過長，不利閱讀。因此，這次改採多頁式設計，將議程（Program）、講者（Speakers）與贊助商（Sponsors）獨立出來，讓資訊能更清楚地呈現在頁面上，幫助使用者更有效地導覽。

網頁配色以紅紫漸層搭配白色背景，輔以幾何色塊和線條元素，展現年輕有活力的風格。首頁特別選用具有台北特色的三張照片 —— 著名的[台北 101](https://unsplash.com/photos/TZldfnLPZ3Q)、繁忙的[台北車站](https://unsplash.com/photos/MjyWAe-xYm8)與熱鬧的[夜市](https://unsplash.com/photos/j6uw8AE3sx0)，來歡迎眾多遠道而來的外國朋友。

![Events & Parities](https://cdn-images-1.medium.com/max/1000/1*J67WJmCwawm-4TQqDsWWdg.png)

此外，本次研討會也有許多衍伸的活動與 Party。為了讓會眾更有參與感，特別將連結設計成票卷的形式。科技帶來方便，設計更不能因此馬虎！

![Sketch App](https://cdn-images-1.medium.com/max/1000/1*WETSRBb5nCs6wfJKY0Nx5Q.png)

技術方面，[Sketch](https://www.sketchapp.com/) 已經成為我目前最仰賴的工具。簡單的操作介面、模組化的 Symbol 功能，還有眾多好用的 Plugin，讓我能夠在短時間內快速產出不同裝置的設計圖稿。搭配 [Zeplin](https://zeplin.io/) 一起服用，更能大幅提升開發效率 ⚡️

> Happy Design, Happy Coding :-)

-----------------

[Designing Case Study: Ruby x Elixir Conf Taiwan 2018 @ Medium](https://medium.com/@irene84111/designing-case-study-ruby-x-elixir-conf-taiwan-2018-af17060f7da8)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>

post-Designing Case Study: Ruby x Elixir Conf Taiwan 2018/cover

Designing Case Study: Ruby x Elixir Conf Taiwan 2018


# 在 Mac 上使用 Nginx + SSL & HTTP/2 做網站開發的設定

## 1. 安裝 Nginx

推薦使用 Homebrew 在 Mac 上安裝 Nginx：

```bash
brew install nginx
```

安裝完成後，就能用 brew services 來幫我們啟動 Nginx：

```bash
sudo brew services start nginx
```

## 2. 設定 Nginx

用慣用的編輯器打開 `/usr/local/etc/nginx/nginx.conf`，然後確認裡面有 `include servers/*.conf;` 這行。（通常會在最後一行，把前面的 `#` 註解符號拿掉就可以了）

## 3. 安裝 DNS Server

雖然透過編輯 `/etc/hosts` 也能達到類似的效果，但個人覺得這個檔在 Mac 上還是把這個檔交給系統控制就好，所以自己的習慣是在電腦上架個 DNS Server，然後在網路設定使用電腦上的 DNS Server 就好。

用以下指令可以安裝並啟動 dnsmasq：

```
brew install dnsmasq
sudo brew services start dnsmasq
```

## 4. 設定 DNS Server

同樣的，打開 `/usr/local/etc/dnsmasq.conf` 並且確認有這行：

```
conf-dir=/usr/local/etc/dnsmasq.d/,*.conf
```

（也通常會寫在最後一行，把前面的 `#` 註解符號拿掉就可以了）

然後，建立 `/usr/local/etc/dnsmasq.d/localhost.conf` 這個檔案，在裡面寫：

```
address=/localhost/127.0.0.1
```

> 也就是把所有 `*.localhost` 的網址解析到 `127.0.0.1` 的意思。

存擋後，執行 `sudo brew services reload dnsmasq` 來重載 dnsmasq 的設定。

> 如果要測試 dnsmasq 有沒有正確設定，可以執行 `nslookup test.localhost 127.0.0.1`，應該要得到 IP 是 `127.0.0.1` 的結果。

再來就是在系統的網路設定，把 127.0.0.1 加成其中一個 DNS server：

![](https://i.imgur.com/nuEbnTK.png)

注意除了 127.0.0.1 之外，裡面一定要有一個一般的 DNS server，不然其他公開的轉就會連不上去了。

> 要測試系統的 DNS server 有沒有設定好，可以在瀏覽器前往 `http://test.localhost`，應該要看到 `ERR_CONNECTION_REFUSED` 型而非 `ERR_NAME_NOT_RESOLVED` 的錯誤。

## 5. 簽署憑證與建立 Proxy 網站

為了方便執行這個步驟，我把需要做的事寫成了[一個 shell script](https://github.com/zetavg/dotfiles/blob/master/_bin/create-nginx-port-forwarding-localhost-server)。如果要為一個 Rails 網站、使用預設的 port 3000 開個新 server 的話，只要在專案目錄下執行：

```
create-nginx-port-forwarding-localhost-server site-name 3000 "$(pwd)/public"
```

就會建立提供 SSL + HTTP/2 的 `site-name.localhost` Nginx Virtual Host。用 `rails server` 啟動 Rails 之後，就可以在瀏覽器中用 `https://site-name.localhost` 來測試自己的網站了！

## 小結

雖然目前這套作法持續被我愉快使用中，不過還是有一些延伸應用需要找時間研究，例如：

- 如何設定 dnsmasq 來針對不同裝置回覆不同結果？例如自己的電腦要回 127.0.0.1，其他裝置就回目前電腦在區域網路下的 IP，這樣使用手機測試網站時，只要在手機改個 DNS 設定就方便了。
- 如果是開發 iOS 應用的話，iOS Simulator 預設會沿用電腦的網路設定，而且 127.0.0.1 也是指向實體裝置，所以在 Safari 下可以無痛地使用 `*.localhost` 網址。但是 native app 似乎就完全無動於衷了，似乎改 iOS 系統的 DNS 設定也沒有用，有點小困擾。
- Android Virtual Device 更麻煩一點，因為 AVD 系統中的 10.0.2.2 才是指向電腦的 127.0.0.1，所以無法只靠本篇的敘述就達成可以在 AVD 測試的目的。

也許最終極的作法是買個真實的 domain 搭配自架 reverse proxy，目前也還在研究中 XD


post-在 Mac 上使用 Nginx + SSL & HTTP/2 做網站開發的設定/cover

在 Mac 上使用 Nginx + SSL & HTTP/2 做網站開發的設定

post-Rails探索：Active Record篇 / cover

Rails 探索：Active Record 篇

post-寫隻 rake 讓你一行指令輕鬆跑報表-cover

寫隻 rake 讓你一行指令輕鬆跑報表


[上一篇文章](https://blog.frost.tw/posts/2017/10/22/The-ruby-s-class-is-free-Part-1/)已經討論過關於 Ruby 中的類別是怎樣運作的，這篇文章則會來討論如何拓展 Ruby 類別。

大部分的人寫 Ruby 有很大的原因是因為 Rails 但是上面像是 `has_many` 跟 `before_action` 這些可以直接在類別上做的事情，很明顯不是 Ruby 內建的，到底是怎麼運作的呢？

## Class Method

我們先來看一段範例

```ruby
class A
  def self.my_name_is(str)
     puts str
  end

 my_name_is 'A'
end
```

到這邊，大家可能已經猜到 `has_many` 這類 DSL 擴充是怎麼實做出來的。只是，背後的運作原理是什麼？

## Class Eval

上一篇文章我們有提到，下面兩段程式碼會是等價的。

```ruby
A = Class.new do
 # ...
end

# 上下兩段都是相同意思

class A
  # ...
end
```

也因此推測出 `class A; end` 中間的那個區塊，其實是一個 Block。不過我們並沒有討論這個 Block 是怎麼被運行的。

在 Ruby 的 `Class` 類別說明上，針對 `Class.new` 有提到「If a block is given, it is passed the class object, and the block is evaluated in the context of this class using class_eval.」這一段文字。

簡單來說，就是中間這段 Block 是透過 `class_eval` 方法來執行的，所以我們可以再繼續推導出以下的行為。

```ruby
A = Class.new do
 attr_accessor :name
end
```

相等於

```ruby
class A; end
A.class_eval { attr_accessor :name }
```

## Instance Method of Class

至於 `attr_accessor` 實際上是 `Class` 類別的實例方法。

```ruby
Class.instance_methods.include?(:attr_accessor)
# => false
```

怎麼會沒有？實際上 `Class` 類別已經 `include` 了 `Module`，而 `attr_accessor` 其實是 `Module` 類別的實例方法。

```ruby
Module.private_instance_methods.include?(:attr_accessor)
# => true
```

其實我們在 `Class` 上用 `private_instance_methods` 也可以找到 `attr_accessor` 這個方法，不過這其實是我們思考上的漏洞。因為 `attr_accessor` 是私有方法，所以我們沒辦法直接在 `instance_methods` 取得。

## DSL in Class

回到正題，關於 `has_many` 是如何定義的？

既然我們已經知道：

* 所有類別都是 `Class` 的實例
* 定義類別呼叫的是父類別的實例方法

這樣回到第一個範例的程式

```ruby
class A
  def self.my_name_is(str)
    puts str
  end
end
```

實際上是在定義類別 `A` 的時候， 同時對叫做 `A` 的類別 `Class` 物件實例，動態的追加 `my_name_is` 這個方法。也因此能夠讓 `A` 類別在進行 `class_eval` 的時候，提供 `my_name_is` 這個方法。

## 結論

每一種語言都有其特別的地方，在討論 DSL 的時候 Ruby 也經常會被拿出來討論。主要就是因為 Ruby 擁有這樣的性質，讓我們能夠動態的去定義類別和物件上的行為，進而讓實現 DSL 變的相對的容易。

雖然是一些相對冷門的知識，不過在必要的時候善用這些技巧可以幫助你用更優雅的方式去寫程式。

原文刊載於[弦而時習之
](https://blog.frost.tw/posts/2018/03/23/The-ruby-s-object-is-free-Part-2/)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


post-自由的 Ruby 類別（二）/ cover

自由的 Ruby 類別（二）

SASS (Syntactically Awesome Stylesheet) 是一種預處理語言 (pre-processing language)，透過 SASS 可以更有效、更結構化的產生 CSS，並有助於減少撰寫重複的樣式，讓你的 CSS 更易於維護。今天要跟大家分享的是 SASS 的 @mixin 與 @include。

SASS 提供兩種語法，分別是 SCSS (Sassy CSS)，以及 Indented，最大的差別在語法上 `{}`、`;`、`=` 的有無，以及前者的副檔名為 `.scss`，後者的副檔名為 `.sass`，筆者在文章內採用 SCSS 的語法來跟大家分享。

## 前置準備
範例中我們使用下列工具：

- 編輯器：Visual Studio Code (以下簡稱 VSCode)
- 安裝套件：Live Sass Compiler、Live Server

套件 Live Sass Compiler 安裝完成後，在 VSCode 的右下方有一個 `Watch Sass` 按鈕，他的功能是將我們撰寫好的 `.scss` 或 `.sass` 編譯過後產生 `.css`，我們在 html 裡要引入的就是這個被產生出來的 CSS 檔案。

當原來的 `Watch Sass` 按鈕變成 `Watching...` 的狀態時，我們還是可以繼續編輯 `.scss` 或 `.sass`，在編輯完成存檔的當下就會自動編譯並更新之前產生的 `.css`。
有關 `.min.css`、`Prefix` 的設定，可以參考 [Setting Docs](https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md) 的說明。

套件 Live Server 安裝完成後，在 VSCode 的右下方會出現 `Go Live` 按鈕，在我們編輯好 HTML 並確實引入 CSS 檔案，存檔後按下該按鈕，會自動在瀏覽器開啟網頁，顯示最新存檔後的畫面。(本篇著重在 SASS 的使用分享，所以先暫時略過畫面的部份囉)

## 什麼情況需要用到 @mixin、@include？

- 發現自己在 CSS 裡一直寫著重複的樣式。
- 網頁元件可以歸納出共同的特性時 (可能按鈕都有陰影、或是每個文章區塊都有邊框...等等)。
- 認為自己開發網頁 CSS 效率遇到瓶頸，欲尋更好的撰寫效率。

## 語法
### @mixin
- 以 `@mixin` 開頭，並自定義一個名稱，將需要重複使用的 CSS 放在 `{ }` 裡面。
- 定義好的 `@mixin` 是可以重複使用的。
- 可以在名稱後面加 `()`，放入參數、預設值做進階的使用。
- 參數名稱以 `$` 開頭。

```scss
  @mixin example_base {
    ... // 定義 CSS
  }

  @mixin example_advanced($parameter1, $parameter2) {
    ... // 定義 CSS
  }
```

### @include
- 搭配 `@mixin`，我們在 `@mixin` 定義好 CSS，再透過 `@include` 呼叫使用。
- 若定義的 `@mixin` 有設定參數，那麼在呼叫使用的時候，就要傳入相對應的引數。

```scss
  selector1 {
    @include example_base; // 呼叫使用在 @mixin 定義的 CSS
    ... // 這個 selector 的其他 CSS
  }

  selector2 {
    @include example_advanced(argument1, argument2); // 呼叫使用在 @mixin 定義的 CSS
    ... // 這個 selector 的其他 CSS
  }
```

## 範例一：基本用法
- 假設在網頁中，我們每個按鈕 `.button` 的樣式統一都是邊框加 5px 的圓角再加一點點陰影，每個 `.article` 要邊框加 5px 的圓角但不要陰影，每張圖片 `.image` 也都邊框加 5px 的圓角再加一點點陰影好了，這些 "邊框加 5px 圓角，或許再加一點點陰影" 的樣式，我們就可以把 CSS 拉出來做 `@mixin`，並在需要該樣式設定的時候使用 `@include`:

```scss
  @mixin rounded-border {
    border: 2px #333 solid;
    border-radius: 5px;
  }

  @mixin shadow {
    box-shadow: 1px 2px 2px #666;
  }

  .article {
    @include rounded-border;
  }

  .button {
    @include rounded-border;
    @include shadow;
  }

  .image {
    @include rounded-border;
    @include shadow;
  }
```

- 編譯過後的 CSS 呈現如下：

```css
  .article {
    border: 2px #333 solid;
    border-radius: 5px;
  }

  .button {
    border: 2px #333 solid;
    border-radius: 5px;
    -webkit-box-shadow: 1px 2px 2px #666;
            box-shadow: 1px 2px 2px #666;
  }

  .image {
    border: 2px #333 solid;
    border-radius: 5px;
    -webkit-box-shadow: 1px 2px 2px #666;
            box-shadow: 1px 2px 2px #666;
  }
```

- 將統一的樣式抽出來寫成 @mixin 的好處是，如果該樣式需要做調整的話，那麼只需要改 @mixin 這一個地方就好了，不用再一個一個找(或搜尋)。
- Live Sass Compiler 可以設定 Prefix，在編譯過後的 CSS 會自動加上。

## 範例二：使用參數
- 假設在網頁中，我們有一個遮罩覆蓋的效果，在 `.avatar`、`.product-image` 這兩個 class 都需要用到它，差別在遮罩透明度不一樣，那麼我們可以在 SASS 檔案裡這樣寫：

```scss
  // 定義遮罩覆蓋的基本屬性
  @mixin cover($opacity_value) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: $opacity_value; // opacity 的值由傳進來的參數決定
  }

  .avatar {
    @include cover(0.9); // 呼叫的時候帶入數值
  }

  .product-image {
    @include cover(0.8); // 呼叫的時候帶入數值
  }
```

- 編譯過後的 CSS 呈現如下：

```css
  .avatar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.9;
  }

  .product-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.8;
  }
```

## 範例三：使用參數 + 預設值

- 定義 @mixin 時若有使用參數，在呼叫的時候必須要依序傳入相對應的引數。
- 以範例一的 rounded-border 再作延伸：

```scss
  /*
    在 rounded-border 這個 @mixin 定義中，我們"依序"使用三個參數，並給它預設值：
    1. $color: border 的顏色，預設為 #333
    2. $line_style: border 的線條樣式，預設為實線
    3. $radius: border-radius 預設為 5px
  */

  @mixin rounded-border($color: #333, $line_style: solid, $radius: 5px) {
    border: 2px $color $line_style;
    border-radius: $radius;
  }

  .article {
    // 全部套用預設值，可以不用加 ()
    @include rounded-border;
  }

  .button {
    /*依序帶入引數：
      $radius 使用預設值，因為是排序在最後一個，可以不用帶入引數
      只要依序帶入前面 $color、$line_style 的值即可*/
    @include rounded-border(#f00, dashed);
  }

  .image {
    /*依序帶入引數：
      $color 使用預設值，因為不是排序在最後一個，若略過它直接帶入第二個值會導致配對錯誤，因此後面帶入的引數必須指定參數名稱*/
    @include rounded-border($line_style: dashed, $radius: 3px);
  }

```

註解看起來好像很複雜？這邊有幾點要稍微留意一下：

1. @include 的時候必須要依序傳入相對應的引數，講白話就是："一個蘿蔔一個坑"，跳過前面的坑，就要指定後面坑的名字，這樣後面的蘿蔔才不會跳錯坑 XD
2. 參數如果一次用太多反而會造成不便，因為自己還要記清楚那些參數的順序、數量，所以在設計 @mixin 時，要考量到使用的彈性跟方便性哦～

- 編譯過後的 CSS 呈現如下：

```css
  .article {
    border: 2px #333 solid;
    border-radius: 5px;
  }

  .button {
    border: 2px #f00 dashed;
    border-radius: 5px;
  }

  .image {
    border: 2px #333 dashed;
    border-radius: 3px;
  }
```

## 結論

  SASS 讓 CSS 寫起來很像在寫程式，對於沒有程式基礎的使用者來說其實也不需要太擔心， `@mixin` 的主要用意就是整理會重複使用到的 CSS，需要它的時候就用 `@include` 把它 "召喚" 出來，需要修改這些大量重複的 CSS 時，只要修改定義的地方即可，不用再大費周章的到處修改(也省去很多複製貼上)，是不是變得更有效率呢？


post-新手也可以輕鬆玩轉 SASS - @mixin and @include

新手也可以輕鬆玩轉 SASS - @mixin and @include


## 前言

這篇文章主要是提供給初學網站設計或由平面設計轉網站設計新手的文章。

我將分享我在設計網站的過程，希望可以幫助新手在開始進行時不至於毫無頭緒。

另外，不管你是新手設計或是已經入行一陣子的設計師，在設計的領域上每個人獲得靈感的方式、設計流程都不同，這邊分享其中一個方式，提供你作為參考，**期許你也可以找到屬於自己的設計流程和工作模式，一起面對各種設計挑戰**。:)

<br>
<br>

## 第一步｜你所要設計的網站類型？

首先，你必須要確認你目前設計的網站是屬於哪個類型？

他要達成什麼目的？他提供什麼樣的服務？解決什麼樣的問題？還有需要使用這個網站的人是哪群人？

亦或者你想要在這個網站上嘗試什麼？

試想一下，[Airbnb](https://www.airbnb.com.tw/) 和 [Netflix](https://www.netflix.com/browse) 的網站，是不是完全不同？

![post-如何著手設計你的第一個網站？](//images.ctfassets.net/8er52l3j5u76/4lFt3O8wTEowalB7qElwaN/15aa3fbf71e61a306e8e268cc987bd58/airbnb_netflix.jpg)

假設，今天是需要設計餐廳網站，是什麼樣的餐廳呢？燒烤還是義式料理？品牌定位又是如何呢？主打的是高單價的精緻料理還是平價小吃呢？
接著我們就可以稍稍想像，如果是家高級料理那麼會是什麼樣的感覺呢？是沈穩低調的？還是金碧輝煌呢？

通常我會聯想這個品牌的所有 **關鍵詞、意象** 列出來或是畫出類似心智圖的草稿。
這些詞彙、意象將有助於我們發想。

<br>
<br>

## 第二步｜開始規劃你的網站吧！別忘了給別人看看你的規劃吧！
有了對這個網站初步的想像後，接著拿出你的筆，先以樹枝狀的方式，列出你需要有哪些頁面、哪些區塊吧！

一般來說，這會由 PM、網站企劃從客戶端或是提出網站需求的部門囊整所有網站的需求，列出網站的功能、網站架構(有哪些頁面)；接著針對單一頁面進行那個頁面的規劃，包含這個頁面有哪些區塊、功能、按鈕，他大概會放在哪個位置？

一般會使用 [wireframe](https://blog.akanelee.me/posts/159788-what-is-wireframe/)  ，大致畫出後向需求的一方(客戶端)、工程師、設計師等人確認，在這個階段讓團隊的不同職位的人了解需求和架構，就比較能夠掌握時程、流程或是開發上可能會遇到的問題。

![post-如何著手設計你的第一個網站？](//images.ctfassets.net/8er52l3j5u76/36U8y2WoGFxi8k4AuWy4m0/fc6391a3796ed2511c9dd7cf7ef09520/wireframe.jpg)

所以，在網站規劃的初期，不妨也給不同專業的朋友看看吧，也許會有助於你釐清你的網站內容和流程喔！

<br>
<br>

## 第三步｜如何尋找靈感？
尋找靈感？不就是看一大堆設計就好了嗎？

沒錯，看大量的設計作品，是提升美感和設計能力的方式之一，但除了 **看** 圖片外，還必須學著分析，將流行的或是你喜歡的設計風格、樣式 **「輸入」** 到你的腦中，等到下次遇到適合的專案時，就有一個基本方向。

那麼該如何讀設計呢？在此也不限於 **設計** 領域，也需要欣賞純藝術、文學、展覽、立體的設計等。

剛開始你可能會搜尋大量的圖片或是在 [pinterest](https://www.pinterest.com/) 上儲存各種 Board，試著分析這些被存取的圖象的共通性？ 他們是不是都用插畫？ 使用什麼樣的色彩？ 畫面構成又是如何？

![post-如何著手設計你的第一個網站？](//images.ctfassets.net/8er52l3j5u76/72FXnx7495f8kLXoIQbqu3/d7a5b17fb6d9eb5d6903a722cd10a036/pinterest.jpg)

<br>

關於靈感搜集部分，以下是我經常瀏覽的網站：

* [Behance](https://www.behance.net/)
* [Dribbble](https://dribbble.com/)
* [Pinterest](https://www.pinterest.com/)
* [Lymma](https://www.lymma.net/)
* [Awwwards](https://www.awwwards.com/)
* [CSS DESIGN AWARDS](https://www.cssdesignawards.com/)
* [1GUU](https://1guu.jp/)
* [Web Design Clip](https://www.webdesignclip.com/)

<br>
<br>

## 第四步｜Case study
除了上述讀設計外，也可以針對現行的網站研究，試著去挖掘別人在製作這個網站時，為什麼會強調這個功能？或是為什麼會這麼設計呢？

再來如果是針對台灣市場做的購物網站，就不得不研究蝦皮、PChome、博客來、Pinkoi、lativ 手機版和電腦版又有哪些差異呢？
如果你對你所設計的網站或是某個功能、介面毫無頭緒時，可以研究的就是那個領域你想到的知名企業的網站或是常用的 app，因為好的網站、app 通常是經由一群團隊劃去維護的，當中不乏 UI/UX 設計、工程師、使用者反饋等，所以在功能設計上多少會有脈絡可循。

![post-如何著手設計你的第一個網站？](//images.ctfassets.net/8er52l3j5u76/4bGxYtGVbOg1uvzjXNtIdi/9c6cd06414f750155e168d8fc934b1ef/shop_ui.jpg)

像是我可能會因為要設計某個畫面，如果不知道這其中一個按鈕應該要放上面還是下面或是要不要很醒目時，這時我會去找同類型網站、相同功能，比較不同網站間這個功能再加上這個按鈕時，是怎麼設計的？

另外也可以閱讀 [Medium](https://medium.com/) 上的文章或是 [設計大舌頭](https://designtongue.me/) 部落格當中的案例分析，然後試著也自己分析看看吧！

更多的 UI / UX 部落格：

* [AAPD-As A Product Designer](https://medium.com/as-a-product-designer)：UI / UX 分享、設計資源與心得
* [獸群之心 / Soking](https://medium.com/@soking)：UX、產品設計分享
* [曝鹿刊物](https://medium.com/@soking)：設計經驗分享、美感養成
* [設計大舌頭](https://designtongue.me/)：UI / UX、互動設計、設計趨勢相關文章
* [嫁給 RD 的 UI Designer](https://blog.akanelee.me/)：UI / UX 設計分享

<br>
<br>

## 第五步｜善用網站的特性，玩設計吧！
你可以經過上述的內容，去學習、挖掘網站的一些特性，像是：

- **網站的畫面是活動的**：RWD 的設計已經是現行網站都必須考量的。你必須知道網站的畫面是具有彈性的，請考慮你的文字、圖片在桌機時和手機版時、不同尺寸的螢幕下該如何呈現？

- **使用者是不具耐心的**：在網路的世界，有太多有趣的事物在吸引使用者，你該為他們整理出網站重點。
    你需要區分出網站的資訊層級，將最重要的區塊或文字用顏色或按鈕的形式凸顯出來，讓使用者短時間了解這個網站的重點或是你希望他做什麼行動？

- **網站是互動的**：網站上你可以和使用者互動，像是滑鼠滑過會有什麼效果？滑鼠點擊又會出現什麼效果？或是滾動畫面時會有什麼樣的變化？透過這些不同的效果，可以豐富這個網站瀏覽的過程。(但是須小心使用，過的動畫或效果反而容易搞亂視覺動線、影響操作等，都會造成反效果。)

- **網站是具層次的**：透過互動效果，你應該 **跳脫平面** 的概念；網站很有趣的部分是透過元件(分頁、按鈕等)你可以有 **資料收合** 的概念。
    試想一下你的資料將會分別有個資料夾，此時在同一張紙上，比較次要的資料就可以收在資料夾內，等使用者需要時再打開來；而不是一次展開所有資料。

<br>

![post-如何著手設計你的第一個網站？](//images.ctfassets.net/8er52l3j5u76/3FQtrX1lMNTfUrTlSSXihR/bde91d7b2126507131e75220f4941569/layouts.jpg)
另外加上前端程式語言發展，網站已經不限於中規中矩的 section 一個一個區塊明顯的設計，他可以擁有圖層前後的概念又或者是分散式、格式的設計、甚至是像鏡頭一樣拉近拉遠的效果、橫式瀏覽的效果等。

最後，現在各種有趣的瀏覽方式正在被不斷產生，網站設計也越來越重視使用者在瀏覽網站當中的 **情境、體驗**，可以用遊戲的方式或是像讀故事書方式等，讓瀏覽網頁有不同的可能性；試著去細細體會那些你覺得有趣的網站，他是哪些細節上讓你多停留、嘗試的？他又是營造出什麼氛圍讓你印象深刻的呢？


posts-如何著手設計你的第一個網站？

如何著手設計你的第一個網站？


（範例會以 Rails 來實作，登入的部分使用 [devise](https://github.com/plataformatec/devise) 套件為例）

### 前言

不知不覺來到了 2019 年末。從 2016 年到現在，[AMP](https://amp.dev/) 也越發成熟完整（但我怎麼還是覺得 bug 還是有點多w），有很多實用的 components 也有豐富的範例可以參考。如果想要大大地提升網站在手機上的搜尋排序，實作 AMP 網頁會帶來相當不錯的效益呢。

由於 AMP 的種種限制，除了拿來實作 content 為主、功能不多的網站，大家很可能仍然對 AMP 望之卻步。今天就要來跟大家介紹透過實作 amp-access 顯示登入狀態的部分。

### 為什麼 Cache 頁面會是未登入呢？

當你開開心心地做了一個 AMP 網站，也丟上 Google Cache（或其他家的 AMP Cache，這裡以 Google 的為例），愉快地在搜尋頁面點下自家網站的連結，讀取速度飛快又美好 ♪

檢查了一下你突然發現：「欸？我不是一直保持登入狀態嗎？為什麼在 Cache 頁面上是沒有登入的呢？」

![post-透過 amp-access 讓你在 Cache 頁面也能順利保持登入！](//images.ctfassets.net/8er52l3j5u76/5hDvzQhSIatSv0Y4YR1ynS/489fb2ba0dca5d3810e614a59ff20359/original-n-cache-site-diff.png)

對於在本站已經登入的使用者來說，明明已經登入你的網站了，但是從搜尋結果進去的頁面卻是未登入狀態，也會感到相當疑惑，體驗上也不甚很好。

我們先來探討，究竟這個狀況到底是怎麼發生的呢？

舉例來說，原本頁面的 view 可能是像這樣：

```erb
<% if user_signed_in? %>
    親愛的 <%= current_user.name %> 你好！
<% else %>
    你還沒登入哦！快點擊
    <%= link_to('這裡', new_user_session_path) %>
    登入吧～
<% end %>
```

當 Google AMP Cache 要來爬你的網站的時候，他當然是沒有登入的狀態，所以就會爬到寫著「你還沒登入哦！快點擊這裡登入吧～」的版本，於是你的 cache 頁面永遠都是沒登入的狀況。

如果希望 cache 到的頁面上可以正常地顯示「親愛的 XXX 你好！」，可以借助 amp-access 這個元件來實現。

### Components

[AMP-access](https://amp.dev/documentation/components/amp-access/) 主要分成這些部分：

#### AMP Reader ID
匿名、唯一、不跨裝置的 ID，如果使用者沒有清理 cookie，有效期會是一年。

根據官方文件：
> Publishers can use their own authentication cookies, or they may rely on the Reader ID, or a combination of both.

如果是透過 cookie 來獲取登入資訊的話其實可以不用到 Reader ID。

#### Access Content Markup
用來定義網頁上的哪些部分要在什麼情況底下顯示或不顯示的 markup。

比方說你希望 signedIn 為 true 時顯示底下的元素，就會在元素上加上 `amp-access` 這個 attribute。

```html
<section amp-access='signedIn'>
    登入的使用者會看到這行字哦！
</section>
```

如果希望是 signedIn 為 false 才顯示：

```html
<section amp-access='NOT signedIn'>
    沒有登入的人會看到這行字哦！
</section>
```

按照上面的寫法，你可能預期一開始元件都不會出現，一直到 Authorization response 回來才會出現元件，但事實上這些元件一開始都會在畫面上，當 Authorization response 回來時才會「跳閃」一下，不該出現的元件才會隱藏起來。

![post-透過 amp-access 讓你在 Cache 頁面也能順利保持登入！](//images.ctfassets.net/8er52l3j5u76/5Rmc2q5rZqsWOrs4iCBD55/72585ece29ff713e1381eab3c3042948/without-amp-access-hide.gif)

如果希望一開始畫面剛 render 時不要顯示這個元件，可以加上 `amp-access-hide` 這個 attribute：

```html
<section amp-access='signedIn' amp-access-hide>
    一開始不會顯示，確定 response 中 signedIn 為 true 的話會看到這行字哦！
</section>
```

更多 access content markup 的語法請參考[官方說明](https://amp.dev/documentation/components/amp-access/#appendix-a:-%E2%80%9Camp-access%E2%80%9D-expression-grammar)。

#### Authorization Endpoint
在 AMP runtime 的時候會打這個 endpoint，根據 response 的 JSON 內容來 render 畫面。

#### Pingback Endpoint
當使用者開始瀏覽畫面或是完成 login 的時候，AMP 會去打 Pingback Endpoint。Pingback Endpoint 不需要 response，有 response 也會被忽略。比方官方提供的 [Paywall 範例](https://github.com/ampproject/samples/tree/master/amp-paywall-demo)，Pingback 就被用在計算使用者已瀏覽幾篇 article 等。

#### Login Link and Login Page
如果會用到 Reader ID 來實作登入的話，就會需要在 AMP-Access configuration 的時候加上 login 相關的 link：

```json
{
  "login": "https://mySite.blah/login?rid={READER_ID}"
}
```

接著在畫面上加上連結讓使用者登入：

```html
<a on="tap:amp-access.login">登入</a>
```

但因為等等的範例會是用自己的 cookie，就不會在 configuration 加上 login link。

### 簡易圖解

到這裡還看得很糊沒有關係，我們來大致了解一下 AMP-Access 大概是怎麼運作的。

1. 一開始 AMP runtime 夾帶著 cookies 會去打你（或你們家的後端工程師）寫好的 authorization endpoint。

![post-透過 amp-access 讓你在 Cache 頁面也能順利保持登入！](//images.ctfassets.net/8er52l3j5u76/7tB2QwtyHMdXK28ZZesPmq/5621d9133f44fdd23fcb2b81b2c48957/request-to-authorization-endpoint.png)

AMP 提供一些 [Access URL Variables](https://amp.dev/documentation/components/amp-access/#access-url-variables）)。比方說如果你的 authorization endpoint url 是像這樣：

```
https://yourSite.blah/api/amp-access/authorization?ref=DOCUMENT_REFERRER&rid=READER_ID&url=CANONICAL_URL"
```

實際上 AMP runtime 打 endpoint 的時候，rid 會變成 `rid=amp-OFsqR4pPKynymPyMmplPNMvxSTsNQob3TnK-oE3nwVT0clORaZ1rkeEz8xej-vV6`，url 變成 `https://yourSite.blah`。

2.這個時候你寫的 authorization endpoint 可能會根據 cookie 辨識使用者，回傳一個 json。

![post-透過 amp-access 讓你在 Cache 頁面也能順利保持登入！](//images.ctfassets.net/8er52l3j5u76/4t34TUCIcNrI5Z1DUVtDiu/831af27f1ac93dd674f11192d201fdc9/access-content-markup-replacement.png)

3.於是在 cache 頁面上，登入狀態也能正常顯示了，開開心心 ♫

### CORS in AMP

然而 AMP 有一些關於 CORS (Cross-Origin Resource Sharing) 的[規範](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/)。

如果沒有把網頁送上 cache，使用者是直接向你家的 server 送 request。但是如果使用者從 AMP Cache 那邊請求你的網頁， Cache 頁面在 AMP runtime 的時候會向你的 server 打 authorization endpoint，這個時候就會變成跨網域的連線了。

因此 AMP 也有針對這個情境，要求實作簡單的 request verification 並且根據他的要求設定 access control 相關的 header。

基本流程大致如下：
![post-透過 amp-access 讓你在 Cache 頁面也能順利保持登入！](//images.ctfassets.net/8er52l3j5u76/4GK6XyAk6fWlr0z1FVEK3j/ab659b6f1f0b314c7966a5ae2f697eb3/CORS-process.png)

1.如果 Header 有帶 `Origin`，就檢查是否是 allowed origins：

- 你自己的網站 eg. `mySite.blah`
- AMP cache eg. `mySite-blah.cdn.ampproject.org`

origin 不在 allowed origins 的 request 就讓你的 server 回傳 HTTP status 403 的回應，慢走不送。

2.如果沒有 `Origin` header 的，就檢查是否有 `AMP-Same-Origin: true`，有才放行，沒有一樣回 403。

當 AMP Runtime 在送 XHR request 的時候，如果是在 same origin 時，會自動幫你加 `AMP-Same-Origin: true` 這個 header。

3.在 response header 加上 `Access-Control-Allow-Credentials: true` 和 `Access-Control-Allow-Origin: <origin>`

這裡的 `<origin>` 指的是 response 的 origin。

聽到這裡，是不是覺得其實沒有很複雜呢（是嗎

那就來動手試試看吧！

### 三分鐘動手實做！
如果沒有碰壁卡關，view 沒有要大改的話，應該是可以在三分鐘內完成吧（欸

開始之前，請先準備一個有實作 AMP 的 Rails Application。

#### CORS Authentication
我們先來打造一個 base controller，讓之後實作的 API 都繼承這個 controller。（其實要改成 concern 也是可以）

除了 amp-access ，如果實作 AMP 中的 XHR request 等等也會有 CORS 的情境，這個時候就可以直接繼承這個 controller。

```ruby
module Api
  class BaseController < ApplicationController
  end
end
```

如果`Origin` 屬於 allowed origins（你的網站、AMP Cache），或者有 `AMP-same-origin: true` 的 header 才放行。且加上規定的 response header：

```ruby
module Api
  class BaseController < ApplicationController
    before_action :cors_verification
    ALLOWED_ORIGINS = [
      'https://mySite.blah',
      'https://mySite-blah.cdn.ampproject.org',
      'https://mySite.blah.amp.cloudflare.com'
    ]

    def cors_verification
      if request.headers['origin'].in?(ALLOWED_ORIGINS)
        origin = request.headers['origin']
      elsif request.headers['origin'].nil? && request.headers['AMP-same-origin']&.casecmp?('true')
        origin = request.base_url
      else
        render(json: { message: 'Unauthorized Request' }, status: :forbidden) && return
      end

      response.set_header('Access-Control-Allow-Credentials', 'true')
      response.set_header('Access-Control-Allow-Origin', origin)
    end
  end
end
```

#### Authorization Endpoint
接著我們做 authorization endpoint 的部分！這裡直接使用了 devise 的 `#{mapping}_signed_in?`、`current_#{mapping}` 等方法

```ruby
module Api
  class AmpAccessController < Api::BaseController
    def authorization
      render json: { signedIn: user_signed_in?, username: current_user&.name }, status: :ok
    end
  end
end
```

#### 設定 routes
當然不能忘了加 routes。

```ruby
namespace :api, defaults: { format: 'json' } do
  get :authorization, to: 'amp_access#authorization'
end
```

#### AMP Access configuration
記得要在你的頁面上加上 amp-access 的 required script：

```html
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
```

接著我們來加上 amp-access 的 configuration 吧。文件上要求 authorization endpoint 和 pingback endpoint 要帶 `READER_ID`。而 `RANDOM` 會回傳隨機亂碼，可以避免被瀏覽器 cache。

```erb
<script id='amp-access' type='application/json'>
{
    "authorization": "<%= api_authorization_url(rid: 'READER_ID', '_=': 'RANDOM') %>",
    "pingback": "",
    "noPingback": true,
    "authorizationFallbackResponse": {
        "signedIn": false
    }
}
</script>
```

#### Access Content Markup
相信剛剛看了 Access Content Markup 的介紹，現在應該已經很了解他的基本語法了。

如果原本你的 view 裡面有長得像這樣的東西：

```erb
<% if user_signed_in? %>
    <section> ... </section>
<% else %>
    <section> ... </section>
<%end%>
```

把它改成用 `amp-access` 和 `amp-access-hide`，管理它要不要在畫面上顯示：

```html
<section amp-access="signedIn" amp-access-hide>
  ...
<section>
<section amp-access="NOT signedIn">
  ...
<section>
```

那如果是要在畫面上顯示 username 呢？這個時候就會需要用到 [amp-mushtache](https://amp.dev/documentation/components/amp-mustache/)。

使用之前要記得加上 required script：

```html
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
```

使用 template 來顯示名稱：

```html
<section amp-access="signedIn">
    <template amp-access-template type="amp-mustache">
        親愛的 {{username}} 您好
    </template>
</section>
```

基本上到這裡就大功告成了！是不是能夠正常顯示登入了呢？

別忘了去試試看你的網站的 cache 版本是不是也運作正常哦 ( ～'ω')～


五倍紅寶石・專業程式教育機構

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

Designing Case Study: Ruby x Elixir Conf Taiwan 2018

在 Mac 上使用 Nginx + SSL & HTTP/2 做網站開發的設定

Rails 探索：Active Record 篇

寫隻 rake 讓你一行指令輕鬆跑報表

自由的 Ruby 類別（二）

新手也可以輕鬆玩轉 SASS - @mixin and @include

如何著手設計你的第一個網站？

透過 amp-access 讓你在 Cache 頁面也能順利保持登入！

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

地址 | 10046 台北市中正區衡陽路 7 號 5 樓

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款