《JavaScript 全端網頁工程師的系統化養成》#2–1 前端開發入門學習的有效策略
前端開發的核心是用戶體驗 UX（User Experience），因為前端是一般人與應用程式 App 接觸的唯一介面。本文目的是幫助那些面對龐雜資訊的入門者有系統地學會——如何打造體驗流暢兼具美感的前端介面（ User-friendly & Aesthetic）。此外，更揭秘超速且有效學習的重點能力。
在「Open Source 文化」濃厚的 Web dev 領域，網路上不乏有關前端開發的優質學習內容。但對於幾乎零基礎、非本科背景的我，在學習過程中發現最有價值的兩個關鍵元素——有系統的學習策略、互動熱絡的學習社群——能使學習效能最大化。
- 有系統的學習策略：像蓋房子一樣，先有宏觀的藍圖、接著打好地基、最後才逐步建造、加上裝潢。反觀成為全端工程師的學習旅程，對應的就是：建立軟體開發的世界觀、JavaScript/HTML/CSS 的扎實基礎、各別深入的學習及綜合應用。
- 互動熱絡的 學習社群：同學間的交流——促使更多的動力、激發更多的創意、連結更多可能性；與 業界工程師助教 的互動——讓我們看見成長標竿、啟發創新洞見、引導我們傳承價值；與 學習教練 的往來——促進我們的學習策略及技巧、激發我們的無限潛能、讓學習過程充滿樂趣。
接續 前篇，以下將逐步剖析「前端工程入門」的學習策略及我在 Alpha Camp（簡稱 AC）學習社群中學到最有價值的幾項「超速學習」技巧。
很開心與 AC 和你一起學習 =)
目錄
1⃣️ JavaScript 核心應用：運用函式、物件及陣列組成一支程式
－理解 JS 始末及風格標準：避免迷失在海量的歷史文件中
－掌握語言基礎邏輯：強化變數及資料型別的運用
－資料結構與處理：利用陣列及物件，處理字串及名單
－封裝程式碼：用函式組成一支程式
－綜合應用：用物件表達「抽象概念」｜將函式當作「值／物件的屬性／回傳值」
2⃣️ CSS 必備技術：Bootstrap & RWD｜網頁切版
－Bootstrap 前端框架：直覺好用、加速開發
－RWD 設計思維：打造跨螢時代的優質體驗
－用一維佈局系統 Flex 實作 RWD：局部流動（Mostly Fluid）、細微調整（Tiny Tweaks）
－以二維佈局系統 Grid 實作 RWD：CSS Grid & Bootstrap Grid
－CSS 網頁切版特訓：掌握網頁從無到有的設計細節
3⃣️ DOM 操作與事件處理：打造動態互動網頁的關鍵技能
－用 DOM 操作 CRUD 網頁節點
－遍歷周邊節點 Traverse：以特定網頁元素查找節點
－打造動態網頁：運用 Template Literal 網頁渲染的技術
－用事件驅動互動網頁：用 Event Listener 設置事件及觸發後的行動
4⃣️ 「超速學習」的重點能力：觀摩、模仿、實戰、提問、反思
－觀摩：啟發創意及主動學習的技術
－模仿：走向業界水準的最短距離
－實戰：用 side-project 聚焦自身熱情或解決世界需要
－提問：解決問題的首要步驟
－反思：內化知識與能力的基本訓練
JavaScript 核心應用：運用函式、物件及陣列組成一支程式
大量的觀察與操作是鍛鍊 JavaScript 技術的最佳途徑，舉一反三、善用 DevTools、repl.it及程式碼編輯器 text editor（在 AC 我們是用 Visual Studio Code），創造豁然開朗的 Wow 時刻。
理解 JS 始末及風格標準：避免迷失在海量的歷史文件中
JavaScript 至今仍不斷迭代，尤其在 2015 之後的 ES6 有極大的改變，了解演化史，可避免未來學習時因各種技術歷史文件產生的認知衝突，以下簡單列出發展史關鍵字，有興趣可以自行查詢：
- 2008：瀏覽器大戰｜jQuery 優化跨瀏覽器體驗｜HTML5 發布
- 2010~2012：Node.js 跨足後端｜因行動裝置崛起的響應式 RWD 技術
- 2013~2014：前端工程化｜第一代前端框架 Angular/Backbone/Ember 成熟｜新生代前端框架 React JS 問世
- 2015~2016：ES6 奠定前端工業化生產｜React 生態系完備
- 2017~：React 稱霸｜模組系統及 Web Component 的待解問題
值得額外注意的是：
- JS 為相對寬鬆的語言，建議啟用嚴格模式
'use strict'，好讓 console 丟出更多的警告，甚至禁止使用某些未來會消失的語法。 - 掌握通用風格標準 Style Guide，簡化工程師之間的溝通。其中較熱門的有：Airbnb JavaScript Style Guide、Google JavaScript Style Guide、Idiomatic JavaScript Style Guide、JavaScript Standard Style Guide。
- 善用 MDN 文件：優先閱讀 Demo 程式碼，嘗試理解後執行並驗證想法。
掌握語言基礎邏輯：強化變數及資料型別的運用
掌握以下幾個重要觀念，更容易上手 JS 的基礎邏輯！
- 理解變數的作用範圍
// 試著貼到 console 上玩玩看吧 =)let x = 10 // global 父層
{ // local 子層
let y = 3
}
{ // local 子層
let z = 8
console.log(x) // 10 可存取父層區塊變數
console.log(y) // y is not defined 不可存取水平區塊
console.log(z)
}
console.log(y) // y is not defined 不可存取子層區塊
- 區分舊版的 var 與 ES6 的 let/const 的差異
var // 不受到作用域規範（一定是全域）// ES6(2015~)
let // 區域變數，可以重新賦值
const // 區域變數，宣告後不可改變
- 辨別簡單值（基本型別 Primitives）與不簡單值（物件 Objects）
// 基本值 PrimitivesNumber // 1, 2, 3...
String // ‘Just Do It !!!’
Boolean // true, false
Undefined
Null
Symbol// 物件 Objectsconst hero = {
id: 'Batman',
name: ['Bruce', 'Wayne'],
gender: 'Male',
age: 36,
}
- 基本值和物件的存取方式不同，問題可能發生在存取、傳遞、重新賦值時
- JavaScript 是種動態程式語言（dynamic language），對型別轉換非常寬鬆，這也會造成失控的型別轉換（coercion）。所以，注意永遠使用三個等號
===，並且在運算前透過if/else等程序檢查型別。
資料結構與資料處理：利用陣列及物件，處理字串及名單
資料結構 （data structure）是透過特定的順序和位置，把很多個基本值 （primitives）組合在一起，以便有效地存取或修改。
不同的資料結構會適用於一些不同的情境，以便有效率地解決特定問題。
【有次序的結構：陣列】以下六個重點觀念可搭配執行筆記使用：
- Array 的型別是 Object
- 可搭配迴圈宣告陣列、列舉陣列內容
- 運用索引存取資料
- 取賦值：開頭 shift（取值）／unshift（賦值）& 結尾 pop（取值）／push（賦值）
- 從中間操作資料：splice v.s. splice（插入／刪除）
- 合併陣列元素
【Key-value 結構：物件】重點觀念可搭配以下執行筆記使用，包含：
- 便於儲存不同格式的資料，並有效管理變數名稱
- 存取物件屬性：點記法與括號記法，用以查詢資料、當成變數的 key 值、寫入新的屬性
- 列舉出所有的值：for-in 迴圈
- 一口氣取得資料：
Object.keys()、Object.values()、Object.entries()
運用 object 和 array，能有效協助我們綜合處理字串及名單。可嘗試以下練習：
- 隨機號碼產生器
- 加密參賽者姓名
- 加密參賽者信箱
封裝程式碼：用函式組成一支程式
函式的基本功能：是封裝重覆使用的程式碼，在需要時才拿出來用。
函式的基本結構可搭配以下執行筆記使用，包含：
- 基本結構 & 調用（invoke）函式
- 括號的意義：執行函式
- 回傳值（return value）
- 用函式封裝程式碼：以隨機號碼產生器為例
而透過下圖我們較容易理解「引數如何傳遞給函式」的重要觀念：
深入模擬摸彩活動的執行程序，協助我們熟練運用函式的過程：
綜合應用：用物件表達「抽象概念」｜將函式當作「值／物件的屬性／回傳值」
我們喜歡用物件來描述真實世界的概念，這些概念往往複雜、且需要拆解。
以下物件與函式應用的四個重點可搭配執行筆記使用：
- 屬性：靜態的資料，用於描述物件的狀態
- 方法：物件的功能（函式），或說物件的行為
- 印出所有屬性
- 把物件當成回傳值
JavaScript 的函式特性，使它比其他的程式語言來得強大。
有關 JS 函式的特殊之處，可搭配以下執行筆記使用，包含：
- 可以當成值來傳遞 （可以放進變數或放進物件）
- 可以當成另一個函式的參數或回傳值
- callback — 在特定事件中觸發函式 （非同步特性）
CSS 必備技術：Bootstrap & RWD｜網頁切版
找尋喜歡的標的物、網頁或內容並大量實作，是精通 CSS 技術的不二法門。動手前「思考完整架構」及製作中「快速查閱文件」或「透過 DevTools 觀察原始碼及畫面」，是演練過程的關鍵能力！
Bootstrap 前端框架：直覺好用、加速開發
技術蓬勃發展的前端工業化時代，善用框架、工具、文件，能協助超前部署。其中 Bootstrap 賦予我們快速組裝網頁及調整排版細節的效能。
Bootstrap 是一個由 HTML、CSS 和 JavaScript 寫成的前端框架。最初是通用於 Twitter 內部的框架，後釋出為 OpenSource 專案。核心設計目的是達成響應式與行動優先，讓網站自動適應螢幕大小。之所以熱門是因為：不用寫 CSS，只需適當架構 HTML 並加上幾個 Bootstrap class 就能搭建網頁。
使用 Bootstrap 前，需遵循官網 Getting Started 頁面上的指示，將其導入本地文件或 CodePen 中。最快速簡單的做法，是利用 BootstrapCDN（Content Delivery Networks），在有網路的環境中就能快速存取。
使用 Bootstrap 文件的方式是在需要時，先到官方文件上去挑選適合的元素，再將 HTML 複製到專案中修改。這份文件包羅萬象，建議可以先快速瀏覽：內容 Content、組件 Components、佈局 Layout 等頁面。
RWD 設計思維：打造跨螢時代的優質體驗
在智慧型手機及平板使用人數竄升的現代，練就 RWD 設計思維，能協助我們打造跨螢時代的優質體驗。
RWD 設計思維就是「讓同一份 HTML 文件根據螢幕尺寸切換 CSS 設定」。在遵循核心原則 Mobile First 的前提下，規劃符合 RWD 原則的網頁佈局可依循這三個步驟：
- 定義網頁尺寸 viewport
- 以 media queries 設定不同的 breakpoint 以切換各種佈局的 CSS 設定
- 搭配 DevTools 同時觀察 RWD 設定的變化
在撰寫後便立即反應在網頁中的前端開發領域，我們通常將順序反過來學習，優先透過 DevTools 觀摩任意網站的變化及設計。
Step 0. 以 DevTools 觀察 RWD 設定的變化：在喜愛的網頁中打開 DevTools，找到下圖中的按鍵 1 ，切換成 Device Mode，並使用下拉選單 2 的 viewport 面板調控大小。
Step 1. 遵循 Mobile First：在思考 RWD 設計時，由於小螢幕能顯示的內容較少、可運用的佈局有限，加上行動裝置的效能通常略差於電腦，故須優先規劃行動版，使其較早被讀取，以大幅提升網頁呈現速度，再來思考如何在大螢幕增加更多內容。
Step 2. 以 media queries 設定不同的 breakpoint：breakpoint 是網頁佈局顯著變化的尺寸界線：主要分界點負責重大排版變化，次要分界點負責細部的設計優化。
實作上通常在 CSS 中以 media queries 進行設定：
// from Bootstrap
//default mobile styles go here first before media queries// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Step 3. 定義網頁尺寸 viewport：有時在設定 breakpoint 後，網頁並不會隨螢幕尺寸變化，原因在於裝置螢幕的實體像素大小與我們在 CSS 中定義的數位像素大小不同。此時，可在 HTML 的 <head> 裡加入 <meta name="viewport"> 標籤，以 width=device-width 調整內容寬度為裝置寬度；以initial-scale=1.0 設定「CSS 像素」和「裝置像素」的比例為 1:1。
<head>
... // other setting
<meta name="viewport" content="width=device-width, initial-scale=1">
... // other setting
</head>用一維佈局系統 Flex 實作 RWD：局部流動（Mostly Fluid）、細微調整（Tiny Tweaks）
在軟體開發的世界中「工具沒有好壞」，關鍵是如何善用每項工具的優點以解決合適的問題。
Flexbox 和 Grid 是現代 CSS 推出的排版系統，前者適用於微調或對齊既有內容（content-out 排版）；後者適合先有排版設計，再一一填入內容（layout-in 排版）。
由於開源的 Web dev 領域中，有非常多優質的內容協助學習這兩套工具的操作方式（例如 AC 課程手把手的教學內容），這裡主要提供我的實作心得和上手技巧。可以上 Flexbox Playground 體驗及把玩 Flexbox 的概念，並優先閱讀這幾篇文章 CSS Tricks — A Complete Guide to Flexbox、OXXO.Studio — 深入解析 CSS Flexbox。
以其中一個作業為例，承接上個學期的個人履歷，我們將它改裝成 RWD 排版的社群頁面：
在 .skill-section 的部分，使用了局部流動（Mostly Fluid）設計模式，內容佈局會隨著 viewport 尺寸而流動。特色是：
- 因應螢幕大小，內容呈現垂直堆疊或排列成多欄。
- 當 viewport 放大到達某個 breakpoint 時，內容會停止流動且固定置中，以維持網頁易讀性。
上手關鍵在於「充分掌握 HTML 結構的設計及 CSS class 命名」及「善用 viewport 百分比長度來設計頁面視覺」。
整體文字則以細微調整 （Tiny Tweaks）設計模式微調閱讀體驗。特色是：
- 在不同 viewport 調整字體大小和行高。
- 調整內容的 padding 和 margin。
- 調整影像尺寸。
上手關鍵是「掌握 em 字體相對單位的運用」，在小螢幕時增加文字間距以提供眼球呼吸的空間、而大螢幕時因為與螢幕距離增加需放大字體。
以二維佈局系統 Grid 實作 RWD：CSS Grid & Bootstrap Grid
Grid system 是一種可以同時處理「欄 (column)」和「列 (row)」的網格式排版系統，是在出版業存在已久的設計概念。
隨著網頁設計發展，grid 技術也轉移到 CSS 中，由於 grid 條理分明的排版架構，大幅提高了 media queries 和 breakpoint 的實作效率，也加速了複雜版面的 RWD 實踐。操作方法同樣有許多網路資源，入門文章可以閱讀這篇 freeCodeCamp — Learn CSS Grid in 5 Minutes。
另外，Bootstrap 不只協助我們大量節省手刻 CSS 的時間，其真正強大的是它的 RWD 系統。它以 flexbox 為基礎，建立了一套既彈性且容易運用的 grid，再度提高了設計網站原型（prototyping）的效能。使用方式可以參考Bootstrap — Grid system。
要習得技能免不了要大量刻意練習，我們再次透過社群網站的例子，來演練這項技術：
由於引用了 Bootstrap ，僅需「重構 HTML 並加上適當的 CSS class」即可完成符合 RWD 設計原則的頁面。
經過幾種練習情境後，我認為：
- Flexbox：適合在不同螢幕大小下，仍舊維持水平排列的元件。（讓水平排列的對齊置中變得容易）
- Grid：適合在不同螢幕大小下，以多欄列呈現的元件。（以簡易的設定，即可讓一組元素快速適應不同螢幕，呈現多欄列的排列組合）
CSS 網頁切版特訓：掌握網頁從無到有的設計細節
在進入下個階段前，重溫並加強網頁切版的技術，有助於快速掌握網頁架構，並透過 JS 安排合適的互動模式和動態呈現。
這邊提供我惡搞蝙蝠俠的臉書復刻，有興趣也可以來惡整自己喜歡的人物，過程有趣是持續學習的重要元素，哈哈。讓我們從這份設計稿開始，進而磨練定義 HTML 框架與設定 CSS 樣式的切版技術吧！
DOM 操作與事件處理：打造動態互動網頁的關鍵技能
在過去我們分別學習 HTML、CSS 和 JavaScript，而一旦習得 DOM 操作的技術後，我們將脫離「僅僅學習語法或網頁」的階段，進入「前端開發」的設計範疇。藉此將能打造出「當使用者做某事後，畫面產生某變化」的動態、互動式網頁。
這個階段的上手關鍵是「大量實作」和「勤於觀察」，DevTools 和
console.log()會是非常強大的好戰友！
用 DOM 操作 CRUD 網頁節點
試圖用 JavaScript 操作網頁前，必須先瞭解網頁在瀏覽器上如何形成——稱之為渲染流程（render path）。
首先，瀏覽器會將 HTML 文件和 CSS 樣式解讀為類似 JS 中的物件模型——簡稱 DOM（Document Object Model）。在引入 JavaScript 後，會轉換成樹狀結構 Render tree，接著被轉譯為畫面區塊的結構，最後填入網站內容。
我們能以 JavaScript 修改 DOM 結構中任意節點 nodes，也就能藉此操作網頁中的任意元素 elements，因此我們也稱之 DOM API。接下來我們以簡單的實作來認識如何操作 DOM 吧！
在這裡我們能看到幾種常見的 DOM 操作：
- 選取節點 Select： 這裡採用 CSS class 的選擇器
.querySelector()，其中的document指的就是整個 HTML 文件。
document.querySelector('.my-card img')- 修改節點 Replace：採用
.innerHTML和=來賦予（assign）新值。
document.querySelector('.my-name').innerHTML = 'Kaleb Kuo'- 新增節點 Create：宣告變數
li來儲存生成的清單項目，以賦予內容。
let li = document.createElement('li')- 插入節點 Append：將已存入內容的
li插入 experience 的ul清單中。
ul.appendChild(li)- （額外補充）刪除節點 Delete：下例為刪除整個
ul清單。
ul.remove()為熟練 DOM 操作技巧，可以透過網頁操作及查找文件來嘗試更多種語法。
遍歷周邊節點 Traverse：以特定網頁元素查找節點
有時我們必須以網頁元素間的關係來找到節點（例如搜尋到某關鍵字之後，羅列出內含的清單項目）。在 DOM Tree 的結構裡，關係有橫向的「兄弟關係 sibling」或縱向的「父子關係 parent/child」。
目前常使用的是右邊那組 W3C 較新推出的 element-only 的語法：
讓我們透過以下實作來小試身手吧！
// 先選出包含所有選手級分數的表格
const playersData = document.querySelectorAll('.table tbody tr')// 在迴圈內以 travers 方式找到選手分數及名字的節點
const score = Number(playersData[i].children[1].innerText)
const name = playersData[i].children[0]
打造動態網頁：運用 Template Literal 網頁渲染的技術
我們一樣直接透過實作籃球賽計分板來練習 Template Literal 網頁渲染的技術吧！當後端工程師已經把得分資料存放在 players 這個陣列中，而身為前端工程師的我們，任務就是把資料的內容填入生成的表格中，並且加上可以加減分的按鈕（有興趣可以 fork 這份 codepen 去實作加減分的功能，在下個段落會有這個技術的說明）。以下來剖析這段關鍵的程式碼：
// Main Program
const dataPanel = document.querySelector('#data-panel')
displayPlayerList(players)// Function
function displayPlayerList (players) {
let htmlContent = `` // 用來裝填 Template Literal
players.forEach(player => { // 迭代 players 陣列中的每個代表選手的物件
const bottoms = ' <i class="fa fa-plus-circle up"></i> <i class="fa fa-minus-circle down"></i>'
htmlContent += `<tr>` // 將表格開頭結尾分別切割出來
for (key in player) { // 迭代每位選手的姓名及得分資料
if (key === 'name') { // 嵌入名字的欄位
htmlContent += `<td><span>${player[key]}</span></td>
`
} else { // 嵌入內含分數及按鈕的欄位
htmlContent += `
<td><span style="font-size: 25px">${player[key]}</span>${bottoms}</td>
`
}
}
htmlContent += `</tr>`
})
dataPanel.innerHTML = htmlContent // 最後將組裝完畢的表格嵌入頁面中
}
用事件驅動互動網頁：用 Event Listener 設置事件及觸發後的行動
最後我們來談談如何打造出「當使用者做某事後，畫面產生某變化」的互動頁面。其中的關鍵就是 Event Listener 的這個角色，它主要有兩個功能：
- Listen：監聽是否有特定事件發生
- Handle：依照事件啟動設定好的程序（函式）
我們可以依風格或者函式複雜程度，決定是否要額外設置 handler 函式
// listener
element.addEventListener('click', greeting)
// handler
function greeting() {
alert('handling event')
}或者將匿名函式寫在監聽器內：
// listener
element.addEventListener('click', function () {
alert('handling event')
})使用 Event Listener 的好處是，可以同時將不同事件綁定在同一個標的物上，並透過 if/else 區別不同的情形。我們再透過實作來演練：
在這份作業中仍以註解的方式保留當初實作時的
console.log()，目的是為了確認監聽器是否設置在正確的位置，以及函式是否作用在正確目標上。
「超速學習」的重點能力：觀摩、模仿、實戰、提問、反思
在這個資訊爆炸、科技「秒新分異」的時代，經驗法則、方法論、硬實力等可被積累的技能和智慧，雖不一定都會被時代淘汰（例如：Nokia），但可能一夜之間就產生劇烈變革（例如：柯達），或默默地被巨幅超前（例如：出版業、廣告業、飯店業、計程車業、餐飲業）。
我們無法預測下一秒，但也有機會活到七八十歲——唯有「終身學習者」能駕馭這一波波快速變動的時代浪潮。在人生這場無限賽局中，成為榜首只是一時，暫時的超前與落後才是常態；持續精進和快速學習，才能跟上時局變化。
然而，從想學到學會之間，還有一段距離。由於普魯士教育的僵固體制，多數人還沒充分掌握「有效學習的技能」就離開學校，而當中的多數人一旦離校就停止閱讀和學習新事物。
但幸運的是，在這個績效科學大揭秘的時代，有超多關於「學會如何學習」的實用書籍：《刻意練習》、《Deep Work 深度工作力》、《一流的人如何保持巔峰》、《如何閱讀一本書》、《把時間當作朋友》、《讀懂一本書》、《超速學習》、《Learn Better 學得更好》、《完美練習》等，族繁不及備載（僅羅列出一些我看過或放在待讀清單中的書）。以下摘錄自我在書中、實戰中、及 AC 的學習旅途中，掌握的有效學習技術：
觀摩：啟發創意及主動學習的技術
子曰：「三人行，必有我師焉。 擇其善者而從之，其不善者而改之。」
在學習過程中，能觀摩他人的作品或作業（無論是同學或業界前輩），往往能有兩個立即獲得的好處：
- 意想不到的創意：因為人的背景、邏輯差異甚大，往往能看見不同的思路及解決方式。
- 增加額外的收穫：觀摩後的反饋，牽涉理解對方邏輯後，複述並給予回饋，因而為彼此額外的收穫。
觀摩大致可分為三步驟：
- 理解描述：以自己的邏輯闡述對於觀摩作品或作業的理解。
- 觀摩反饋：針對作品或作業欲達成的目的及易讀性給予回饋。
- 我的學習：自己的收穫及學習體悟。
模仿：走向業界水準的最短距離
子夏曰：「百工居肆，以成其事，君子學以致其道。」
學習的目的是實踐某項技能或知識，而實踐技能的目的是解決問題。在尚未具備解決問題的能力前，模仿行家的解決手段是最貼近實際運作的學習方式，也是達到卓越的最短距離。
模仿的關鍵是「觀察彼此的差異」（有差距是正常，目的不是要打擊自信，而是識別可複製的成長軌跡）。可以用兩個維度來檢視：
- 行為：解決問題的行動及手段。
- 思考：面對問題的思考邏輯。
另外我覺得更重要的是，若要真實學會，必須要扎根到深層：
- 表層 What：做了什麼、思考了哪些面向？
- 中層 How：如何完成、思考如何演進？
- 深層 Why：為何這麼做、為什麼如此思考？
唯有揣摩思維，才能學到強者的精髓。
實戰：用 side-project 聚焦自身熱情或解決世界需要
We’re here to put a dent in the universe. Otherwise why else even be here?
― Steve Jobs
無論學軟體開發的目的是轉職工程師、延伸 T 型技能、打造產品或科技創業，直接運用習得的技術完成自己的熱情、解決某些人的痛點，不只紮實學會，同時累積了自己的作品集、甚至達成一開始設立的目標。
關於如何開啟一項 Side Project，可以參考 [GitHub] 如何經營 Side Project 拿到 1K 顆星星——不只可理解如何開始，更能學到一些精實創業的技巧。選擇一個題目開始執行吧！只要好玩又能解決自己或別人的問題，就能激勵自己持續前進！
提問：解決問題的首要步驟
The important thing is not to stop questioning. Curiosity has its own reason for existing. — Albert Einstein
面對未知、痛點和需求的第一步，就是提出一個好問題，不論是問自己、問 Google、問強者、問前輩。問對問題才有進一步解決的可能。
有效的提問可以拆成四個步驟（上一篇其實有提到）：
- 破題的簡練疑問（最好控制在一口氣就能講完的重點內——不能換氣）
- 闡述對現況的理解（有條理呈現直接相關的所有線索）
- 呈現試圖解決問題的過程和紀錄（包含文字、截圖、影片等任何形式）
- 真誠深刻的感謝（沒有人有義務替我們解決問題）
反思：內化知識與能力的基本訓練
Think higher, feel deeper.— Elie Wiesel
在 AC 我們使用 ORID 這個思考框架：
ORID 是個在國際上被廣泛使用的焦點式提問法，透過四個層次的提問，能夠幫助使用者更結構性地思考與回應問題。以下為ORID的四層提問：- OBJECTIVE：具體的事實，做了哪些事情、看到與觀察哪些事情
- REFLECTIVE：感受與反應，在當下直接的感受、反應與印象深刻的地方
- INTERPRETIVE：事後詮釋與分析，試著解釋與分析事實與自己的感受
- DECISIONAL：訂定目標與下一步，找出下一步可應用、執行與改善的地方
其他不同的反思模式，這篇「反思、反思實踐、反思模型」很值得參考。
而我自己則喜歡濃縮成三點：
- 一個重點：對於學習的內容中，一定要記住的一個重點。
- 一個經驗：這個重點與過去經驗的連結、感受或反應。
- 一個行動：下週就能執行的下一步行動。
很期待在這個博大精深的 Web dev 領域一起持續前進 =)
