《JavaScript 全端網頁工程師的系統化養成》#2–1 前端開發入門學習的有效策略

郭耿綸 Kaleb
Jul 2, 2020 · 28 min read

前端開發的核心是用戶體驗 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 技術的最佳途徑,舉一反三、善用 DevToolsrepl.it及程式碼編輯器 text editor(在 AC 我們是用 Visual Studio Code),創造豁然開朗的 Wow 時刻

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 的基礎邏輯!

  • 理解變數的作用範圍
// 試著貼到 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)組合在一起,以便有效地存取或修改。

不同的資料結構會適用於一些不同的情境,以便有效率地解決特定問題。

【有次序的結構:陣列】以下六個重點觀念可搭配執行筆記使用:

  1. Array 的型別是 Object
  2. 可搭配迴圈宣告陣列、列舉陣列內容
  3. 運用索引存取資料
  4. 取賦值:開頭 shift(取值)/unshift(賦值)& 結尾 pop(取值)/push(賦值)
  5. 從中間操作資料:splice v.s. splice(插入/刪除)
  6. 合併陣列元素
有次序的結構:陣列【執行筆記】

【Key-value 結構:物件】重點觀念可搭配以下執行筆記使用,包含:

  1. 便於儲存不同格式的資料,並有效管理變數名稱
  2. 存取物件屬性:點記法與括號記法,用以查詢資料、當成變數的 key 值、寫入新的屬性
  3. 列舉出所有的值:for-in 迴圈
  4. 一口氣取得資料:Object.keys()Object.values()Object.entries()
Key-value 結構:物件【執行筆記】

運用 objectarray,能有效協助我們綜合處理字串及名單。可嘗試以下練習:

  • 隨機號碼產生器
  • 加密參賽者姓名
  • 加密參賽者信箱
AC 作業:隨機號碼產生器 | 加密參賽者姓名 | 加密參賽者信箱

函式的基本功能:是封裝重覆使用的程式碼,在需要時才拿出來用。

函式的基本結構可搭配以下執行筆記使用,包含:

  1. 基本結構 & 調用(invoke)函式
  2. 括號的意義:執行函式
  3. 回傳值(return value)
  4. 用函式封裝程式碼:以隨機號碼產生器為例
函式的基本結構【執行筆記】

而透過下圖我們較容易理解「引數如何傳遞給函式」的重要觀念:

引數如何傳遞給函式(from AC’s material)

深入模擬摸彩活動的執行程序,協助我們熟練運用函式的過程:

AC 作業:週年慶摸彩活動

我們喜歡用物件來描述真實世界的概念,這些概念往往複雜、且需要拆解。

以下物件與函式應用的四個重點可搭配執行筆記使用:

  1. 屬性:靜態的資料,用於描述物件的狀態
  2. 方法:物件的功能(函式),或說物件的行為
  3. 印出所有屬性
  4. 把物件當成回傳值
物件與函式應用【執行筆記】

JavaScript 的函式特性,使它比其他的程式語言來得強大。

有關 JS 函式的特殊之處,可搭配以下執行筆記使用,包含:

  • 可以當成值來傳遞 (可以放進變數或放進物件)
  • 可以當成另一個函式的參數或回傳值
  • callback — 在特定事件中觸發函式 (非同步特性)
函式當值【執行筆記】

CSS 必備技術:Bootstrap & RWD|網頁切版

找尋喜歡的標的物、網頁或內容並大量實作,是精通 CSS 技術的不二法門。動手前「思考完整架構」及製作中「快速查閱文件」「透過 DevTools 觀察原始碼及畫面」,是演練過程的關鍵能力!

技術蓬勃發展的前端工業化時代,善用框架、工具、文件,能協助超前部署。其中 Bootstrap 賦予我們快速組裝網頁及調整排版細節的效能。

Bootstrap
Bootstrap
https://getbootstrap.com/

Bootstrap 是一個由 HTML、CSS 和 JavaScript 寫成的前端框架。最初是通用於 Twitter 內部的框架,後釋出為 OpenSource 專案。核心設計目的是達成響應式與行動優先,讓網站自動適應螢幕大小。之所以熱門是因為:不用寫 CSS,只需適當架構 HTML 並加上幾個 Bootstrap class 就能搭建網頁。

Bootstrap UI Kit Components | Free PSD Template | PSD Repo
Bootstrap UI Kit Components | Free PSD Template | PSD Repo
from: Bootstrap UI Kit Components | Free PSD Template | PSD Repo

使用 Bootstrap 前,需遵循官網 Getting Started 頁面上的指示,將其導入本地文件或 CodePen 中。最快速簡單的做法,是利用 BootstrapCDN(Content Delivery Networks),在有網路的環境中就能快速存取。

Quick start of Bootstrap
Quick start of Bootstrap
Quick start of Bootstrap

使用 Bootstrap 文件的方式是在需要時,先到官方文件上去挑選適合的元素,再將 HTML 複製到專案中修改。這份文件包羅萬象,建議可以先快速瀏覽:內容 Content組件 Components佈局 Layout 等頁面。

Buttons in Bootstrap
Buttons in Bootstrap
Buttons in Bootstrap

在智慧型手機及平板使用人數竄升的現代,練就 RWD 設計思維,能協助我們打造跨螢時代的優質體驗。

Responsive Web Design
Responsive Web Design
from: Unsplash

RWD 設計思維就是「讓同一份 HTML 文件根據螢幕尺寸切換 CSS 設定」。在遵循核心原則 Mobile First 的前提下,規劃符合 RWD 原則的網頁佈局可依循這三個步驟:

  1. 定義網頁尺寸 viewport
  2. 以 media queries 設定不同的 breakpoint 以切換各種佈局的 CSS 設定
  3. 搭配 DevTools 同時觀察 RWD 設定的變化
What is responsive web design? — Blog — ASPEKT
What is responsive web design? — Blog — ASPEKT
What is responsive web design? | Blog - ASPEKT

在撰寫後便立即反應在網頁中的前端開發領域,我們通常將順序反過來學習,優先透過 DevTools 觀摩任意網站的變化及設計。

Step 0. 以 DevTools 觀察 RWD 設定的變化:在喜愛的網頁中打開 DevTools,找到下圖中的按鍵 1 ,切換成 Device Mode,並使用下拉選單 2 的 viewport 面板調控大小。

https://medium.com/infinitegamer

Step 1. 遵循 Mobile First:在思考 RWD 設計時,由於小螢幕能顯示的內容較少、可運用的佈局有限,加上行動裝置的效能通常略差於電腦,故須優先規劃行動版,使其較早被讀取,以大幅提升網頁呈現速度,再來思考如何在大螢幕增加更多內容。

UNDERSTANDING THE DIFFERENCE BETWEEN MOBILE-FIRST, ADAPTIVE AND RESPONSIVE DESIGN
UNDERSTANDING THE DIFFERENCE BETWEEN MOBILE-FIRST, ADAPTIVE AND RESPONSIVE DESIGN
UNDERSTANDING THE DIFFERENCE BETWEEN MOBILE-FIRST, ADAPTIVE AND RESPONSIVE DESIGN

Step 2. 以 media queries 設定不同的 breakpoint:breakpoint 是網頁佈局顯著變化的尺寸界線:主要分界點負責重大排版變化,次要分界點負責細部的設計優化。

minor breakpoints key-device-related tweaks Major Breakpoint
minor breakpoints key-device-related tweaks Major Breakpoint
minor breakpoints key-device-related tweaks Major 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>

在軟體開發的世界中「工具沒有好壞」,關鍵是如何善用每項工具的優點以解決合適的問題

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 排版的社群頁面:

AC 作業:我的社群主頁 RWD 實作應用 — KL

.skill-section 的部分,使用了局部流動(Mostly Fluid)設計模式,內容佈局會隨著 viewport 尺寸而流動。特色是:

  • 因應螢幕大小,內容呈現垂直堆疊或排列成多欄。
  • 當 viewport 放大到達某個 breakpoint 時,內容會停止流動且固定置中,以維持網頁易讀性。

上手關鍵在於「充分掌握 HTML 結構的設計及 CSS class 命名」及「善用 viewport 百分比長度來設計頁面視覺」。

整體文字則以細微調整 (Tiny Tweaks)設計模式微調閱讀體驗。特色是:

  • 在不同 viewport 調整字體大小和行高。
  • 調整內容的 padding 和 margin。
  • 調整影像尺寸。

上手關鍵是「掌握 em 字體相對單位的運用」,在小螢幕時增加文字間距以提供眼球呼吸的空間、而大螢幕時因為與螢幕距離增加需放大字體。

Grid system 是一種可以同時處理「欄 (column)」和「列 (row)」的網格式排版系統,是在出版業存在已久的設計概念。

awwwards — Grid Based Web Design Resources
awwwards — Grid Based Web Design Resources
from: awwwards — Grid Based Web Design Resources

隨著網頁設計發展,grid 技術也轉移到 CSS 中,由於 grid 條理分明的排版架構,大幅提高了 media queries 和 breakpoint 的實作效率,也加速了複雜版面的 RWD 實踐。操作方法同樣有許多網路資源,入門文章可以閱讀這篇 freeCodeCamp — Learn CSS Grid in 5 Minutes

How to understand Bootstrap grid system? — Joomla-Monster
How to understand Bootstrap grid system? — Joomla-Monster
How to understand Bootstrap grid system? — Joomla-Monster

另外,Bootstrap 不只協助我們大量節省手刻 CSS 的時間,其真正強大的是它的 RWD 系統。它以 flexbox 為基礎,建立了一套既彈性且容易運用的 grid,再度提高了設計網站原型(prototyping)的效能。使用方式可以參考Bootstrap — Grid system

要習得技能免不了要大量刻意練習,我們再次透過社群網站的例子,來演練這項技術:

AC 作業:【選修】Bootstrap x Grid:重製社群網站 — KL

由於引用了 Bootstrap ,僅需「重構 HTML 並加上適當的 CSS class」即可完成符合 RWD 設計原則的頁面。

經過幾種練習情境後,我認為:

  • Flexbox:適合在不同螢幕大小下,仍舊維持水平排列的元件。(讓水平排列的對齊置中變得容易)
  • Grid:適合在不同螢幕大小下,以多欄列呈現的元件。(以簡易的設定,即可讓一組元素快速適應不同螢幕,呈現多欄列的排列組合)

在進入下個階段前,重溫並加強網頁切版的技術,有助於快速掌握網頁架構,並透過 JS 安排合適的互動模式和動態呈現。

這邊提供我惡搞蝙蝠俠的臉書復刻,有興趣也可以來惡整自己喜歡的人物,過程有趣是持續學習的重要元素,哈哈。讓我們從這份設計稿開始,進而磨練定義 HTML 框架與設定 CSS 樣式的切版技術吧!

AC 選修練習:FB Post Page: for CSS layout training

DOM 操作與事件處理:打造動態互動網頁的關鍵技能

在過去我們分別學習 HTML、CSS 和 JavaScript,而一旦習得 DOM 操作的技術後,我們將脫離「僅僅學習語法或網頁」的階段,進入「前端開發」的設計範疇。藉此將能打造出「當使用者做某事後,畫面產生某變化」的動態、互動式網頁。

這個階段的上手關鍵是「大量實作」和「勤於觀察」,DevTools 和 console.log() 會是非常強大的好戰友!

試圖用 JavaScript 操作網頁前,必須先瞭解網頁在瀏覽器上如何形成——稱之為渲染流程(render path)。

Critical Render Path Optimisation — How To Increase Your Page Speed
Critical Render Path Optimisation — How To Increase Your Page Speed
from: Critical Render Path Optimisation — How To Increase Your Page Speed

首先,瀏覽器會將 HTML 文件和 CSS 樣式解讀為類似 JS 中的物件模型——簡稱 DOM(Document Object Model)。在引入 JavaScript 後,會轉換成樹狀結構 Render tree,接著被轉譯為畫面區塊的結構,最後填入網站內容。

What is Document Object Model(DOM) ? How JS interacts with DOM
What is Document Object Model(DOM) ? How JS interacts with DOM
from: What is Document Object Model(DOM) ? How JS interacts with DOM

我們能以 JavaScript 修改 DOM 結構中任意節點 nodes,也就能藉此操作網頁中的任意元素 elements,因此我們也稱之 DOM API。接下來我們以簡單的實作來認識如何操作 DOM 吧!

AC 作業:DOM — 客製化名片模版 — KL

在這裡我們能看到幾種常見的 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 操作技巧,可以透過網頁操作及查找文件來嘗試更多種語法。

有時我們必須以網頁元素間的關係來找到節點(例如搜尋到某關鍵字之後,羅列出內含的清單項目)。在 DOM Tree 的結構裡,關係有橫向的「兄弟關係 sibling」或縱向的「父子關係 parent/child」。

jQuery Web Page Manipulation: Mod the DOM
jQuery Web Page Manipulation: Mod the DOM
from: jQuery Web Page Manipulation: Mod the DOM

目前常使用的是右邊那組 W3C 較新推出的 element-only 的語法:

Traverse 的語法(from: AC’s material)
Traverse 的語法(from: AC’s material)
Traverse 的語法(from: AC’s material)

讓我們透過以下實作來小試身手吧!

AC 作業:DOM — 篩選王牌得分員 — KL
// 先選出包含所有選手級分數的表格
const playersData = document.querySelectorAll('.table tbody tr')
// 在迴圈內以 travers 方式找到選手分數及名字的節點
const score = Number(playersData[i].children[1].innerText)
const name = playersData[i].children[0]
AC 作業:DOM — dynamic static board — KL

我們一樣直接透過實作籃球賽計分板來練習 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 | How to Create an AS3 Event Listener
Event handler | How to Create an AS3 Event Listener
Event handler | How to Create an AS3 Event Listener
Event handler | How to Create an AS3 Event Listener
  1. Listen:監聽是否有特定事件發生
  2. 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 區別不同的情形。我們再透過實作來演練:

AC 作業:My Favorite Movies

在這份作業中仍以註解的方式保留當初實作時的 console.log(),目的是為了確認監聽器是否設置在正確的位置,以及函式是否作用在正確目標上。

「超速學習」的重點能力:觀摩、模仿、實戰、提問、反思

在這個資訊爆炸、科技「秒新分異」的時代,經驗法則、方法論、硬實力等可被積累的技能和智慧,雖不一定都會被時代淘汰(例如:Nokia),但可能一夜之間就產生劇烈變革(例如:柯達),或默默地被巨幅超前(例如:出版業、廣告業、飯店業、計程車業、餐飲業)。

learn
from: Unsplash

我們無法預測下一秒,但也有機會活到七八十歲——唯有「終身學習者」能駕馭這一波波快速變動的時代浪潮。在人生這場無限賽局中,成為榜首只是一時,暫時的超前與落後才是常態;持續精進和快速學習,才能跟上時局變化。

然而,從想學到學會之間,還有一段距離。由於普魯士教育的僵固體制,多數人還沒充分掌握「有效學習的技能」就離開學校,而當中的多數人一旦離校就停止閱讀和學習新事物。

但幸運的是,在這個績效科學大揭秘的時代,有超多關於「學會如何學習」的實用書籍:《刻意練習》《Deep Work 深度工作力》《一流的人如何保持巔峰》《如何閱讀一本書》《把時間當作朋友》《讀懂一本書》《超速學習》《Learn Better 學得更好》《完美練習》等,族繁不及備載(僅羅列出一些我看過或放在待讀清單中的書)。以下摘錄自我在書中、實戰中、及 AC 的學習旅途中,掌握的有效學習技術:

observe
observe
from: Unsplash

子曰:「三人行,必有我師焉。 擇其善者而從之,其不善者而改之。」

在學習過程中,能觀摩他人的作品或作業(無論是同學或業界前輩),往往能有兩個立即獲得的好處:

  • 意想不到的創意:因為人的背景、邏輯差異甚大,往往能看見不同的思路及解決方式。
  • 增加額外的收穫:觀摩後的反饋,牽涉理解對方邏輯後,複述並給予回饋,因而為彼此額外的收穫。

觀摩大致可分為三步驟:

  1. 理解描述:以自己的邏輯闡述對於觀摩作品或作業的理解。
  2. 觀摩反饋:針對作品或作業欲達成的目的易讀性給予回饋。
  3. 我的學習:自己的收穫及學習體悟。
from: Unsplash

子夏曰:「百工居肆,以成其事,君子學以致其道。」

學習的目的是實踐某項技能或知識,而實踐技能的目的是解決問題。在尚未具備解決問題的能力前,模仿行家的解決手段是最貼近實際運作的學習方式,也是達到卓越的最短距離。

模仿的關鍵是「觀察彼此的差異」(有差距是正常,目的不是要打擊自信,而是識別可複製的成長軌跡)。可以用兩個維度來檢視:

  1. 行為:解決問題的行動及手段。
  2. 思考:面對問題的思考邏輯。

另外我覺得更重要的是,若要真實學會,必須要扎根到深層:

The Golden Circle Presentation | Simon Sinek
The Golden Circle Presentation | Simon Sinek
The Golden Circle Presentation | Simon Sinek
  • 表層 What:做了什麼、思考了哪些面向?
  • 中層 How:如何完成、思考如何演進?
  • 深層 Why:為何這麼做、為什麼如此思考?

唯有揣摩思維,才能學到強者的精髓。

from: Unsplash

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 顆星星——不只可理解如何開始,更能學到一些精實創業的技巧。選擇一個題目開始執行吧!只要好玩又能解決自己或別人的問題,就能激勵自己持續前進!

from: Unsplash

The important thing is not to stop questioning. Curiosity has its own reason for existing. — Albert Einstein

面對未知、痛點和需求的第一步,就是提出一個好問題,不論是問自己、問 Google、問強者、問前輩。問對問題才有進一步解決的可能。

有效的提問可以拆成四個步驟(上一篇其實有提到):

  1. 破題的簡練疑問(最好控制在一口氣就能講完的重點內——不能換氣)
  2. 闡述對現況的理解(有條理呈現直接相關的所有線索)
  3. 呈現試圖解決問題的過程和紀錄(包含文字、截圖、影片等任何形式)
  4. 真誠深刻的感謝(沒有人有義務替我們解決問題)
from: Unsplash

Think higher, feel deeper.— Elie Wiesel

在 AC 我們使用 ORID 這個思考框架:

ORID 是個在國際上被廣泛使用的焦點式提問法,透過四個層次的提問,能夠幫助使用者更結構性地思考與回應問題。以下為ORID的四層提問:- OBJECTIVE:具體的事實,做了哪些事情、看到與觀察哪些事情
- REFLECTIVE:感受與反應,在當下直接的感受、反應與印象深刻的地方
- INTERPRETIVE:事後詮釋與分析,試著解釋與分析事實與自己的感受
- DECISIONAL:訂定目標與下一步,找出下一步可應用、執行與改善的地方

其他不同的反思模式,這篇「反思、反思實踐、反思模型」很值得參考。

而我自己則喜歡濃縮成三點:

  • 一個重點:對於學習的內容中,一定要記住的一個重點。
  • 一個經驗:這個重點與過去經驗的連結、感受或反應。
  • 一個行動:下週就能執行的下一步行動。

很期待在這個博大精深的 Web dev 領域一起持續前進 =)

迭代獨特豐盛的人生策略 FAITH | FELLOWSHIP | STEWARD | IMPACT | IMPROVE

無限賽局玩家 Infinite Gamer | Publication

人生是場無限賽局 — — 開始無從選擇,過程無法預測,當下自由行動,影響擴及他人,結果留存永恆。

郭耿綸 Kaleb

Written by

時而乘上浪峰、時而摔出浪板,靠著上帝才能一再拿起浪板、學著與這無限賽局共存的玩家。

無限賽局玩家 Infinite Gamer | Publication

人生是場無限賽局 — — 開始無從選擇,過程無法預測,當下自由行動,影響擴及他人,結果留存永恆。