五倍直播間

Blogs - Sidebar

[Photo created by tirachardz - freepik](https://www.freepik.com/photos/travel)

> 曾想想過自己花多少時間上網嗎？

重度網路成癮症的我們每天拿著手機滑呀滑的，通勤時滑，就連上班和上廁所的時候都在滑，就這樣，我們每天在不同的社群平台瀏覽大量資訊，在不同的網頁上來回擷取資訊，滑手機漸漸變成現代人一種戒不了的癮！

你可能心裡有個網站待看清單，每天固定來回瀏覽 Facebook 和 Instrgram 又或是網拍的新品登場，你也可能沈迷於社群媒體，深怕錯過周遭身邊親友的分享，讓自己一不小心就變成時代的眼淚（擦）；你也可能透過某個網頁獲得知識，經由連結或是搜尋進到其他網站，資訊的流通彈指間就能完成。

> 你最常瀏覽的網站又是哪些呢？

也許有人會說 PChome 或是 Ikea，但不論是哪一個網站，你曾經想過自己的視覺習慣嗎？每次瀏覽網頁時，哪些網站會特別留住你的目光呢？它們有什麼共同的特色或是風格呢？

如果你是網頁菜菜子，不妨跟筆者的腳步認識一下網頁是什麼，跟著我的視角來練習，一步一步打穩網頁的基本概念！

> 網站怎麼組成了呢？

我們每天瀏覽的網站到底是怎麼組成呢？這邊簡單地將網站分為「前端」和「後端」。

- 前端：掌管一個網站的所顯現的畫面和排版。
- 後端：控制一個網站的功能或是資料庫管理，例如：金流或是發信系統。

這是最籠統的分類，不管是前端和後端，它們的學問極深，都有各自的發展規則，彼此可能卻有息息相關。

![認識網頁開發從生活開始](//images.ctfassets.net/8er52l3j5u76/6iJfm6d28xcWpyq54C0hPO/ace6bf3f5b72d5549880326a972b5c6a/17gSk3d.png)
[Photo by Florian Olivo](https://unsplash.com/photos/4hbJ-eymZ1o)

## ❏ 前端的三大基礎天王

筆者要帶大家稍微認識前端的三大基礎天王，用一個簡單的例子讓大家可以更好理解。
想像一下，如果我們把網站想像成一個人，「前端」- 負責一個人的外貌長相有沒有突出，而「後端」就控制人的器官和四肢能不能正常運作。

前端，你必須要認識三大天王，它們分別為 HTML 和 CSS 以及 JavaScript。有了以上三位的幫忙，一個人的肢體表現才能活靈活現！

- HTML：就是臉上的五官和身體的四肢要擺在對的地方，總不能把嘴巴擺在眼睛的上面。
- CSS：可以想成化妝品和裝飾品， CSS 替你的身體穿上一件漂亮的洋裝還是帥氣的皮外套；又或是要替你的嘴巴畫上淡橘還是現在流行的奶茶色口紅，跟外觀相關的就由 CSS 來決定。
- JavaScript：則是掌管身體的神經元素，讓骨架可以移動，讓身體可以改變姿勢。

透過這樣簡單的介紹，從生活開始認識網頁，對於「前端」這個名詞在網站上代表的意思，是不是具體多了呢！

## ❏ 網頁起步走

仔細回想大家開網站的習慣，都我們透過連結又獲釋搜尋引擎進入網站，而網站內又按主題分類分成數十個網頁。
我們就先從網頁寫在哪裡開始認識吧！

## ❏ 網頁寫在哪裡呢？

無論你是要寫在電腦裡頭的記事本，又或是 Office 的 Word ，只要能把文字寫下來的應用程式都可以用來寫網頁，要特別注意的是網頁是由 HTML 格式完成的，不過你用什麼應用程式，副檔名記得改成 `.html`，這樣在瀏覽器 (Chrome、Safari、Firefoxe 等)開啟檔案時，才能正確讀取唷！
但一般寫網頁會在專門寫網站的工具編輯器或網站上撰寫喔！ (別擔心，這篇文章將會一步一步帶你認識這些工具！)

### ❏ 寫在 CodePen 
你甚至可以使用線上的程式碼編輯器 [CodePen](https://codepen.io/) 學習，優點是每個輸入的步驟都會同步更新，讓你可以立刻所見即所得。

![認識網頁開發從生活開始-codepen](//images.ctfassets.net/8er52l3j5u76/8v44ofoxiXTFguz7GKjUu/10f3ab5940ac0997ba7d3632710efbcb/s_D3520281EBAB9DACD16F76C14C72BCBF85E4CE85232A9C8CC4225FF8DC312F07_1614572800191__2021-03-01_12.25.03.png)

接著點選左邊的 Pen 後，畫面則會被切為兩半，上半又分為 HTML、CSS 和 JavaScript 三個部分，下半部則會根據你上方所做的動作而呈現出來的內容。

![認識網頁開發從生活開始-codepen](//images.ctfassets.net/8er52l3j5u76/3034YLTCwvjMEUilOMNWH0/4692bc1b0d5ef7ad4d8248d519282a3d/s_D3520281EBAB9DACD16F76C14C72BCBF85E4CE85232A9C8CC4225FF8DC312F07_1614573587711__2021-03-01_12.37.38.png)

看看 CodePen 的結構，我們已經很清楚的知道 HTML、CSS 以及 JavaScript 可以寫在對應的欄位，當你寫在對應欄位，畫面上的效果也會跟著語法而改變。

### ❏ 寫在 VScode

市場上有著各種不同的程式碼編輯器，無論是哪種都有各自的擁護者，就趁這篇文章來大家簡單介紹開源免費的編輯器 **[Visual Studio Code](https://code.visualstudio.com/)**，目前也是市場上使用人數最多的編輯器唷！

#### 下載起步走

![認識網頁開發從生活開始-vscode](//images.ctfassets.net/8er52l3j5u76/1ezj2BJfem61TOcttoXc3Q/e0e7a8ccf31a61ce9abea50ef4fb6bc8/s_D3520281EBAB9DACD16F76C14C72BCBF85E4CE85232A9C8CC4225FF8DC312F07_1585757180295__2020-04-02_12.05.50.png)

下載完 Visual Studio Code 後，可以安裝一些套件，可以大幅減低輸入語法的時間。

![認識網頁開發從生活開始-vscode](//images.ctfassets.net/8er52l3j5u76/7KnNwOepMl9OWcMR8nqM6L/4ddea52e3eb6a27413ac91c606e4dbb3/s_D3520281EBAB9DACD16F76C14C72BCBF85E4CE85232A9C8CC4225FF8DC312F07_1585757180295__2020-04-02_12.05.50.png)

#### VS Code 在寫，套件要有

-  [ fakimg](https://marketplace.visualstudio.com/items?itemName=yoyoys.fake-img-snippet-collection)：快速生成假圖。
當我們在開發一個網站時，會想要大概排出圖片和文字的位置，有時候可能是還沒找到對應的圖片，這時候就可以使用假圖來先畫出心中預設的網頁畫面。

-   [live-serve](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)：看語法在瀏覽器所呈現的畫面。
每當寫好一個標籤或是效果的時候，想要看它在瀏覽器所呈現的畫面，這個時候就可以用 live-serve 的套件直接看畫面，讓你可以不用存好檔案再打開來看。

-   [Chinese Lorem](https://marketplace.visualstudio.com/items?itemName=KevinYang.ctlorem)：可快速產生無意義的中文文字，讓你可以快速放入。
為了暫時版面網頁的畫面效果，可以先穿插一些假字來預先呈現網頁的整個雛形。

-   [Auto rename tag](https://marketplace.visualstudio.com/items?itemName=prasadbobby.auto-rename-tag)：改了標籤後，重複的標籤可以選取一起更改。
每個語法都會有一些規則，這些規則往往是重複書寫的，這時候如果使用該套件，一些語法就可以快速一鍵生成或是一鍵修改。

既然介紹下載 VS code，就趁現在好好的安裝以上介紹的這些套件，之後也有助於自己可以更有效率地開發網頁。今天的網頁面面觀到此為止，下篇文章我們再來好好介紹語法寫在編輯器上的規則和呈現方式！

### 延伸閱讀

- [順利實作你的第一個網頁畫面](/posts/build-your-first-web)
- [零基礎也能懂的 CSS - 概念篇](/posts/knowing-basic-css)

<br>

---

### 推薦課程

> 👩‍🏫 課務小幫手：
>
> ✨ 想了解更多 HTML / CSS 知識和技巧嗎？
> 也歡迎報名課程 👉 [網頁前端設計女性專班](https://5xruby.tw/courses/code-for-girl)

認識網頁開發從生活開始

[Photo by Wes Hicks](https://unsplash.com/photos/ptXljygBu-0)

## 寫在前面
上課前就常常聽說 Ruby on Rails 在 Window 作業系統環境裡很麻煩很難用，但我在上課跟做專案的時候都一直是使用 Windows 筆電，用起來其實沒有想像中的可怕，真的完全不支援的東西很少，最多就是跑測試或要建立 server 的時候比較慢而已，但我私自認為速度會很慢有一部份也是因為電腦的配備問題。之前買筆電的時候就有特別考慮速度所以買了三萬多塊稍貴的筆電，可能也是因為這樣，用 wsl 跑 rails 相關的東西時其實也是順順的。因為開始新工作的關係拿到一台新的 MacBook Pro（此生第一台），剛好跟大家分享一下在設定開發環境還有習慣 MacBook 的一些小故事

（由於公司使用了 docker，所以其實很多地方都被包起來了，現在也還太嫩無法參透包起來的方法）

## 從 Windows 轉 MacOS 的一些小心得跟好用工具：

- Windows 轉 MacOS 的快捷鍵：

  之前在 Windows 上的 `Ctrl` + `C`... 都換成 `Cmd (Command)` + `C`

  這可能真的要習慣一下，但其實用久了感覺差異不大，另外要直接前往上下左右的最邊界就按 `Cmd` + `方向鍵`，要單字跳躍就按著 `opt` + `方向鍵`，這個大幅提升作業速度，好用！
  另外補充如果在 iTerm 裡面要使用這個功能的話可以依照下面的方法操作：

  進入 Preference
![](https://i.imgur.com/ZwLMS1w.jpg)

  依照指示改變設定即可
![](https://i.imgur.com/ISYsxHU.jpg)

- [Xnip](https://xnipapp.com/)：
   截圖好物，顧名思義就是用來截圖的，操作簡單。

- [Spectacle](https://www.spectacleapp.com/):
  能夠讓螢幕快速分割定位的工具，我自己其實不太常用，但要用的時候能用真不錯。

- [Amphetamine](https://apps.apple.com/us/app/amphetamine/id937984704?mt=12):
  就算你的螢幕保護程式設很短會鎖起來，用了就可以讓他一直醒著，幫助你專心還可以一邊幫你計時！ 

- 其他小叮嚀：
  善用連點兩下選取字詞、連點三下選取整行文字，都可以節省時間。

![Ruby on Rails 入門 - 幫助你開發的 Mac 小工具分享](//images.ctfassets.net/8er52l3j5u76/7mVFkBx0ZpyivFA4jH0aoy/9eea3dac7ebb1fa228f80ad9788a5d12/uWuGi8F.png)
[Photo by Christopher Gower](https://unsplash.com/photos/m_HRfLhgABo)

## 寫在後面
從 Windows 轉 MacOS 真的會有一段陣痛期，還要一直巴著用 Mac 的朋友問一些感覺說出來都有點羞恥的問題，但其實你會想到的問題應該網路上都有很多人想知道答案，只要 Google 一下應該都會找到想要的解答，只要用雪亮的眼睛去好好鑑定答案的真實性與正確性，應該都能輕鬆解決問題。

（像是我剛剛不知道全形頓號怎麼打? 就查了 ”Mac 全形 頓號” 然後就知道要按 (|) 這個鍵就會跑出來了）
讓我們一起微痛轉換作業系統吧！一起交流好用的地方 XD

本文節選自 ASTRO Camp 學員薑薑薑薑的 iThome 鐵人賽文章[ Day 2 Mac 環境小工具](https://ithelp.ithome.com.tw/articles/10266103?sc=rss.iron)

---

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


Ruby on Rails 入門 - 幫助你開發的 Mac 小工具分享

<small>Photo by [Danielle MacInnes](https://unsplash.com/@dsmacinnes) on Unsplash</small>

## 什麼是 Ruby on Rails ?

Ruby on Rails 是一種結合 Ruby 這款程式語言與 Rails 函式庫的一種網頁程式框架！

Ruby 以自然、簡潔、快速著稱，全面支援物件導向程式設計。

而 Rails 則是 Ruby 廣泛應用方式之一，在 Rails 上設計出一套獨特的 MVC 開發架構，不但減少了開發中的問題，更簡化了許多繁複的動作。

所以在學習 Ruby on Rails 的之前，我們必須要先掌握 Ruby 這款程式語言！

但......我應該要去哪裡學習？

### 友善的網路世界

網路上對於 Ruby on Rails 的教學資源不計其數，但對於完全程式新手來說，尋找一個有系統且免費的學習平台實在是相當不容易...... 

> ~~而且通常免費的東西都沒有好貨~~

喂！不要亂講～這世界有很多樂於分享的人，願意無償的教學，只為了讓程式的世界更美好！

在我成為工程師之前，我也不覺得這世界上有這麼多熱心的人，但當你真正的踏入這個領域後，你會發現人性還是本善的呢。

今天我也要擔任那個傳遞善心的人，我會把我篩選過後的免費學習資源推薦給看文章的你 / 妳！

## [The Odin Project ( 全英文 ) ](https://www.theodinproject.com/courses/ruby-on-rails)

主打全課程免費的 Odin Project 是一個開源專案，從一開始就以教學做為核心精神，整個網站的目標是希望可以幫助對於網站開發有興趣的人能夠從零開始到獨當一面。

從 Ruby 教到 Ruby on Rails 甚至是 JavaScript 以及 Git。

最有幫助的地方在於，每一個章節都有幫助初學者編列作業以及目標，可以快速的讓你理解這個章節應該要學會什麼！

課程的後半段也會有小型專案實作，上傳至 GitHub 展示。

這樣的流程能夠幫助初學者理解從建立檔案到呈現在瀏覽器上的過程，未來更能對於不同的工具舉一反三，利用模式比對的方法找到解決方案！

### 特點：
1. 適合新手上路，內容平易近人。
2. 涵括前後端的基礎教學，甚至還有 Git！

---

> **冷知識分享：**
>
> 為什麼叫做 Odin Project？
> Odin 就是我們熟悉的希臘神話人物，宇宙之王。
> 
> 相傳他為了獲得魯納斯的智慧而把自己的右眼給犧牲了。
> 
> ~~所以這邊就是希望我們可以貢獻生產力直到右眼失明。~~ 

喂～當然不是這樣啊，網站開發可不是一個簡單的任務，這個故事是希望我們可以像奧丁一樣渴望知識，不斷地成長～

但眼睛還是要顧ㄟ，一天一顆葉黃素，讓你眼睛保得住。

## [Codecademy ( 全英文 )](https://www.codecademy.com/learn/learn-ruby)

Codecademy 是一個提供基礎程式教學的網站，在上面可以學到基礎的 HTML、CSS、Ruby、Rails 等等，都是不需要收費的！

但其實它也有提供更進階的課程，需要升級付費才可以使用的選項，但基於今天是介紹免費的資源，就不著墨太多付費課程的內容。

對於新手來說這個網站有很大的特點是它提供了線上的開發環境，讓你可以不需要安裝編輯器就可以開始學習，從基礎的 Ruby 語法開始上手，這樣的環境對於真正的新手來說，可以先拋開環境設定以及安裝程式語言的問題，直接地開始學習程式語言。

網站還會根據帳號的學習程度來製作百分比提示你的學習情況，能夠讓新手理解自己大概學了多少的程度，而且 Codecademy 也有一個強大的社群討論版，能夠在上面找到問題的答案，或是主動發文提問，也能夠大幅度的加速學習效率！

### 特點：
1. 線上編輯環境，免去環境設定問題。
2. 搭配提示直接動手寫程式，快速顯示成效。
3. 介面清晰的討論版，快速掌握問題。

## [為你自己學 Ruby on Rails ( 中文 )](https://railsbook.tw/)

> **衷心建議：**
>
> 新手要記得先打好程式語言的基礎觀念，否則直接學習框架是一件危險的事情。
>
> 尤其是 Rails 有許多的黑魔法，更應該要打好基礎！

剛剛推薦了一個全英文的免費學習資源，這邊幫大家補上一個中文的免費學習資源。

我知道你們要說這是在業配我老闆的書，但相信我，這本書真的有非常多基礎的觀念，而且我知道中文對於初學者來說有多麼的友善～

但為了讓想窺探框架的人能夠有所獲，這本書中強調了許多關於 Ruby 的基本知識，讓你能夠理解 Ruby on Rails 的黑魔法以及他能做些什麼！

最有趣的地方就是書中有許多圖片以及口語化的敘述，讓人能夠抽象化思考過程的本質，針對 Rails 的 MVC 架構 以及 Route 也有著有趣的說明，使初學者能夠快速地了解不同物件之間的交互作用！

書本尾段的購物車實作，更能讓人體會到程式語言這麼抽象的東西，到底是如何呈現在網頁上？

跟著做過一次之後，才能體會到那些抽象的東西，到底是從哪裡傳向哪裡，在這過程中又得到什麼？轉變了什麼？原來電商是這樣子啊......

啊......不說了不說了，我也要來去做一遍，不然要落後給別人了呢～

### 特點：
1. 中文書，看起來就是爽！
2. 使用會發生在身邊的案例來解釋重要觀念。
3. 手把手的環境安裝教學。

## [UPCASE by thoughtbot ( 全英文 )](https://thoughtbot.com/upcase/rails)

> **衷心建議：**
>
> 看著影片學習刻畫雖然會有短暫的成就感。
> 
> 但別忘記要內化成自己的東西，才有辦法舉一反三，做出自己的作品唷

[thoughtbot](https://thoughtbot.com/) 本身是一間設計以及開發諮詢的公司，針對客戶的 APP 提供諮詢和顧問的服務！

他們在指導客戶團隊時，發現缺少了許多中等級別的教材，所以他們決定建立 [UPCASE](https://thoughtbot.com/upcase/rails) 這個網站來填補那些空白！

除了 Rails、Git、JavaScript 之外，甚至還教你用 Vim 的課程都有提供，相信我，學會 Vim 這個輸入法，對於撰寫程式的速度有著極大的提升......

不小心離題了，總之這是個難度比前面兩個免費資源稍稍高一些的網站！

但當你有確實的學習並理解前面兩個免費資源後，這個網站對於提升你的理解又有更大的幫助。

雖然 [Intermediate Ruby on Rails](https://thoughtbot.com/upcase/intermediate-ruby-on-rails-five) 這部教學是 Rails 5 的版本，且其內容也確實稍稍難了一些，但版本對於學習 Rails 的基礎並沒有太大的不同，反而能夠看到一些有趣的寫法呢！

### 特點：
1. 下方有討論區，可以看看別人對於影片內容是如何提問的，對！提問很重要。
2. 每支影片的標題都很明顯，還有 Note 來告訴你這支影片你該學會什麼。
3. 不定期會發布深度討論 Rails 的影片。

## [Ruby on Rails Guide ( 全英文 )](https://guides.rubyonrails.org/)

等等......這看起來一臉官方手冊，是不是拿這種網站在交差了事？

你先聽我娓娓道來，這個網站的作用就像是字典一樣，當你在前面的學習資源遇到瓶頸的時候，歡迎進來這個網站逛逛，嘗試找到你不懂的名詞，裡面都會有非常詳細的說明和範例！

我知道第一次進入這個網站的時候，會有一種 我在哪 我是誰 的感覺！

以下會帶你做一次追尋答案的過程是什麼情形？

假設情境：

看著學習課程中，出現了一段沒有看過的程式碼......

```ruby
class UserController < ApplicationController
  before_action :find_user # << 這是什麼？

  def index
  ....
end
```

真是的，我完全不理解這個 `before_action` 到底是什麼東西？

登登登愣！`Ruby on Rails Guide`

這時候就派上用場了，我們先根據這個名詞出現的場合來做分析！

可以得知他在 Controller 的下面，那我們把畫面跳轉到 Ruby on Rails Guide 

![Ruby on Rails Guide](https://i.imgur.com/5S4qN6i.png)

點擊黃色框框處會彈出一塊面板，這時候我們仔細的找到 Controller 相關的標題

![Controller-Ruby on Rails Guide ](https://i.imgur.com/y4jdmFv.png)

點擊 `Action Controller Overview` 就會進入到介紹 Controller 的頁面！

勇敢地使用你網頁的搜尋功能 ( mac: `command + f`，window: `CTRL + f` )

打上 `before_action` 這時候就會協助你跳到這個名詞出現的地方，我們就可以看到關於 `before_action` 的敘述

![搜尋 Ruby on Rails Guide](https://i.imgur.com/0xGnUZ5.png)

以上，Ruby on Rails Guide 就是幫助你查找的工具，希望有幫助到你！

### 特點：
1. 絕對正統，不容質疑，基本上不會有錯誤資訊。
2. 完整度也是不容質疑，即便是工程師也還是會翻來自我檢視一下。

## 自我學習的優缺點

### 優點：

自我學習很棒的優點在於可以自行安排學習時間以及進度。

若你是一個學習速度快、自制力也很高的人 ( 英文也要很好 )，那我很推薦你可以在家裡面自我學習，畢竟參加線下課程的進度是規劃好的，若你的學習速度太快，老師也不會為了你而加快進度。

在家自己學習就可以根據自己的理解來調整該學些什麼，也可以在想要休息的時候休息，比較不會有被綁死在一個地方的感覺！

### 缺點：

我認為自我學習最大的缺點在於缺乏社群團體的推力！

畢竟學習程式語言本身並不是一件簡單的事情，當自己一個人學習又找不到問題的答案時，很容易陷入自我放棄的漩渦，以及你沒有辦法驗收自己的學習程度。

怎麼說呢？假設你今天已經自學了兩個月了，但你很有可能不知道自己現在的學習情況到底是好是壞，畢竟沒有人可以告訴你現在的方向是正確的，還是其實已經歪掉了？

還有關於團體討論的問題，因為人類的腦袋很容易陷入錨定效應，若在撰寫程式的時候，沒有加入其他人的意見來激盪你的腦力，很容易寫出自己覺得很棒，但其實成效不好的程式碼！

## 自我學習的小訣竅

誰都會有需要自我學習的時候，一些嶄新的技術，或是你自己有興趣的技術都是，都會需要自己上網查看文件，看看別人的 Demo。

我自己的方式都是先看成品，了解整個運作的方式，再來想像背後的邏輯，而且不會要求自己一定要想到正確的答案，畢竟這並不是一件好事，當你被正確答案的桎梏住的時候，就更容易陷入尋找所謂正確答案的漩渦。

在一開始你可以先用自己的理解來說服自己，然後持續的吸收相關知識，看更多的討論，有些時候你就會遇到 `aha moment`，這種豁然開朗的感覺，是自我學習的時候最棒的時候了！

> aha moment 也稱作尤里卡效應：指的是人類突然理解一個以前無法理解的問題或概念時的時刻。一個以前無法解決的難題突然變得清晰和明顯。這種從不理解到自發理解的轉變往往伴隨著喜悅或滿意的感嘆。

還有在剛開始學習程式語言的時候，也能透過聯想的方式，和現實生活中的例子做連結，找到可以讓自己快速理解的方式！

## 結語

說了那麼多關於自我學習的方向和優缺點，免費學習資源其實才是這篇文章的主軸啦！

我們從上述的免費學習資源來看，到處都充滿著英文的文件和影片，這也意味著英文對於軟體工程師是不可或缺的工具！

希望不要因為是全英文就放棄掉自我學習的機會，如果對於你的英文沒有信心的話，那現在更是你練習的好機會，因為是自學的關係，你可以大方地打開你的 Google 翻譯，趁著這波自我學習順便把程式常常出現的英文記起來吧！

也要謹記學習框架的優缺點，不要本末倒置，學習好 Ruby 這個程式語言會讓你事半功倍喔！

---

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


Post - 自學 Ruby on Rails 推薦的免費資源 TOP 5

自學 Ruby on Rails 推薦的免費資源 TOP 5

## 為什麼需要知道 HTML ？

![](https://i.imgur.com/RopQh7S.jpg)

如果你的工作會和網站工程師溝通，或是你的工作是網路行銷、網頁設計師、數位產品 PM ，時常會需要和工程師溝通網頁需要新增哪些功能、會出現哪些文字、樣式會是什麼樣子，或者網路行銷要調整網站的 SEO 等，都需要了解網頁的 HTML 架構，至少要理解眼前所見的頁面、圖像、元件，背後都是由 HTML 組成。

## 什麼是 HTML ?

HTML 是一種用來建構網頁的 **標記語言** 而非程式，可以想像網頁就像一頁文件，而文件內會有標題、內文、圖片、頁尾等元素。**HTML 是告訴瀏覽器網頁上有哪些標題、圖片、文字等**。

![什麼是 HTML?](https://i.imgur.com/TAaSk4L.jpg)

而這些元素包含了標籤、內容，不同的元素，會用標籤 `<>`  標示出來，例如標題 `<h1>` 、網頁內容 `<body>`、圖片 `<img>` 等。
呈現方式會像以下：

![什麼是 HTML? 標記語言說明](https://i.imgur.com/fxISuUE.jpg)

少部分標籤沒有結尾標籤，例如圖片：

![什麼是 HTML? 圖片標記](https://i.imgur.com/jRzK3uI.jpg)

附帶一提，在上方圖片標籤 `<img>` 可以看到裡面包含了 `src` 和 `alt` 這些都是這個標籤的『**屬性**』；每個標籤都有提供不同的屬性，讓這個元素標籤的資訊能夠更完整。

## 什麼是 Emmet ？

![Emmet](https://i.imgur.com/EhQk0mI.jpg)

如果你開始寫 HTML ，會發現他的文件可能有很多細節需要注意，讓我們看一份最基本的 HTML 文件：

![什麼是 Emmet ？](https://i.imgur.com/UKcjjZ9.png)

可以從上面看到，一段文字開頭和結束，都會出現標籤。當網頁的元素越來越多時，工程師可能會漏寫一個標籤而導致頁面跑版(和預期的顯示結果不同)或是要重複寫同樣的標籤等。

因此，就有 [Emmet](https://emmet.io/) 這個套件，讓工程師可以寫短短幾個代表字和快捷鍵，就能自動產生完整的標籤。減少漏寫標籤，或是一次產生多筆的標籤等。加速開發的效率。

除此之外是他在主流的開發者用的編輯器(用來寫 HTML 和程式的工具)像是 [VS Code](https://code.visualstudio.com/)、[Sublime Text](https://www.sublimetext.com/) 還有線上即時渲染的網站 [codepen](https://codepen.io/) 、[JS Bin](https://jsbin.com/?html,output)、[JS Fiddle](https://jsfiddle.net/) 都可以使用喔！

現在就開啟你熟悉的編輯器，和我一起試試看以下這些常用的 Emmet 語法吧！ ✈️

---

### 1. `>`：建立裡面的(子層) Tag

Emmet 範例： 輸入 `ul>li>p` + `Tab 鍵`

HTML 結果：

```html
<nav>
  <ul>
     <li></li>
  </ul>
</nav>
```

讓我們來看一下實際示範：
![](https://i.imgur.com/gPetJ6q.gif)

### 2. `+`：建立接連著(兄弟層)的 Tag

Emmet 範例：輸入 `div+h1+h2` + `Tab 鍵`

HTML 結果：

```html
<div></div>
<h1></h1>
<h2></h2>
```

### 3. `*` ：建立重複的 Tag

Emmet 範例：輸入 `ul>li*5` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
```

### 4. `{ }` ：Tag 內的文字

Emmet 範例： 輸入 `ul>li*5{這是清單}` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li>這是清單</li>
  <li>這是清單</li>
  <li>這是清單</li>
  <li>這是清單</li>
  <li>這是清單</li>
</ul>
```

### 5. `$` ：建立編號

Emmet 範例：輸入 `ul>li*5{清單編號：$}` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li>清單編號：1</li>
  <li>清單編號：2</li>
  <li>清單編號：3</li>
  <li>清單編號：4</li>
  <li>清單編號：5</li>
</ul>
```

### 6. `@-` ：編號降冪 (需再放在 `$` 之後)

Emmet 範例：輸入 `ul>li*5{清單編號：$@-}` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li>清單編號：5</li>
  <li>清單編號：4</li>
  <li>清單編號：3</li>
  <li>清單編號：2</li>
  <li>清單編號：1</li>
</ul>
```

### 7. `[ ]` ：輸入屬性

Emmet 範例： 輸入 `a[href="www" target="_blank"]` + `Tab 鍵`

HTML 結果：

```html
<a href="www" target="_blank"></a>
```

### 8. `.` / `#` ：建立 `class` 或 `id` 命名

Emmet 範例： 輸入 `.box` 或 `#name` + `Tab 鍵`

HTML 結果：

```html
// .box 👇
<div class="box"></div>

// #name 👇
<div id="name"></div>
```

想要知道更多 Emmet 細節嗎？歡迎查閱 Emmet 文件 👇
[https://docs.emmet.io/cheat-sheet/](https://docs.emmet.io/cheat-sheet/)

<br>

---

### 推薦課程

> 👩‍🏫 課務小幫手：
>
> ✨ 想了解更多 HTML / CSS 知識和技巧嗎？
> 也歡迎報名課程 👉 [網頁前端設計女性專班](https://5xruby.tw/courses/code-for-girl)

快速生成 HTML & CSS ！Emmet 語法大公開！- Cover

快速生成 HTML！Emmet 語法大公開！


## 前言

在學習 Ruby on Rails 的過程中，筆者初次與 `Scope` 的相遇，不是一個很友善的結果，只知道 `Scope` 在 Rails `models` 中，可以用來查詢資料庫資料，但是某些符號和其背後的運作，要真正去了解後，才會用的順手，因此，我們藉由這篇文章帶大家一起來了解吧！

## Scope 前導，先來認識 Block & Proc & lambda

### 何謂 Block (程式碼區塊)？

Block (程式碼區塊) 呈現方式為大括號 `{ ... }` 以及 `do ... end`。

Ruby 是一款物件化很徹底的程式語言，在 Ruby 的世界裡面幾乎都是物件，而 `Block` 就是其中少數的例外之一，它不能獨立存在，需要依附在方法或物件後面，連指定到變數都會造成語法錯誤。

```ruby=
{ puts "Hello, World" }            # 會產生語法錯誤
say_hello = { puts "Hello, World" }   # 會產生語法錯誤
```
我們經常使用 `Block` 的方式是依附在方法後面，而我們也可以將 `Block` 給物件化，那就是使用 `Proc` 和 `lambda`。

### 如何使用 Proc & lambda ？

直接先來 Proc 的使用方式：

```ruby=
def proc_example
  example = Proc.new { p "I am Proc" }
  example.call
end
proc_example

# 當執行 proc_example 時，會印出 "I am Proc"
```
這邊我們使用 `Proc` 類別把 `Block` 物件化，接下來使用 `call` 方法來執行。

而 lambda 則是：

```ruby=
def lambda_example
  example = lambda { p "I am lambda" }
  example.call
end
lambda_example

# 當執行 lambda_example 時，會印出 "I am lambda"
```

有發現嗎？ 感覺起來是不是和 `Proc` 很像！沒錯，因為 `lambda` 是 `Proc` 的實體，所以它不用 `new`，我們是如何知道的呢？ 以下這段 `code` 即可證明 。

```ruby=
def check_method(item)
  puts "A item is a #{item.class}"
  puts "A item instance: #{item.inspect}"
  item.call
end
proc_item   = Proc.new { p 'This is a proc' }
lambda_item = lambda { p 'This is a lamnda' }

check_method proc_item 
check_method lambda_item

# A block is a Proc
# A block instance: #<Proc:0x00007f90d6825208@example.rb:12>
# "This is a proc"
# A block is a Proc
# A block instance: #<Proc:0x00007f90d6824e20@example.rb:13 (lambda)>
# "This is a lamnda"
```

### 帶入參數方法

Proc 帶入參數方法

```ruby=
say_hello = Proc.new { |name| puts "你好，#{name}"}
say_hello.call("CY")
```

lambda 帶入參數方法

```ruby=
say_hello = lambda { |name| puts "你好，#{name}"}
say_hello.call("CY")
```

### lambda 和 Proc 的差異
這兩個幾乎一模一樣，主要只有兩個差異 `控制權順序` 和 `檢查參數` 。

1.控制權順序不同：

```ruby=
def proc_example
  example = Proc.new { return "I am Proc" }
  example.call

  "Proc not return"
end

def lambda_example
  example = lambda { return "I am lambda" }
  example.call

  "Lambda not return"
end

p proc_example # "I am Proc"
p lambda_example # "Lambda not return"
```

由上範例我們可以得知 `lambda` 會將控制權丟回呼叫 `method` 本身，繼續往下執行該程式碼，而 `Proc` 的 `return` 則不會，是立即跳出。

2.檢查參數：

```ruby=
lambda { |name| puts "Hi, #{name}"}.call
=> ArgumentError (wrong number of arguments (given 0, expected 1))

Proc.new { |name| puts "Hi, #{name}"}.call
=> Hi,
nil
```

從這個範例可以發現 `lambda` 會對參數進行檢查，如果是 `nil` 則會直接拋出 `error`，而 `Proc` 則是以 `nil` 當參數帶入。

因此接下來要介紹的 `Scope` 運用在 `Rails` 的 `ActiveRecord Model`，要撈取資料時，都會使用 `lambda` 來進行，原因就是 `lambda` 更謹慎。

## Scope 起手式

使用 `Scope` 時，首先需注意參數問題，每個 `Scope` 接受兩個參數：

1. 第一個是 name，這是你要去呼叫這個 `Scope` 的名字。
2. 第二個是 lambda (也可以用 `->` 表示)，這是我們要執行的程式碼，例如：搜尋條件。

寫起來會像，如以下的程式碼

```ruby=
class Book < ApplicationRecord
  scope :with_author, -> { where(author: "CY") }
end
```
當我們去執行這個 `with_author` Scope 時，就會拿到 `ActiveRecord::Relation` 的物件。

這時候我們也可以來使用組合技

```ruby=
class Book < ApplicationRecord
  scope :with_author, -> { where(author: "CY") }
  scope :with_page_count, -> { where("page_count > 100") }
end
```

ex.
```ruby=
Book.with_author.with_page_count.last(3)
```
這裡指的是我要尋找作者是 CY 且頁數是大於 100 頁的書，再從這些尋找的書裡面，取最後 3 本。

## Scope 加入參數用法

接下來我們要讓 Scope 更靈活一點，這時我們可以加入參數。
沿用剛剛的例子：

```ruby=
class Book < ApplicationRecord
  scope :with_author, -> { where(author: "CY") }
  scope :with_page_count, -> { where("page_count > 100") }
end
```
當我呼叫 `with_author` 時，我會去找屬於 CY 的書，但如果我要找的作者，不就還要寫另外的 `Scope` 或者修改 `with_author` 這個 `Scope` ，因此為了解決這個問題，我們可以加入參數的用法，如下：

```ruby=
class Book < ApplicationRecord
  scope :with_author, ->(Name) { where(author: name) }
  scope :with_page_count, ->(count) { where("page_count > ?", count) }
end
```

如果像搜尋頁數，只要在條件字串裡面加上問號，後面帶入 `count` 這參數即可。

## Scope 和 Class method 比較

其實 `Scope` 和 `Class method` 一樣，都只是個方法(method)，
並沒有比較特別或神奇的地方，而 `Scope` 可以做到的，`Class method` 也可以，如下：

```ruby=
class Book
  def self.with_author
    where(author: "CY")    
  end
end
```
既然如此，我們使用 `Scope` 又有什麼好處呢？
1. 使用 `Scope` 可以讓我們程式碼更乾淨更好閱讀一點。
2. `Scope` 只做一件事情，所以當我們在呼叫時，不用擔心會插入其他的事情。
3. 經 `Scope` 出來一定是 `ActiveRecord::Relation`，但 Class method 不一定是。

## Default Scopes

這個就有神奇的小地方，當我們在 `book` 的 `Model` 設 
```ruby=
default_scope { where(published: true) }
```
這時候我們要撈取 book 資料時，都只會撈到 `published` 欄位為 `true` 的 book。

但這時候，如果我們想要撈取 `published` 欄位為 `false` 的 book 呢？

這時候就需要使用 `unscoped` 的方法支援，如下：

```ruby=
unscoped_book = Book.unscoped.find(book_id)
```
#### 使用時機：大部份用於固定條件查詢。

大家 Search 關於 `Default Scopes` 資訊的時候，可能會有些建議說不要用，是因為我們設了 `Default Scopes`，過了一陣子，要再撈取相關資料時，卻忘了這事，導致我們 `debug` 不易，加上可能要花不少時間來去調整，但我還是秉持著只要知道自己在做什麼，而確信不會為未來的自己造成麻煩，用 `Default Scopes` 是沒有問題的。

## 結語

最後複習一下 `Scope` 這個超酷的功能。`Scope` 將常用的查詢條件先宣告起來，以備隨時都可以取用，進一步也讓程式變得乾淨易讀，更厲害的是可以串接使用，對於新手可能一開始不容易懂，但一旦理解真的事半功倍。

以上是對 `Scope` 初步介紹，此篇文章有任何問題歡迎 [來信](mailto:cy@5xcampus.com) 與我討論。

最後，希望透過這篇文章，能讓大家對 `Scope` 不再陌生。

謝謝你的閱讀！

---

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


資料查找，原來 Ruby on Rails 的 Scope 是這樣用的！- Cover

資料查找，原來 Ruby on Rails 的 Scope 是這樣用的！

<br/>

> 👩‍🍳 **關於 CSS 料理室** : 
> 
> CSS 料理室的主廚可能會打翻麵粉、可能會調配出黑暗料理，但是實驗精神是不會少的！ 
> 
> 總之，讓我們一起透過一道又一道料理，認識 CSS 吧！

## 🍽 食譜完成照：

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

## 🥬 食材準備：
1. CSS 變數： `--*`
2. HTML `input` 標籤： `input[type="checkbox"]`
3. CSS 選取器：` X + Y`, `X ~ Y`

## 📒 食譜簡介：
這次製作的料理，主要是使用原生的 CSS [變數](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) 實做出深色模式和淺色模式的切換。除此之外，我們還會利用 HTML `<input>`  標籤當中的 `checkbox` 實做 『切換』這個動作，以下將介紹這些食材的特性。

### 🍖 食材介紹(ㄧ)： CSS 自訂變數 `(--*)`

CSS 變數 `(--*)` 讓我們自訂命名，讓規範或常用的數值取一個名字，好讓其他成員在使用時可以更好理解。
例如：

```css
/* 原本的樣式 */
.card {
    background: #FFFFFF;
    color: rgba(255, 98, 98, 1);
}

/* 使用自訂變數 */
:root {
    --bg-white: #FFFFFF;
    --text-pink: #FF6262;
}

.card {
    background: var(--bg-white);
    color: var(--text-pink);
}
```

從上面使用自訂變數的範例中，可以很快速的知道 `.card` 使用了 `白色` 的背景， `粉紅色的文字` 樣式。如果我們想要改粉紅色的色票，只要到 `--text-pink` 中去調整就行了！

#### 全域 CSS 變數與獨立區域的 CSS 變數
在使用 CSS 變數時，也可以將這個變數選擇放在全域或是某個區域範圍內，在 `:root {....}` 當中的變數是**全域共用**的：

```css
/* :root 全域共用的樣式 */
:root {
  --pink: #FF6262;
}

/* 只有在 .container 裡面的 --pink */
.container {
    --pink: #FF006B;
}

.container {
    color: var(--pink); /* pink => #FF006B */
}

body {
    color: var(--pink); /* pink => #FF6262 */
}
```

### 🍖 食材介紹(二)： `<input type="checkbox">`

`<input type="checkbox">` 是一個單純的勾選標籤，有三種狀態：

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

並且在 CSS 也可以直接設定這些狀態樣式，例如：

```css

input[type="checkbox"] {
    /* 這邊設定的 Unchecked 的樣式 */
}

input[type="checkbox"]:checked {
    /* 這邊設定的 checked 的樣式 */
}

input[type="checkbox"]:indeterminate {
    /* 這邊設定的 indeterminate 的樣式 */
}
```

其中 `indeterminate` 這個介於已選取和未選取之間的狀態，是需要透過 JavaScript 去定義在什麼情況下會出現 `indeterminate` 狀態。這次不會使用這個狀態。

我們可以利用 checkbox 的兩個狀態 : `unchecked` & `checked` 去做到類似 JavaScript『點擊』後觸發的樣式。

### 🍖 食材介紹(三)： CSS 選取器 `X + Y` , `X ~ Y`
最後一個重要食材 - CSS 選取器，從上面兩個食材當中我們已經準備好：

1. 將樣式顏色命名：管理 CSS 自訂變數
2. 如何觸發樣式：使用 `<input type=checkbox>`

接著，我們需要指定樣式『**套用的範圍**』。
從完成照當中仔細地看到，我是將滑鼠進入 Dark / Light 的按鈕時才會觸發，實際上 HTML 的結構層，我是將卡片和按鈕排在**同一層**，讓觸發範圍限制在按鈕樣式 `<input>` 裡。如果我將卡片樣式放進去 `<input>` 裡，那麼整張卡片將會一起被當成觸發範圍。

如果我的 input 和卡片樣式是同層的話，我可以透過 `X ~ Y` 來選取：

#### CSS 選取器： `X ~ Y`
選取同層(兄弟層)的元素，意思是選取在 **`X` 之後的 `Y`**。

<iframe height="300" style="width: 100%;" scrolling="no" title="css selectors : +" src="https://codepen.io/debby87059/embed/vYmMMQQ?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/vYmMMQQ">
  css selectors : +</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

#### CSS 選取器：`X + Y`
選取***緊鄰***的**同層**元素，參考以下範例，他只會選取到緊鄰`<h1>` 的 `<p>`。

<iframe height="300" style="width: 100%;" scrolling="no" title="css selectors : +" src="https://codepen.io/debby87059/embed/abWMKBP?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/abWMKBP">
  css selectors : +</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

<br/>
<br/>
<br/>

## 👩‍🍳 料理步驟： 實現 CSS 變數 Dark Mode 吧！

### 🖋 步驟一：使用 CSS 自訂變數，建立色票
首先，先將深色和淺色模式會使用到的顏色都先運用自訂變數，建立色票，準備好：

```css
:root {
  --bg-color: #F1E8E8;
  --white: #FFFFFF;
  --black: #282F3C;
  --pink: rgba(255, 98, 98, 1);
  --pink-light: rgba(255, 98, 98, 0.3);
  --pink-lighter: rgba(255, 98, 98, 0.1);
  --gray: #959595;
}
```

### 🖋 步驟二：設定 Checkbox 樣式

```html
<div class="container">
  <input type="checkbox" id="toggle" name="toggletheme">
  <label for="toggle">
    <span class="dark">Dark</span>
    <span class="light">Light</span>
  </label>
</div>
```

##### 1. `<label>` 標籤的 `for` 屬性:
在示範上將 `<label>` 存取文字，並且放在與 `<input>` 同層的位置，我們可以指定這兩者產生關聯，讓 `<input>` 觸發的條件對應到 `<label>` 內。如何設置呢？
將 `<input>` 的 `id` 與 `<label>` 的 `for` 設置成相同值：

![](https://i.imgur.com/wUqrlC7.jpg)

更詳細的介紹：[\<label> - HTML ｜ MDN ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label)

##### 2. 選取 `<input>` 緊鄰的 `<label>`
首先我們將瀏覽預設的 `<input>` 樣式隱藏，並透過 `<label>` 建立這個按鈕的樣式。
我使用 `X + Y` 從 `<input>` 狀態控制 `<label>` 樣式，實際上操作會像這樣：

```css
/* 隱藏預設 input 樣式 */
input[type="checkbox"] {
  display: none;
}

/* input[type="checkbox"] 緊鄰的 label */
/* 在 checkbox 未點擊的樣式 */
input[type="checkbox"] + label {
    ......
}

/* 在 checkbox 點擊後的樣式 */
input[type="checkbox"]:checked + label {
    .....
}

```

Tip: 可以看到 `label` 裡面有 `<span>Dark</span>` 和 `<span>Light</span>` 這會用 `checked` 判斷在 Light 模式時，`<span>Light</span>` 的文字隱藏，Dark 模式則是相反。

##### 3. `::before` 圓形樣式：
另外使用 `::before` 做出假圓形，模擬出按鈕樣式：

<iframe height="300" style="width: 100%;" scrolling="no" title="Toggle Dark mode - CSS Variables / Toggle button" src="https://codepen.io/debby87059/embed/dyWrjPp?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/dyWrjPp">
  Toggle Dark mode - CSS Variables / Toggle button</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

從上面的 Toggle 按鈕當中可以看到，我已經選取到 `:checked` 的狀態時，按鈕會是如何呈現的，如此就能夠延伸出在 `:checked` 狀態下的 `.card` 的樣式。

### 🖋 步驟三：刻出卡片

從上一步，我們建立了切換深淺色的按鈕後，接著我們就可以利用：

##### 使用 CSS 選取器 `X ~ Y`  製作卡片樣式。
首先 `input` 、 `label` 和製作卡片的樣式 `<div class="card"></div>` 放在同層，像以下：

```html
<div class="container">

  
  <input type="checkbox" id="toggle" name="toggletheme">
  <label for="toggle"></label>

  
  <div class="card">
    ......
  </div>
</div>
```

可以從上面看到，要使用 `<input>` 的 `:checked` 選取器來製作點擊後的卡片樣式，中間隔了 `<label>` 要怎麼樣能夠跨過 `<label>` 呢？

這時候就可以使用 CSS 選取器：`X ~ Y` ！ 直接選取在 `<input>` 之後的 `<div class="card">`

因此我們就能夠這樣做設定：

```css
/* 預設卡片樣式 (未點擊的狀態) */
.card {
    ...
}

/* 點擊後的卡片樣式 (Dark Mode) */
input[type="checkbox"]:checked ~ .card {
    ...
}
```

<iframe height="570" style="width: 100%;" scrolling="no" title="css - variables" src="https://codepen.io/debby87059/embed/XWROErJ?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/XWROErJ">
  css - variables</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 🎁 Bonus - CSS 選取器：`X > Y`
從完成的 `Card` 樣式，可以看到我使用大量的 `X > Y` 方式選取，這個選取器的特性是什麼呢？

`X > Y` 是選取***緊鄰***的**子層**元素，這邊則是選取相連同層的元素，讓我們看以下範例：

<iframe height="300" style="width: 100%;" scrolling="no" title="css selectors :  &gt;" src="https://codepen.io/debby87059/embed/PomLaKb?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/PomLaKb">
  css selectors :  &gt;</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

<br/>
<br/>

## 結語

以上就是這次的 CSS 料理室 - CSS 變數辛香料，看完你是否也想嘗試玩玩看 Dark Mode 切換了嗎？
我雖然對於 CSS 變數命名還是有點覺得有點長(囉唆？XD ) 但，看到 CSS 解決了變數的方法，真覺得是一大福音啊！
除此之外 CSS 的 `:checked` 也是一個很有趣的的選取器，實務上也經常使用這樣的選取器製作像是收合樣式、開啟關閉的樣式，更多的方法也可以參閱：[You Don't Need JavaScript | Accordion](https://github.com/you-dont-need/You-Dont-Need-JavaScript#Accordion)

如果你有試做這次的料理 🥘 ，歡迎[分享](https://www.facebook.com/5xruby)給我們知道！或是製作上有任何問題歡迎[來信](mailto:debby@5xcampus.com)交流👋 ～ ！

----

想了解更多 HTML / CSS 知識和技巧嗎？

也歡迎報名課程 👉 [網頁前端設計 女性專班](https://5xruby.tw/courses/code-for-girl)

css-variable

CSS 料理室 (一) | CSS 變數辛香料：不用 Sass、不用 JavaScript，也能實做 Dark Mode Theme 切換！

從模組化帶你認識 Webpack - post

從模組化帶你認識 Webpack

## 前言

在瀏覽網站的時候，可以根據我們的喜好更換版面，即使重新整理或關閉瀏覽器後，再度開啟該網站時，設定居然都還存在！或者是購物網站，將物品加入購物車，但沒有結帳就關掉瀏覽器，過了很久之後，再次去買東西，購物車裡的物品也都還在，究竟是為什麼呢？其實透過後端做存取就可以解決這個問題了，但瀏覽器也有個神秘的儲存空間可以提供我們做使用，就是 localStorage。

這篇文章，將帶大家來了解什麼是 localStorage ？ 如何使用 localStorage？

## localStorage 基本介紹

隨著瀏覽器不斷的進步，功能也越來越強大。在 HTML5 出來之前，我們只能將最多 4K 的資料儲存在 cookie 裡面。現在 HTML 5 中，新加入了 Local Storage 作為本地儲存來使用，一般瀏覽器容量為 5M(不同瀏覽器支援的容量會有所不同)。

### LocalStorage 優缺點

#### 優點:

1. 增加本地儲存空間。
2. 儲存資料方式，為 `key` 和 `value`。
P.S. `key` 和 `value` 資料儲存型態為 `String`。

#### 缺點:

1. `value` 儲存型態只接受 `String`。
2. 無痕或隱私模式下無法讀取。
3. 資料量太多，存取時，容易照成畫面卡頓。
4. 有些比較較舊的瀏覽器版本(IE 8 以下)沒有支援。

### localStorage 與 sessionStorage 的差異

在使用方法上大致相同，只有以下的差異：
1. localStorage 的資料是永久存在，唯有清除它才會消失。 
2. sessionStorage 的資料則是當網頁關閉時，就會清除。

### localStorage 的使用方法

1. `localStorage.setItem('key', 'value')`：透過 `setItem()` 方法中將物件屬性的 `key` 和 `value` 當成參數傳入，我們就可以在 `storage` 物件中加入屬性或修改原本的屬性內容。

2. `localStorage.getItem('key')`：透過 `getItem()` 方法將屬性的 `key` 當成參數傳入，我們就可以得到 `storage` 物件對應的 `value` 。

3. `localStorage.key()`：透過 `key()` 方法中輸入屬性的順序位置，我們可以取得 `storage` 物件中該位置的屬性 `key`，而位置順序和陣列表示方法一樣，由 0 開始。

4. `localStorage.removeItem()`：透過 `removeItem()` 方法，我們可以把指定的屬性從 `storage` 物件中移除。

5. `localStorage.clear()`：透過 `clear()` 方法，我們可以直接把 `storage` 中的所有屬性移除。

## localStorage 簡單練習

![練習畫面-1](https://i.imgur.com/nqBKKVC.png)

我們來運用 localStorage 來實作簡易一個會員登入系統。
(溫馨小提醒：這邊單純範例練習，實務上有關於使用者的基本資料或者密碼，請勿將這些資訊存放在 localStorage 上。)

### 步驟一：創建帳號

![步驟一：創建帳號](https://i.imgur.com/4q90U87.gif)

當我們按下 SIGN UP `button` 後，就會跳出 `alert` 提醒創建成功。

接下來就會在 localStorage (開發者工具 => Application => Storage => Local Storage) 裡面出現剛剛輸入的資料。

而這邊我們是將使用者的帳號密碼組合成 localStorage 的 `key`，把 Name 成為 `value`，使用 `setItem()` 方法進行儲存。

```JavaScript
signUpBtn.addEventListener('click', () => {
    const signUpName = document.querySelector('#signUpName')
    const signUpEmail = document.querySelector('#signUpEmail')
    const signUpPassword = document.querySelector('#signUpPassword')
    const storageKey = signUpEmail.value + signUpPassword.value //將使用者的帳號密碼組合成 Key
    const checkUser = Boolean(localStorage.getItem(storageKey))

    function successAction() {
      if(checkUser) {
        return alert('The email has already created it, please re-enter')
      }

      // 使用 setItem() 方法來儲存資料
      localStorage.setItem(storageKey, signUpName.value)
      signUpName.value = ''
      signUpEmail.value = ''
      signUpPassword.value = ''
      alert('Created successfully, please go to sign in page')
    }

    if(signUpEmail.value === '' || signUpPassword.value === ''){
      alert('The input box cannot be empty')
    } else {
      successAction()
    }
  })
```

### 步驟二：登入

![步驟二：登入](https://i.imgur.com/n2MJKWL.gif)

我們一開始可以看到 Local Storage 裡面有屬性 `dev@5xcampus.coma1s2d3f4`，而相對應的 `value` 為 CY ，當我們輸入完帳號密碼後組成了 `key` ，然後使用 Local Storage 的 `getItem()` 方法，將相對應的 `value` 取出，在組合字串最後渲染出來。 

這邊偷偷埋個下一步要解決的關鍵要素，就是當我們成功登入時，在 localStorage 多了一個 `MemoryAccount` 的屬性，有發現嗎 ？ 而究竟為什麼呢 ？ 將在下一步揭曉。

```javascript=
loginBtn.addEventListener('click', () => {
  const loginEmail = document.querySelector('#loginEmail')
  const loginPassword = document.querySelector('#loginPassword')
  const sayHiElement = document.querySelector('.sayHi')
  const storageKey = loginEmail.value + loginPassword.value // 將帳號密碼組成 Key。
  const userName = localStorage.getItem(storageKey) // 這邊將 Name(CY) 從 localStorage 裡面取出來
  const checkUser = Boolean(userName)

  function loginAction() {
    if(!checkUser) { 
      return alert('Please create an account first')
    } 

    const confirmMemory = confirm('Do you want to save this password?')
    loginEmail.value = ''
    loginPassword.value = ''
    alert('sign in suceesfully')
    // 這邊將從 localStorage 取出的文字和 Hi~ 組合成一個字串。
    sayHiElement.textContent = `Hi~ ${userName}` 
    if(confirmMemory){
      //暴雷一下，這裡再儲存一次是為了重新整理或關掉頁面，可以維持登入狀態。
      localStorage.setItem('MemoryAccount', `Hi~ ${userName}`) 
    }
  } 

  if(!loginEmail.value || !loginPassword.value){
    alert('The input box cannot be empty')
  } else {
    loginAction()
  }
})
```

### 步驟三：重新整理

![步驟三：重新整理](https://i.imgur.com/MXspeY1.gif)

我們預期重新整理後，『 Hi~ CY 』還是會在，為什麼呢 ？ 那是因為我們在上一個步驟登入時，第一個 `alert` 問我們的是 『 Do you want to save this password ? 』 選擇 『 是 』 後，程式根據我們的回答進行儲存資料。

接下來當我們重新整理時，我們會去 localStorage 裡面找 `MemoryAccount` 屬性，並拿出我們儲存的 `value` 渲染在畫面上。 

```javascript=
function firstRnder() {
  const sayHiElement = document.querySelector('.sayHi')
  const storageMemory = localStorage.getItem('MemoryAccount') //這邊取出上次使用者的資訊
  let status = localStorage.getItem('status')
  !status && localStorage.setItem('status', 'login')
  if(storageMemory){
    //判斷是否有使用者的資訊，再去執行第 8 行渲染
    sayHiElement.textContent = storageMemory
  }
  changePage()
}
```

### 步驟四：登出

![步驟四：登出](https://i.imgur.com/S7PkTU2.gif)

最後我們要來實現登出，這是所有步驟中最簡單的，只要使用 `clear()` 方法將 localStorage 裡面的資料清除即可。

```javascript=
logOutLink.addEventListener('click', () => {
  const sayHiElement = document.querySelector('.sayHi')
  localStorage.clear() //使用 clear 方法，清除所有資料。
  sayHiElement.textContent = 'Hello, Friend !'
})
```

Codepen 連結 ：<a href='https://codepen.io/ice12031110/full/PomoBOR'>https://codepen.io/ice12031110/full/PomoBOR</a><br><br>

## 結語

當我們製作網頁時，如果此頁資料是必須帶往下一頁或者是離線狀態使用，localStorage 這時候就可以派上用場。

雖然 localStorage 非常方便，但在使用時，須注意儲存的資料是否為重要資料，因為 localStorage 只要打開開發者工具就能看到，毫無安全性可言，任何人都可以對其進行修改。

而這邊使用登入的例子，是為了帶大家使用 localStorage 的方法，也藉此說明 localStorage 須注意的事項。

這次實作範例有放在 <a href='https://codepen.io/ice12031110/full/PomoBOR'>Codepen</a> 上面，對此篇文章有任何問題歡迎 [來信](mailto:cy@5xcampus.com) 與我討論。

最後，希望透過這篇文章，能讓大家對 localStorage 不再陌生。

謝謝你的閱讀！

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 JavaScript 觀念和原理嗎？
>
> 我們有開設 📒 [JavaScript / jQuery 前端開發入門實戰](https://5xruby.tw/courses/javascript) 課程唷 ❤️️
>

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

ASTRO Camp

線上課程

實體課程

技術文章

五倍消息

技術文章

認識網頁開發從生活開始

Ruby on Rails 入門 - 幫助你開發的 Mac 小工具分享

自學 Ruby on Rails 推薦的免費資源 TOP 5

快速生成 HTML！Emmet 語法大公開！

資料查找，原來 Ruby on Rails 的 Scope 是這樣用的！

CSS 料理室 (一) | CSS 變數辛香料：不用 Sass、不用 JavaScript，也能實做 Dark Mode Theme 切換！

從模組化帶你認識 Webpack

認識瀏覽器的神秘儲存空間 - localStorage

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

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

專業課程

ASTRO Camp

線上課程

實體課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款