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

令人驚艷的 Apple 101 維修初體驗（Macbook Pro Retina，螢幕鍍膜脫落，保固內）

維修完畢簽收後，收到標題為「你的 Apple 直營店 服務確認」的 email，內含這份「Genius Bar 工作確認」表格

因為體驗太好、太讚嘆了，特別寫一篇文章以茲紀念，結論：推薦大家 apple care 買好買滿～（最長三年）

維修原因

我的 macbook pro 跟全天下的 retina display macbook 一樣，螢幕表面的鍍膜脫落了。脫落範圍非常全面，從購買到現在快三年的期間，先是從對應到空白鍵的地方開始，漸漸面積變大、同時蔓延到對應其他按鍵的位置，最後連螢幕邊框附近都有。我的 apple care 下個月到期，因此趁到期之前趕快拿去換。

預約流程

問狗後得知 apple 的維修似乎是要事先在網路上預約，但我第一次預約的時候，網頁上顯示沒有任何可預約時段，想說可能是網頁壞了吧（謎之音：不要以為別人做的網站都跟妳的一樣容易壞好嗎）於是隔天就直接背著電腦過去，順便逛逛開幕至今仍未去過的、傳說中的 apple 101 直營店。

實驗心得：勞基法掃描器——如何把法條轉譯成自動化的判讀程式？以勞動基準法為例

《勞基法掃描器》歡迎頁

去年一整年都在逃避的專案，前些日子終於做到一個段落（淚）

《勞基法掃描器》的運作方式很簡單，就是讓使用者回答一些關於工作狀況的問題後，生出一個報告頁面，告訴他有哪些地方違反勞基法。

blogging | 寫作

最近一兩年莫名突然變得很常寫部落格，直到前幾天才想通為什麼...

我知道最近部落格產量大增的原因惹，因為不去黑客松以後，原本會拿去黑客松成果發表的東西，都變成部落格文章惹 www

原推文

上次 思考部落格要拿來幹嘛 是五年前的事，當時是覺得該寫點什麼，但又沒什麼好寫 XD 現在則是有東西要寫，但寫出來後也不知道能放哪，就自然放到部落格上惹。

寫著寫著，也大概找到些規律。

舊歌發表：聲聲慢 | Slowing Sounds —— 宋國文學作品二創曲

兩年前替李清照的這首詞譜了曲。當時 garageband 還沒有人聲濾鏡，編完錄完總覺得距離完稿還少了些東西。最近幾天做新歌之餘，也把幾首 gb 出人聲濾鏡前的曲子抓出來調音色跟音量平衡，包括這首《聲聲慢》：

Slow by ETBlue

目前最美中不足的地方，就是發音吧！自古以來東亞大陸不曉得多少部族跟語言共用這套方塊字，生於宋國的作者讀這首詞所使用的語言，跟後來清國推廣、現代普及的的滿大語，想必是不同的。不過語言麻瓜我也懶得考究，就直接用滿大語發音了。

新歌發表：三小豬 | Piglets —— 洪丹《勞工童話》系列二創曲

這幾天開始弄接案的東西，又要從一陀陀義大利麵式的文字段落中抽出結構化資料，為了逃避工作（X）培養心情（O）就把這首拖了兩個月的曲子拿出來完稿～～～

Piglets by ETBlue

兩個月前也就是 2017 年底，勞基法修法沸沸揚揚，網路上出現一張超狂《古亭長老教會週報 2901 期》的照片，週報內容塞滿好幾首描述勞工議題的短詩，作者署名勞工童話。照片一出來，推特、臉書、PTT 都傳瘋了 XD

姑且不論古亭長老教會為什麼會這麼狂，仔細看週報裡面的詩，發現寫得真好！尤其是三小豬跟美人魚，一看到詩，旋律就從腦袋裡跑出來，只好一邊找到原作問授權，一邊動手替它們譜曲 www

舊歌發表：鄉愁 | Nostalgia —— Liaooo 廖震 PTT 八卦板貼文二創曲

去年在 Blulu Gamma 講稿翻譯地獄中 寫的曲子。大概因為中翻英太厭世，譜這種哀傷的曲子異常得心應手，幾乎是看到 PTT 原作 的第一時間主旋律就從腦袋裡冒出來惹。

Nostalgia by ETBlue

Demo 版 MV：

卡啦 ok 版 MV：

拿詩來寫成歌有個有趣的地方，像鄉愁這首詩，是同個格式的段落重複四次，沒有 a 段、b 段、副歌之類的結構。如果是自己寫的歌，通常詞會跟旋律一起出來，所以詞本身就是有結構的了，但拿詩當作詞的話，就要自己想辦法從同樣格式的文句中橋出歌曲所需的結構來。第一次這樣弄，意外發現我竟然還蠻擅長把歌詞橋進去旋律裡的 XD