2019年11月1日 星期五

公民日記:戰爭世代、科學世代、藝術世代
Civic Diary: the War Generation, the Science Generation, and the Art Generation

年初的時候寫在鎖朋友文的東西,為了方便讓人引用,也貼到部落格來。
I've written a private post early in this year. I'm posting it here too so people can quote the content conveniently.

美國開國元勳之一 John Adams 格言:
John Adams, one of the Founding Fathers of the United States, used to say:
我必須修習政治學與戰爭學,我們的後代才能在民主之上修習數學、哲學;我們的後代必須修習數學、哲學、地理學、博物學、造船學、航海學、商學及農學,以讓他們的後代得以在科學之上學習繪畫、詩歌、音樂、建築、雕刻、繡織和瓷藝。
I must study politics and war, that our sons may have liberty to study mathematics and philosophy. Our sons ought to study mathematics and philosophy, geography, natural history and naval architecture, navigation, commerce and agriculture in order to give their children a right to study painting, poetry, music, architecture, statuary, tapestry and porcelain.

個人覺得最後面,應該要再加上一句:
Personally, I would like to append some more words:
如果後代醉心於哲學、藝術,而遺忘了我們這一代所學過的政治學與戰爭學,那他們的後代就必需重新開始做我們這一代的事。
If their children forget about the politics and war we've learned, then the next generation will need to start over.

最近的感慨:
Some thoughts recently:
開源烏托邦的理想,是屬於藝術世代的浪漫;而我們目前面對的,是戰爭世代的問題。
The open source utopian is the romance belongs to the art generation. However, the problems we are dealing with right now, belong to the war generation.

以上,寫給 五年前的自己 。
For the old version of me 5 years ago.

2019年10月28日 星期一

Web Front-end 菜鳥心得:用 React Custom Hooks 製作頭尾相依的連鎖反應

以下是一隻菜鳥在無窮迴圈之森與變數未宣告之谷中逃出生天的掉漆冒險故事

昨天花一整天才弄好的東西,過程中一度進退維谷、想衝去 slack 跟 senior 喊救命,最後菜鳥我終究還是靠著驚人的意志力,一邊維持不打擾別人休息時間的紀律,一邊奮力爬行抵達了終點... _:(´ཀ`」 ∠):

想解決的問題


系統中有三類物件,彼此互有關連,這些關連只會紀錄在其中一方,因此前端從 api 拿到資料後,會做一些計算,才能在每個物件的畫面上顯示出它和誰相關連。任一類物件新增、修改、刪除時,前端也需要重新計算,更新相關連物件的狀態。

前端這邊的計算任務為:

  • 物件 A 變動時,自動更新物件 B 與物件 C
  • 物件 B 變動時,自動更新物件 A
  • 物件 C 變動時,自動更新物件 A

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 的性質分別是導覽精靈以及對話視窗。使用感想如下: