2019年9月14日 星期六

Web Front-end 菜鳥心得:將 stateful components 遷移到 React hooks 的第 17 週

灰底是各種跨 component 共用的東西,白底是會實際 render 到畫面上的部分

去年十月開始,egghead 電子報就陸陸續續提到 React hooks 的消息。今年二月隨著 React 16.8 發佈,hooks 正式成為內建的功能。今年四月底,Create React App 3.0 也開始支援 hooks。

這段時間,菜鳥我一直抱持觀望的態度,直到最後確定 hooks 是 React 家族不可逆的大轉向,就決定要盡可能趁手上專案還沒大到改不動的時候遷移過去。現在雖然還沒全數改版完,但算是稍微做到一個段落,趕快趁記憶新鮮時記錄一下,給其他有類似改版需求的人參考。

2019年8月10日 星期六

街舞日記:iKON 的 Goodbye Road、BTS 的 Boy with Luv

前兩期的街舞課,一首是最近風雨飄搖的 iKON 的歌,一首是持續如日中天的 BTS 的歌。

回家有練習的效果...

回家沒練習的效果 www

很喜歡 BTS 的 Boy with Luv,應該要跳熟一點,有點後悔回家沒練習 😅

最近主要的煩惱之一就是街舞課的團購人數不足,先前在運動中心開課的時候,三不五時會有新同學路過,現在我們班自己出來外面開團,除了固定班底以外很少有接觸到新同學的管道,所以只要有同學畢業或暫時休息,人數就很容易不夠 QQ

MV 舞的課程要記舞步、隊形、還要抓表演的感覺,其實蠻複雜的,大腦無法放空,所以能接受的人數一直都遠低於有氧舞蹈或重訓健身,需要對街舞或者對 kpop 有愛,然後以本團來說,還要禮拜天早上起得來這樣 XDrz

住台北又喜歡街舞的朋友請趕快來當我的同學吧 😭😭😭

🚨2019年第五期課程報名開始🚨
上課日期:9/1、9/8、9/15、9/22、9/29、10/6、10/13、10/20(週日)
費用:2400/一人/8堂
上課時間:10:30 - 12:00
上課地點:近捷運市府站
上課歌曲:票選中

有興趣的朋友趕快臉書私訊我~~~

2019年7月5日 星期五

Web Front-end 菜鳥心得:從 UI 轉職到前端的瓶頸們

轉職到前端工程已經一年又兩個月而且公司還活著,這段期間常常卡關覺得崩潰,直到最近一兩個月,才開始有得心應手的感覺。如果有人跟我一樣從 UI 設計轉行過來,可能也會遇到類似的瓶頸,想說趁記憶新鮮的時候整理出來好了,看能不能幫到人 ٩( ᐛ )و

2019年6月11日 星期二

公民日記:離開 g0v 的第三年

昨天 g0v 揪松團的網站上,出現這篇公告:

https://jothon.g0v.tw/notice/

事隔三年,當初讓我離開 g0v 的因素,終究浮上了台面。什麼情況下才會發表這樣的聲明,有概念的人應該一看就懂,不需要我多做解釋吧... 😌

2019年6月4日 星期二

Web Front-End 菜鳥筆記:React Context、React Hooks 研究心得

為了即將在下個 milestone 增加的新功能,先前跟公司爭取到一週的時間做技術研究,在這邊紀錄一下結果。



一、研究動機


希望節省手動傳遞全域性資料 / 函式所需的人工,例如:

  • 處理未登入 / 權限不足 / api 逾時的函式,需要傳遞給所有會用到 api 的 components
  • 多個不同 api 回傳的資料,各自需要傳遞給多個會取用該資料的 components
  • 將來可能會需要支援的 theme 設定,也會需要傳遞給所有樣式受影響的 components

二、研究材料


2019年4月17日 星期三

成果發表:用自畫像做 LINE / Telegram 貼圖(目前非開放授權)


前陣子和電資工會的夥伴一起發想了工會吉祥物——電資貓的貼圖,結果好像意外打開什麼開關,各種靈感源源不絕,於是拿平常在 blog 使用的 ET 自畫像畫了草稿,然後在好友們的鞭打(X)鼓勵(O)下做成 LINE 跟 Telegram 的貼圖。目前進度:第一組上架完成 XD

2019年4月8日 星期一

Web Front-End 菜鳥一週年:Clean Code

Clean Code 這本書,正好適合寫作風格還沒定型的菜鳥一邊工作一邊慢慢看。原本不知要累積多少年經驗才能做出明確決斷的事情,從書本上系統性地吸收前人的思考以後,摸索的時間明顯縮短了許多。

這個月結束,人生中第一份 web front-end engineer 工作就做滿一年了。這段期間,每隔一陣子隨著任務變化,會跟公司要求一週不受打擾的技術研究時間,研究完馬上實做,實做完馬上寫心得筆記、跟高手求教、制訂下一階段的戰術,然後再度進入研究階段。幾個循環下來,深深覺得對技術進步幫助很大 😃

繼 React patterns 跟 JavaScript testing 之後,還有一項沒有特別安排時程、僅僅耗費每天在馬桶上的零碎時間,但卻讓我覺得非常有感的技術研究:讀 Clean Code。

過去曾讀過一本跟 Clean Code 有點像的書,叫做「病歷寫作」,都是在講述「特定領域的從業人員如何透過專業文件做有效溝通」,不是講技術,而是講前人曾經使用哪些工作方法來發揮這項技術、各自遇過什麼狀況、以及根據這些經驗得出的 best practice 是什麼。

2019年4月7日 星期日

Web Front-End 菜鳥心得:用 Cypress 寫人生中第一個測試

目前作法 1. 挑選變化型最多(aka 人工測起來最麻煩)的 component 做自動化測試 2. 以撰寫規格書大綱的原則來替 test cases 分類與下標 3. 套用 Clean Code 第三章的原則自訂 functions 來處理同一參數的不同變化型 4. 用設定檔和自訂的 functions 開啟 / 關閉測試行程中的 screenshot 動作

之前上了 Testing JavaScript with Kent C. Dodds 課程後,開始替公司產品前端撰寫 end to end 測試,使用課程中介紹的 Cypress 這套工具。目前為止做了兩個 component 的自動化測試,這兩個 component 的性質分別是導覽精靈以及對話視窗。使用感想如下:

2019年2月25日 星期一

街舞日記:BTS 的 IDOL

這期 MV 舞課上 BTS 的 IDOL,從最後一堂課的錄影裡面,可以看到這幾年間 adidas 大舉攻佔運動服飾市場的威力...


真的不誇張,最近走在街上看到的運動服幾乎一半是 adidas 啊!包括肥宅我這一兩年發現 adidas 的運動服真的比較可以修飾肥肉(X)剪裁好看(O)所以也從 Nike 跳槽過來了 lol

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