星期五, 8月 25, 2017

加了 gzip 以後,mp3 檔案無法播放

自從 server 加上了 gzip 處理後,前端頁面的音效 mp3 就出不來了(後來才發現是 gzip 的問題)...

播放時,console 會出現:
Failed to load resource: net::ERR_CONTENT_DECODING_FAILED

看一下 Network,也有帶驚嘆符號的「Provisional headers are shown」字樣


看了一堆文章後,發現跟 gzip 有關,所以去 AWS S3 把 gzip 的 Metadata 拿掉


結果沒用... @@

最後是直接把這個檔案刪除,重新上傳一個沒有 Content-Encoding: gzip 的 mp3 檔案,才解決了這個問題。

星期四, 3月 30, 2017

[Angular] App 是如何開始載入與運行的(進入點)

Angular (2.x/4.x) 入口:main.ts → 透過 bootstrapModule 把 AppModule 綁進來

app.module.ts 裡頭透過 bootstrap array,告訴 angular 有多少 components 要被用到。由於 index.html 裡頭不會引入其他 html 或 css 等資訊,那 angular 是如何知道去哪裡找這些資源?就是透過這個 NgModule 的 declarations,告訴 angular 我們需要用到哪些 components。

其中 app.component.ts 就會定義 Component 的 selector 名稱、html template、css 等內容

星期四, 10月 06, 2016

Google App Engine 使用 requests 時遇到 "no module named requests" 錯誤

開發 Google App Engine 應用,使用 requests 來發 RESTFul API 時,遇到了 "no module named requests" 錯誤。網路上一堆文章都是教你如何利用 pip 或 easy_install 來安裝 requests 模組。但是我還是持續看到同樣的錯誤訊息。

後來看到這篇 Stackoverflow 的回文指出:

Adding Third Party Python Libraries

You can include third party Python libraries with your application by putting the code in your application directory. If you make a symbolic link to a module's directory in your application directory, appcfg.py will follow the link and include the module in your app.

The Python module include path includes your application's root directory (the directory containing the app.yaml file). Modules you create in your application's root directory are available using a path from the root. Don't forget to create__init__.py files in sub-directories, so Python will recognize the sub-directories as packages.

大致上是說任何第三方模組,都必須放在應用的根目錄(跟 app.yaml 相同目錄)裡,但這樣一來,整個目錄就都是第三方模組的檔案夾,會非常雜亂。所以這時候可以參考 GAE 文件的建議
  1. 建立一個資料夾「lib」,把第三方模組都放在這裡面。
  2. 新增一個檔案 appengine_config.py,裡頭寫入:
from google.appengine.ext import vendor
# Add any libraries installed in the "lib" folder.
vendor.add('lib')

這樣子就能夠把 requests 這個模組放到這個資料夾裡。如果懶得新增模組,也可以建立一個 symbolic link 指向 python 的 package 目錄就可以了。


星期三, 9月 09, 2015

不只人帥,連字都帥氣的英俊體

昨天睡前滑了一下臉書,才知道 Justfont 眾籌大爆發這個事件,昨晚看到已經超標達百萬級,剛剛一看不得了,居然已經衝破千萬!?真是太優秀了!(募資活動網頁:金萱,新時代中文字型,培育新鮮台灣文字風景

這讓我想起了 2014 年 Justfont 剛好在父親節前推出了訂製手寫字服務,我馬上購買了一份當作父親生日禮物。(原本沒趕上限量優惠的活動期限,但剛好在某創業活動遇到了創辦人 Michael,跟他拿到了優惠名額!)

因為父親的字型很有特色,我當初在社團畫海報、寫 POP和毛筆字,受他影響很多,但就是沒辦法寫出他字體那種瀟灑與氣勢。過去我陸陸續續有找過自製字體的相關工具與方法,甚至還寫信去問過 Justfont 的朋友,但後來還是沒有試成功...

星期二, 9月 01, 2015

JBC 晚宴紀錄暨 Indiana's Blog 回顧文

昨晚參加了 Jamie 的 JBC (Jamie's Blogging Challenge) Thank You Dinner,一下子化身成為部落客了... 雖說好像寫了部落格就是部落客,但總覺得「部落客」這個稱號是指那些產出文章質量更高、關注者更多的作者。沒想到當時只是回應一下 Jamie 的貼文,竟獲得了正式的邀約!結果昨晚在場的大都是正港的優質部落客,這頓飯吃得還真是不好意思... :p (後來大家都在強調自己部落格 SEO 的成績,想當初我的 前十字韌帶復健系列 推出時,Google 輸入「前十字韌帶」的搜尋結果也是前三... 哈,這樣可以嗎?^^)
沒想到自己的 151 篇網誌能換來一頓台北寒舍艾麗 la Farfalla 義式餐廳晚宴

昨晚的聚會,大家除了自我介紹外,也規定要說一下近來最驕傲、最值得分享的一件事,以及最不想讓人知道的事。最不想讓人知道的事情,就不多說了(也許以後有機會在 Startup 系列 再多做分享)。至於最值得驕傲的事情,我仔細回想,其實這一路走來的創業歷程,也真的是跟部落格有關...

星期三, 1月 14, 2015

Sublime Text Plugin "AutoBackups"

唉... 杯具了... 沒有把 Git 弄熟,只會基本的 clone, pull, commit, push和一點 branch... 每次寫程式都感覺要寫到一個程度才 commit + push,沒有養成經常在 local commit 的習慣。結果因為手殘誤在某個 bower_components package 裡,下了 git reset --hard HEAD^ 把兩天的成果都給輕乾淨了...

至於為什麼會這麼搞,說來話長。總之痛過一次就學乖了... 不過,為了避免將來有其他耍笨的時候,還是裝了 Sublime Text 的自動備份 plugin「AutoBackups」。他可以在每次存檔的時候幫忙建立備份,備份資料的資料夾會以日期命名(yyyy-MM-DD),檔案名稱則是會自動加上時間(filename_HHmmss),所以可以回溯到每次存檔的階段。如果怕檔案累積量太大,也可以設定保留的時間(比方30天後自動刪除)。初步用起來感覺還不錯,推薦給各位試試。

星期二, 1月 06, 2015

Sublime Text 3 在 html tag pair 快速來回跳動 (go to matching pair)


  1. 安裝 Emmet package for Sublime Text
  2. 重新開啟 Sublime Text
  3. 就可以在任何 html tag 上使用快速鍵找到結束位置:
    • CTRL+ALT+J (Linux / Windows)
    • CTRL+SHIFT+T (OSX)