MAMP 的 Apache httpd-vhosts.conf 設定

#
# Use name-based virtual hosting.
#
NameVirtualHost *:80

<Directory "/Users/shinder/Dropbox/my_proj">
    Options       All
    AllowOverride All
    Order         allow,deny
    Allow         from all
</Directory>

<VirtualHost *:80>
    DocumentRoot "/Users/shinder/Dropbox/my_proj"
    ServerName   my_proj.shinder
    ErrorLog     "logs/my_proj-error.log"
    CustomLog    "logs/my_proj-access.log" common
</VirtualHost>

在 Mac 上昇級 PHP cli 版本的另一種方式

最近因為 laravel 以 Mac 使用 PHP cli 時，發現 Mac 內附的 PHP cli 沒有 Mcrypt extension。依照 Apple 官方的做法是下載原始碼重新編譯，常常是在 make install 過程得到一堆 warnings 然後就卡住了。

這裡的方式是直接安裝 MAMP 免費版，MAMP 3 本身就包含數個版本的 PHP，包含 PHP 5.5 及 PHP 5.6。

/Applications/MAMP/bin/php/php5.5.18/bin/php -m

在 terminal 執行上式，可以得知 MAMP 所內附的 PHP 5.6 cli 包含了哪些 modules。

我使用的 Shell 是 ZSH，所以編輯 ~/.zshrc ，最後面加入下式

export PATH="/Applications/MAMP/bin/php/php5.5.18/bin:$PATH"

儲存 .zshrc 後，離開 terminal，再進入就可以使用較新版本的 PHP cli 了。

在 DigitalOcean 上快速建立 LAMP + FTP server

在 DigitalOcean 上快速建立 LAMP + FTP server 筆記

1. 在 DigitalOcean 上建立 Droplet
    輸入 Droplet Hostname
    選 $5/mo (視需求而定)
    選 Singapore (目前離台灣最近的點)
    勾選 Enable Backups (視需求而定)
    選 Applications/ LAMP on 14.04 (現成的)
    Create Droplet

2. 使用 Shell 透過 ssh 登入
    ssh root@000.000.000.000 (主機 IP)
    預設的密碼會透過 email 寄給你

3. MySQL root 密碼所在位置
    /etc/motd.tail

4. 安裝 vsftpd
    sudo apt-get install vsftpd

5. 修改 /etc/vsftpd.conf
    write_enable=YES
    local_umask=002 (視情況而定, 檔案上傳後的 chmod mask)
    chroot_local_user=YES

6. 重新啟動 vsftpd
    service vsftpd restart

7. 建立新的系統用戶
    adduser myftpuser

8. 在 /home/myftpuser 下建立子目錄 www/html
    mkdir www

9. 設定 www 目錄及子目錄屬性
    chmod 777 www/ -R

10. 設定家目錄為不可寫 a-w (vsftp 的規定)
    chmod a-w ./myftpuser/

11. 修改 apache2 設定 /etc/apache2/apache2.conf 加入
    <Directory /home/myhomesftp/www/>
        Options FollowSymLinks
        AllowOverride All #mod_rewrite 需要
        Require all granted
    </Directory>

12. 設定啟用 mod_rewrite
    到 /etc/apache2/mods-enabled 設定 soft link
    ln -s ../mods-available/rewrite.load ./

13. 設定 vhost
    修改 /etc/apache2/sites-enabled/000-default.conf
        ServerName 000.000.000.000  #暫時，應該是 domain name
        DocumentRoot /home/myftpuser/www/html

14. 啟用 mcrypt 模組 (phpmyadmin 需要)
    php5enmod mcrypt

15. 啟用 PHP 的 short open tag
    修改 /etc/php5/apache2/php.ini
        short_open_tag = On
        memory_limit = 256M
        post_max_size = 32M
        upload_max_filesize = 8M

16. 重新啟動 apache2
    service apache2 restart

17. 利用 FTP 上傳檔案 (可以順便放上 phpmyadmin)
    檔案上傳之後，可以用下式修改所有檔案屬性
        chmod 777 html -R
    phpmyadmin 必須使用 755

18. 利用 phpmyadmin 上傳 sql 檔

19. 校正系統時間
    ubuntu 設定時區
        dpkg-reconfigure tzdata # 選 Asia - Taipei
    校正時間
        ntpdate time.stdtime.gov.tw
    vsftpd.conf 的 use_localtime 會影響 FileZilla client 的對時, 可以設定為 No

Mac OS X 上 PhpStorm 8 中文輸入的問題

用 vi 編輯 /Applications/PhpStorm.app/Contents/Info.plist
sudo vi /Applications/PhpStorm.app/Contents/Info.plist

在 <key>VMOptions</key> 的 <string> 節點內最後加上

 -J-Djava.awt.im.style=on-the-spot

存檔，重新啟動 PhpStorm 就可以了。

從 iframe 取得 document 和 cookie

Cordova 製作的 App, 取得 iframe 的 cookie 方式

var iframe = $('#iiframe')[0];
var win = iframe.contentWindow || iframe;
var doc = iframe.contentDocument || iframe.contentWindow.document;
alert(doc.cookie);

使用 Cordova 打包測試 Android App (Windows 7)

記錄 Cordova 大致的使用流程:

1. 安裝 JDK, NodeJS, Git client (Git client 不是必要的, 不過最好裝起來)。
2. 安裝 Android-SDK。
3. 安裝 Ant build。
4. 以 npm 安裝 cordova (global)。
5. 使用 cordova cli。

JDK, NodeJS 和 Git client 安裝就不贅述。

2. 安裝 Android-SDK:
    a. 下載解壓縮 adt-bundle (C:\Users\shinder\workspace\adt-bundle-windows-x86_64-20140702)。
    b. 設定系統變數 ANDROID_SDK 為 "C:\Users\hsin-te.lin\workspace\adt-bundle-windows-x86_64-20140702\sdk"。
    c. 將以下兩個路徑加入系統變數 PATH: %ANDROID_SDK%/platform-tools 和 %ANDROID_SDK%/tools。

3. 安裝 Ant build:
    a. 下載解壓縮 ant (C:\Program Files\Java\apache-ant-1.9.4)。
    b. 設定系統變數 ANT_HOME 為 "C:\Program Files\Java\apache-ant-1.9.4"。
    c. 將 %ANT_HOME%/bin 加入系統變數 PATH。

4. 以 npm 安裝 cordova:
    npm install -g cordova

5. 使用 cordova 及 android cli:
    a. > cordova create hello com.example.hello HelloWorld  #建立資料夾為 hello 的預設專案。
    b. > cd hello  #進入專案資料夾
    c. > cordova platform add android  #加入 android 平台
    c1. 將出現錯誤, 因為 cordova 3.6 必須使用 android-19
    c2. 可以先查看目前安裝的版本: android list target
    c3. 使用 "SDK Manager.exe" 安裝 "android-19" 的 SDK platform 及 System Images
    d. > cordova platform add android  #再執行一次
    e. > cordova build  #建立 apk
    f. > cordova build --release  #建立發佈用的 apk
    g. > cordova emulate android  #使用 emulator 執行 apk

6. 若沒有設定模擬器 (emulator) avd:
    > android list targets  #先查看提供的版本
    > android create avd -n and442 -t "android-19" --abi "default/x86"  #建立 avd

7. 測試執行可以使用 BlueStacks App player

8. 使用 BlueStacks 必須使用簽證過的 apk (release version)

9. 使用 Java 工具建立 keystore file:
    > keytool -genkey -v -keystore my_android.keystore -alias shinder -keyalg RSA -keysize 2048 -validity 10000

10. apk 簽證:
    > jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my_android.keystore .\platforms\android\ant-build\HelloWorld-release-unsigned.apk shinder

11. In BlueStacks
"/storage/sdcard/windows/BstSharedFolder" maps to "C:\ProgramData\BlueStacks\UserData\SharedFolder"

ExtJS 5 專案開發時不使用 bootstrap.js 的方式

Sencha 建議使用 Sencha CMD 來建立 ExtJS 5 的專案, 以及進行發佈.
但在較大的專案, 許多現有的工具都比 Sencha CMD 要來得好用, 但目前以 Sencha CMD 建立的專案, 似乎只能用 Sencha CMD 發佈.

為了讓專案有良好的 MVC 架構, 在此依然使用 CMD 建立, 但會考慮以 GruntJS 做發佈。

1. 首先在解壓縮的 ext-5.0.1 目錄使用 CMD 建立專案:

sencha generate app ext501 ../ext501

2. 修改 app.js (設定套件名稱對應的路徑, 載入 Application, 設定引入的類別)

 Ext.Loader.setPath({
  'Ext': 'ext/src',
  'ext501': 'app'
 });
 Ext.syncRequire('Ext.app.Application');
 Ext.application({
  name: 'ext501',
  extend: 'ext501.Application',
  requires: [
   "Ext.layout.container.Border",
   "Ext.tab.Panel",
   "ext501.view.main.MainController",
   "ext501.view.main.MainModel"
  ],
  autoCreateViewport: 'ext501.view.main.Main'
 });

3. 修改 ext501.view.main.MainController 的 requires, 不能用 shortcut

    requires: [
        'Ext.window.MessageBox'
    ],

4. 建立 index_app.html

 <html>
 <head>
  <title>ext501</title>
  <link href="ext/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css" rel="stylesheet" type="text/css"></link>
  <script src="ext/ext-all.js" type="text/javascript"></script>
  <script src="ext/packages/ext-theme-classic/build/ext-theme-classic.js" type="text/javascript"></script>
  <script src="app.js" type="text/javascript"></script>
 </head>
 <body></body>
 </html>

5. 啟動 web server 拜訪 index_app.html 查看 default project 的運作。

IE8 和 Bootstrap 3

參考 IE8 issue with Twitter Bootstrap 3

shiv 讓 IE8 支援 HTML 5 標籤
respond.js 讓 IE8 支援 media query

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

另外, 最好的方式還是用 Modernizr 來判斷哪些功能沒支援, 不要直接判斷是否為 IE8.

JavaScript 載入資源時的 Sync 和 Async 作法

1. 同步執行 JavaScript (Sync)
在現有的 <script> 之後加入另一個 <script> 標籤 (嚴格講起來, 不算真的 sync)

var s = document.createElement("script");
s.type = 'text/javascript';
s.src = "js-url.js";
document.write(s.outerHTML);

2. 非同步執行 JavaScript (Async)
在 <head> 裡加入 <script> 標籤

var s = document.createElement("script");
s.type = 'text/javascript';
s.src = "js-url.js";
document.getElementsByTagName("head")[0].appendChild(s);

3. 使用 XMLHttpRequest 同步取得 JSON (Sync)

var jsonFile = 'test.json';
var req = new XMLHttpRequest();
req.open("GET", jsonFile, false); // "false": synchronous
req.send();
console.log(req.responseText);

4. 使用 jQuery 同步取得 JSON (Sync)

$.ajax({
    url: appInfoUrl,
    async: false,  // synchronous
    datatype: "json",
    success: function(res){
        if(typeof(res)==='string') {
            res = $.parseJSON( res );
        }
    }
});

5. 使用 XMLHttpRequest 在載入文字檔資源前, 先判斷檔案是否存在

var jsonFile = 'test.json';
var req = new XMLHttpRequest();
req.open("GET", jsonFile, false); // "false": synchronous
req.send();
if(req.status === 404){
 console.log('檔案不存在');
} else {
 
}

Grunt.js 入門講義

●● Grunt 入門　　　◎ 林新德 編 ( shinder.lin@gmail.com ) 2014.4 

● Grunt ( http://gruntjs.com/ )

名稱來自於 grunt work (單調的工作)，它的功能是使用設定來執行常做的動作，例如最小化 JavaScript 和 CSS 檔等。

● Grunt 在 0.3 版時提供常用的功能，設定檔使用 grunt.js。到 0.4 版時做了些調整，使用外掛的架構，設定檔為 Gruntfile.js。

● 本講義以 Windows 7 為作業系統為例，各軟體的安裝皆在 Windows 7 底下安裝，請注意使用的軟體版本，例如 NodeJS 有 32-bit 和 64-bit 之分。

◎ Windows Command Prompt 使用 PowerShell

◎ 範例專案 shinder_maze.zip 和 shinder_circle_menu.zip  (** blog 不提供專案包 zip 檔 )

● Web server，使用 Python3 內建的簡易 web server ( 非必要 )

安裝 Python 3 ( https://www.python.org/downloads/ )

在 Command prompt，到專案目錄使用下式啟動 server

> python -m http.server [埠號]

使用「Ctrl + C」停止 server

● 在安裝 Grunt 之前需先安裝 Git 和 NodeJS

◎ 1. NodeJS ( http://nodejs.org/ )

– 直接從官網按「 INSTALL 」，下載 msi 檔並安裝。

◎ 2. Git

– 安裝 Git for Windows ( http://git-scm.com/download/win )

– 安裝過程中請勾選「Run Git from the Windows Command Prompt」