Web Front-End 菜鳥筆記：替小型的 React App 加上測試

採用 Testing JavaScript with Kent C. Dodds 課程做為快速入門教材，採用 Create React App 內建的 ESLint 跟 PropTypes 做 static analysis，採用 Create React App 內建的 Jest 做 unit test 跟 integration test，採用 Cypress 做開發工具跟 end to end test，採用課程附件的 worksheet 決定測試對象

前陣子公司產品前端重寫完，想說整個過程蠻小心的，應該不會有太多 bug，結果被 QA 同事一測... 😅 總之，接下來除了 debug 之外，還有一整個功能區塊的操作邏輯要大改。

先前開發時已經竭盡所能地謹慎，結果卻是 bug 叢生，於是不知所措的菜鳥又哭著（誇飾法）跑去跟 ddio 求救～～～原本以為我需要設計更好的架構、更乾淨的封裝來避免產生 bug，結果發現，該做的不是繼續在實做細節上鑽牛角尖，而是該面對先前因為覺得煩而從沒做過的那件事：寫、測、試！

反正程式 deploy 前，一定有個倒楣鬼要去測產品，然後每次程式更新，一模一樣的操作就又要重做一遍。橫豎都要測，何不乾脆讓電腦代勞呢？你ごん對毋對？ 😇

去年 10 月左右，看到 egghead 電子報介紹 Testing JavaScript with Kent C. Dodds 這個同屬 egghead 家族的課程，當時課程還沒上架但有早鳥 40% off 優惠，剛好也工作了幾個月有存點錢，就趁著打折買下去了。現在覺得有買到實在非常幸運，這正是我需要的那根浮木啊！總之，跟 PM 要了一週的時間上課，上完以後覺得像是撿到槍，手超癢超想掃射的 😂

半成品發表：電資貓 - 電資工會 LINE 貼圖草稿發想（集體創作）

某位佛心設計師替電資工會設計了吉祥物，讓敝會可以賣賣貼圖補貼家用，現在貼圖終於上架囉 😍 https://line.me/S/sticker/6337334

前陣子企畫期間跟工會夥伴一起發想了不少構圖，開一篇文章來紀錄，作者應該算電資工會全體吧，我只是負責畫框線圖的 😆

使用工具：iPad Air、Apple Pencil、Notability（朋友用過都說讚的筆記 app）

Web Front-End 菜鳥心得：安排自己的工作時程

我犯的錯誤：1. 沒有把國定假日考慮進來，簡直整死自己 2. 沒有詳細分析導致漏掉一個大功能沒算進來，簡直整死自己 3. 連續排滿四個月沒有中場休息時間，簡直整死自己 4. 以為設計工時只要用產品頁面的數量來估算，簡直整死自己 5. 以為程式複雜度跟專案規模之間只是單純的正比關係，簡直整死自己

最近幾個月重做了公司產品的前端，不算太複雜，是一隻菜鳥勉強可以獨力完成的規模。開發時程是去年的我訂的，後來有微幅變更兩次，總之最後是從 9/24 做到 1/20，總共 17 週。

前半段 UI / UX 原以為已經爛熟，結果花了快兩倍時間。後半段程式開發已經多排了一倍的時間當緩衝，結果不僅緩衝用光光、規格打折扣、還開 turbo 拿肝換，到最後關頭才追上。前陣子趕工趕得快吐血，一邊寫 code 一邊心裡狂幹譙去年的自己，超想坐時光機回去打他啦 (／‵Д′)／~ ╧╧

理論 vs 現實

這張圖的左邊，是最初的時程預估，右邊則是實際的工作記錄。黃底的那幾週，工時還算正常但有負荷過重的主觀感受；紅底的那幾週，則是毫無疑問的過勞。

算一算，原本預估 4 週設計 5 週程式，穿插 4 週的休息緩衝；實際上則是 6 週設計 10 週程式，而且如果把紅色的加班工時攤開來看，其實程式需要 12 週。然後我沒寫測試，所以如果要包含測試的話，應該至少要再乘以二之類的吧 😅

街舞日記：MOMOLAND 的 BAAM

上一期街舞課跳 MOMOLAND 的 BAAM，原本是青春洋溢又正又可愛的一首歌，本班依照慣例毫不留情地摧殘它 ٩( ᐛ )و

演講紀錄：為什麼 Claire 會延畢？從政治學術理論與 g0v 參與經驗檢視黑客社群開源協作式的公民參與 @ g0v summit 2018

第一次跟家華和婷宇合體（？）最近跟政治所的特別有緣份啊...
希望將來不至於淪為她們的學妹（抖）
攝影 by 東霖

今年 g0v summit 被婷宇拎著一起投稿，原本想偷懶把時間成本控到最低，結果因為和共同作者話太投機，投入比預期多出數倍的時間，差點 delay 到工作 😱 意外的驚喜是議程組非常睿智地邀請家華當我們這軌的主持人，她直到演講前兩天才終於答應，拉了分軌群組後，在家華引導下，跟 Kobe、八六整個聊開，演講結束後過了兩天，主持人自己忍不住在群組裡面說，為什麼我們這一軌一直好像停不下來 XD ...

總之，這幾天在分軌群組內收穫豐富，結果出乎意料地好，感謝 ipa 堅忍不拔地辦了大會，讓我們這軌的成員有機會湊在一起 LOL

這次 slido 的考題，現場先挑了票數最高的回答，原本想說會後來好好做剩下的題目，順便解釋為何我略過數位政委的那一題，但連續幾天跟夢醒軌群組 brainstorming 下來，墨水幾乎用光，所以還是改天好了... 反正根據群組內討論的狀況，我想再過一陣子，這些題目應該都會有比現在更好的答案可以交卷 :3

Web Front-End 菜鳥筆記：在 2018 Q4 的小型 Single Page React App 函式庫 / 框架選擇

採用 create-react-app、react-router、axios、semantic-ui，暫不採用 redux / redux-saga、react-i18next，下階段預定採用 react-fns

人生中第一份前端工程的全職滿五個月了～公司還是沒倒喔（灑花）

從開始學 React 到現在，做過不少小型的 single page app，但畢竟都是自己的 toy project，從沒認真以 production quality 為基準做技術研究。這次負責公司 app 改版，爭取到一兩週的時間，把之前打馬虎眼欠下的知識債一口氣還完，覺得整個人神清氣爽～非常開心 :D

結果如下：

Web Front-End 菜鳥筆記：如何讓瀏覽器記住 form input field 的值（p.s. Chrome 的不合群行為還沒解開）

人生中第一份前端工程的全職滿三個月了～公司還沒倒（灑花）

這幾天解一個看起來簡單的小 issue，就是讓 browser 可以 autofill / autocomplete 登入表單中的欄位，結果意外的卡了超久 XDrz

目前在 Firefox / Safari 可以正常運作，但在 Chrome 則是時靈時不靈。先簡單筆記一下給將來的自己參考，順便看看有沒有過路神明會開示一下。

如何讓瀏覽器記住 input field 的值

有兩種方式

1. 由使用者自行利用瀏覽器內建的 autofill 功能
2. 由開發者撰寫會觸發 form submit 事件的 html elements

參考：Autofill: What web devs should know, but don’t - Cloud Four

成果發表：Storyliner——輕鬆替八卦事件製作互動式懶人包，以囧星人與聯合報願景工程的採訪爭議為例

《Storyliner》範例：囧星聯合爆

下個月要上班，所以最近在惡補 web frontend 的東西，看一堆 ajax 文件後覺得找專案來練習比較紮實，想說那就來順便改版《Guild Wars 2 Inventory》好了。結果規劃架構時，在社交網站上一直被某則網路八卦洗版，然後有天 臉友問我有沒有懶人包...

於是我整理癖就發作啦 ∫OoO∫

《Storyliner》 開發期間共八天，企畫三天、程式五天。之所以可以這麼快速，主要是因為類似的 idea 之前已經跑過一次 ux 流程，所以規劃起來不太費力的緣故。

新歌發表：美人魚 | Mermaid —— 洪丹《勞工童話》系列二創曲

難得花三四個小時認真做的封面圖，字體是用 Adobe Typekit 找很久才選定的 Beloved

繼《三小豬 | Piglets》後 yet another 勞工童話的二創歌曲，拖了整整四個月終於編完，長這樣：

Mermaid by ETBlue

為了配合歌詞的意境，採用 Disney 風格，搞得非常難編也非常難唱 XD 編曲的部分用盡了 garageband ios 的音軌上限（32 軌），vocal 的部分則是練了好幾個月再錄音 n 次後努力找出沒 bug 的片段剪在一起勉強湊出來，剪完 vocal 後發現樂器的音量變得超不平衡，還大調整了一次，後來才比較正常 w

街舞日記：BTS 的 MIC Drop

上一期街舞課跳 BTS MIC Drop 的成果影片。可能原版錄影看起來太智障了，老師還特別後製幫大家做了特效... www 這首大概是上課到現在跳過最累的，我到後半段就開始覺得力不從心，只好趁鏡頭沒 cue 到的時候偷打混，錄影完幾乎說不出話來 orz