每個衝擊都是一次學習的機會

好久不見。各位最近過得如何呢 ? 是不是又往自己的目標前進了一點 ? 一段時間沒有寫文章了,由於轉換工作環境的緣故,自從三月以來,這是第一次可以空出時間好好寫下一些東西。

我目前在 Snapask 任職,這是我第一次到比較有規模的團隊裡面,有很多專案流程的細節是以前沒有接觸過的,所以這幾個月來相對於技術學習上。我在思考方式以及工作方法等方面比較有心得,所以這篇文章不會有技術內容,而是會跟大家分享我近期的收穫,或許能夠給未來也跟我面臨相似問題的人一個參考。

個人過往技術狀況

有一些經驗的 Junior,靠自學誤打誤撞進入前端領域(剛滿兩年),前面經歷的都算是較小型的新創,團隊大多都不超過十人。當時工作較為偏向單打獨鬥,內容較有彈性,技術工具及解決方法策略的選擇上相對自由,可以自行決定然後直接執行,但時程規劃比較沒有組織跟流程。

參與新的團隊

因為以前合作經驗較少,所以第一次進到團隊,有很多新的工作方法以前沒有參與跟執行過,例如大家認為很常見的 Code Review 、例如跟主管們 1 on 1 、還有 scrum 中的會議流程…,其實有許多細節。

不過因為實際會遇到的工作細節每間公司一定都會不同,所以在接下來的內容我不會一一詳細的解說,我會以個人成長的角度來分享在這個新環境中學到、並為我在職涯發展上帶來不同見解的觀點。

從就職開始說起,那些剛到職的 Junior 們可能聽說過很多次,不過我可以再用我的個人經驗告訴你,永遠不要「只」以薪水來決定工作的選擇(當然該拿的還是要拿,不過如果你真的很想體驗一整年都沒有成長的倦怠感,那麼你應該試試)。

進入新環境的第一要務

我想對大部分的 Junior 來說,進入公司後最重要的一件事就是優先找到能夠讓你學習並成長的對象 ( Mentor / Role Model ),這長期來講會是一個重要的外在因素,不用擔心找不到,每個人都有值得學習的部分,但如果你觀察幾個月之後還是沒有答案,那麼你可能到錯地方了。

適應之後

工作一段時間差不多適應新的環境以後,可能會有兩種情況,一種是工作模式跟以前所習慣的差不多,一種是跟我比較像也就是公司的工作流程跟以往使用的有比較大的差距。不管是在哪一種情況底下,在這個時期都應該要著重於一件事情:

找到你想做的事 / 想解決的問題

不要把自己當勞工來看,找到一個你想達成的長期目標,通常這個目標不會是被分派的任務之一,因為你會有自己的目標,公司也會有自己的步伐要前進,想辦法找到這兩者間的平衡點。這會回到一個問題是你當初選擇這間公司的原因、或是說你想在這間公司想得獲得的經驗、講官腔一點也能說是未來展望。相較於上面提到的外在因素,這則會是長期的內在動機,也是遇到阻礙時能夠支撐你的重要原因。

對那些適應良好的人這件事可能會自然地發生。即使是對不太能適應或遇到麻煩的人,若你有確保做好第一點提到的確保工作環境有學習對象,那麼你應該能夠得到一些引導而在設法解決後再度回來思考這個問題。

我獲得的幾個觀點

1. 看見每個人價值觀的不同

在中小型團隊裡面會遇到許多不同的人,幾個月的合作跟交流下來我可以明顯感受到每個人都有每個人的做事方法跟步調,這是一個很棒的地方,因為每個人都有能夠學習的地方,試試看跟他們交流你的想法,常常能夠讓你從不同角度重新看帶事情。

2. 先想清楚,再動刀

這一點,講老套一點就是三思而後行,在執行某個任務之前應該先在腦中演練過要執行的細節,這個 pattern 不只是工程師的基本能力,生活中很多地方都能夠應用。也避免邊做邊想讓自己遭遇一團混亂的處境。
以我的經驗來說,在以往的工作經驗裡面我都可以快速執行想做的方法然後遇到問題再快速設法解決,但在注重工作流程的公司這麼做就很容易遇到狀況。

3. 不斷尋找工作流程上能夠改善的地方

這不管對哪一個階段的工作者都很重要,但我相信對初出茅廬的 Junior 工程師來說尤然。每個人在執行上都會有盲點,對較為資深的工程師來說這些盲點可能不會是個大問題,但對資淺工程師來說的話,一旦某個環節碰到問題,通常就會讓他們立刻明顯的感受到阻礙。

4. 使用新工具:蕃茄鐘

這一段呼應上一點,我是一個非常容易分心的人,因為我對許多身邊發生的事感到好奇,我相信這是我的優點。不過這個特點對於完成任務來說反而是一個問題。我知道我需要建立一個能夠讓自己專心的工作模式,試了很多方式後決定開始試試看使用蕃茄鐘,沒想到一試成主顧。

基本上蕃茄鐘就是讓自己專心時間後,再放鬆一小段時間,然後持續進行這個循環。對我來說感受比較明顯的地方有:

  • 明確感到時間的流逝
    也就是增強對時間的感知,以往因為較長時間的連續執行工作,有時候容易造成正在做的事情已經偏離最一開始想要達成的目標,但自己還沒有察覺,在番茄鐘的工作法底下比較能夠知道目前正在做的某件事情已經花掉多少時間。
  • 比較能夠把一件大任務切成許多小部分
    因為蕃茄鐘的這種模式,所以在使用時自然必須學著切分任務,再開始進行之前先想好這段時間要做什麼事情,並在結束後來看看自己的成效。
  • 適度讓大腦休息
    長時間的連續工作真的比較容易遇到盲點,例如有時候遇到某個問題解不掉,然後又執著在錯誤的程式碼環節,就容易卡住很長一段時間,但往往休息一段時間後再回來,不就後就能找到癥結點。

勾勒自己的未來

以上就是我近期的心得,寫在最後面,有一件應該要常常被思考的事情是去設想自己在近幾年之後在工作領域裡的角色定位,你想要有能力做到什麼樣的事情?解決什麼樣的問題?這些都是最基本卻又很容易被忽略的事情。

畢竟在這個工程師這個行業裡頭,技術是學不完的,但你的時間卻非常有限。不知道這些經驗能夠幫助你到什麼地步,不過還是希望你能夠有所收穫,不用免強自己做個鐵人、也不要甘於當個水手,做個靈活的海盜,適當利用環境、武器跟手邊的資源,該守就守,該進攻進攻,容許自己能夠時時刻刻調整航向跟目的地。如果將來我們能夠在航道上相遇,那麼希望我能夠ㄧ如往常地帶給你一些新奇的東西與驚喜。就寫到這,下次又等到我有空時再見了!

2022 年我該如何成為前端工程師?

2022 年我該如何成為前端工程師?

嗨!不知不覺又過了一年!不知道大家 2021 這一年過得如何?最近開始有聽到幾個朋友也想要試著學習前端開發,剛好也看到了這一篇在講前端開發者所需要技術的整理,簡單節錄一下一起分享給有需要的讀者們。 接下來的分享基本上以這篇文章的內容為主,會以我的觀點節錄一些重點來跟大家分享,所以如果想看第一手資訊或是習慣看英文的朋友也可以點進去直接閱讀。 成為一個前端開發者需要的「基本」要素 沒錯,這篇文章是站在作為一個基礎的前端開發者的角度來設想需要的技能/工具,所以對於想要尋找 WebAssembly 或是 Svelte.js...

作自己的腦內偵探 —— 利用 PDCA 的概念,見證每天進步 1% 的自己!

作自己的腦內偵探 —— 利用 PDCA 的概念,見證每天進步 1% 的自己!

嗨,我是 Mujing ,今天要講的跟技術比較沒有直接關係,我想要跟大家分享一個平常工作時可以逐步優化自己工作流程的方法,這個方法叫做 PDCA 筆記,最近剛好在研究。試著在工作時用過了幾次之後,我發現這套方法能夠讓自己看見自己執行任務的現況,再想辦法針對問題逐個改善。針對想要優化自己工作的流程卻不知道哪邊可以做得更好,或是怎麼樣做得更好的讀者,這邊推薦這個方法給你。 Outline PDCA 是一種思考的框架P、D、C、A 怎麼做?使用橫向 A4 紙假說的重要性建立一個長期目標寫在最後 PDCA 是一種思考的框架...

React 元件庫製造紀事錄 (二) – package.json 與 Webpack

React 元件庫製造紀事錄 (二) – package.json 與 Webpack

在元件庫系列文的第二部分,會試著用 webpack 來打包模組,並把過程記錄下來。我們在前面的文章裡面提到了許多種類的 JavaScrpt 模組系統,而模組系統的差異在 SSR 架構下,我們要製作元件庫時可能會是一個需要處理的問題,除了把所有元件庫的程式碼直接轉換成 UMD 的模組系統,我們也可以透過 package.json 來做處理,這一點我們也會一併說明。

React 元件庫製造紀事錄 (ㄧ) –  問題說明與第一個麻煩:JavaScript 的模組系統

React 元件庫製造紀事錄 (ㄧ) – 問題說明與第一個麻煩:JavaScript 的模組系統

這陣子為了解決了一個讓我蠻頭痛的問題,第一次接觸前端 module 的打包,也了解到原來平常我們很方便能夠用 Npm 或 Yarn 這類套件管理器裝一裝就能夠直接使用的一些第三方工具在功能開發完之後,為了要讓別人能夠使用所做的處理上並不是這麼的單純,隨著使用方式的不同,要處理的部份也會有所不一樣。 舉例來說,如果是一般純粹都是 JavaScript 函式庫,可能只需要透過 Babel 這類工具來處理 JavaScript 版本與瀏覽器的支援性問題就好。不過若你的專案需要處理 React 元件或是圖片 Icon...

瀏覽器的時光機—歷史堆疊、 pushState 與 replaceState API

瀏覽器的時光機—歷史堆疊、 pushState 與 replaceState API

或許 pushState 與 replaceState 這兩個詞你可能沒聽過,但是瀏覽器「上一頁、下一頁」功能你一定不陌生,其實這兩個 API 是瀏覽器提供給開發者操作瀏覽紀錄用的,透過這兩個 API 並搭配事件處理,我們就可以將瀏覽器預設的「上一頁下一頁」修改成我們想要的客製化結果。 使用情境說明pushState / replaceState 與點擊新連結有什麼不一樣pushState / replaceState 與 Stack 結構pushState / replaceState...