Irene

終於從 Alpha Camp 畢業了,但這才是修煉的開始

Credit: Unsplash by @drew_beamer

緣起

去年 8 月開始的 Alpha Camp 之旅,終於畢業了。一開始觀望 AC 約半年多吧,很猶豫要報名課程還是利用免費資源自學(Coursera, CodeCademy, FreeCodeCamp …),但是在基礎薄弱+全職工作+家有幼兒的情況下,自學效率不彰,且常常一知半解,上網發問或是問同事常常無法獲得即時或詳細的解答,決定還是報名 AC,一方面課程設計循序漸進,另一方面是進度制且有同儕壓力。

學期 1:程式設計入門 | 2021–08–02 ~ 2021–08–22

這一階段是最快樂的時期了,因為之前有學過一些基礎 HTML & CSS 語法,JavaScript 也有預習過 FreeCodeCamp 的影片,每週進度跟作業基本上都迎刃而解。

學期 2–1:JavaScript 前端開發 | 2021–09–13 ~ 2021–10–10

開始學到 JavaScript 核心概念、DOM 操作、物件、陣列操作,作業難度雖增加,但還在可掌握的範圍,每週進度開始有點趕;加上那時候房子裝潢好,但是家人在無止盡隔離,要抓時間搬家、整理、採買,而且最後一週還接到老東家的面試邀約,覺得在一個人生的十字路口,混亂又迷惘,所以 2–1 很多概念學得不是很紮實,接下來一個月沒有接續著上 2–2,暫停了一個月好好思考到底要不要繼續。

學期 2–2:軟體開發實務入門 | 2021–11–22 ~ 2021–12–19

暫停一個月重新開始後,比較確定自己是想繼續走下去,但是工作上剛好遇到一個部門重點專案要決定走向跟細節,每天忙到花轟,加上課程越來越重,清晨 5–6 點起床念書,念一個多小時就要準備出門了,晚上回家處理完家務 22 點後開始念,每天情況好大約有 3–4 小時,差的情況約只能念 0.5–1 小時,每週 ORID 好像都在寫我這週想了什麼辦法擠時間出來念 😭 覺得心急好像開始掉隊跟不上了,但真心不想放棄。

學期 2–3:前端開發實務 | 2022–01–10 ~ 2022–02–06

這學期開始心比較定了,但還是一樣唸書時間很少很少很少,甚至比之前更少,基本上上完指定課程與作業,就沒有閒暇去看選修課程了,每週也是瘋狂趕進度,但只能勉強不遲交作業,更別說好好複習之前的課程或是寫什麼部落格筆記了。

學期 3:軟體工程師養成 — 前端課程 | 2022–03–28 ~ 2022–05–22

最後一學期的衝刺,報名後看到教案跟 Twitter 比賽說明,加上全職工作跟下班後的家務,起心動念想離職,跟老闆同事們懇談多次後,終於在 4 月初離開(但還是時不時會回去聚餐順便帶筆電騷擾 RD 們 😂),接著就是一到五窩在圖書館的日子,多了喘口氣的時間,能夠預先完成進度,還有時間參加讀書會一起研究一些題目,也認識了很棒的 Twitter 戰友。

Alpha Camp 一直提醒我們的事

心路歷程一直以來都起起伏伏的,學期三之前每週趕 deadline 趕到懷疑人生,常常覺得自己做得到嗎?別人的 code 寫的簡單又優雅,我寫都寫不出來還要偷看別人的解答真的要轉職嗎?

成長型思維 vs. 固定型思維

這部分很慶幸 AC 時不時提醒我們,要用成長型思維去思考,不要一直陷在負面的情緒中,像是看到別人很厲害的時候,要想想每個人的條件都不一樣,有些人可能已經會了其他語言,或是能運用的時間比較多,有其他資源的支持等等,而不要習慣性的導向自己怎麼這麼廢、是不是完全沒天份這樣。要記得無謂的比較與負面思考並不會讓自己進步。

學會問問題

AC 很強調要學會問問題,問問題之前要自己先搞懂要問什麼問題,先嘗試自己解答,自己先努力過再發問,而不是當一個伸手牌。經由來回的討論,這部分真的幫助很大而且印象深刻。

觀摩不是抄襲

AC 也鼓勵同學多觀摩作業,觀摩不是抄襲,重點是觀摩後要內化成自己的東西,再想辦法輸出出來。經由反覆刻意練習,最終都會成為自己的 muscle memory。我現在不會沒關係,但我想要把它搞懂,我在『會』的路上了!

一路上的精神支柱

必須感謝助教群的支持與鼓勵,學期三給我無限支持的 Tom 助教、Twitter 專案快被我煩死的 Ivan 助教,還有好多好多每次提問後迅速解答的助教們。不管什麼問題都會鉅細彌遺地回答,每次作業交出去的忐忑,都在助教一句『做得好!』中煙消雲散,能夠動力十足地繼續向前進。社群的大家也常常拋出有趣的題目或卡關部分並且彼此解答,也算是另類的觀摩,進一步對 code 可以有不同角度的理解。

結語

回顧這 9 個多月來,一路上的動力、喜悅、成就感,往往交雜焦慮、懷疑、挫敗,但也默默的支撐我到現在了,比去年中的自己成長不少,可以跟前同事們討論專案,向他們解釋我在用什麼技術、想要解決什麼問題,而不是像去年初那樣雞同鴨講。

記得 Twitter 開賽前 AC 有說 Twitter 專案是成為專業工程師的起點,而不是學習的終點,很慶幸當初決定報名並且堅持到現在,畢業脫離 AC 的課程後就是自己的規劃與安排了,面對廣闊無邊際的知識海,自己懂得雖然還是米粒般大,but I am ready to learn!

--

--

前天遇到的問題,趁還有記憶快記錄下來

Photo by jstrippa on Unsplash

前陣子公司網站的新功能上線,是地址部分改為下拉式選單,但是老闆用 Chrome 測試時,下拉式選單無內容,Firefox 跟 Edge 又正常。這問題已經存在一陣子,因為其他人測試都沒有遇到一樣的狀況,所以都沒有修復。

RD_J 認為是快取的問題,可能要清除快取才有辦法恢復正常,google 不太到快取與下拉式選單無內容的關聯,由於 RD_J 已離職,按耐不住好奇心,所以跑去問 RD_K,RD_K 說他不認為是快取的問題,但又無法在其他人電腦重現老闆的 bug,可能看到我死不放棄加上他剛好有空,就一起去找老闆直接看他畫面 show 了什麼訊息。

打開 Devtool > network,發現上面顯示 CORS Error,RD_K 檢查完回去大概幾分鐘就修完了,快到我想重現老闆遇到的 bug 都來不及XD,就是這麼帥氣。

後來他解釋:假設我們網站 URL 是 www.abcdef.com,使用者跟其他人測試時都是連到 www.abcdef.com ,下拉式選單都會有內容,但是老闆習慣在網址列輸入 abcdef.com 進到我們網站,因為分屬不同的網域,所以跨域請求時,基於瀏覽器的同源政策,雖然發送請求成功,但是 response 被瀏覽器擋下來了,導致其中一個的下拉式選單無法顯示內容。

RD_K 還 murmur 了一下說不應該出現這樣的 bug 才對,可能是之前設定好的在開發新功能時被人誤刪了 (?)。針對這個問題,解法有兩種,一種是把所有 abcdef.com 前面都加上 www. ,一種是把 abcdef.com 加入清單(這邊沒有講得太細,他就只是說清單),查詢文件和一些部落格的說法,猜測應該是要將另一個 domain 加入 Response 的 Header 中的 Access-Control-Allow-Origin:

遇到這個 bug 又能解開真是太好了,讓我對 CORS 有了極粗淺的認識,然後老闆之後也不會時不時在 SLACK 上抱怨說他怎麼測都沒有東西惹 XD,hurray!

Reference

--

--

本週挑戰任務是電商的靜態網頁切版,從拿到設計稿開始分析 HTML 架構、畫 wireframe、切版等,這次沒有使用 Bootstrap 而是都用手刻完成。

這次的 HTML 架構分析 + 使用 Figma 做 wireframe,有比過去感到使用上更為順手與熟悉,可能給自己壓力要在時限內完成有關(果真壓力可以激發人類無限的潛能)。雖然後來實際切版時有修修改改,但大致上相差不遠。

這部份目前 sense 還是不夠好,平常除了多看別人網頁的架構,思考一下為什麼要這樣切,然後要多動手刻意練習。

這次主要商品圖片區域用了 display: grid; ,最近才學到的新東西,覺得好靈活好厲害,之前練習時,用基本的屬性沒有問題,像是:

display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;

但這次為了實現 RWD,挑戰用 repeat() 結合 minmax(),例如:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

第一個參數 auto-fit 的意思是,請瀏覽器計算這一列可以擺幾格,多的格子如果沒有內容的話,寬度就是 0。跟 auto-fill 不太一樣,雖然也是計算該列擺幾格,但是如果格子沒有內容,還是保有寬度。

第二個參數 minmax(250px, 1fr),指得是該欄不能小於 250px 避免跑版,如果大於 250px,就給他 1fr (fraction)。

其實在這邊卡關了一陣子,因為 RWD 一直做不到我要的,冷靜了一下回到最基本的思考:現在有 2 個 Breakpoints,分別是寬度 600px 跟 960px,所以在三種寬度的範圍內,要有三種排版。

  • 寬度小於 600px 時,兩欄排列:
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 1.5rem;
  • 600px ≤ 寬度 < 960px 時,讓瀏覽器自行計算:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  • 寬度為 900px 以上時,至多 4 欄排列:
grid-template-columns: repeat(4, 1fr);

改為上面那樣時,終於符合我要的規格了,grid 的眉角又多會了 1% XD

不過還有很多細節處要再處理,像是商品名稱多行,商品照片的高度會不一致等,都需要再花時間處理好才行!

--

--