👽 Pei's Blog

六角學院 JS 直播班完課心得

Pei Wang — Thu, 15 Apr 2021 00:00:00 GMT

先說結論，推拉哪次不推｜六角學院JS直播班完課心得

開設medium以來，沒想到第一篇文章就會是六角的完課心得。剛結束JS直播養成班，寫下我的過程心得給還在猶豫是否加入的你~

參考資源：

當初為什麼報名這堂課？

曾買過六角的HTML/CSS網頁設計課程，但邊上班邊學習的進度真的是三天打漁兩天曬網，太高估自己的自律性，也發現自己尚未養成學習習慣，導致一門課要很長時間才可以完成。

處於離職的轉換期，經過幾次面試後，下定決心在這段空窗期全職轉職前端工程師，而非上班自學斷斷續續。選擇直播班而非影音課程的原因，想逼迫自己在短期間內學好JS基礎，真實感覺(線上)有同學跟你一起在拚同一份作業，而且線上課適合遠離都市(懶得奔波)的人 😅

第一週~第八週的學習過程

充實的課內資源量

每個禮拜分別會有：

影音課程
每週五晚上將近3小時的直播課
助教加碼教學
Slack上小組討論和大群的主線任務討論
每天的每日任務

記得當初直播班的介紹是說FOR上班族想自我進修，每週至少10小時。

但實際是，每週投入在這門課的時間遠遠超過10小時啊！單就零基礎的我來說，隨著進程難度漸高，每週投入逐漸超過30小時以上。

抱著培養未來工作技能的心情，想完成每一項提供的作業和任務，並做到每個難度和等級都完成，每天也一定都會開Slack看討論串看大家的留言和程式碼討論，即使無法像吃記憶吐司一樣完全複製，但一定也可以從裡面學到幾個方便又神奇的新語法 (酷東西！)

除了上課教的文法以外，有時也會邊寫作業，邊把直接把不懂的東西丟google，找找看MDN找原本結構、有沒有大神寫得更多範例、或是鐵人幫系列文，不僅會找到更多超補的內容，也可以加深和加廣基礎觀念。個人覺得這蠻重要的，如果時間允許的話，做筆記也很好！

除了課程以外

六角影音課程也會有同學，可以從評論中找到同學分享的解法或資源，但通常不會每一頁都點來看，單純看留言數也無法一目了然馬上了解那些留言有乾貨

這次直播班就有個同學在大群提供了codewar練習題，針對陣列篩選設計題目，做完15道題也真的讓我對這些工具更加熟悉，之後寫題目也方便快速許多~

Coding Meetup #1 — Higher-Order Functions Series — Count the number of JavaScript developers coming from Europe

交作業的比例之高！

最大的收獲是？

有了雙螢幕(歡呼)(欸？不是

培養學習習慣
找到適合的筆記軟體與習慣

對於想要轉職的人來說，我認為上述兩項是在出發時必須具備的習慣，讓路途走得更遠更長 (但我也不是希望轉職過程拖太久QAQ

很幸運的，在直播班中算是摸到了這些習慣的邊邊。

培養學習習慣

直播班有稱不上輕鬆的作業量，永遠比你更努力更認真的同學在寫作業，固定的上課時間，這三項原因會讓你想逼自己一定要在一個禮拜內完成所有任務(也可能是升學體制下的奴性基因?)，焦慮地想做完所有事，就算休息或睡覺也在焦慮，腦子在想code怎麼優化(希望我不是病了)，焦慮所以會挪出大量時間給資質駑鈍的自己，每天寫扣碰扣，時間長了，也真的可以感受到自己越來越熟悉鍵盤的字母位置、語法操作。

找到適合的筆記軟體與習慣

(好像偏離課程心得了

初期用hackmd，後期全部轉移到Notion

有了大量的筆記需求後，會更了解自己適合哪個筆記軟體

喜歡hackmd左側的目錄查找，只要階層分類好，想要回頭複習筆記過的語法相當方便！如果熟悉Markdown語法，在編寫上也會快速很多。

但筆記一多，想查找相同分類的文章，介面就不是那麼方便使用

Notion則是從幾年前就知道，但一直沒有高度需求，也不會特別使用他去做管理，直到我累積了大量的程式筆記，需要依語言去管理時才了解到他原來多麼讚 😍

影音課程尤其需要筆記！ 相比較書籍、文章、實體課程講義，都會有目錄或文字可以快速翻找關鍵字，影音只有影片標題，裡面重點需要自己去抓和不斷練習程式碼，透過建立筆記，省下不斷重播影片花費的時間，也容易給自己小成就感和信心！(新手很容易被打擊啊

Notion教學：https://sspai.com/post/57464

最喜歡直播班的哪些活動？

24小時助教服務

雖然我很少利用，但我覺得真的排除了很多新手在寫扣的障礙感，包括：

不敢問怕被覺得蠢
卡了一整天還是不知道錯在哪(真的很想哭)
想進到下一階段但等了3天才得到回覆，都已經忘記昨天飲料喝哪間的金魚腦真的不知道那時候的自己在想甚麼

我通常會google不到解答，或是都看不懂查到的文件，才會去求救。但更常的是看別人的問題，以及助教的回覆，很常有的情況是：你不會是第一個，也不會是最後一個卡關的人

看助教回覆也可以看到同個地方更優、或不一樣的解法~每次看都覺得天靈蓋被打開了~

如果時光能倒流，會希望自己再次注意哪些細節？

如果再來一次，我會想和這次一樣盡力完成每一樣作業，扎實打好基礎，有問題找不到答案，就丟Slack集思廣益，才不會卡關太久。

花上更多心思和時間，在這段期間補完課外補充的語法，例如Kuro大的認識JS之路、六角的JS工具補帖、JS抓錯文等。可以運用在作業中，遇到不會的也可以抓助教問(抖

再來一次，如果條件允許，還是會選擇投入大量時間在直播班學習技能

因為絕對不會讓你後悔！只會覺得時間永遠不夠！

身為學長姐，分享些想入坑的新同學一些勉勵的話

加入直播班，只有在推坑，沒有在棄坑的！

但真的建議需要一個禮拜挪出相對多的時間來準備及預習，若是零基礎初心者，才不會因無法善用到所有提供的資源，跟不上進度，反而更增加挫折感。

若已準備好，下定決心學好JS基礎的話，那還猶豫甚麼，就來報名直播班吧！資源絕對不會少，還可以聽到影音課程沒有的，在直播中超級真實幹話滿滿的校長XD

如果你喜歡我的文章，歡迎拍手或留言！對課程有疑問，也可以問我或詢問六角學院粉專哦~

[筆記]slick.js做出商品照輪播

Pei Wang — Sun, 16 May 2021 00:00:00 GMT

Slick.js http://kenwheeler.github.io/slick/

投影片輪播的套件，之前都是使用六角介紹的 swiper，官方文件和demo都很詳細，相當推薦

為了做出其他商品照輪播的效果，又從codepen找到完全是我要的slick做的輪播效果，像下面這張圖，同樣類似效果也可以在uniqlo商品頁面看到

玩出來的效果很實用，作為使用者體驗也不錯

安裝

CDN，需裝入 jquery

<!-- CSS -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
/>

<!-- jQuery -->
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
  crossorigin="anonymous"
></script>

<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

基本設定

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

<script>
  $(document).ready(function () {
    $('.your-class').slick()
  })
</script>

也可以用 ul > li 排列，輪播設定以 JS 為主

DEMO

點擊左側照片，可以控制右側畫面所呈現的照片，同時左側照片也會隨著照片點擊方向，往上或往下滑動一張照片

// 右側主要照片
$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav',
})

// 左側點擊控制照片輪播
$('.slider-nav').slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  centerMode: true,
  focusOnSelect: true,
  vertical: true,
})

幾個常用到的設定

slidesToShow: 1

呈現出來的照片數

slidesToScroll: 1

滑動一次的照片數，點擊左右的箭頭，一次會滑動的數量。若 slidesToShow 和 slidesToScroll 數字一樣，點一次滑動整排投影片都換一輪

asNavFor

讓投影片互相輪動，後面加入選擇器，型別字串

arrows

箭頭是否呈現，預設 true

fade

淡入淡出，預設 false

dots

現在輪到第幾個的點，預設 true

centerMode

預設 false，讓前一張和後一張投影片不會出現，使用於 slidesToShow 是奇數時候。

設定 true，投影片會像 demo 所示，前一張與後一張出現一部分，但不是整張圖片。若沒有設定 centerPadding，預設是出現 50px

centerPadding

預設 50px，型別字串。設定為 center mode 時，可設定 padding 值（px 或 %）

vertical

boolean，投影片為垂直，預設 false

zIndex

預設值 1000

responsive

響應式斷點設定，也可一併在 JS 中設定。值為陣列包物件，breakpoint 為斷點 pixel 值，settings 內加入各斷點設定，取消 slider 效果用 settings: "unslick"

responsive: [
  {
    breakpoint: 1024,
    settings: {
      // ...
    },
  },
  {
    breakpoint: 600,
    settings: {
      // ...
    },
  },
  {
    breakpoint: 480,
    settings: 'unslick',
  },
]

事件

// On swipe event
$('.your-element').on('swipe', function (event, slick, direction) {
  console.log(direction) // left
})

// On edge hit
$('.your-element').on('edge', function (event, slick, direction) {
  console.log('edge was hit')
})

// On before slide change
$('.your-element').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
  console.log(nextSlide)
})

[note] React 發佈到 Github pages 過程

Pei Wang — Mon, 24 May 2021 00:00:00 GMT

紀錄成功和失敗後找到解法的過程

過程全都是在專案資料夾內進行

Github上新增專案

將專案推上github

//這段新增好專案後會出現:帳號名、檔名
git remote add origin git@github.com:username/檔名.git
git push -u origin master

package.json

{
  "name": "realtime-weather-app",
  "homepage": "https://myusername.github.io/my-app",
  // 這個檔案的pages網址:帳號名、檔名

  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    // 添加上面兩個指令
  }
}

安裝gh-pages

npm install --save gh-pages

發布

若檔案更新也需要重新發布

npm run deploy

指向gh-pages

GitHub / Setting / Pages

Source的地方，改成 Branch:gh-pages

自己遇到的雷點

API網站限制：要注意是否有限定網址需再做設定，做專案時可能只有設定local:3000

fetch:A branch named 'gh-pages' already exists

解法：win10
討論：https://github.com/transitive-bullshit/react-modern-library-boilerplate/issues/15

pakege.json script加上指令，刪除gh-pages快取，再跑一次清除的指令

"clean" : "gh-pages-clean"

終端機

npm run clean

重新安裝gh-page並發布

npm run deploy

其他按讚數很高的解法

rm -rf node_modules/gh-pages/.cache

手動刪除：Go to your project's node_modules/gh-pages and delete '.cache' folder.

"deploy": "gh-pages -d build"
//這一行指令改成下面的指令

"deploy": "gh-pages -b master -d build",

add a script in package.json like this.

"clean" : "gh-pages-clean"

So you'll just need to do npm run clean next time the cleaning is required.

// 第一個改成這樣
rm -rf node_modules/.cache/gh-pages/

[note] json-server推到heroku遠端脫離本地端限制

Pei Wang — Sun, 27 Jun 2021 00:00:00 GMT

緣由

project 使用 json-server 做簡易 api，為了在之後求職時面試也可以用，將 json 傳到網路上，例如六角學院示範的 heroku，或是 json-server 官方提供的 beta 版 My json server

但推上 heroku 遇到一點困難，可能是 json-server 更新，或是影片是3年前比較舊也有可能。網路上找不到全中文的解法，所以將找到的資源簡單翻譯，並記錄這次排錯過程。

分成以下三步驟，若已經建立好 json server，可以直接跳到 2. 準備部屬到 heroku

建立 api 資料夾

部屬到 heroku 前的準備

建立 heroku server

1. 建立 api 資料夾

假設須建立 fake server 的假 api：

建立 fake server 資料夾，建立 node 環境
安裝 json server
新增 db.json 將 api 資料放入

npm init
npm i json-server

package.json 加上並更改 script start 的指令，讓 port 指向 localhost:3004
npm start 啟動 json server

// package.json
{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "json-server -p 3004 -w db.json"
  },
  "author": "",
  "license": "ISC"
}

到這邊為止，就建立好本地端的 api 囉。此時可以用 postman 測試 http://localhost:3000 是否連線成功

更改 port 的方式除了上述的更改 package.json，也可以輸入指令

json-server --watch db.json --port 3004

2. 部屬到 heroku 前的準備

修改 package.json 的 scripts 中的 start 指令
main 屬性也改為 server.js
加上 dependencies

{
  "name": "fake-server",
  "version": "1.0.0",
  "description": "fake server with fake database",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "json-server": "0.16.3"
  }
}

新增 server.js

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
const port = process.env.PORT || 3000

server.use(middlewares)
server.use(router)
server.listen(port)

3. 建立 heroku server

安裝 Heroku CLI
登入 heroku

heroku login

在 api 資料夾建立 heroku app

heroku create

git 推上 heroku

git init
git add .
git commit -m "first commit"
git push heroku master

開啟 app

heroku open

遇到的坑

error: src refspec master does not match any

推上 heroku 時遇到此錯誤，原因是 git 預設分支名稱已改為 main

git push heroku main

Application error

推上去後打開網址出現 Application error，查看 log：

heroku logs --tail

常見原因：server.js 中 port 沒有使用 process.env.PORT，heroku 會動態分配 port，若寫死會造成錯誤

[note] JS變數宣告 let / var / const

Pei Wang — Fri, 16 Jul 2021 00:00:00 GMT

看 JavaScript 全攻略：克服 JS 的奇怪部分課程時，課程範例多為 var，但我自己是從 let、const 學起，習慣用後者來取代前者，卻發現出來的結果和課程不一樣，便是因為 var 和 let、const 有著天差地遠的差別！

堪稱基礎中的基礎的變數宣告，也是常見面試考題

以下取自 MDN 對 ES6 let const 的範例，以及參考網路上各位大大的文章後，整理出來的筆記

參考資料：

JavaScript 全攻略：克服 JS 的奇怪部分
MDN let - JavaScript
JavaScript基本功修練：Day5 - 宣告變數 - let、const、var（強烈推薦，舉例多且說明清楚）

var 作用域是 function，let / const 作用域是區塊 block

差別在 scope 的不同

var（function）

作用域是 function 函數，函數若有重複區塊，會產生變數衝突
可以重複宣告
往外層找 function，若外層沒有 function，則變成全域性
會變成全域變數，用 window 物件呼叫

⚠️ 在 if / else / for / while 中使用 var，會汙染全域變數，難以維護，而 let / const 解決了這個問題

let（block）

作用域為區塊 block，一個 function 中若有區塊相隔，可以有 2 個同樣變數的 let
區塊作用域（block scope），也就是 { } 包住的區域
禁止同層重複宣告

const

作用域為區塊，一個 function 中若有區塊相隔，可以有 2 個同樣變數的 const
let 加強版
禁止同層重複宣告
常數保護，不能修改（重新賦值）
在宣告 const 時就必定要指定給值

作用域不同，可能會產生變數衝突

function varTest() {
  var x = 1
  {
    var x = 2 // 同樣是變數 x
    console.log(x) // 2
  }
  console.log(x) // 2 跟著上面一起被覆蓋
}
// var 的範圍是 function，第一個 x 和第二個 x 會互相衝突覆蓋
// 因此第一個 x 也被覆蓋為 2

function letTest() {
  let x = 1
  {
    let x = 2 // 雖然命名都是 x，但存在於不同記憶體，不同變數
    console.log(x) // 2
  }
  console.log(x) // 1
}
// 不同區塊間的變數不會互相影響

let 作用域為區塊，跳出 if 條件式後，變數 b=22 便不存在，會取用在全域的 b=2。

var 作用域為 function，若往外層找沒有 function，則會做為全域變數，此時 if 條件式中的 var a=11 就是全域變數。

var a = 1
var b = 2

if (a === 1) {
  var a = 11 // 全域變數
  let b = 22 // 只存在 if 區塊內

  console.log(a) // 11
  console.log(b) // 22
}

console.log(a) // 11
console.log(b) // 2

let 無法在 global 物件下建立 property 屬性

var x = 'global'
let y = 'global'
console.log(this.x) // "global"
console.log(this.y) // undefined

let 不能重複宣告

重複宣告會產生 SyntaxError 的警告

if (x) {
  let foo
  let foo // SyntaxError thrown.
}

switch 可以寫成一個區塊，但會發生重複宣告的情況。此時可以將 case 後的程式用區塊隔開，就可以避免重複宣告

// ❌ switch 是一個區塊，會重複宣告
let x = 1
switch (x) {
  case 0:
    let foo
    break
  case 1:
    let foo // SyntaxError for redeclaration.
    break
}

// ✅ 將 case 分別寫成不同區塊
let x = 1
switch (x) {
  case 0: {
    let foo
    break
  }
  case 1: {
    let foo
    break
  }
}

TDZ 暫時性死區

let / const / var 宣告變數時，會提升到作用域的最高處（hoisting）。

不同的是，如果沒宣告就使用：

var 會回傳 undefined
let / const 會報錯

var a = 10
function testVar() {
  console.log(a) // Uncaught ReferenceError: Cannot access 'a' before initialization
  let a
}
testVar()

以為 a 會回傳 10，但 let 已經讓 a 提升到 function 的最高處，因為變數 a 是在後面才宣告，所以會報錯：不能在初始化變數前使用 a

var a = 10
function test() {
  console.log(a) // Uncaught ReferenceError: Cannot access 'a' before initialization
  const a = 5
}
test()

const 也是一樣。

let 和 const 雖然和 var 一樣有提升的作用，但 let / const 不會有 undefined 的預設值

Unlike variables declared with var, which will start with the value undefined, let variables are not initialized until their definition is evaluated. Accessing the variable before the initialization results in a ReferenceError. The variable is in a "temporal dead zone" from the start of the block until the initialization is processed.

只有當 let 被宣告執行時，變數才可以被使用

var a = 10
function testVar() {
  let a
  console.log(a) // undefined
}
testVar()

const 則是一定要賦值，才可以被使用

function test() {
  const a
  console.log(a) // Uncaught SyntaxError: Missing initializer in const declaration
}
test()

函數中的變數提升到作用域最高處時，還沒宣告變數的時間，稱為 TDZ 暫時性死區，這個時間不能使用未宣告的變數

function test() {
  // 提升變數 a
  // TDZ 開始，不能訪問變數 a
  console.log(a) // ReferenceError

  // 宣告變數，TDZ 結束
  let a = 10
}
test()

根據 Google 的 JavaScript Style Guide，應該默認用 const，如果該變數需要重新被賦值才用 let，永遠不用 var。

Declare all local variables with either const or let. Use const by default, unless a variable needs to be reassigned. The var keyword must not be used.

更改不是指值的更改，而是記憶體地址的更改

決定那個變數會變，還是不變，是指那個變數的記憶體地址有沒有變，而不是它的值

基本型別值（字串、數值、undefined、null、symbol）：不能更改它的值，只能重新賦值，重新賦值時會更改記憶體地址
引用值（物件、陣列、函式）：能修改它裡面的值，這樣不會更改記憶體地址，但如果重新賦予一個新的值，就會更改記憶體地址

以下兩個例子都是值的改變，但並沒有改變記憶體位置，所以 const 不會報錯：

const x = []
x.push(1, 2, 3, 4) // ✅ 修改陣列內容，記憶體地址不變

const y = { name: 'Mary', age: 30 }
y.name = 'Peter' // ✅ 修改物件屬性，記憶體地址不變

轉職工程師，然後呢？

Pei Wang — Sun, 01 Feb 2026 00:00:00 GMT

2021 年轉職前端工程師上工後，過了四年後的 murmur

自從找到工作後，就一直想紀錄「文組轉職工程師」後的故事，關於如何轉職網路上有無數篇教學和 roadmap，但實際上轉職後的故事卻甚少有文章分享。既上一篇文章是六角直播班心得，這次直接快轉四年，回顧我的短暫職涯。

背景

標準的非本科轉職工程師，日文系畢業，2021年時在家自學前端所需的語言、框架等知識，幸運地在年中趕上轉職潮紅利上岸，獲得第一份工作，也不知不覺待四年。

回顧當初，雖然準備了作品集，但後來問同事（當初的面試官）其實也沒有看。也不是技術特別強的人，只有照本宣科+自己做作品勤練習，離實戰還差得遠，但應徵職位也偏向 junior，剛好我那時的程度符合職位標準，才幸運找不到一個月就上岸。

但如果當初的程度，會切版、JS、只有自己做過 React+redux，但完全不懂什麼是 clean code、SOLID，拉到現在應該會被大洗臉一波吧…

現況

中型公司做了四年的前端開發，起初負責小範圍 issue & bug，後來接觸到功能設計、開發、寫測試等，從小專案的從頭開發到多框架的大型專案維護等都有實戰經驗，在這份工作中接觸到很多不同專案也奠基前端工程師應該要有的扎實基本功。

幸運地進入氛圍不錯的團隊，從一開始沒有實務經驗時有 mentor，後期接觸複雜專案架構時也有 senior 從旁協助，工作時間彈性，有需要也可以申請遠端在家。

讓我也對於工作型態有更多想像，可以不受地點時間限制，了解自己的喜好和 comfort zone。也意外發現其實自己很喜歡進辦公室有同事的感覺，沒有那麼喜歡 full remote 的自由，Hybrid 反而剛剛好，保持適當的距離和彈性。

真實工程師日常

技術工作

想象中的工程師應該整天都在螢幕前敲鍵盤吧？

實際上可以專心寫 code 的時間佔整天工時比例 30%~20%，一天工作 8 小時寫 code 只有 2~3 小時，純粹個人經驗分享，如果是 senior 以上程度很可能除了吃飯時間以外，都被塞滿會議。

其他時間呢？

開會、討論專案、寫文件、code review、回覆訊息等意外地佔據不少時間，當這些事情佔據你大部分的工作時間後，逐漸覺得單純寫 code 寫邏輯真的好快樂…

「持續學習」也是工程師必須面對的一門課題，持續磨練不夠利的技術，學習不同的框架、語言、工具，也會和同事辦讀書會共讀。

這題也讓我想到**「資訊焦慮」**，如果不頻繁關注社群，很容易會因為深怕錯過社群趨勢，而感到焦慮，不停刷著社群儲存文章。同時，無力感油然而生，儘管下班總是疲憊，無法打起精神再學習。真的很好奇社群上的大神是如何持續保持動力？

學著冥想、運動，重新找回身體的專注主控權是我近期的課題。

技術之外

技術之外的溝通和釐清整理問題的能力。

正因為工作有一半以上比例不是寫扣，是由會議、文件撰寫、需求釐清等佔據，更需要溝通與釐清問題的能力。甚至我個人覺得在技術達到標準線的情境下，溝通遠比技術重要很多。

舉反例來說，看過身邊不善於溝通的案例（包括我），反覆來回確認需求，結果最後開發完成到測試，才發現和 PM 預想中有落差，不僅心理內耗，也浪費不少時間。

每當聽到同事精準溝通和釐清對話的過程，才發覺到自己多麼冗言贅字，雖然都是用中文溝通，卻發覺到自己詞彙量太少，總是無法準確表達意思。

預料之外

意外發現喜歡/不喜歡的部分

Like

喜歡單純撰寫功能邏輯，因為有明確目標不會太大改變
喜歡這份工作可以讓我在家工作，在喜歡的時區內工作，不會被制式上下班限制
意外喜歡不斷有新東西出現，可能偏奴（？）一成不變的環境會讓我懷疑人生
工作以外的時間有餘裕可以發展興趣

Dislike

溝通的比例意外的高，很多時候容易精神耗弱
在家工作不一定代表 WLB，有時會因為不想中斷心流而一路持續到半夜
「學不動了」的感覺隨著年紀越來越強烈

後悔嗎？

「你覺得你除了工作以外還有什麼？」離職後朋友問了我

剛開始工作的幾年，因為冒牌者症候群作祟，下班、休假日我總是在追技術，看開發文件，深怕自己跟不上拖累團隊。直到最近一兩年，習慣手頭上會接觸到的工作挑戰，也有自己應對壓力的方式，逼著自己下班後散步運動，減少資訊焦慮，才慢慢開始有餘裕去想更未來的事情。

離開工作後的現在，我總忍不住想回去以前的工作，總覺得寫扣手感在逐漸消失，會不會敏感度也消失？彷彿被空虛感淹沒的我，對於這個問題我什麼也答不出來。

是因為工程師才這樣嗎？（別瞎掰好嗎）

不後悔當初的職涯選擇，儘管在 AI 浪潮下，他是受惠者，同時也是首當其衝的被取代者，但至少這技能帶著我去了很多地方看見更多可能性（g0v / daodaoedu …）

沒有一輩子都持續 programming 的自信，在這之外我還有什麼？是我之後想要探索的課題，目前還沒有可以抬頭挺胸說出的答案，期望有天會找到。

給 2026 還想轉職的你

如果看了以上勸世文，你還有轉職的想法

現實面的建議

培訓班相較之前少了很多，意指市場無法供給這麼多 junior 生存，是否可以接受找工作可能沒想像中容易
實務上與 AI 協同開發也會拉高對工程師產出的標準
雖然上面沒提到，剛入行工程師薪水可能沒你想像中的高，天花板高，但需要累積經驗後跳槽才可能疊高薪資
如果是抱著不想做「和人有關」的工作入行，那溝通佔比可能會讓你失望，需要更精準有效的溝通

如果看完網路上所有的經驗分享，還是想轉職的話，那就去嘗試吧！

頂多花費一年的時間發現不適合，再轉換跑道也不遲，學到腦裡的東西不會跑，說不定在人生的某個場合會再度派上用場，更何況現在是人人都在 vibe coding 的時代。

結語

也是說給自己聽的話

四年的總結心得來說，前份工作奠基我會未來公司、工作的理想標準，怎樣的工作型態是自己喜歡的、怎樣的產品開發模式相對舒服、理想工作的追求、role model 等，腦中有了雛形，工作判斷標準也明確許多，相比較剛畢業時不懂自己要什麼好太多。

希望在這行業還可多待上幾年，可以持續保有二十多歲的動力和好奇。未來規劃上，希望有機會開啟海外職涯的可能性，現在也持續尋找台灣 / 日本的前端工程師機會，雖然過程沒有想像中順利，但還是期望可以盡快落腳！回來報佳音！

來自 Behance 的 NFT 詐騙?!

Pei Wang — Mon, 09 Feb 2026 00:00:00 GMT

來自 Behance 的 NFT 詐騙?!

純粹紀錄信件來回始末，沒有任何錢財和人類受傷害

因為近期在求職，才開始注意起信箱裡非電銷的各式信件，難得有純文字、沒有任何花俏圖片的信件吸引我的目光，何況是全英文

大意上是說喜歡我放在 Behanca 上的作品，希望可以和我購買收藏原檔。信件如下

這件事情很可疑，直覺是詐騙，但也讓我好奇

Behance??? 我都忘記帳號是什麼
自卑心理：第一時間覺得自己以前做的東西沒價值，不會真的有人想要
名字很像印度人，有鬼（歧視言論）
先假定是詐騙，那手法和流程是什麼？要怎麼騙錢？

基於以上幾點好奇，於是我繼續靠著 AI 翻譯和他往來信件

先講結論

如果你也有收到類似信件，也想知道這是詐騙，還是真的千里馬遇到伯樂？想知道結果，對過程不好奇的話，可以直接看這段結論

以我的案例來說，100% 典型 NFT 詐騙

詐騙手法則是誘導到他建立的拍賣網站，希望你將作品鑄造成 NFT 上架，上架過程中會需要消耗高額的 gas fee（等同手續費），gas fee 就會進入他的口袋！（收取 0.1~0.05 eth 換算等同 200USDT，熊市換好像很划算 🙃）

也有其他可能，商品上架過程中點擊到惡意連結，透過 XSS 竊取瀏覽器中的冷錢包，或是透過錢包地址竊取裡面所有財產等

如果仍抱有希望，還是可以試著聯絡。出現以下關鍵字時：NFT、auction、web3、需要先付錢上架作品，就可以 99.9% 確認是相同詐騙案例

Behance 科普

Behance 是 Adobe 旗下一個創作類型作品集的平台，有很多雇主會在上面找創作者，創作者也可以將作品上傳獲得更多曝光

behance 是我大學想轉行銷設計時放作品集的平台，包括學生時期接案的校園海報設計、社群小編文案等，不管是哪個現在回頭看都十分青澀

https://www.behance.net/gallery/60336015/2017

八年沒有更新的用戶為何會突然被看上呢？詢問 ai 後似乎是沒有持續更新的用戶不清楚自己的價值，更容易受騙上當

後續信件來回

回信詢問欣賞的作品是哪些，因為我連我放作品的帳號是哪個都差點找不到

結果還真的傳了連結給我！大學做的東西好令人懷念，現在被社會化的我可能做不出來那麼 pure 的圖

信件中傳送作品連結，證明他真的知道我是誰。表示他非常希望可以購買作品，願意花 2eth，並說明他的背景，正在經營NFT藝術品拍賣，提供官網連結，也有經營 instagram

抱著 0.00001%為真的可能性，我去翻遍所有原始檔案可能在的位置。結果翻遍雲端也找不到當初的原檔，只剩下網路截圖的破爛畫質，如果真要賣也不可能 QQ。抱著了勝於無的心態，繼續透過 ai 翻譯信件對話

透過 ai 協助部分如下：

貼上信件內容，分析對方目的
如果是詐騙，下一步會是什麼，回信關鍵字極度可能會出現哪些
裝作我已經上鉤的釣魚回覆

大意為，我找不到原檔只剩下你看到的作品集本身，如果這樣你也要的話，那再請提供更多資訊讓我判斷是否可作為商用授權

到這邊，因為不知道「作品如何被賣出」無法判斷哪一步會被騙錢

來哦畫重點時間！

Echelon: A Curated Evolution of Art & Expression 標題虛無標秒
it will be held in Edinburgh, UK, this year. 沒有詳細活動時間
That's the link to the marketplace where I trade NFTs and where I have my art collection hosted 網站有很多 bug，API 沒接好，bottom 也沒放連結

我進一步詢問更多資訊，關於官網背後的合法機構、合約授權細節、確認作品上傳不會有額外費用

Please provide:
- The legal entity name behind Echelon / Genesis Gallery
- A basic written agreement outlining usage rights, duration, and resale terms
- Confirmation that no minting, listing, gas, or platform fees are required from me at any stage

很快地，兩個小時後回覆我

🤩 不演了，說白需要鍛造費 0.1eth

我也沒這麼多錢給你騙，這個年代也要有錢才有被騙的資格 QQ

到這裡基本上可以 100% 確定是詐騙，但基於武德還是想把戲演好演滿。我回信又問他，我沒錢付手續費可以買家出嗎

對方回覆如下，居然還可以殺價砍半？！

Last

到這邊也差不多可預想到後續結果，便不繼續信件往來。應該會持續鬼打牆說服我上傳作品吧

紀錄這段信件對話，希望可協助遇到同樣開頭信件的人提高警覺

想學日文的初學者歡迎找我

Pei Wang — Fri, 26 Jun 2026 00:00:00 GMT

想學日文嗎？

朋友推薦我試試 PRO360，沒想到找到這麼棒的家教平台！最近身邊不少朋友都有日文學習需求，朋友推薦我使用 PRO360 達人網接案，使用起來真的很方便。我是東吳大學日文系畢業，持有 JLPT N1 證照，也有兩年與日本客戶合作的實戰經驗，還曾在日本打工度假一年。可以協助初學者、中級學習者，或是準備日檢的同學，也提供日文會話練習，歡迎依需求量身訂製學習計畫！有日文家教需求的朋友，歡迎直接透過我的 PRO360 專家頁面聯繫我👇

🔗 點我查看專家檔案

👽 Pei's Blog

六角學院 JS 直播班 完課心得

先說結論，推拉哪次不推｜六角學院JS直播班 完課心得

當初為什麼報名這堂課？

第一週~第八週的學習過程

充實的課內資源量

除了課程以外

最大的收獲是？

培養學習習慣

找到適合的筆記軟體與習慣

最喜歡直播班的哪些活動？

24小時助教服務

如果時光能倒流，會希望自己再次注意哪些細節？

身為學長姐，分享些想入坑的新同學一些勉勵的話

[筆記]slick.js做出商品照輪播

安裝

基本設定

DEMO

幾個常用到的設定

slidesToShow: 1

slidesToScroll: 1

asNavFor

arrows

fade

dots

centerMode

centerPadding

vertical

zIndex

responsive

事件

[note] React 發佈到 Github pages 過程

Github上新增專案

將專案推上github

package.json

安裝gh-pages

發布

指向gh-pages

自己遇到的雷點

fetch:A branch named 'gh-pages' already exists

其他按讚數很高的解法

[note] json-server推到heroku遠端 脫離本地端限制

緣由

1. 建立 api 資料夾

2. 部屬到 heroku 前的準備

3. 建立 heroku server

遇到的坑

error: src refspec master does not match any

Application error

[note] JS變數宣告 let / var / const

var 作用域是 function，let / const 作用域是區塊 block

var（function）

let（block）

const

作用域不同，可能會產生變數衝突

let 無法在 global 物件下建立 property 屬性

let 不能重複宣告

TDZ 暫時性死區

let 和 const 雖然和 var 一樣有提升的作用，但 let / const 不會有 undefined 的預設值

更改不是指值的更改，而是記憶體地址的更改

轉職工程師，然後呢？

背景

現況

真實工程師日常

技術工作

技術之外

預料之外

後悔嗎？

給 2026 還想轉職的你

結語

來自 Behance 的 NFT 詐騙?!

來自 Behance 的 NFT 詐騙?!

先講結論

Behance 科普

後續信件來回

Last

想學日文的初學者歡迎找我

想學日文嗎？

六角學院 JS 直播班完課心得

先說結論，推拉哪次不推｜六角學院JS直播班完課心得

[note] json-server推到heroku遠端脫離本地端限制