Indiana's Blog: program

顯示具有 program 標籤的文章。顯示所有文章

星期五, 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 文件的建議：

建立一個資料夾「lib」，把第三方模組都放在這裡面。
新增一個檔案 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 目錄就可以了。

星期三, 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)

安裝 Emmet package for Sublime Text
重新開啟 Sublime Text
就可以在任何 html tag 上使用快速鍵找到結束位置：

CTRL+ALT+J (Linux / Windows)
CTRL+SHIFT+T (OSX)

星期三, 10月 01, 2014

[Gulp] html 裡 include 的是 css 檔案，為什麼我們修改 scss 檔案，能夠即時修改輸出結果？而且在 watch 模式下還是把輸出檔案暫存在 .tmp 目錄下？？

主要是跟 styles, watch, connect 這幾個 task 有關：

在 styles task 裡，我們先設定要針對哪些 scss 檔案作轉換處理；然後輸出到 .tmp/styles 目錄下。

// scss files
var scss_files = [
// 'app/styles/main.scss',
'app/styles/**/*.scss',
// smartadmin common_assets
'COMMON_ASSETS/SASS_FILES/scss/bootstrap.scss',
'COMMON_ASSETS/SASS_FILES/scss/smartadmin-production.scss',
'COMMON_ASSETS/SASS_FILES/scss/library/fontawesome/font-awesome.scss',
'COMMON_ASSETS/SASS_FILES/scss/smartadmin-skins.scss',
'COMMON_ASSETS/SASS_FILES/scss/smartadmin-skins.scss'
];
gulp.task('styles', function () {
return gulp.src(scss_files)
.pipe($.rubySass({
style: 'expanded',
precision: 10
}))
.pipe($.autoprefixer('last 1 version'))
.pipe(gulp.dest('.tmp/styles'))
.pipe($.size());
});

在 watch task 自動載入下，指定要監看哪些檔案，並做出哪些相對應動作（這裡是利用 dependency 聯動 task 的方式）。

gulp.task('watch', ['connect', 'serve'], function () {
var server = $.livereload();
// watch for changes
gulp.watch([
'app/*.html',
'.tmp/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*'
]).on('change', function (file) {
server.changed(file.path);
});
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('app/images/**/*', ['images']);
gulp.watch('bower.json', ['wiredep']);
});

那放在 .tmp/styles 的檔案，如何能讓 html 連結到？html 裡頭寫的是 <link rel="stylesheet" type="text/css" media="screen" href="styles/main.css">？

這是因為 watch 的 dependency 裡有 connect task。在啟動 server 時，利用 connect.static 來指定「靜態文件服務器的路徑」，也就是 html 裡用到的所有相對路徑的根目錄。這裡預設了兩個靜態文件目錄，一個是 app，另外一個是 .tmp。所以如果我們需要找到 styles/main.css，系統會先去找 app/styles/main.css 是否存在，如果沒有，才會去找 .tmp/styles/main.css。

gulp.task('connect', function () {
var connect = require('connect');
var app = connect()
.use(require('connect-livereload')({ port: 35729 }))
.use(connect.static('app'))
.use(connect.static('.tmp'))
.use(connect.directory('app'));
require('http').createServer(app)
.listen(9000)
.on('listening', function () {
console.log('Started connect web server on http://localhost:9000');
});
});

星期二, 9月 30, 2014

[Gulp] 輸出檔案(dest)的資料夾結構保持跟來源檔案(src)一致

gulp 針對某目錄下的所有檔案處理後，如果要能根據目錄結構輸出到另一個目錄，記得要指定 {‘base’: 來源根目錄}：

https://github.com/gulpjs/gulp/blob/master/docs/API.md#optionsbase

// without the 'base' set
gulp.src('app/**/*.scss') // file: 'app/css/somefile.scss'
.pipe(gulp.dest('build')); //-> file base: 'app/css'
// relative path: 'somefile.scss'
// write path: 'build/somefile.scss'

// with the 'base' set
var glob = 'app/**/*.scss';
gulp.src(glob, { base: 'app' }) // file: 'app/css/somefile.scss'
.pipe(gulp.dest('build')); //-> file base: 'app'
// relative path: 'css/somefile.scss'
// write path: 'build/css/somefile.scss'

星期四, 9月 11, 2014

[Gulp 問題] “Possibly unhandled Error: path should be string...” when gulp build

不知怎搞的，才剛 build 沒事，緊接著改了無關緊要的 code，就出現了如下的錯誤訊息：

indiana@indiana-dt:.../program/web/my-project$ gulp build
[10:52:54] Using gulpfile ~/program/web/my-project/gulpfile.js
[10:52:54] Starting 'styles'...
[10:52:54] Starting 'scripts'...
[10:52:54] Starting 'images'...
[10:52:54] Starting 'fonts'...
[10:52:55] Starting 'extras'...
[10:52:55] Starting 'move'...
/home/indiana/program/web/my-project/app/scripts/facebook.js
line 46 col 9 'alert' is not defined.
line 63 col 50 'params' is defined but never used.
line 82 col 52 'widget' is defined but never used.
line 82 col 46 'href' is defined but never used.
✖ 4 problems
Possibly unhandled Error: path should be string
at File.Object.defineProperty.set (/home/indiana/program/web/my-project/node_modules/gulp/node_modules/vinyl-fs/node_modules/vinyl/index.js:166:41)
at Function.assign (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/lodash-node/modern/objects/assign.js:63:21)
at /home/indiana/program/web/my-project/node_modules/gulp-cache/lib/TaskProxy.js:20:19
at tryCatch1 (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/util.js:64:19)
at Promise$_callHandler [as _callHandler] (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/promise.js:708:13)
at Promise$_settlePromiseFromHandler [as _settlePromiseFromHandler] (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/promise.js:724:18)
at Promise$_settlePromiseAt [as _settlePromiseAt] (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/promise.js:896:14)
at Promise$_fulfillPromises [as _fulfillPromises] (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/promise.js:1041:14)
at Async$_consumeFunctionBuffer [as _consumeFunctionBuffer] (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/async.js:64:12)
at Async$consumeFunctionBuffer (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/async.js:37:14)
Possibly unhandled Error: path should be string
at File.Object.defineProperty.set (/home/indiana/program/web/my-project/node_modules/gulp/node_modules/vinyl-fs/node_modules/vinyl/index.js:166:41)
at Function.assign (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/lodash-node/modern/objects/assign.js:63:21)
at /home/indiana/program/web/my-project/node_modules/gulp-cache/lib/TaskProxy.js:20:19
at tryCatch1 (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/util.js:64:19)
at Promise$_callHandler [as _callHandler] (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/promise.js:708:13)
at Promise$_settlePromiseFromHandler [as _settlePromiseFromHandler] (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/promise.js:724:18)
at Promise$_settlePromiseAt [as _settlePromiseAt] (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/promise.js:896:14)
at Promise$_fulfillPromises [as _fulfillPromises] (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/promise.js:1041:14)
at Async$_consumeFunctionBuffer [as _consumeFunctionBuffer] (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/async.js:64:12)
at Async$consumeFunctionBuffer (/home/indiana/program/web/my-project/node_modules/gulp-cache/node_modules/bluebird/js/main/async.js:37:14)
[10:52:55] gulp-size: total 19.5 kB
[10:52:55] Finished 'scripts' after 864 ms
[10:52:55] Finished 'move' after 234 ms
[10:52:55] gulp-size: total 699.12 kB
[10:52:55] Finished 'fonts' after 421 ms
[10:52:55] Finished 'extras' after 258 ms
npm WARN package.json wifi@0.0.0 No description
npm WARN package.json wifi@0.0.0 No repository field.
npm WARN package.json wifi@0.0.0 No README data
[10:52:56] gulp-size: total 130.39 kB
[10:52:56] Finished 'styles' after 2.24 s
[10:52:56] Starting 'html'...
[10:53:15] gulp-size: total 2.08 MB
[10:53:15] Finished 'html' after 19 s
indiana@indiana-dt:.../program/web/my-project$

參考文件： https://github.com/jgable/gulp-cache/issues/24

星期六, 8月 30, 2014

[Gulp 問題] Task ‘fonts’ with package ‘gulp-bower-files’ miss some .eot,svg,ttf,woff files

gulp build 時，task ‘fonts’ 應該會透過 package ‘gulp-bower-files’ 的指令 bowerFiles 掃描所有 bower_components 下所有的檔案，並把附檔名為 **/*.{eot,svg,ttf,woff} 的檔案全都複製到 dist/fonts 下才對。但不知道為什麼只有 copy 了 bootstrap-sass-official 下的，卻漏掉 components-font-awesome 下的，造成錯誤。

參考文件： https://github.com/yeoman/generator-gulp-webapp/issues/71#issuecomment-40327323