Latest

從 Wordpress 換到 Ghost,PHP 到 Node.js

Hina

從 Wordpress 換到 Ghost,PHP 到 Node.js

自從舊的部落格變慢、疑似被 hack 之後,我一整年都沒辦法好好寫文章(對,都是 they 的錯),即使這一年發生了我這輩子最特別以及最痛苦的事情,人生也走到了像雲霄飛車般沒辦法想停就停就算太刺激也只好接受的階段,成長很多卻沒有留下可被閱讀的痕跡,只有不斷在變形並欺騙自己的回憶、以及身邊親友收集關於我的斷簡殘編般的心事,用無法重現的方式留下來。 一直都很想重新開始寫東西,最後甚至把想法寫在 Evernote 和 Google Keep。但無法分享、無法好好整理,缺乏動力到最後都只好作罷。 上個月 Hina 像神一樣降臨。他自己的 Blog 在改為 Node.js 的 Ghost 之後(Hina 的部落格:HINA::工程幼稚園),聽到我的 Wordpress 有問題,幫我看了一下,原來造成這麼慢的原因是根本沒顯示在前台的留言區被垃圾訊息灌爆,每則文章都有上萬則留言,所以打開網站變得極慢。 知道問題之後就要解決問題,解決方式就是一起換成 Ghost。自從

By Hana 花水木
Google Nexus 5 替換筆記

其他類型

Google Nexus 5 替換筆記

今年三月受到朋友影響,我從原本的 Apple 派(從 iPhone 3GS 到 iPhone 5 再到 iPad & iPad Mini 不離不棄)忽然轉換成 Android 派,第一支使用的就是 Google Nexus 5。記得剛轉換的時候痛苦指數很高,因為原生的 Android 基本上除了 Google 內建的一些爛 apps 之外一點也不親切便利。外型也醜。 直到黃郁棋大哥告訴我有 Aviate 之後,我對 Android 完全改觀。雖然仍舊不是完美,但使用 iPhone 的時候我也從不覺得那是完美的,從那之後,就決定我要喜歡 Android 系統。 但我的手機一直以來都難逃摔裂螢幕的命運,我的小白恩(Nexus 5)

By Hana 花水木
白夜行

白夜行

最近開始學習用看書填補時間的片段。剛看完的是白夜行,這種小片段小片段、看似不相干的故事一節一節像是紀錄片一樣的寫作手法好特別,東野圭吾在通俗到不行的題材上別出新裁,並能有一定程度的發人深省,真是厲害!更厲害的是,我直到最後一節,都沒猜出雪穗和亮司最一開始合作殺亮司爸爸的動機:戀童癖。這是我沒想到的,所以有震驚到。就像原罪犯(韓國電影),最後的那個亂倫梗如果一開始就知道,就沒有這種震驚了。但懸疑劇情要把關鍵隱瞞到最後往往是不容易的事情,在抽絲剝繭的過程中,很容易會能有讓人猜出結局的部分。 看完之後意猶未盡,就開始找有沒有翻拍的電影或影集,結果有,還不只一部,2006年改編為電視劇,2009年韓國、2011年日本相繼改編為電影。 首先我看了 2011 年日本改編的電影,據說是最忠於原著的。從頭看到尾,演員的確很符合小說裡的形象,女主角堀北真希雖然不像小說中那樣讓人驚艷,但個性表現倒是滿像的。男主角高良健吾真的和小說很吻合。人物都挑選的很好,也有表現出悲苦童年造成封閉自我、並不擇手段為了達利益不斷害人。並沒有因為他們是主角而把他們演成好人讓我鬆了口氣。 可是,電影要改

By Hana 花水木
關於一個女孩的夢

心情垃圾

關於一個女孩的夢

做了不怎麼開心的夢。最近東野圭吾養分吸收過多,融在體內,進行負面能量的中和,在夢裡代謝。 醒來的時候很想哭,可是又找不到原因。 我和一個漂亮、聰明、有魅力,找不到任何缺點的女孩在一起,她有著令人羨慕的起伏人生,和我的平庸成為對比。當我們從野外走進一棟建築物的時候,我偶然看到她的手指有被綑綁的痕跡,我問她,那是什麼?她說這是之前吸毒戒毒的痕跡。她的手指纖細的令人心疼。我說噢!我以為那是減肥貼布呢!然後看到自己的手背,好粗短呢!我想,減肥貼布可能只有我需要用吧!然後為自己無趣的減肥貼布理論自卑。人家哪會做這種平淡人生才會做的事情呢? 走進建築來到七樓,原來這是一棟醫學大樓,她的父親坐在輪椅上,面部痿縮到像是壞掉的紅蘿蔔,身上插了很多管,似乎聽、說都有困難,我不敢直視。女孩用力的說了幾句話,然後退到旁邊。我不知為何也走上去說了幾句話,只為了表現出一副正常姿態的樣子。 我記得我的不知所措,對於殘疾人士的應對照顧,對於重度殘疾家屬的關懷,我都沒辦法表現的得體大方,說穿了就是被嚇到。 然後我大姊出現了,她是一名護士,來照顧這位病人。我對自己深深反感,我一直以來羨慕的她,原來有這樣痛

By MIZU 水
網站搬家了!把 Wordpress 搬到 AWS 上面

網站搬家了!把 Wordpress 搬到 AWS 上面

喵,即將離開貓咪兩個多月,I miss you already! 七年前開始寫部落格,一開始是虛擬主機,後來經銷主機,再搬到獎金獵人所在的實體主機,今天終於上雲端,搬到 AWS 了,不能說這樣比較潮,但是自從上週發現實體主機管理困難,造成被開漏洞三個月都還不知不覺,深覺學架網站不學系統實在不行。所以就開始實作,用 AWS 來架站。 AWS 的 Micro 方案第一年都免費,方案的規格為: 613 MiB memory Up to 2 EC2 Compute Units (for short periodic bursts) EBS storage only 32-bit or 64-bit platform I/O Performance:

By Hana 花水木
自訂 Google Analytics 報表分析瀏覽器趨勢

新創筆記

自訂 Google Analytics 報表分析瀏覽器趨勢

(圖來自 Kevin Dooley) 今天看到這篇文章「驚!最新調查:IE 「仍」是用戶最愛的瀏覽器!」嚇了一跳,獎金獵人很早就已是 Chrome 使用者最多,今年初的新版型開始 CSS3 。測試上,完全 OK 的是 Chrome、Firefox、IE9以上、Safari,IE7~8 閱讀還行,但是 CSS3 圓角、陰影就會看不見,我也懶得為了老舊瀏覽器使用者製作圓角圖。 但為了更進一步確認,所以著手分析了獎金獵人的使用者使用的瀏覽器。 Google Analytics 永遠是使用者分析最好的工具,不過他的瀏覽器報表卻不大好用。看起來是這樣的, 加上次要維度之後可以看出瀏覽器版本的差異。 不過如上圖, Chrome 版本號 24 開頭的也太多了,但對我們來說都是一樣的,我們需要把這些資料整理一起,這樣比較才有意義。 好在 Google Analytic

By HANA 花
酒釀湯圓驚點食譜

湯圓

酒釀湯圓驚點食譜

今天去鼎泰豐吃午餐,看到菜單有酒釀湯圓,心一喜就點來嘗試。三年前愛上酒釀的味道之後,曾經日日晨起吃酒釀蛋,但是好一陣子沒再吃了,剛好元宵,就試著煮酒釀湯圓。 想像中的酒釀湯圓很簡單:燒一鍋水,水滾後打蛋、煮湯圓,另外製作冰糖水、並和酒釀放一碗,蛋和湯圓煮熟後撈起混合即可,可加一些桂花漿。可是雖然我自己很愛吃自己煮的,姊姊吃過也喜歡之外,沒有第三人說過好吃,前些日子每次煮也都給 B 嘗試,但是每次都被退回。因此我一直認為酒釀是個親和力不足的食材,不是每個人都可以接受的。(我是可以直接吃酒釀的那種人,不知人間疾苦) 今天嘗試鼎泰豐酒釀湯圓,是第一次吃真正的酒釀湯圓,真正的。也就是大眾口味可以接受的那種。結果 B 說很好吃,讓我很不服氣。在細細品味之後,發現真的很好吃,有桂花的味道、而且很甜,酒釀米粒顆顆分明,軟軟的卻仍保有彈性,並且蛋花非常的細碎,漂亮的和酒釀的湯汁融合在一起。平常我自己煮酒釀蛋,是偏好整顆蛋黃半生不熟、吃的時候才搗碎的,而且我不加糖,所以吃起來酒釀味很重。(酒釀本身就有甜味) 吃完鼎泰豐之後到

By HANA 花

新創筆記

Grid 格子列表之 CSS 前製規劃 (下) Responsive Design

承上篇「Grid 格子列表之 CSS 前製規劃 (上)」主要整理了寫 Grid Display 時總寬度、元素寬度和間距寬度的算法,今天想分享的是加上 Responsive Design 時,土法煉鋼的算法。 發表上篇之後,小時候就很崇拜的 Even Wu 大哥跟我介紹了 Susy 這個 Grid System,專門給 Compass 用的,試用過後還滿喜歡的,這邊也介紹給大家。 Susy: Responsive grids for Compass. http://susy.oddbird.net/ 不過因為我要的是內容呈現時的格子,每個頁面需要的 Grid Display 元素寬度又不盡相同,加上我已經土法煉鋼地用手算了,研究魂燃起,還是算完它吧! 在 Facebook 分享時,

By HANA 花

新創筆記

Grid 格子列表之 CSS 前製規劃 (上)

去年開始小妹立志要朝有數字根據的理性使用者分析來做介面,開始重視網站相關的所有數據,真的獲益不少呢!昨天分享的 比賽列表介面 A/B Test 目前已有初步結果,但取樣數還是不夠,下星期再把結果分享給大家。今天想做一下 Layout 規劃筆記。 在重新設計獎金獵人的時候,寫 SASS (CSS) 前花了不少時間做全站整體規劃。尤其站內除了「比賽」之外,新加了「作品」,而「比賽」和「作品」在 Grid 顯示底下有不同設計,因此花了些時間計算出每個 item 的寬度以及 item 之間的間距,並讓不同寬度總寬度都符合 980px。 在做 Grid 格子狀顯示的時候,因為希望左右可以完全貼齊總寬度,讓整體視覺更飽滿平衡,所以寬度的計算裡 margin 必須少算一次,才能達到 one pixel matters

By HANA 花

網頁介面A/B Test 筆記 (Google Analytics Experiments)

昨天第一次使用 Google Analytics 的 Experiments 來做介面上的 A/B Test,還滿好玩的所以來筆記一下。 由來 獎金佈告從上次改版開始,比賽資訊清單的顯示方式預設就是「格子狀」,像是這樣的。 上個月改版大幅增進了顯示的介面,並且可以隨時切換成「條列式」。像是這樣的。 我們覺得「格子狀」比較漂亮,所以一進去預設是格子狀的,但是陸陸續續許多使用者說,他們比較喜歡條列式,另外我們使用 CrazyEgg 觀察的結果也顯示很多人一進來就會點選「切換顯示模式」,所以我們認為有可能預設就是條列式對我們真正的使用者比較有用。 但是,就這樣換了嗎?那可不行,光憑感覺一點也不科學,上次去 WebConf 聽廖大的演講,覺得他的標題下的好:「超理性使用者介面設計」,真的,一切都要測試,用數字來說話。 因此我準備了另一個獎金佈告頁面,一進去預設就是「條列式」。準備好之後,這次的實驗就開始了。詳細的準備步驟如下: 1. 準備實驗專用頁面

By HANA 花

人民團體(社團法人、協會)會址變更正式流程筆記

(圖:Hong Kong from the peak on a summer’s night CC授權) 前年底從倫敦流浪回台灣之後,我就一直沒有固定的住處,很感謝潘醫師收留了我在TBA打工兼清掃,順便學習擔任協會秘書。以前一直以為所謂的秘書、助理不過就是打打雜工,但是這一年來,雖然只是簡單的協會秘書,我卻深深感受到所謂的「雜事」真的不是那麼容易的,心思不夠細密、作事不夠俐落還真的很容易出問題、浪費更多時間。而且很多「雜事」都是流程複雜、一出錯就整個需要重來的,當然,做過一次就熟悉了,但是大部分的雜事,都是第一次做,重複性不高呢! 我自己覺得我做的不夠好,很多事情沒辦法做到思慮周全,因為我天生就是比較粗線條的。但是這是個學習的歷程,挑戰自我也很棒呢! 最近剛好跑了這個流程,發現在網路上實在很不容易找到這種資訊,所以在這邊做個筆記。雖然這種需求太 Specific 了些,不過做個筆記也好。 以下是全國性人民團體會址變更(地址更改、搬家)

By HANA 花

[酒館對話] 獎金獵人角色徵選 作品精選

對於獎金獵人,我和Roxman從一開始就決心灌入遊戲元素,有世界觀、故事和人物。第一年開始舉辦角色徵選,當時是要徵選「恰吉」,他是一個非人類的酒館吉祥物,徵選出來大約50件,得獎作品用在之後的網站設計裡。第二年是以我為藍本、酒館的核心人物老闆娘的角色設計,結果接近一百件(可到由我們會員幫忙建立的「第二屆獵人盃!!代言人角色設計創意設計~作品欣賞」觀看),今年則是做酒館裡面另一個靈魂人物、由Roxman為藍本的「酒吧魔人」的角色設計徵選。 歷經一個月的徵選,這次總共約200個畫師投稿,今天開始投票,公司今天討論起大家心目中的酒吧魔人。看到大家的創意和技術碰撞出來的作品,有人很厲害,有人很創新,有人很惡搞,有人很天真,讓我不禁想分享一些作品觀賞的片段對話。 之一、 洛克仔:「這個有帥到」 我:「真的,剛開槍都還在冒煙」 少年:「這個才帥」 之二、 少年說:「這個酒吧魔人追老闆娘應該可以成功」 之三、 葛蕾斯:「大家應該要投這個」 我:「不行吧!這位也太帥了!比老闆娘帥,

By HANA 花