2019年2月19日 星期二

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 要了一週的時間上課,上完以後覺得像是撿到槍,手超癢超想掃射的 😂

2019年1月23日 星期三

半成品發表:電資貓 - 電資工會 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 週。然後我沒寫測試,所以如果要包含測試的話,應該至少要再乘以二之類的吧 😅

2018年10月31日 星期三

街舞日記:MOMOLAND 的 BAAM


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

2018年10月10日 星期三

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

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

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

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

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

2018年10月2日 星期二

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

結果如下:

2018年8月10日 星期五

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

2018年4月17日 星期二

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

《Storyliner》範例:囧星聯合爆

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

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

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

2018年4月16日 星期一

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

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

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



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

街舞日記:BTS 的 MIC Drop


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