[分享] JD Store 魔改大賽複盤 — 協作經驗、各類領悟

前言

如果說上一次 Job Listing 大賽 教會了我:「心態建立」:

  • 拋開虛榮心、妄念,只關注自己的成長,並認清比賽的真正目的:

    • 知識遷移:把基礎技能和知識,實際運用在真實項目上。
    • 逼出潛能:老師和助教給了你魚竿後,你能釣到小魚還是大魚?或是自己開外掛把魚竿升級?
    • 完成一個完整的項目:大賽是我們「讓點子落地」的最好機會。
  • 如何面對競爭

  • 擺脫完美主義

※ Anndo 的 Job Listing 大賽的完整心得請見:[分享] 魔改大賽 — 調適心態、持續迭代

這一次的 JD Store 則是截然不同的一次經驗:

  • 一方面, JD Store 大賽多了很多新的要素:協作、牽涉更多技術的項目主題(購物網站);我們藉此提高了與人溝通、合作的軟實力,以及實現各種前後端功能的硬實力。
  • 另一方面,新的規則跟投票機制,大幅牽動了大賽氛圍。混戰之中,無可避免會掉入情緒坑,但因此得到的全新領悟,也是相當寶貴的一次經驗。

從 5/7 正式敲定了隊友人選,到 6/12 比賽結束,一晃眼就是一個多月過去了。回過頭,才發現已經走了這麼遠;往前看,才知道未來的道路還很長,大賽不過是學習路上的一小個關卡。在進行下一個 Hard 模式關卡之前,藉這篇分享文,作一次 JD Store 魔改大賽心得複盤!



我是怎麼找到我的神隊友 Jimmy Wang?

回憶大賽,最幸運的事情莫過於是我有一個神隊友,也就是大家公認的學霸:Jimmy Wang(吉米王 )。過去我從來不敢想像自己能與前段班的學霸學員合作,更不用說是吉米了。然而,現在回想起來,這份「幸運」也許是有跡可循的。


過去的積累、表現,會形塑別人眼中的「你」。

在討論組隊時,吉米有提到我的「認真」,說道:「在微信群的發言、文章,誰認真,都看得出來,誰頭腦清楚也是。」。而我自己在挑選隊友、評估組隊邀請時,則是會在意對方對於細節的講究與要求。

綜合我們兩人的標準,歸納出下面幾點:

  • 學習態度:是不是伸手黨?如何實踐全棧營的學習(教材練習、ORID、教程、其他分享)?
  • 大腦清晰:你問問題的方式具體與否、發言和文章內容的邏輯、脈絡。
  • 平時習慣:產出的代碼、文字整潔與否、易讀性高嗎?Commit 習慣如何?重視這些細節的人,一般來說自我要求相對高。確保日後合作時,不會因為亂無章法的代碼或個人習慣而卡關。

平日的展現出來的學習態度跟成果、人品,會在關鍵時刻(例如:找隊友),大大地推你一把,讓你獲得你夢寐以求的機會。


積極交流、勇於爭取機會。

Xdite 老師曾經這樣描述全棧營:「你參加的是高品質的 MBA。要去和其他人交流,否則就是浪費自己的機會。要抓住機會啊!」,文班長、吉米也曾多次跟我講到這樣的觀念:「要直接,想要什麼就去爭取。失敗就學取經驗,繼續下一次。」,也因此,我在全棧營的作風,一反常態,不再是過去那個怯生生、總是擔心熱臉貼屁股的自己,盡可能地去爭取自己想要的機會。

更何況,「以程序員的身份,與他人協作,完成一個編程項目」是多麼難得的體驗,眼前又是各方面都可作為學習典範的吉米,我知道自己如果放棄嘗試,事後回憶起來,絕對會後悔莫及。


協作經驗 — J & A 是怎麼將溝通成本降至最低?

目標明確,便能快速決策。

我們在討論時,會先把「目標」確立下來,以此為根據去作決定。當雙方有明確、清晰的共同目標時,便能有效討論,並且快速達成共識。

舉例來說,我們最初各自搜羅購物網站的主題靈感,寫了共 8 個左右的主題,在正式開始討論之前,吉米就寫下了「主題評選標準」。這個標準一出來,基本上一半以上的選項就先篩去了,再就剩下選擇稍加討論,大賽準備期最重要的事項之一:「挑選主題」便立即達成!

無論是挑選主題,還是腦內風暴、發想功能、排版的討論,在進入正題之前,花短短幾分鐘「設立目標、討論事項」,這個動作大大提升了我們的討論效率跟決策速度;而最後作出的決定,因為符合我們的目的和檢視標準,日後也不易生變。


溝通 — 不帶情緒,不隱瞞實際想法和意見。

跟一些同學聊到「協作」遇到的坑時,聽到很多「我想如何如何,但我不知道他是怎麼想的。」這樣的句型,這也讓我回憶了一下我跟吉米之間的協作過程,似乎一次也沒有過這樣的念頭。

最好的溝通,就是「將內心的想法,直接表達出來」;把話憋在心裡,隊友永遠不會知道你的看法是什麼,久了也會憋出內傷,產生一些不必要的情緒。而接受意見的一方,千萬不要將反饋視為「批評」或是「不滿」;如果你的作的東西真的是完美無缺,隊友不會閒閒沒事、刻意找碴。

如果溝通中,反饋的內容「具體、有料」,不但能讓你的意見更容易得到採納,兩人都能因此受益。例如說,可以像這樣建議:

  • 前端視覺:

    • 手繪排版,或是在 Pinterest 上找貼近自己想像的範例、真實網站的樣式,提供給對方。並說明為什麼你覺得這樣子好,試著分析、描述理想樣貌跟目前作品之間的差異。
    • 有想法的人,直接動手調出一個版本,再給對方看,尋求意見和同意。
  • 後端功能:

    • Models 的欄位、關聯如何設計,未來會較好維護及擴充。
    • 以「真實項目」的網站體驗流程、後台管理需求去思考、檢視目前成品,有沒有什麼功能設計是可以加強,讓整體更貼近現實生活中的需求。
  • 編寫教程:

    • 教程的架構、文字易懂與否,重點內容的標題可以再用 Markdown、HTML 語法 加粗或上色以達到強調效果。
    • 是不是可以加入一些前言(大家常遇到的狀況、這篇教程要解決什麼樣的需求)?讓讀的人有共鳴、能想像運用情境。
  • 個人狀態:

    • 如果狀態不好,我們有什麼調整方式?冥想、深呼吸、切換任務,或是放自己一、兩天假。

簡單來說,就是:大膽提出意見,虛心接受指教;同時不斷迭代自己的表達能力。


行動力

從項目推進、上線,到後期的撰寫教程,我們可以說是「J & A 兩人同心,其利斷金」,合力完成了很多事情,過程非常流暢。這樣的協作默契,與其說是來自兩人本身就很合拍(總不能歸因於我們都是台灣同鄉!),不如說是因為「行動力」意識到任何項目需求,就立即提出,兩人主動安排自己可以負責的任務、分頭執行,並互相照應。

像是 5/21 上線當天:

  • 吉米:快手快腳地幫第一版作品進行功能和頁面的收尾、修正(神隊友簡直在閃閃發亮啊!),寫 Logdown 簽名檔用的 HTML,幫網站截圖、準備 JD Store 大賽作品頁面會用到的截圖和敘述。
  • 我:完成文案最終潤飾、推上 Heroku 後,緊接著處理正式端的網站內容;代碼的部分則改一些新發現的 bug、確認語系 yml 檔。開賽前一小時,負責寫 J&A SELECT 作品介紹 的文字部分,以及 GitHub 專案 頁面會顯示的 README.md。

上線前的準備工作如此繁雜、細鎖,但只要彼此執行力夠、積極採取行動,即使事前完全沒有討論或刻意分派的任務,也還是能高效完成。還要有一份「為隊友設想」的心情,不斷問自己:

  • 「現階段,我該怎麼參與、能作些什麼貢獻?」
  • 「圖 / 文案 / 技術支援,隊友有什麼需求?」

當雙方都採取主動參與的姿勢、設身處境的心態,就能很直覺地找到各自當前的任務,項目的推進自然水到渠成,解決「永遠在等對方」的窘境。


自身成長

Job Listing 大賽留下的遺憾,透過 JD Store 大賽來彌補。

上一次大賽,雖然收穫很大,得到很多支持跟讚美,甚至對於當時的實力跟招聘網站的作品水平來說,是有點多得太多了,也因此我最後陷入莫名的低落。這樣「心虛」的情緒,是源自於「成長不夠」。除了開發便宜行事,很多標配功能沒作,也不完全滿意自己的作品(主題、完整度),所以就算得到好的名次、獎品,也開心不起來。

JD Store 魔改大賽 5/22 00:00,上傳系統開放當晚,發現自己心態有很大的轉變。原本我跟吉米都希望能秒上傳、當第一個上線的作品,後來因為 VPN 上傳速度太慢而重來,沒達成頭香的成就;但意外的是,我竟然絲毫不以為意,腦中想的都是:「沒關係,我很滿意我們共同完成的 J & A SELECT 第一版樣貌!」。心情莫名輕鬆、滿足,將比賽的事情徹底拋到腦後,因為我知道我已經了結了前次大賽留下來的很多遺憾,跟著神隊友吉米,我們一起作到:

  • 挑了一個彼此都喜歡、有想法的主題。
  • 靠著明確的目標和分工,即便兩人的狀態都不好,還是達成了將「比賽一開始就發佈一個完整的作品」的階段性目標。
  • 克服曾經懼怕的技術難題,實現當初沒作成的標配功能。

自己貢獻了什麼、如何協作、從隊友的態度和代碼中學到什麼、作品有沒有朝著目標演進,這些經驗跟體悟才能讓心裡真正踏實和滿足。


硬實力成長。

後端功能 — 脫離教材、獨立實作。

Job Listing 魔改大賽,我尚無法完全擺脫對教材的依賴,網站基本框架也是遵照教程、按步驟開發。這一次魔改大賽,我跟吉米在腦內風暴、發想功能時,便針對每一個部分,把 Models、Gems、實作方向,通通寫下。這樣簡單的一個討論環節,卻讓我腦中多了一張全新的「功能實作藍圖」,而不再是參照教材,一個指令、一個動作。

前端排版 — 「觀察/吸收」、「刻意練習」、「遷移技能」,三階段克服弱項。

第一次大賽結束後,我對於「如何利用 Boostrap 的網格系統(Grid System)達到自適應」、「CSS 屬性」,都還是一知半解,多半是腦袋一片懵、靠土法煉鋼弄出自己想要的版面。JD Store 大賽前期有大半時間都在搭建作品的毛胚屋,前端交給吉米去裝修;直到我們切換任務、撰寫模板教程時,我才真正把前端的能力建立起來。

我的學習套路是這樣:

  • 階段一:「觀察/吸收」;小幅修改細節,改改看、玩玩看,熟悉前端代碼、觀察變化。

    在神隊友已經建立的 CSS/HTML 基礎上去作改動;如果你跟隊友的前端能力都尚未成熟,先別絕望,你還是可以將前端高手(如吉米、一期的陳俊鴻學長)的專案 Clone 至本地進行修改。在作品上線之前,我陸續調整了一些前端細節:Navbar/footer 的顏色及樣式、Hover 的文字顏色/底色和效果統一、重新設計 Logo(替換字型、利用 CSS 加圓框)。雖然只是針對小地方微幅調整,但其實這是很好的前端入門方式:

    • 在前端強者的代碼基礎上修改,用「只是玩玩」的心態去修改,不易產生挫敗感或抗拒。
    • 閱讀代碼,觀察前端套路及訣竅:
      • Views 檔案中的 HTML 架構安排。
      • CSS 屬性命名規則。
      • 如何設置通用樣式以達到 DRY(Don't repeat yourself),讓 CSS Class 易於維護、使用。
      • 熟悉常用 CSS 屬性。
    • 過程中,了解「輸入什麼會得到什麼」

      ※ Nic 過去在直播中有叮嚀幾個前端學習心態,「『輸入什麼會得到什麼』才是學習的重點,有過多的糾結會絆倒自己。」便是其一;如果你忘記了、再次陷入糾結,可以利用這篇直播筆記:[筆記生肉][圖解] 如何參加魔改大賽(主講:Nic)

  • 階段二:「刻意練習」;練就如何從 0 開始,兜出自己要的排版、樣式。

    有了階段一的 HTML/CSS 前置知識後,再進一步挑戰自己,從 HTML 到 CSS,一步一步組構一個頁面:

    • HTML 佈局:規劃頁面主要板塊、自適應,預先寫下 Class 名稱。
    • CSS 樣式:用佈局時就規劃好的 Class 名稱,撰寫 Class 的 CSS 樣式內容。
    • 客製細節:類似階段一。

    你可以替自己安排一些練習方式跟限制:

    • 練習作一個只用到 HTML/CSS 代碼的靜態頁面。強調「只用到 HTML/CSS」,是因為練習重點在「前端」,所以把後端代碼的需求降至最低。以製作「商品列表」的前端模板為例:

      ① 終端機執行 $ rails g controller products 後,在 app/controllers/products_controller.rb 中加入 index 的 action,
      ② config/routes.rb 中用 get "/products/index" => "products#index" 設置路徑。
      ③ 在 app/views/products 裡新增 index.html.erb,就可以動手作一個簡單的靜態頁面了。

    • 抄其他作品的前端代碼時,限制自己不能整段複製貼上;強制自己按照上述的:「HTML 佈局 → CSS 樣式 → 客製細節」逐步添加。才能避免「我感覺自己一直在抄代碼,但不知道自己在抄什麼。」、「抄完就忘。」這類狀況(Xdite 老師、Nic 直播常被問到的高頻問題)。

  • 階段三:「遷移技能」;回答問題、教人,驗證所學。

    作品好看,或是有產出前端相關的教程,自然會吸引一些同學來問問題;或是逛逛交流論壇、Slack、參加 Global Team 的線上 Meetup,主動尋找問題。當面對同學問問題,比起提供大致方向,我會傾向「利用問題,再作一次練習」把被問及的每一個「問題」當作機不可失的「練習機會」。

    例如 Max 之前傳來他想要的商品列表的樣式,說在實作前端頁面時遇到問題,我便利用 Gist 寫了一個簡單的架構給他、附帶註解說明。練習、實作時,人往往會不自覺選擇自己熟悉的佈局、樣式。因為如此,來自其他同學的問題,成了寶貴的「練習題」;把握每一次機會,分析問題、思考解決方案,讓自己充分調動技能,並檢查自己有無知識盲點。

教程撰寫能力 — 寫一篇「傻瓜都能懂」的教程,是最好的學習方式之一。

我跟吉米對「教程」有幾個共同的標準,我認為是這樣的自我要求,讓「提取練習」成效更顯著,而寫出來的教程也獲得不錯的評價。

我們在撰寫教程時,一定會考量:「無論程度,只要照著教程,一定能懂、跟著步驟實現。」。前端效果、後端功能,在自己的項目實現後,為了確保所有人(或至少全棧營的學員)能跟著實作,我們的習慣是:利用教材範圍的基礎框架,重新實作一次,或甚至在教程寫出來後,再按照自己寫的步驟作一遍;藉此確認教程中的步驟、指示是否明確。

為了達到「教程可操作性高」而養成的習慣,讓我們多了一至兩遍的練習,形成很深刻的記憶;而這樣作,也是對使用教程的讀者負責。

※ 整個全棧營的學習期間,我撰寫的系列教程、資源、筆記,請見:


透過幫助別人、解決別人的需求,產生滿滿的動力與自信。

文班長開設的全棧營鐵血群,讓我跟吉米有機會與其他同學(我們的協助對象:李慧)接觸,幫助她的隊伍將 作品 推上線。搭上線後,我們馬上開了一次線上會議,討論時意外發現,我跟吉米習以為常的「協作方式」,是可以幫助到其他人的。

而當我們苦思教程主題時,也從跟協助對象的聊天中,了解到大部分同學可能會有的「需求」,這其中,又以「前端」的需求最為迫切:「作品醜,但又不知道該如何寫出漂亮的前端,所以遲遲不敢發佈作品。」。所以吉米立刻提議製作一套前端模板,將購物網站的三大主要頁面,供大家使用;兩人分頭製作了 Landing Page 以及商品列表、商品資訊頁,J & A 的最受歡迎教程就此誕生:

※ 我跟吉米所寫的系列教程,請見:【JA魔改秘笈】實用秘笈列表

我們其實不自覺地實踐了 Xdite 老師在 < MVP 與 PMF > 直播 所說的:「做一個關心他人需求的人,在幫助的過程中就能尋覓到『剛需』。」

也許在外人眼中,我跟吉米都算是不差的學員(吉米是大家一致認同的學霸),但事實上,我們常常缺乏自信;都太理性,自我認知過於清晰(知道哪裡不會或作得不夠好),所以經常自信不足;旁人如果給我們的評分是 85 - 90 分,我們自己東減西扣,可能會覺得自己只有 65 -70 分。也正因為如此,「與人產生聯繫、產生價值」這件事對我們來說格外重要。多多去找人交流、伸出援手,才會發現自己是有能力幫別人解決問題,也才能建立信心。

藉著這次魔改大賽,重新領悟了「『教』是最好的『學』」這個道理。「教人」、「寫教程幫助別人」,不僅僅是最好的提取練習,也是最好的自信來源。



比賽心態總結 — 關於名次、投票和拉票。

只關注「操之在己」的事。

在萬維鋼的得到專欄讀到一篇文章 < 日課 196 | 斯多葛派哲學的安心之法 >,裡面提到的心態控制,非常適用於兩次大賽。

斯多葛控制二分法指的是:將事情分成「能控制的」、「不能控制的」兩種;我們應該只關注「能控制的」,也就是那些操之在己的事。個人的目標,同樣可以分為「外界目標(不能控制的)」和「內部目標(能控制的)」:

  • 外界目標:設立的目標有過多自己無法控制的因素,把希望寄託在外界目標,容易產生各種焦慮不安的情緒。以大賽來看:「拿到第一名」、「得到獎品」,這其中可能就牽涉到:規則異動(前面幾天不開放投票、微信一鍵投票)、VIP 學員的投票等等,各種你無法掌控的變因。
  • 內部目標:自己可以控制的。魔改大賽,我們最能把握的是什麼?不就是「協作,作一個完整的作品。」這個老師反覆提醒的最終目標嗎?

既然都參加大賽了,誰不想贏?誰能夠完全沒有得失心?我們無法徹底根除慾望和好勝的心,但我們可以轉換心態:「消除慾望這個要求實在太高了。並不是沒有慾望,你想要什麼,可以!但是你要把注意力全部集中在自己能控制的這部分上。」


反思自己的投票心態。

上一次 Job Listing 大賽,留下遺憾的部分其實還包括了:「我有票,卻沒有投給我很欣賞的實力作品。」。例如當時韵兒爸爸的 <尋找匠人> 和黃鴻亮的 <全職小夥伴求職網> 都是非常出色、前後端面面俱到的高水平作品,眾人有目共睹;然而,我最後還是把票留給了其他學員。前陣子,重新反省了當時的心態;不敢把票投出去,其中一個原因也是因為「競爭激烈、怕票數被超越」,而因此不敢去肯定好作品。這是什麼弱者的小人心態?相當可恥、不堪,真想狠狠賞當時的自己幾個巴掌。

這一次魔改大賽,果斷投票。這不是因為上一次沒有投,而這一次「補投票」;是打從心裡激賞韵兒爸爸的自虐精神跟過人的設計品味,以及黃鴻亮的技術硬底子(這樣的死嗑精神何嘗不是一種自虐精神?)。

好作品,沒有道理不給予實質的支持!投完票後,心情都莫名愉快,因為這一票對得起良心。往後與這些優秀同學的互動交流,也讓我更確信這個道理:面對實力之作,選擇「肯定」、「交流」得到的收穫,絕對比選擇「敵視」或「忽視」來得太多、太多了,心裡也舒坦。


重視手上的每一張票,將票的價值最大化。

VIP 學員的 1 票等同於「5 票」,而每位 VIP 可以投給 10 個作品。把票留著,跟別人「換票」,當然可以,但這無形之中也會錯失一些東西。

就以上一次 Job Listing 大賽為例,起初我也是不敢看學霸吉米的作品,生怕玻璃心碎裂;然而,看了他的作品 職贏網,再看看 GitHub 代碼,頓時佩服得五體投地!不但瞬間得到了很多功能實作上的思路、解決了自己遇到的問題,還收穫了清楚的註解方式。太震撼了,馬上奉上手上的一票,加了微信、誠心討教,就此開始了與吉米的交流。如果我當時選擇的把票留著、與其他學員換票,我錯失的恐怕有一個兆那麼多。(借用 Nic 的梗)

慎重投票,你可以:

  • 藉投票,與學霸或你欣賞的學員交流(技術類的問題或思路,學習方式、心態),絕對獲益良多!
  • 鼓勵優質教程,或甚至許願想要知道的主題。J & A 魔改秘笈的主題,很多都是取自支持群眾的反饋。
  • 鼓勵踏實迭代的認真學員。

與人「換票」這個行為所得到的,終究就是票而已。


韵兒爸爸:「成為真正的大神後,再去接受更多鮮花和掌聲吧。」

比賽後期,我們採用的拉票策略是:

這樣的策略,就大賽期間的票數增長跟最後的比賽結果來看,成果相當有限,兩人都感受到很強烈的無力感。比賽最後兩天,索性放寬心,不再積極拉票;就在這時,看到韵兒爸爸的微信寫到:「成為真正的大神後,再去接受更多鮮花和掌聲吧。」,更是徹底釋懷了!

因為作品品質、教程、平時的幫助,而真正打從心裡認可我們作品的學員、親友已經給予投票支持了,這樣的票拿得心安理得。至於沒有投票的學員,或是素昧平生的人,就無須強求了。況且,現階段,無論是實力,還是作品,都還有一些不足之處(部分功能還是會有難解的技術難題、各種可以讓體驗更好的優化項目);把注意力拉回自己身上,「不讓未來的妄念影響當下,我只純粹關注當下的目標」。成長、銳變後,升等至更高的水平後,還怕得不到鮮花與掌聲嗎?


結語

二期 VIP 學員自我介紹的帖子 中,我在 3/25 這天留下了自己的學習目標:

  • 透過全棧營的學習讓自己脫胎換骨;我所想實現的「脫胎換骨」,指的是:用正確的學習姿勢、心態,紮實地收穫一門專業(Ruby on Rails),讓邁向的 30 歲的最後一哩路上,充滿更多可能性。而這陣子在閱讀過去的學員分享的全棧營心得,很多人都有提到 60 天帶來的「自信」,這也是我所欠缺的,所以我想貪心地在「脫胎換骨」的定義上多加一個:成為一個自信的人。

經歷了全棧營的一切:兩次魔改大賽的歷練,與神隊友以及眾多優秀且真誠的學員交流;藉著師長、前輩的提點,一次又一次用力地刷洗三觀,提起勇氣跨出自己的小世界。我敢說,我確確實實地實現了自己的學習目標。


最後,感謝我的神隊友吉米,願意包容我在技術、心態上的不足;總是能在我身陷情緒大坑時,伸出最關鍵的援手。跟你組隊,是我在全棧營最大的收穫。

Comments

comments powered by Disqus