五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar


隨著數位人才的需求逐年攀升，「工程師」也成為許多人心中嚮往的職涯選項與轉職目標，各式各樣「程式學習」資源也正在蓬勃發展。無論線上或實體課程、免費或付費教學，開始「學寫程式」的人數正在快速成長中。

然而「找到最適合自己的學習方式」可以說是程式學習路上最重要，也是最先要面對的課題之一。畢業於歷史系的小雅，從一個完全沒有程式開發經驗的初心者，到現在成為負責網站開發的專業後端工程師，這趟轉職歷程的起點，就是從五倍紅寶石的課程開始。

## 接觸程式的契機 是為了能更有效的溝通
小雅過去從事數位行銷，經常需要和工程師討論網站開發方向，但從未接觸過網站開發的她，對於網站的想像經常與實際開發的情境有所落差。

「當時最常聽到工程師同事說的一句話就是：『欸你這樣邏輯不對啊？』，其實每次聽到都會很納悶，到底什麼才是對的邏輯？慢慢心中就有了『想找機會接觸看看程式』的想法，想要了解工程師們到底都在想什麼。」

談起學習程式的初衷，小雅表示：「其實最一開始沒想過自己會有轉職工程師的機會，畢竟感覺這塊還是要有專精的知識，或是本科系出身才行，倒不如說是期待學了之後能夠幫上原本行銷的工作，和工程部門更有效的溝通。」

## 學習程式最重要的 是找到適合自己的方法
由於平日白天要上班，小雅決定利用下班時間在線上學習程式，但在學習過程中她發現，由於開課老師無法精確掌握學員進度，課程編排上容易忽略一些重要的基本觀念；除此之外，在課程或專案練習時遇到問題，也只能在 Facebook 的社團發問等待解答，很難得到立即性的回覆。

「後來一起上課的朋友跑來私訊我，説覺得這門課可能不太適合初學者，剛好那時注意到五倍的課程資訊，大家就一起去了解，最後決定加入五倍的課程試試。」

## 為初學者量身打造的課程 跨越從學習到就職的門檻
提起在五倍上課的經驗，小雅很開心的說：「五倍的課程真的是從0到1的課程！不只是基礎的 HTML、CSS 那種意思，而是針對初學者容易有的迷思或不容易理解的概念，反覆耐心的講解到學員都會為止，許多學員畢業後也經常回來求助，老師們也都很熱心的回應。」

另外，小雅也提到每週二在五倍舉辦的「默默會」，一個讓學員們自由交流提問的聚會，不管是實體課程或線上課程的學員，都能在默默會獲得幫助，老師也總是盡心盡力的解答學員遇到的問題。

擔心學生沒有實際接觸過業界、不了解求職眉角，因此在課程之外，五倍也定期舉辦徵才媒合會，小雅的收到第一份工程師面試，就是在媒合會上投遞的履歷，最後面試錄取的公司，也是在五倍上課期間接觸到的團隊。小雅認為：「其實非本科系的人要轉職，最大的門檻還是「如何求職」，五倍提供這樣的資源其實很好，畢竟只要能先踏入這個產業，就是很大的進步了。」

## 給想跨入程式領域的你：「不要害怕。」
「畢竟多數人對程式開發的想像，都是需要高度專業，有些非本科系的人，或是從來沒有接觸過程式的人，會覺得自己做不到、沒機會，光是跨不過這一步，就會把自己排除在學習程式，甚至轉職之外。」

小雅認為，學習程式最重要的是不要害怕，不管成功失敗，先投入試試看。就算最後真的學不起來，頂多就是回到原本的工作而已；如果學的順利，在多一份技能的同時，也多了一項職涯選擇。「學程式，就是這樣一趟苦盡甘來的歷程吧！」

1. 非本科系的你，只要肯嘗試去做，相信你也可以
2. 找到適合自己的方式學習非常重要！
3. 來 [默默會](https://www.facebook.com/rubymokumokukai/) ，認識技術圈的朋友，在學習上面獲得許多不同資訊交流，任何關於課程以及技術問題都能詢問五倍紅寶石專業團隊。
4. 近期舉辦說明會，有興趣不如直接去現場看看吧：[ASTRO X 五倍紅寶石 全端工程師實戰訓練營](https://astro.5xruby.tw/)


post-如何從數位行銷跨入成為軟體工程師？

如何從數位行銷跨入成為軟體工程師？

post-Serverless 與 Node-Canvas 實作動態圖表匯出 / cover

Serverless 與 Node-Canvas 實作動態圖表匯出

> 本學習筆記皆參考 Stephan Grider 在 Udemy 上所發表的付費課程 [Webpack 2: The Complete Developers Guide](https://www.udemy.com/webpack-2-the-complete-developers-guide/learn/v4/overview)，倘若對於本課程有興趣，非常推薦選修該課程。

## 什麼是 Webpack ?
Webpack 是一個 JavaScript 的建構工具，負責將無數的 JavaScript 檔案整合成一個檔案。

## 為什麼要使用 Webpack？

由於近代的網頁應用開發慢慢走向了「一頁式應用」(Single Page Application)，JavaScript 也開始佔了非常重要的角色，而同時 JavaScript 在應用程式當中的比例也呈現爆炸性的成長，因此我們必須想辦法降低 JavaScript 的複雜度並進行妥善的管理。

而在早期的應用程式當中，有可能只有兩三個主要的 JavaScript 檔案，但是裡面卻有上千行的程式碼，這樣的方式非常不易於管理與維護。想像一下，假設你今天需要修改網頁上的某個區塊，你要花多少時間去尋找對應的程式碼、並確認有沒有關聯的部分需要一併處理，以免弄壞別的功能？

因此，目前的開發也慢慢傾向將 JavaScript 模組化，例如我們會將 JavaScript 分成 `footer.js`、`search_bar.js`、`filter.js`，透過有意義的命名讓管理變得更加容易。

但這樣的管理方式也是個雙面刃，主要的缺點有兩個。首先，JavaScript 的模組之間可能會有依賴性。假設 JavaScript A 裡面會用到 JavaScript B 的模組，那我們就必須要先讀取 B 再讀取 A，這樣才不會出現錯誤。再者，假設們把三四個 JavaScript 拆成三、四十個檔案，會對頁面讀取的效能造成極大的影響，而這個缺點在行動裝置上將會特別明顯。

而 Webpack 的出現就是為了解決這樣子的問題。Webpack 會將你所有的 JavaScript連結成一個檔案，而更重要的是，他會確保所有 JavaScript 的讀取順序是正確的，讓你不需要再擔心依賴性的問題。

而 Webpack 的功用當然不僅於此，透過 Loader 可以將 JavaScript ES6 編譯成各個瀏覽器都通用的 ES5，或是編譯 CSS 甚至是圖片等等，但是最主要的核心功能還是將所有的 JavaScript 包成一個檔案，讓開發者可以同時兼顧網頁效能以及後續的維護便利性。

> 此分享轉載自五倍 Rails 工程師 Roy Huang 的 [開發筆記](https://roy-huang.com/2017/04/08/%E6%96%B0%E6%89%8B%E5%90%91-webpack-%E6%95%99%E5%AD%B8-1-webpack-%E7%B0%A1%E4%BB%8B/)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Webpack 觀念和原理嗎？
>
> 我們有開設 🏓 [React 全攻略入門班](https://5xruby.tw/courses/react) 課程，課程內包含『Webpack 5 入門教學』線上課程喔 ！ ❤️️
>


新手向 Webpack 完全攻略 – Webpack 簡介


## Multi-tenant 應用程式：讓人又愛又恨的 Apartment

隨著現在個人化網站的興起，許多網路服務都提供使用者自訂網站的功能。這些功能涵蓋許多面向，包含論壇、部落格與網路個人商店等。典型的自訂網站例子如 Wix 與 Weebly，個人商店則如 Shopmatic 與 Shopify 等等。在這些服務中，使用者可以在某些限度下自定網站的內容，建立屬於自己的資料，而不會與其他使用這個服務的使用者衝突。換句話說，不同的使用者使用同一個服務，但他們的資料卻是各自分離的，這便是最基本的 multi-tenant 的精神。由於以 multi-tenant 風格的網站建立越來越熱門，因此在各大網站開發框架上都有提供相關的開發工具可用。今天要跟各位讀者分享的，便是最常被用在 Rails 應用程式中的 multi-tenant 工具：`apartment`。

此篇文章中會大致介紹 `apartment` 這個套件如何使用，以及帶讀者建立一個簡單的 multi-tenant 部落格示範網站，並且提出一些使用 `apartment` 可能會遇到的問題。

## `apartment` 是什麼

`apartment`（[Github repo](https://github.com/influitive/apartment)）是 Ruby/Rails 圈最常用來製作 multi-tenant 的 gem。如同其英文「公寓」，`apartment` 可以讓我們蓋出公寓般的資料庫結構，每一戶的格局相同但卻都是獨立運行，互不影響。我們通常會把一戶單獨的使用者稱為一個「tenant」，也就是（公寓）的承租人。`apartment` 最大的特色是與 Rails 的 ActiveRecord 做了相當緊密的結合，使用者可以在指定了特定的 tenant 後，直接使用自己所熟悉的 ActiveRecord ORM（如部落格網站中取得所有文章的 ORM: `Article.all`，來取得只屬於自己 tenant 的資料），而不需要明確的加上 `where` 篩選條件（也就是不必用 `Article.where(tenant_id: 1)` 明確篩選自己的 `tenant_id`）。因為有著如此便利的特性，使得 `apartment` 經常被用來快速開發 multi-tenant 網站的原型。

底層資料庫的支援部分，`apartment` 最早先是以 PostgreSQL 為主要支援的資料庫，主要原因是因為 PostgreSQL 有「schema」的特性可以使用。`apartment` 會替每一個不同 tenant 各自開一個 schema，已達到資料隔離的功能。

後來版本的 `apartmemt` 也逐漸支援如 MySQL 等資料庫系統。不過基於穩定性與功能性因素，仍然建議大家使用 PostgreSQL 作為 `apartment` 底層的資料庫系統。因此，以下的情境都會假設使用者使用的資料庫是 PostgreSQL。

## `apartment` 的基本應用與例子

為了讓大家了解更近一步了解 multi-tenant 的應用程式運作，在這個章節中會帶讀者一步一步建立一個 multi-tenant 的部落格網站。以下環境是基於 `ruby 2.4.1` 與 `rails 5.1.4`

> **附註**：這個範例因為夠簡單，即使不需要使用 `apartment`，也可以輕易透過傳統的 `where` 條件來實作。`apartment` 帶來的好處在當網站中的 model 數量夠多時才會比較明顯（也比較讓人願意使用 `apartment`），但這裡基於示範的目的而刻意在這個迷你專案中使用 `apartment`。

首先我們先來定義一下這個迷你專案的功能。我們會製作一個具有登入功能的部落格網站，每一個使用者登入之後都可以對屬於自己的文章進行 CRUD （Create, Read, Update, Delete）操作，且無法干涉其他使用者的資料。

資料庫結構的部分如下圖，我們只會有兩個 model，分別是 `User` 與 `Article`。`User` 是存放登入用的使用者，同時也是文章的擁有者。使用者登入系統的部分我們會直接使用 `devise`（[Github repo](https://github.com/plataformatec/devise)）這一個套件來建立。至於 `Article` 則是每個使用者自己的文章，這個 model 會直接透過 Rails 的 Scaffold 功能直接建立。

在這個架構中，我們希望 `Article` 是每個使用者各自分開的，讓他們不能互相干擾。而 `User` 則是不根據 tenant 分開，因為這個 model 是給 `devise` 登入系統使用，因此是所有 tenant 之間共用的（稱為 `public` schema）。

大部分的欄位相信讀者都不陌生，幾個值得注意的是：`User` 有個特殊的欄位稱為 `tenant_name`，這是用來區別這一個使用者的 tenant，讓 `apartment` 知道該去哪一個 PostgreSQL schema 存取資料。至於存放在各 schema 中的表得（如 `Article`）則不需要傳統的 `user_id` 之類的欄位來記錄該文章屬於哪一個使用者。

![資料庫結構圖](https://i.imgur.com/1P7WJYc.png)

### 第一階段：建立沒有 multi-tenant 功能的一般專案

我們先由建立一個沒有 multi-tenant 功能的專案開始，先確保我們需要的每個零件都有正常運作。之後再來加入 `apartment` 來實現 multi-tenant 功能。

- 建立新專案

```text
rails new apartment-demo
```

- 修改 `Gemfile`，加入要用到的 gem，並且將資料庫 gem 改為 `pg`，並執行 `bundle`

```ruby
gem 'devise'
gem 'apartment'
gem 'pg'
# gem 'sqlite3' # 註解掉原本的 sqlite3
```

- 修改 `database.yml`，改為使用 PostgreSQL

```yml
default: &default
  adapter: postgresql
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000

development:
  <<: *default
  database: apartment-demo-dev

test:
  <<: *default
  database: apartment-demo-test

production:
  <<: *default
  database: apartment-demo-production
```

- 建立資料庫

```text
rake db:create
```

- 初始化 `devise`，並產生 devise views

```text
rails g devise:install
rails g devise:views
```

- 修改 `application.html.erb`，新增登入登出的連結

<script src="https://gist.github.com/lctseng/a26520daa61946ca5d15fed9fdbca8de.js"></script>

- 使用 `devise` 建立 `User` model，並加入 tenant_name 的欄位，同時也產生 controllers 供未來修改使用

```text
rails g devise user tenant_name:string
rails g devise:controllers users -c=registrations
```

- 修改產生的 migration file，記得將 `tenant_name` 設定為 `null: false` 並加入 unique index

```ruby
class DeviseCreateUsers < ActiveRecord::Migration[5.1]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      t.integer  :sign_in_count, default: 0, null: false
      t.datetime :current_sign_in_at
      t.datetime :last_sign_in_at
      t.inet     :current_sign_in_ip
      t.inet     :last_sign_in_ip

      t.string :tenant_name, null: false

      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true

    add_index :users, :tenant_name, unique: true
  end
end
```

- 修改 `app/views/devise/registrations/new.html.erb`，新增欄位讓我們可以填寫 `tenant_name`

<script src="https://gist.github.com/lctseng/eb1664442c6ff06a12a525e50899d491.js"></script>

- 修改 `routes.rb`，讓 `devise` 使用我們自訂的 controllers

```ruby
devise_for :users, controllers: {
  registrations: 'users/registrations'
}
```

- 修改 `app/controllers/users/registrations_controller.rb`，使得我們可以更新 `tenant_name` 這個欄位

```ruby
class Users::RegistrationsController < Devise::RegistrationsController
  before_action :configure_sign_up_params, only: [:create]
  def configure_sign_up_params
    devise_parameter_sanitizer.permit(:sign_up, keys: [:tenant_name])
  end
end
```

- 建立 `Article` 的 Scaffold。注意我們並不需要 `user_id` 欄位。

```text
rails g scaffold article title:string content:text
```

- 在產生的 `app/controllers/articles_controller.rb` 上方加入權限控制

```ruby
before_action :authenticate_user!
```

- 執行 DB migrate，此時可能會看到 `apartment` 噴出的一些警告，目前可以暫時忽略

```text
rake db:migrate
```

- 設定 `routes.rb`，將網頁的首頁指向文章列表

```ruby
root to: 'articles#index'
```

到目前為止，讀者可以啟動 `rails server`，檢視 `devise` 與 Scaffold 是否可以正常運作。這邊我們先註冊兩個使用者 Alice 與 Bob，其 `tenant_name` 分別設置為 `alice` 與 `bob`。此時雖然有使用者驗證，但你會發現此時的 `Article` 並沒有根據使用者做區別，所有人的文章都混在一起。

### 第二階段：使用 `apartment` 將不同 tenant 的資料區隔開

有了基礎專案之後，接下來就是進行 `apartment` 相關的修改，使得不同使用者之間的資料完全區隔。

- 建立 `apartment` 設定檔：`config/initializers/apartment.rb`，並修改內容：

```ruby
Apartment.configure do |config|
  # 因為 Devise 登入只能放在同一個 schema，因此將之從 apartment 排除
  config.excluded_models = ["User"]
  # 告知 apartment 如何找出所有的 tenant_name 供 migration 使用，這裡我們使用 User model 同名的欄位 tenant_name
  config.tenant_names = lambda{ User.pluck(:tenant_name) }
end
```

- 手動替 `alice` 與 `bob` 建立各自的資料庫 schema。由於前一階段並沒有替這兩個 tenant 建立 schema，因此這邊透過   `rails console` 手動建立

```ruby
Apartment::Tenant.create('alice')
Apartment::Tenant.create('bob')
```

- 讓未來新註冊的使用者可以自動建立 schema，修改 `app/controllers/users/registrations_controller.rb`

```ruby
class Users::RegistrationsController < Devise::RegistrationsController
  def create
    super do |user|
      # 這個 block 將在使用者被建立後執行，因此我們可以從這裡取出 tenant_name 來建立 schema
      Apartment::Tenant.create(user.tenant_name)
    end
  end
end
```

- 修改`app/controllers/articles_controller.rb`，限制所有的資料都只能在當前登入的 tenant schema 底下操作（也就是資料隔離）

```ruby
class ArticlesController < ApplicationController
  # 注意這幾個 before_action 的順序
  before_action :authenticate_user! # 設定 devise 時加入的
  before_action :switch_tenant # 新加入
  before_action :set_article, only: [:show, :edit, :update, :destroy] # scaffold 產生的

  # 這個 before_action 將會根據當前的使用者切換至該使用者的 schema
  def switch_tenant
    Apartment::Tenant.switch! current_user.tenant_name
  end
end
```

完成了！沒錯，就這麼簡單。重新啟動 rails server 後，你會發現現在 alice 與 bob 所建立的 `Article` 已經完全隔離了。不但不會在列表中看到別人的文章，就算透過 `/articles/1` 這樣的路徑，也只能看到自己名下編號為1的文章而已，沒辦法看到其他使用者的。此時你如果建立第三個使用者 Carol，其 `tenant_name` 為 `carol`，你也會發現這個新建立的使用者完全與其他人資料隔離。

本範例專案的原始碼也可以在 [Github](https://github.com/lctseng/rails-apartment-demo) 上找到。

## 使用 `apartment` 可能會遭遇到的問題

從上面的專案中我們可以看到使用 `apartment` 建立 multi-tenant 應用程式是多麼容易的事情。那為什麼這篇文章的標題卻又說「又愛又恨」呢？原因是 `apartment` 天生設計上就有一個缺陷，那就是當 tenant 數量成長到一定程度時，會出現許多預想不到的副作用。

最簡單的例子就是 Database Migration。因為 `apartment` 把資料完全隔離，所以在進行 migration 時各個 schema 會別處理。因此，當你使用的 schema 數量越來越大時，最首先感覺到的變化就是進行 migration 的時間會拉長。

另一個問題是記憶體消耗與程式啟動時間。由於在 `rails 4.2.2` 之前版本的架構中，會在啟動時根據資料庫 schema 中的表格逐個建立一份對應的資料存在記憶體中。這是個相當消耗時間與記憶體的動作。這個問題在 `apartment` 的 Github repo 中有給予一個 [patch 後的 rails 版本](https://github.com/influitive/apartment#excessive-memory-issues-on-activerecord-4x)，可以稍微舒緩記憶體壓力。

最後一個問題是硬碟空間。在某些檔案系統中，單一磁區所能儲存的檔案數是有上限的。因此如果 schema 總數太高，會造成 PostgreSQL 建立過多的檔案導致碰撞到這個上限。雖然這個問題解法比較多元，且不同檔案系統對檔案數上限也不同，因此也不一定會被讀者的專案所遇到。但如果今天萬一遇到了，不像前面幾個問題可以透過升級記憶體或者等待更長時間來解決，而是必須進行立即的資料搬移。我們都知道資料搬移是一個相當繁重的過程，且過程中可能需要讓服務停機，其損失不可估計。

## 實際案例

筆者近期經手的專案就一次碰到了以上三個問題。曾經有一個 `apartment` 專案使用了超過十萬個 schema，除了 migration 幾乎快要一整天以外，每次啟動 server 或 console 都要花費十幾分鐘的時間，且 server 記憶體動輒就消耗到 10GB。最嚴重的是這個專案還曾經在 production 營運時撞到了檔案系統的檔案數上限，導致服務差點就要凍結。

最後，在筆者與該專案開發團隊的努力下，成功找出一勞永逸的方案，並僅花四小時的停機時間進行資料轉換與搬移。詳細過程與解決方案，筆者將會在今年四月底舉辦的 [Ruby X Elixir Conf Taiwan 2018](https://2018.rubyconf.tw/program#liang-chi-tseng) 中分享這些細節，歡迎各位讀者共襄盛舉！

---

原文刊載於 [Henry Tseng's Digital Space](https://lctseng.github.io/post/multi-tenant-apartment/)

---

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

post-Multi-tenant 應用程式：讓人又愛又恨的 Apartment/cover

Multi-tenant 應用程式：讓人又愛又恨的 Apartment


## 「在飯店上班時，看到外籍的工程師坐在吧台寫程式、遠端工作，當時就在想，我是否有一天也可以做得到？」

我是一個後端工程師，在成為後端工程師之前，我做的是 bartender， 在服務業待了接近六年的時間。

有些人會說：「你應該大學就是資訊相關科系吧～」其實，我大學原本唸的是德文，甚至因為家庭因素，大一唸完就休學去工作；後來下定決心轉職後，從初次接觸程式，到找到工作，前後大約是一年的時間。

轉職之前，我在飯店業工作了滿長一段時間，

那時候看主管們的生活就大概可以想像未來的發展，如果一直留在飯店做服務業，薪水很容易遇到天花板限制，即使做到主管階級，也是長時間被綁在飯店，甚至得住在飯店。

就覺得這不是我想要的，我理想的工作是能夠有自己時間能夠陪陪家人，做想做的事。

曾經跟家人、朋友討論過類似的想法，回饋大概是都是：

「你現在的工作不錯呀，五星級飯店欸，多少人想進去呀」

「那個 xxx 的女兒以前也是跟你一樣，熬過來以後薪水也是...」

「轉職成功的都是特例，你不能把特例作為自己的人生規劃...」

## 開始起步學寫程式時的想法很簡單：

我覺得「所有公司都需要網站」，所以就先從網站開發開始學起。

當時新創創業的風潮很盛行，技術的部分蠻多是採用可以快速開發的 Rails。

加上自己很嚮往在新創上班，又聽說會 Rails 的人很少，就選擇 Rails 做主力學習的目標。

最初在 Udemy 上面找了很多免費課程，但學起來散散的，很沒有系統。

例如：

叫你「把程式碼複製貼上」，貼一次、貼兩次，第三次自己手寫看看。原本跟著教材跑覺得很有趣，這樣拼拼湊湊竟然真的就做出了一個煞有其事的網站。但學到後面，發現自己只會套課程的模板、框架，對程式語言的特性和邏輯完全搞不清楚，沒有能力自己開發出想要的功能。當時真的超崩潰，心裡一直想「我的網頁會動，但我不知道為什麼！」甚至開始覺得自己可能真的不適合走程式這行吧 ⋯⋯

在網路上找技術文章的時候，有找到五倍紅寶石的高見龍（龍哥）在 iT 邦幫忙寫的 Rails 系列文。覺得寫得很清楚，蠻多疑惑有被解開，看他的文章才知道有五倍這個教育機構。後來發現他有開實體的基礎課程，抱著有點去見偶像的心情參加。我印象很深的是那次參加的課程，龍哥講到一句話突破了我的學習盲點：

「要知道程式如何思考，怎麼用程式思考的方式去寫程式、看程式。」

那天還重新聽了一次基本的 function、變數等等的概念。把許多之前上過課不懂的地方都連結起來，整個豁然開朗，後來也報名了他們的完整課程。

總之，他們的課對有程式底子的人來說怎麼樣我不知道，但我自己覺得對曾經自學卻卡住遇到瓶頸的人來說，非常有幫助！

## 轉職規劃

參加完課程後，我原先打算給自己一年的時間，花半年累積一些作品集，半年找工作。當時去上實體課程是 2017 年 10 月的事，因為自己是一邊學習、一邊還有工作，所以有想把戰線拉長一點。

可能是我當初問問題問得特別勤吧，老師們對我都蠻有印象的。課程結業沒多久，在 2017 年 12 月的時候，就受老師們的引薦，獲得了人生中第一個工程師職缺的面試機會，很幸運的，也在 2018 年 2 月的時候確定拿到 offer、3 月到新公司上班！

「當初預計會花一年的時間，最後從開始上課到拿到工作，只花了半年，順利從 bartender 轉職軟體工程師！（笑）」

而這一切會過的這麼順暢，主要原因有以下幾點：

### 1. 實務專案

許多跟我一樣半路出家的朋友，在轉職的路上走得不夠順的原因，就是他們沒有經歷過「真正的專案開發」。這就好像一個廚師他研究過很多食譜、知道每個規則，但從來沒有自己煮過菜一樣，這樣的工程師是很難找到工作的。仿間很多程式教育機構，雖然有協助工程師做專案，但是沒有業界的工程師協助「review」，對於品質與工作流程上，水準與業界的工程師還是有落差。

### 2. 作品集
強烈建議要花時間好好整理自己的「作品集」與個人頁面！

![post-轉職只是選擇，我從 Bartender 轉軟體工程師](//images.ctfassets.net/8er52l3j5u76/d0CD1loFd0kXyp88UKrLO/aa574c20d431b3908600307336350d0c/portfolio-1.png)

> 這是我當時求職的作品集，包含過去的作品、專案、和工作經驗（跟程式設計不相關，所以著墨的很少，基本上只寫單位、職位、期間）

![post-轉職只是選擇，我從 Bartender 轉軟體工程師](//images.ctfassets.net/8er52l3j5u76/4neySDt5BeQkqWPaCgQ9rT/8fec8b95aa4da41f8293dbd5df2bf89e/portfolio-2.png)

> 專案的部分，我把我負責的部分、有什麼功能，用 HR 也看得懂的方式表達

![post-轉職只是選擇，我從 Bartender 轉軟體工程師](//images.ctfassets.net/8er52l3j5u76/nxi7PA2iW2rAtxPVNqLgM/e248b74a58572542d44b36b659e0a2af/portfolio-3.png)

> 面試的時候，因為自己不是本科系而且跳很大，很多面試官都會問「動機」，因此我也獨立整理出來

根據以上這兩個點，五倍紅寶石近期有專門為了這兩個點，設計了全新的線下課程，可以參考。

最後想跟大家講分享一些我自己經歷學習到轉職這段時間後的體悟：

很幸運的，我在開始求職後的三個月找到工作，但同時，這樣的幸運來自於我全心投入轉職的準備與程式學習。

老實說，我覺得其實要轉職成功是真的很辛苦的，從準備成為工程師，到成為工程師，是充滿荊棘的一條路。

網路上許多轉職文章寫的感覺很輕鬆，但只是沒有把累的那一面寫出來。

可能蠻多人的想法是：現在工作薪水太低，想轉工程師得到好起薪，但「工程師」這條職涯選項，是必須一直不停學習的，否則技術推陳出新，真的會跟不上。

如果妳還卡在猶豫要不要轉職的階段，建議妳可以先從免費的課程開始，不論什麼語言，或是前後端。先跟著課程實作點東西出來，才知道自己是否可以接受寫程式。

也可以參加一些社群聚會，例如 [默默會](https://www.facebook.com/rubymokumokukai/) ，來這邊跟五倍的同仁詢問。

寫程式這件事，挫折感和成就感幾乎是一樣大的，想不出來時的挫折很大，但做出來的時候成就感也一樣大。

對真的想要轉職的人來說，重要的是要能禁得起挫折失敗。這段路上，一定是經過無數次的失敗，才終於把版排好、把功能寫出來。

就拿 Rails 當例子，有稍微接觸過 Rails 的朋友應該都一樣，最一開始讓人感到挫折的，就是陰魂不散的紅畫面！像我就不是很有耐心的人，每次看到都覺得很心煩 XD

但是該說幸好這個語言夠體貼嗎？反正 Rails 出錯的原因都會寫在畫面上，靜下心慢慢看，就能找出錯在哪裡。

真正的難關是「如何實作一個想要的功能出來」，這就攸關到你對語言原理的認識，以及如何操作、思考的流程。

以上都是比較辛苦面的說法啦，當然學程式寫程式，一定也是有快樂的地方。對我來說最快樂的時候，就是我順利解決一個又一個的 bug 的時候。還有看到網站上線的成就感，真的會覺得「啊～苦盡甘來！」

最後，總結以上：

1. 轉職是辛苦的，但結果是甜美的（以我自身的例子）
2. 專案一定要給業界工程師「review」過，才能從中獲得扎實的成長，縮短所學與業界的落差
3. 來 [默默會](https://www.facebook.com/rubymokumokukai/) 找已經在業界工作的人聊聊、與五倍紅寶石的課程團隊聊聊，或許會有不同的想法
4. 最近看到他們有在辦說明會，有興趣不如直接去現場看看吧：[ASTRO X 五倍紅寶石 全端工程師實戰訓練營](https://astro.5xruby.tw/)

post-轉職只是選擇，我從 Bartender 轉軟體工程師

轉職只是選擇，我從 Bartender 轉軟體工程師


這篇文章要討論的是 XML 格式的 sitemap，而不是有時在一些網站上會看到的『網站地圖』頁面內容（HTML sitemap），而 XML sitemap 內的 URL 資訊以及附帶的 metadata 主要功能在於幫助搜尋引擎暸解一個網站內的連結以及所對應的頁面的一些額外資訊（如：最後修改時間、修改頻率...等）。

最基本的內容大概會像下方範例。當中可以發現 `<url>` tag 裡除了 `<loc>` 為必要的資訊外其他都可以選擇性填入。而目前支援 [standard sitemap protocol](https://www.sitemaps.org/index.html) 的搜尋引擎包含了 Google、Yahoo!、Microsoft。

```xml
<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

   <url> # 第一組 URL

      <loc>http://www.example.com/</loc> # 必填

      <lastmod>2005-01-01</lastmod> # 選填

      <changefreq>monthly</changefreq> # 選填

      <priority>0.8</priority> # 選填

   </url>

   <url> # 第二組 URL

      <loc>http://www.example.com/blog</loc>

   </url>

</urlset>
```

## Sitemap 與 SEO

Sitemap 與 Search Engine Optimization (SEO) 之間的關聯，常見的迷思大概有：

* 做了 sitemap 網頁就能在搜尋結果頁中出現
* 做了 sitemap 能提升網頁在搜尋結果頁(SERP)中的排名
* 不做 sitemap 網頁還是會出現在 google

前面兩點，大概可以用『買了兩塊肋眼牛肉回家就會自動變成情人節晚餐』比擬，而 [sitemap.org](https://www.sitemaps.org/index.html) 的說明是：

> Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling ... (略) ... so that search engines can more intelligently crawl the site.

當中說明了 sitemap 的作用在於讓搜尋引擎知道網站的存在以及當搜尋引擎在爬網站時能夠更有效率。這裡有兩個重點：

* **available** for crawling 意思是告訴搜尋引擎網站的 sitemap 已經準備好了，但不保證搜尋引擎的 crawler 什麼時候會爬
* **crawl** 不等同 **index** 。意即，搜尋引擎爬了也不保證會收錄，即使收錄也與 SERP 排名沒有直接關係

關於迷思的最後一項，確實，即使不做 sitemap ，網頁也是有機會被爬並出現在SERP。

#### 那...為什麼還要做？

搜尋引擎爬網站的速度與頻率，如同很多其他 SEO 因素，沒有標準答案。然而國外有些實驗比較網站沒有 sitemap 與有 sitemap 時搜尋引擎爬的速度差異，當中有一個[實驗](https://neilpatel.com/blog/google-index/#step_7)測出結果是，有 sitemap 時，搜尋引擎平均爬的時間是14分鐘，而沒有 sitemap 時是1,375分鐘。

相較於其他 SEO 因素，Sitemap 在提升排名方面或許沒有太大的幫助，但可以確定的是可以加快網頁被爬的速度。畢竟，在進一步優化 organic traffic 前先確保網頁出現在 SERP 會比較好。

## 在 Rails Web App 上實作 sitemap

以下是這次簡易實作範例的範圍，sitemap 部分使用 [sitemap_generator](https://github.com/kjvarga/sitemap_generator) gem。

1. 建立新專案、新增 articles CRUD
2. 產生部落格首頁與文章頁的 standard sitemap
3. 新文章產生後動態更新 sitemap
4. 提交 sitemap

### 建立新部落格專案、新增 blog CRUD

建立專案

``` shell
$ rails new index_me_google
$ cd index_me_google
$ rails db:create
```

因為是為了練習 sitemap，快速 scaffold 出 `Article` ，欄位部分就只給了一個 `title`。

``` shell
$ rails g scaffold Article title
$ rails db:migrate
```

另外設定一下首頁路徑

``` ruby
# routes.rb
root 'articles#index'
resources :articles
```

在 console 裡建立一些 articles

``` ruby
(1..5).each{ |num| Article.create(title: "article-#{num}")}
```

### 產生部落格首頁與文章頁的 standard sitemap
`sitemap_generator` 功能相當完整，從壓縮、ping 搜尋引擎這類貼心功能到支援 sitemap extensions（news, video ... 等），如果不是太奇特的需求，基本上這個 gem 都能幫忙做到。

安裝

``` ruby
# Gemfile
...
gem 'sitemap_generator'
...
```

產生設定檔

``` shell
$ rails sitemap:install
```

完成後會發現 `config` 資料夾下多了一個 `sitemap.rb` 檔案。初始檔案裡面只有幫我們預設一個 `default_host` 選項還有一個空的 create block。

``` ruby
# config/sitemap.rb
SitemapGenerator::Sitemap.default_host = "http://www.example.com"

SitemapGenerator::Sitemap.create do

end
```

`sitemap_generator` 產出的 sitemap 預設為壓縮檔，為了方便檢查之後產出的 xml 檔案內容，在開發階段通常我會將 `compress` 選項改為 `false`，另外記得將 `default_host` 改成自己的 domain。

``` ruby
# config/sitemap.rb
SitemapGenerator::Sitemap.default_host = "http://www.index.me"
SitemapGenerator::Sitemap.compress = false
...略...
```

接下來，在 create block 內加入我們想要放入 sitemap 內的 URL。

``` ruby
# config/sitemap.rb
...略...
SitemapGenerator::Sitemap.create do
  Article.find_each do |article|
    add article_path(article), lastmod: article.updated_at
  end
end
```

在操作上相當簡易， `add` 方法接收的第一個參數是路徑，第二個是 hash 選項，預設的選項為：

``` ruby
{ priority: 0.5, changefreq: 'weekly', lastmod: Time.now, host: default_host }
```

可以留意的是， crawlers 不一定會因為我們把 `priority` 設為 `1` 或 `changefreq` 設為 `always` 就增加重爬的頻率，把這些數值想成是給 crawlers 做決定的線索就好。另外，雖然有預設值，前三個選項不一定都需要（如：google 目前不採用 priority），可以視情況調整使用。

執行 `$ rails sitemap:create` 後產生一個 `sitemap.xml` 檔案，預設位置在 `public` 資料夾下。直接開瀏覽器檢查一下（localhost:3000/sitemap.xml）。設定正確的話會發現除了所有 article 的 URL 被寫入外，額外附贈 root `http://www.index.me`，如果不想要的話需要將設定選項 `include_root` 改為 `false`。

```xml
<urlset>
  <url>
    <loc>http://www.index.me</loc>
    <lastmod>2019-02-13T16:45:39+08:00</lastmod>
    <changefreq>always</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>http://www.index.me/articles/1</loc>
    <lastmod>2019-02-13T05:14:31+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>http://www.index.me/articles/2</loc>
    <lastmod>2019-02-13T05:14:31+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>

  ...略...

</urlset>
```

### 新文章產生後動態更新 sitemap
到目前為止，我們成功為『現有』的 articles 建立 sitemaps，但像是部落格文章或者是新聞之類不定期會新增或的動態頁面也需要 sitemap。比較常見的做法有使用 cron jobs 定時更新 sitemap，或者在頁面新增後立刻更新。

如果使用 cron jobs，可以參考搭配 [whenever gem](https://github.com/kjvarga/sitemap_generator#crontab) 使用；如果是後者， `sitemap_generator` 提供了對應的方法：

```ruby
class ArticlesController < ApplicationController

  ...略...

  def create
    @article = Article.new(article_params)

    respond_to do |format|
      if @article.save
        # 建立 sitemap
        SitemapGenerator::Interpreter.run(config_file: Rails.root.join('config', 'sitemap.rb'))
        # ping 搜尋引擎
        SitemapGenerator::Sitemap.ping_search_engines

        ...略...

      end
    end
  end

  ...略...

end
```
這樣基本上就能達到新增頁面後立即更新 sitemap 的效果，但建議可以把相關的行為用一個 job 處理。

### 提交 sitemap
在提交 sitemap 到搜尋引擎之前，還要準備一個置放在 server 頂層資料夾的 `robots.txt` 檔，作用在於指示 crawlers 該如何爬網站，當中也包含了提供 sitemap 位置的資訊（暸解更多關於 [robots.txt](https://moz.com/learn/seo/robotstxt) 使用方式）。 這裡只簡單做出允許所有搜尋引擎爬站並提供 sitemap 位置。

```txt
User-agent: *

Sitemap: http://www.index.me/sitemap.xml
```

以下使用 [Google Search Console](https://search.google.com/search-console) 為例提交 sitemap。

如果是第一次使用，必須先新增網站並驗證所有權。另外，新版的 google search console 沒有提供提交前測試的功能，如果有需求可以切到舊版使用。

填寫 `robots.txt` 網址測試

![post-使用 Sitemap 打好網站 SEO 基石](//images.ctfassets.net/8er52l3j5u76/1Vvoe59UySp5V1Dww858Xv/25e7494a5878583be13a64610d798a5b/hFfVjh5.png)

填寫 `sitemap.xml` 網址測試，如果測試結果正常，就可以正式提交了！過一段時間再回來 search console 就可以看到網頁被收錄的狀態。

![post-使用 Sitemap 打好網站 SEO 基石](//images.ctfassets.net/8er52l3j5u76/7o8mDeaug56JdJkJWP4GAr/2f48cc7ac65ea0ecbf1bd4ba6e183b20/pbMRbzJ.png)

## 結語
Rails 搭配 sitemap_generator 實作 sitemap 並不困難，所需時間成本也不高。雖然對於網站 SEO 沒有什麼直接加分的效果，個人會比較用『有好無壞』以及『SEO第一步』的角度看待。另外，如果有多餘心力，建議可以研究 [sitemap extensions](https://support.google.com/webmasters/answer/183668#extensions)，增加網頁在搜尋引擎的足跡。

---

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


post-使用 Sitemap 打好網站 SEO 基石

使用 Sitemap 打好網站 SEO 基石


專案中很常出現按鈕點下跳出 "確認視窗" 的行為，有時候是刪除的警告確認、有時候是資料送出的確認。這些有共同操作行為的 Component 都應該做成共用的元件以方便在各種情況下重複使用， 才不會某 A 做一個版本，某 B 做另一個版本，大家都自己寫自己的造成維護上的困難。

此文章不會詳細列出各項程式碼，如果有興趣可以 clone [source code](https://github.com/treekey999/react-promise-modal-example) 下來研究研究。

封面圖來源：[https://mrdoob.com/lab/javascript/effects/ie6/](https://mrdoob.com/lab/javascript/effects/ie6/)

---

期望可以用以下程式碼達到我要的目的：

```jsx
import React from 'react'

import { confirmBox } from './promiseModal'

class App extends React.Component {
  render() {
    <button
      onClick={() => {
        confirmBox({
          title: 'Logout',
          description: 'Are you sure to logout?',
        }).then(() => {
          console.log('Confirm, Do some logout action...')
        }).catch(() => {
          console.log('Cancel, Nothing happened...')  
        })
      }}
    >
      Logout
    </button>
  }
}

```

`confirmbox` 執行並帶入客製化 params，期望最後會回傳 `promise` 物件，並由 `.then()` 或是 `.catch()` 來知道使用者點下 `Confirm` 還是 `Cancel` 再做後續的動作。

---

### 實作步驟分析

* 準備一個基本的 popup modal component（確認視窗）。

* 因為 modal 是一個蓋版視窗，使用者必須要按下 `Confirm` 或 `Cancel` 按鈕才能繼續操作，所以選擇使用 `Promise` 物件來等待使用者按下按鈕。

* 執行 `confirmBox` 的時候，預期會 create 一個 `promise` 物件，並在裡面將 React Component 掛載到某個 div 上面(`ReactDOM.render`)，並將 `resolve`、`reject` function 當作 props 一併傳到 modal 中使用。

* 因為 modal 擁有了 `resolve`、`reject` 這兩個可以繼續 `promise` 的 function，所以可以在按下 `Confirm` 按鈕的時候呼叫 `resolve`，按下 `Cancel` 按鈕的時候呼叫 `reject` 來達成 `Promise Chain` 的目的。

* 無論按下哪一個按鈕後都應該要清除、卸載，動態掛上去的 React Component。

* 以下解說都會省略 css code, 有興趣可以看 [source code](https://github.com/treekey999/react-promise-modal-example/commits/master)

---

### Step 0. 準備範例按鈕

```jsx
class App extends Component {
  render() {
    return (
      <div className="App">
        <button
          type='button'
          className='btn-example logout'
        >
          Logout
        </button>

        <button
          type='button'
          className='btn-example submit'
        >
          Submit
        </button>

        <button
          type='button'
          className='btn-example delete'
        >
          Destroy
        </button>
      </div>
    );
  }
}
```

![post-React Promise Modal](//images.ctfassets.net/8er52l3j5u76/7ELSNkT1Mp68uD5EOFVEW0/5db4be62d877273c8c463acc58ad802c/hChnSKR.png)

---

### Step 1. 準備基本 popup modal

使用 [react-modal](https://github.com/reactjs/react-modal) 來快速建造一個確認視窗的 modal。

```jsx
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import Modal from 'react-modal'

const ConfirmBox = (props) => {
  const {
    color, // 客製化顏色
    title, // 客製化文字
    description, // 客製化文字
    onConfirm, // 預期收到 resolve function
    onCancel, // 預期收到 reject function
    confirmText, // 客製化文字
    cancelText, // 客製化文字
  } = props

  // `useState` 是 react 16.8 新功能 hooks, 等同於 state/setState 效果
  // 初始值為 true
  const [isOpen, setIsOpen] = useState(true) 

  const onClickConfirm = () => {
    // 按下 Confirm 將 modal 關閉, 並執行 onConfirm (resolve function)
    setIsOpen(false)
    onConfirm()
  }

  const onClickCancel = () => {
    // 按下 Confirm 將 modal 關閉, 並執行 onCancel (reject function)
    setIsOpen(false)
    onCancel()
  }

  return (
    <Modal
      overlayClassName='promise-modal-overlay'
      className='confirm-box'
      isOpen={isOpen}
      onRequestClose={onClickCancel} // 點下 modal 之外的區域時觸發 (modal overlay)
      shouldReturnFocusAfterClose={false}
    >
     <div className={`modal-container color-${color}`}>

      <div className='modal-header'>
        <h3>{ title }</h3>
        <button
          type='button'
          className='close-btn'
          onClick={onClickCancel}
        >
          X
        </button>
      </div>

      <div className='modal-content'>
        <p>{ description }</p>
        <div className='button-list'>
          <button
            type='button'
            className='cancel'
            onClick={onClickCancel}
          >
            { cancelText }
          </button>
          <button
            type='button'
            className='confirm'
            onClick={() => onClickConfirm()}
          >
            { confirmText }
          </button>
        </div>
      </div>
     </div> 
    </Modal>
  )
}

```

測試一下剛剛做的 Component Render 有沒有正確，丟到測試頁面看看 js/css 有沒有正確。

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

---

### Step 2. 製作 Promise function

流程可以拆分為以下：

  * 動態產生不重複的 div element，為了讓 `ReactDom.render` 掛載上去。
  * new 一個 `Promise` 物件，並在第一個 promise 裡面將 `Modal Component` 掛載上去。
  * 成功 render React Modal 之後就會在介面上看到蓋版 Modal，並等待使用者按下按鈕之後接續呼叫 `resolve`、`reject` function。
  * 卸載、移除先前動態產生的 Component、Element。

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import Modal from 'react-modal'

// 卸載、移除先前動態產生的 Component、Element
const unsetPromiseModal = (wrapper) => {
  setTimeout(() => {
    ReactDOM.unmountComponentAtNode(wrapper)
    wrapper.remove()
  }, 300)
}

// 動態產生不重複的 div element
const findOrCreateWrapper = (identifyID) => {
  let wrapper = document.getElementById(identifyID)
  if (wrapper === null) {
    wrapper = document.body.appendChild(document.createElement('div'))
    wrapper.id = identifyID
  }
  return wrapper
}

// params 預期接收要被掛載的 Component, 跟客製化 options
const promisableModal = (Component, options = {}) => {

  // 動態產生不重複的 div element
  const wrapper = findOrCreateWrapper(`promise-modal-wrapper-${Date.now()}`)

  // 無障礙網頁辨識用, 參考：http://reactcommunity.org/react-modal/accessibility/#
  Modal.setAppElement(wrapper)

  const promise = new Promise((resolve, reject) => {
    ReactDOM.render( // 掛載 React Component
      <Component
        {...options} // 帶入客製化參數(props)
        onConfirm={resolve} // resolve 傳給 onConfirm
        onCancel={reject} // reject 傳給 onCancel
      />,
      wrapper,
    )
  })

  return promise.then(() => {
    // 使用者按下 Confirm 之後執行此段
    unsetPromiseModal(wrapper)
    return true
  }, () => {
    // 使用者按下 Cancel 之後執行此段
    unsetPromiseModal(wrapper)
    return Promise.reject(false)
  })
}

export default promisableModal

```

由於最後回傳的是一個 `promise` 物件，如果接續著呼叫 `.then()` 會在使用者按下 `Confirm` 後接續執行；如果接續著呼叫 `.catch()` 會在使用者按下 `Cancel` 後接續執行。

---

### Step 3. 組合

```jsx
import './style.scss' // base modal overlay csss

import promisableModal from './promisableModal'
import ConfirmBox from './components/ConfirmBox'

// 將 ConfirmBox 和 promisableModal 做組合
const confirmBox = props => promisableModal(ConfirmBox, props)

export {
  promisableModal,
  confirmBox,
}
```

因為已經寫好了可以 `promisable` 的 function，所以未來如果想要擴充其他種類型的 modal，都可以透過 `promisable` 輸出，例如未來我如果想做一個編輯蓋版視窗：

```jsx=

... 省略

import EditBox from './components/EditBox'

const editBox = props => promisableModal(EditBox, props)

export {
  promisableModal,
  confirmBox,
  editBox, // 新的擴充
}

```

---

### Step 4. 使用

三種不同情境的確認視窗，都只要呼叫同一個 promise function 來達成目的，達到 reuse 的目的。

```jsx
import React, { Component } from 'react'
import './App.scss'

import { confirmBox } from './promiseModal'

class App extends Component {
  render() {
    return (
      <div className="App">
        <button
          type='button'
          className='btn-example logout'
          onClick={() => {
            confirmBox({
              color: 'primary',
              title: 'Logout',
              description: 'Are you sure to logout?',
            }).then(() => {
              console.log('%c Click Confirm!, prepare to logout ...', 'color: blue')
            }).catch(() => {
              console.log('%c Click Cancel!, nothing happened ...', 'color: blue')
            }) 
          }}
        >
          Logout
        </button>

        <button
          type='button'
          className='btn-example submit'
          onClick={() => {
            confirmBox({
              color: 'info',
              title: 'Submit Form',
              description: 'Are you sure to submit form?',
              confirmText: 'Submit',
            }).then(() => {
              console.log('%c Click Confirm!, prepare to fetch data to backend api ...', 'color: green')
            }).catch(() => {
              console.log('%c Click Cancel!, nothing happened ...', 'color: green')
            }) 
          }}
        >
          Submit
        </button>

        <button
          type='button'
          className='btn-example delete'
          onClick={() => {
            confirmBox({
              color: 'danger',
              title: 'Delete Product',
              description: 'Are you sure to delete this product?',
              confirmText: 'Delete',
            }).then(() => {
              console.log('%c Click Confirm!, prepare to fetch data to delete product ...', 'color: red')
            }).catch(() => {
              console.log('%c Click Cancel!, nothing happened ...', 'color: red')
            }) 
          }}
        >
          Destroy
        </button>
      </div>
    );
  }
}
```

![](https://i.imgur.com/acalG7Y.gif)

---

Don't Repeat Yourself，這個範例的元件在我先前的幾份專案中都有用到，而且都只是複製最初的那一份出來調整 css 而已。

寫 React 的時候不妨思考一下專案中哪些是常常共用的元件，試著練習抽離出來做成 shared component，會省下未來不少時間。

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 React 觀念和原理嗎？
>
> 我們有開設 💠 [React 全攻略入門班](https://5xruby.tw/courses/react) 課程唷 ❤️️
>


post-React Promise Modal

React Promise Modal


[calc()][0] 是一個 CSS function 作用於屬性設定是數值的時候可以進行加減乘除的運算，例如： `<length> 長度`、`<frequency> 頻率`、`<angle> 角度`、`<time> 時間`、`<number> 數字`或者是 `<integer> 整數`這幾個屬性值都可以使用 `calc()`。

```css
/* property: calc(expression) */
/* 屬性: calc(運算式) */
width: calc(100% - 50px);
```

## calc() 語法

calc() 這個 function 需要傳入 1 個加減乘除的運算式，在設定 `width`、`height` 這種 \<length\> 相關的屬性時， 在不同單位間也可以進行運算，如剛剛上面的範例：`width: calc(100% - 50px);`。calc() 的運算式一樣是按照先乘除後加減進行計算，如果需要進行複雜的運算，在 calc() 裡面也可以再加入括號 `()`，就可以設為括號先決裡面的先算。

- `+`：加
- `-`：減
- `*`：乘。其中一個運算參數必須是數字 (number)
- `/`：除。除數必須是數字，除數不可為零，會造成 HTML 解析錯誤。

必須注意在使用 + 和 - 的時候，在前後一定要加上空白，不然會被誤為是給了個負值。* 和 / 可以不用加，但為了格式統一方便和閱讀建議還是加一下。

```css
width: calc(50% + 8px)
/* 意思是 50% 的寬度 + 上 8px */
width: calc(50% + -8px)
/* 意思是 50% 的寬度 + 上 -8px，也等於 '50% - 8px' */
```

## Example 應用範例

### 定位

calc() 可以用來定位，如下面所設定的 CSS，就能作出一個滿版的藍色 banner 區塊有固定 40px 的邊距，也是一種將區塊置中的寫法。

```css
.banner {
  position: absolute;
  left: calc(40px);
  width: calc(100% - 80px);
  background-color: #6C92AF;
  padding: 6px 0;
  text-align: center;
  color: #FFF;
}
```

```html
<div class="banner">Hello banner/div>
```

<p data-height="265" data-theme-id="light" data-slug-hash="PEgoZq" data-default-tab="css,result" data-user="fokayx" data-embed-version="2" data-pen-title="CSS_calc" class="codepen">See the Pen <a href="https://codepen.io/fokayx/pen/PEgoZq/">CSS_calc</a> by fokayx (<a href="https://codepen.io/fokayx">@fokayx</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### 根據父層容器尺寸自動調整尺寸

設定 width 或 height 屬性使用 calc() 計算的數字是 100% 的時候，會自動去抓父層容器的尺寸。例如：做 autocomplete 的時候，希望在輸入框下，出現和輸入框等寬的列表：

```css
.container1 {
  width: 30%;
}

input {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin: 0;
  border-left: 2px solid #6c92af;
  border-right: 2px solid #6c92af;
  border-top: 2px solid #6c92af;
  border-bottom: 2px solid #6c92af;
}

ul {
  background-color: #6c92af;
  margin: 0;
  padding: 0;
  width: calc(100% + 1rem + 1rem + 2px + 2px);
  color: #FFF;
  list-style: none;
}
```

```html
<div class="container1">
  <input placeholder='container1'/>
  <ul>
    <li>show item 1</li>
    <li>show item 2</li>
    <li>show item 3</li>
  </ul>
</div>
```

由於 CSS 在加上 border、padding 的時候都是從原本設定得尺寸再往外加，所以長出來的東西看起來的尺寸會比原本設定的 width 還要大，因此要做到 ul 和 input 等寬的結果，在 input 加上的 padding 和 border 在算 ul 的 width 的時候也要幫他算進去，所以 `ul { width: calc(100% + 1rem + 1rem + 2px + 2px); }` 指的是：符合父容器的 100% 寬度，加上 input 的 `padding-left: 1rem` 和 `padding-right: 1rem`，再加上 `border-left: 2px` 和 `border-right: 2px`。用 calc() 計算尺寸非常方便，即使不同單位也沒有問題。如：codepen 第一個區塊。

如果在 ul 有設定 border、padding，ul 自己也會長大，在 calc() 計算的時候就必須扣掉這部份，例如：codepen 第二個區塊。

```css
.container2 {
  width: 30%;
}

.container2 input {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin: 0;
  border-left: 2px solid #6c92af;
  border-right: 2px solid #6c92af;
  border-top: 2px solid #6c92af;
  border-bottom: 2px solid #6c92af;
}

.container2 ul {
  background-color: #6c92af;
  margin: 0;
  padding: 0;
  border: 1px solid #212c35;
  width: calc(100% + 1px + 1px);
  color: #FFF;
  list-style: none;
}
```

```html
<div class="container2">
  <input placeholder='container2'/>
  <ul>
    <li>show item 1</li>
    <li>show item 2</li>
    <li>show item 3</li>
  </ul>
</div>
```

<p data-height="265" data-theme-id="light" data-slug-hash="JMqyyP" data-default-tab="css,result" data-user="fokayx" data-embed-version="2" data-pen-title="css_calc_ex2" class="codepen">See the Pen <a href="https://codepen.io/fokayx/pen/JMqyyP/">css_calc_ex2</a> by fokayx (<a href="https://codepen.io/fokayx">@fokayx</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### 將 calc() 巢狀包入 CSS 變數中

只要用括號 () 包好包滿，就可以無限次使用 calc() 方法，會一層一層從括號裡面計算出來。

```css
.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}
```

在上面這段程式碼裡面展開所有變數之後 widthC 就等於：

`--widthC: calc( calc( 100px / 2) / 2)`

所以 .foo 的 width 最後算出來的值就是 25px。

[0]: https://developer.mozilla.org/zh-TW/docs/Web/CSS/calc 'calc at mdn'

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 HTML / CSS 觀念和原理嗎？
>
> 我們有開設 🪁 [HTML 網頁設計新手村](https://5xruby.tw/courses/html) 課程唷 ❤️️
>


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

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

如何從數位行銷跨入成為軟體工程師？

Serverless 與 Node-Canvas 實作動態圖表匯出

新手向 Webpack 完全攻略 – Webpack 簡介

Multi-tenant 應用程式：讓人又愛又恨的 Apartment

轉職只是選擇，我從 Bartender 轉軟體工程師

使用 Sitemap 打好網站 SEO 基石

React Promise Modal

CSS： calc() 數值運算

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

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

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款