【Day 28】每一個學生的問題，都是我成長的修羅場

第一份前端工作的現實衝擊：理想與現實的差距

有一次因緣際會，我去面試了我買課程的那位老師創立的公司，應徵的職缺居然是：「前端實習生」

沒錯，你沒看錯，就是實習生。

雖然以我當時的年紀來說，去當實習生看起來有點不合常理，但我的心態是：

「年紀不是問題，不要臉天下無敵！」

還好，最後也真的順利錄取了~

至於整個面試過程順不順利？嗯…我已經忘了 XD

不過我還記得，在面試的過程中，老師有問我一些關於 JavaScript 的問題， 什麼是閉包（Closure） 、 什麼是原型鏈（Prototype Chain） 等，這些問題我雖然答得不算流利，但至少能夠清楚表達出我的理解。

這邊偷偷說一件事，其實我在進去當實習生時，就替自己設了一個 死線 ——
待滿 6 個月就離職，然後去找一份正職工作。

殊不知，就在我準備開口提離職的前兩個月，老師卻突然對我說：

「Ray，我們公司打算開一個前端工程師的職缺，你有興趣嗎？」

那一瞬間，劇情完全反轉 ——
我不是離職，而是直接被「升格」成了正式員工。

而結果呢？
這一待，就是 N 年了 XD

入職之後，工作內容其實沒有太大變化，主要還是以前端開發為主。

只不過技能樹開始小歪 ——
內部專案開發 ✔️
協助課程營運 ✔️
兼職課程助教、回覆學員問題 ✔️

簡直就是 前端工程師 + 客服混合職 ，技能點得相當奇怪 XD

整個過程裡，最讓我崩潰的就是 「回覆學生問題」 問題多到五花八門，從最基礎到進階全都有，甚至還有人直接拿著 Python 來問我。

結果每天回覆到懷疑人生，我的日常，就是在無盡的問題海裡掙扎求生~

Note
Python 是一種高階程式語言，主要用於後端開發、資料分析、人工智慧等領域，與前端開發的 JavaScript 不同。

經歷了一段時間瘋狂的課程回覆後，我最後乾脆寫了一篇文章，叫做「來聊聊那些非常欠人教訓的提問 & 發問」，裡面滿滿都是我血淋淋的回覆經驗談，重點其實只有一個 —— 教你怎麼提問，才能更快、更準確地得到你想要的答案。

如果要說有哪些問題讓我印象特別深刻，大概就是以下這些了。

• CSS 在不同的瀏覽器會有不同的表現，這是為什麼？
• 該怎麼樣練習 JavaScript（或切版）？
• 為什麼學完 Vue.js 之後，還是無法找到前端工作？

最扯的問題，大概就是 「我女友要跟我分手該怎麼辦？」 這種完全偏向人生哲學的問題吧，基本上，你想得到的、想不到的，我幾乎都遇過了。XD

當然，為了能回覆這些問題，我也得花時間去研究和思考，
所以後來我發現 ——
助教技能 +1：從程式 Debug 升級到感情諮商。

CSS 在不同的瀏覽器會有不同的表現，這是為什麼？

在早期來講，瀏覽器的相容性會是前端開發者的一大挑戰，畢竟每個瀏覽器對於 CSS 的支援度不一樣，像是 IE、Firefox、Chrome、Safari 等等，都有各自的特性和限制。

更不用說每個瀏覽器的 「預設樣式」 也不一樣，這就導致了同一段 CSS 代碼在不同瀏覽器上可能會有不同的呈現效果。

儘管 IE 已經入墳~

但我們還是需要解決瀏覽器所提供的預設樣式，那該怎麼解決呢？

以開發流程來講，通常我們再開始寫 CSS 之前，會先使用一個叫做 「CSS Reset」 的技巧來解決並統一瀏覽器的預設樣式，這樣就能夠確保我們寫的 CSS 在不同瀏覽器上有比較一致的表現。

「什麼是 CSS Reset 呢？」

CSS Reset 其實本身就是一大段 CSS 樣式，主要是用來重置瀏覽器的預設樣式，讓我們可以從一個乾淨的狀態開始寫 CSS，比較知名的 CSS Reset 有：

• Eric Meyer’s Reset CSS： 由 Eric Meyer 所撰寫的 CSS Reset，這是最早期且非常知名的 CSS Reset，但缺點就是會把所有的預設樣式都重置掉，導致我們需要重新定義很多樣式。
• Reset CSS by HTML5 Doctor： 針對 HTML5 新標籤（如 article, section, header）進行補充所撰寫的 CSS Reset，是延生自 Eric Meyer’s Reset CSS，但有做一些改進，讓它更適合現代的網頁開發。
• Normalize.css： 這是一個比較現代的 CSS Reset，主要是用來讓不同瀏覽器的預設樣式更接近，並且保留了一些有用的預設樣式。

Note
如果對於 Reset CSS 跟 Normalize.css 有興趣的話，可以參考這篇文章：Reset CSS 與 Normalize.css 差異。

許多前端框架（如 Bootstrap、Foundation）也會內建 CSS Reset，讓我們在使用這些框架時，不需要再額外引入 CSS Reset。

除了統一預設樣式之外，我們該如何知道 CSS 在不同瀏覽器的支援度呢？

這邊推薦一個網站 —— Can I use ，它可以用來查詢各種 CSS 屬性在不同瀏覽器的支援度，還會附上詳細資訊：哪些版本支援、哪些版本不支援、是否有替代方案等等。

更方便的是，它甚至也能查詢 JavaScript 功能的支援度。

在實際開發中，我們不會一看到新語法就馬上用，通常都要先查一下不同瀏覽器的支援度，確保大部分使用者都能正常使用。

所以，新語法用之前，記得先問一句：
「瀏覽器大大，你支援嗎？」

該怎麼樣練習 JavaScript（或切版）？

我認為，不管學習任何技術，最關鍵的一點就是 「輸出」，把你學到的東西寫出來、做出來，這樣才能真正理解並掌握。

我看過很多案例，都是停留在 「輸入」 階段：看了很多教學影片、文章，不斷吸收知識，但卻缺乏實際練習與應用。

結果知識只存在短暫記憶裡，很快就被遺忘。

那麼，輸出的方式到底有哪些呢？
老實說，非常多：

• 寫部落格文章： 把學到的東西寫成文章，不管有沒有人寫過，用文字檢驗自己是否真的懂。
• 做專案練習： 找一個自己有興趣的題目，用實作逼自己解決問題。
• 參加開源專案： 挑戰高難度，學到實戰經驗。
• 幫助別人解決問題： 嘗試回答別人的問題，用簡單方式解釋，深化理解。
• Code Review： 協助檢查他人的程式碼，你會發現許多細節，學到不同寫法，這能進一步提升自己程式碼的品質。

練習的方法雖然百百種，但真正的關鍵是 —— 找到適合自己的方式，並且持之以恆地去做，唯有如此，才能真正掌握一門技術。

也就是人家常常說的：

輸入 + 輸出 = 成長

不過，我認為還有一個能讓人成長更快的關鍵，那就是 「反思」。

所以應該是：

輸入 + 輸出 + 反思（回饋） = 快速成長

反思不是否定自己，而是讓自己在過程中慢慢進化。

為什麼學完 Vue.js 之後，還是無法找到前端工作？

這個問題其實很複雜，可能性相當多。
這裡我只先列出最常見的幾種狀況：

• 面試談吐不佳： 面試官有時候不只看技術，還會重視你的談吐、態度與溝通能力，畢竟進公司後，溝通需求、討論方案、協作開發都少不了。切記，不要問一句答一句，毫無靈魂。
• 作品集不夠吸引人： 作品集不一定要炫技，但一定要能清楚表達：你學到了什麼、解決了什麼問題、為什麼選這個技術方案。這樣面試官才能看見你的價值。
• 履歷不夠突出： 履歷是第一印象，也是你進場的門票，不管是資訊排序、內容呈現、格式設計，都會影響面試官的觀感。不要像流水帳一樣，「大學畢業 → 當兵 → 找工作」三行打完收工，面試官翻到一半就先翻白眼。
• 技術能力不足： 不要以為學了個 Vue.js 就以為天下無敵，結果一問 React、Node.js 直接當機。技術一直在演進，新工具層出不窮，需求也會改變，一個工程師通常都需要具備多元的技術棧，才能應付不同挑戰。

「那你面試的時候，會特別看重什麼呢？」你可能會好奇這樣問。

這邊就分享一下，我在協助別人做模擬面試時，通常會怎麼做：

• 建立聊天氛圍： 我會盡量讓整個面試保持輕鬆，像聊天一樣。免得太嚴肅嚇跑人才。
• 測基礎： 問幾題基本功，確認不是把履歷寫爽的。
• 偶爾出題： 如果是比較偏 Sr. 職缺，會讓你切個版、寫個 Todo List，驗證是否真材實料，同時也會回饋，提供他們可改進的地方。
• 聊心路： 來點靈魂拷問，這些問題主要是檢視溝通力、團隊合作、抗壓性等軟實力。
• 反問時間 我非常重視「你有什麼問題想問我嗎？」這個環節。—— 沒問題？那可能他不是很在意，或者根本沒做功課。

你會發現，其實技術問題並不是我最重視的部分。
因為技術這種東西，可以在進公司後再依照專案需求去培訓。

但 軟實力 就不同了，它相對難以培養，對公司來說，更需要的是：

• 能快速融入團隊
• 能與同事良好溝通
• 能在壓力下保持冷靜

這些特質，才能確保團隊順利運作。

反之，如果只找一個技術再強、卻無法合作的人，
那充其量也只是個 「碼農」 而已。

同步更新

本文將同步更新至以下網站：

• 是 Ray 不是 Array
• Code Review 我的青春：從『嗶』聲開啟我的軟體工程師之路（佛心分享-IT 人自學之術）
• Threads - 時常會聊軟實力
• Facebook - 搞怪迷因分享
• Instagram - 搞怪迷因分享 + 軟實力
• Portaly - 入口主頁