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

2018年4月10日 星期二

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

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

因為體驗太好、太讚嘆了,特別寫一篇文章以茲紀念,結論:推薦大家 apple care 買好買滿~(最長三年)

維修原因


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

預約流程


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

2018年2月28日 星期三

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


《勞基法掃描器》歡迎頁

去年一整年都在逃避的專案,前些日子終於做到一個段落(淚)

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

2018年2月16日 星期五

blogging | 寫作

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

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

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

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

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



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

2018年2月9日 星期五

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

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



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

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

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

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



Demo 版 MV:

卡啦 ok 版 MV:

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