Free學習札記

在Bootstrap使用img-responsive center-block讓圖片置中

2018-06-16T14:58:00.000+08:00

複製excel表格至web mail，無法顯示完整表格

2018-05-13T14:14:00.003+08:00

每次要複製excel表格至web mail，無法顯示完整表格，只剩下純文字資料，但無意間卻發現了一個現象，如果先將excel表格轉貼到word，再從word將表格複製在貼上web mail，卻發現表格格式還在，可能字型和間距會跑掉，但至少還可以看到完整表格樣子。

開發APP用Native語言還是Hybrid好？

2017-10-30T15:45:00.000+08:00

這是個爭議的問題，通常各自有擁護者，各有自己的立場，無解。

撇開各自喜好，先來說明目前三種常見的手機開發模式：Web APP、Hybrid APP及Native APP。

Web APP

Web APP是支援平台最多的一種做法，因為每個行動平台一定都有瀏覽器，以Web的形式來開發App是最直接且入門門檻相對較低的做法。但是因為瀏覽器的諸多限制，有很多裝置上的功能（如：拍照、存取通訊錄或相簿）並無法使用，且無法上架到App Store或Google Play，這限制了其應用範圍。
如果只是單純的資訊傳遞，不需要太多與手機的整合性功能，開發行動裝置專用的Mobile Web App或Responsive Web App將能夠橫跨最多的平台。只是要做到暢的用戶體驗，開發者對於HTML5、CSS3的技術掌握必須在水準之上，才能對於各種瀏覽器環境有一定的掌握。

Native APP

各平台手機的原生應用程式，必須要學習多種平台的開發語言，付出相對較大的學習成本，其最大的優勢是可以操作手機內建軟硬體資訊、提供最良好的UI用戶體驗。

Hybrid APP

市場上同時擁有多種平台開發技術的人才短缺，倘若可以使用Web的跨平台開發方式，那滿滿的Web前端工程師就是現有的資源。因此有混合開發模式Hybrid APP出現，使用Web為開發基礎再透過各平台APP平台的SDK建置後，打包成APP，可上架至App Store或Google Play。
Cordova、PhoneGap、Ionic等框架，提供了其強大的JavaScript API介面，讓APP能夠存取手機的功能，打開這盒子後，讓一切變得有無限可能。

該選哪一種？
在決定採用哪一種開發模式之前，有許多因素需要考慮，諸如：要在哪一種平台開發？有無利用手機特有性能？圖形要求高不高？

Native APP針對特定的操作系統開發，用的也是特定操作系統的開發套件(SDK)，如 Apple iOS。因此它的性能和工具一向比Hybrid APP優越。

Hybrid APP難道沒出頭的機會，那也不一定，很多APP採用Cordova、PhoneGap、Ionic等框架開發而成，單碼跨平台是它的優點(最後還是要透過框架編譯成各平台APP)，但直接使用網頁來制作使用者界面，這是它的優點、同時也是缺點。因為這表示開發者無法直接使用原生的使用者介面，看起來不像該平台的App，要花時間模擬調整到和原生界面相同的視覺效果和流程度。且顯示的部分還得經過瀏覽器引擎，也有跨瀏覽器的相容問題要處理，在整體的功能與流暢度方面，尚難以和Native App相提並論。
不過如果只是單純的資訊呈現，對流暢度和功能的要求較低，Hybrid App還是其生存空間，但性能設計會是主要的重點。

用戶介面設計是一個影響APP性能的重要因素，如果圖形多、漸層、影子效果、仿真度高，就會消耗很多裝置資源，當你以60fps運行，大概需要17 milliseconds per frame去執行程式碼和更新用戶界面。這樣的時間根本不能提供流暢的運行，還很可能會令Frame出現問題，因此隱定性也是Hybrid APP設計該考慮的重點，所以設計前先問問自己，這些資源耗量大的設計真的是必要的嗎？

說真的，Hybrid的開發是非常吸引人，因為能夠採用你熟悉的網頁技術來建造你的APP，但也是一個陷阱，不要把Hybrid APP當成獨立網頁來設計，如果APP體驗不夠原生化，則有可能被App Store拒絕的風險，多研究Native平台和SDK的設計，可以套用在Hybrid APP的開發上。

如果只是單純的顯示動態網頁內容，或許根本不需要動用到Hybrid APP框架，將網頁放置到伺服器上，Native APP建立個WebView調用網址顯示，快速又方便維護。

查詢iOS及Android各版本的市占率

2017-06-21T11:18:00.000+08:00

常會遇到要查詢iOS及Android各版本的市占率，相關網址如下：
前往官網查詢iOS各版本市佔率
前往官網查詢Android各版本市佔率

透過Eclipse產生javadoc

2017-05-31T16:23:00.000+08:00

通常有寫註解就不錯了，一般專案會特別產生出javadoc少之又少，偶爾有需要，中途又遇到個錯誤，就順手紀錄一下。

行前準備

準備好以下工具：

JDK
Eclipse

一步一步來產生javadoc

打開Eclipse，點選要產出javadoc的專案後，選擇Project -> Generate Javadoc。

這頁面可設定JDK和產出位置，基本上用預設值就可以了，按Next，來到下一個頁面。

基本上用預設值就可以了，，按Next，來到下一個頁面。

這頁面有個要特別注意的低方，基本上現在專案邊碼都採用UTF-8，但Windows上Eclipse預設採用M950，請輸入 -charset UTF-8 -encoding UTF-8 ，不然會發生錯誤，無法產出Javadoc。請按Finish產出Javadoc。

Use Postman to test push notification(GCM)

2016-12-27T18:17:00.003+08:00

簡易記錄一下如何透過Postman來測試驗證Android推播訊息

前言

推播問題多，透過Postman能快速自我驗證，釐清問題

測試步驟

首先請安裝Postman。Postman: a Google chrome extension.
Postman設定

Request Type:POST
URL:https://android.googleapis.com/gcm/send
Header
  Authorization : key=your key //Google API KEY
  Content-Type : application/json
Body
JSON (raw) : 請照自己的發送格式
{
  "to":"token",
  "data": {
    "message" : "Test測試"
  }
}

確認回應訊息，當success的值大於0，表示成功發送幾個

Eclipse 專案編碼格式

2016-01-07T17:29:00.000+08:00

Eclipse 預設的文字編碼是M950，每次在新增專案後，都要去專案的Properties修改成UTF-8，透過下列設定，以後新專案都會是UTF-8編碼了。
透過Eclipse的偏好設定 Window > Preferences

General > Workspace > Text file encoding > 點選UTF-8

最後記得Apply就行了

[紙模]歪腰郵筒

2015-09-01T00:21:00.000+08:00

好久沒空做紙模，看到這簡單的，就來休閒一下，順便讓印表機動一下，太久沒印都塞住了。
沒想到一個颱風，加上台灣人一窩蜂的性格，讓這郵筒出名了，還成為觀光景點，真的有夠...

如何在Mac電腦格式化SD卡

2015-08-23T19:33:00.002+08:00

要如何在Mac電腦格式化SD卡
透過Finder/應用程式/工具程式/磁碟工具程式打開操作介面，顯示如下圖：

再選擇SD卡磁碟/清除/選擇要格式化的格式[ex: MS-DOS(FAT)]/然後按清除，即可將SD格式化。

How to execute a MySQL command from a shell script?

2014-12-29T15:28:00.000+08:00

反正常遇到，不如寫下做個紀錄，以後直接複製貼上。

整個重點在於-p和密碼中間有沒有空格。當有空格時，mysql是使用互動式，要你填入密碼；如果沒有空格，mysql就直接使用-p後面的字串來登入。
指令：

$ mysql -h Server_name -u your_account -pPassword database_name < file.sql

若-p和密碼中間有空格，會出現下列情況：

$ mysql -h Server_name -u your_account -p Password database_name < file.sql
Enter password: 
ERROR 1049 (42000): Unknown database 'Password'

如何正確匯出Subversion 控制的專案[並刪除 Subversion 專用的隱藏目錄]

2014-12-12T14:44:00.000+08:00

Subversion是許多人推薦的版本控制軟體，應該是我不太會用，所以我快被Subversion搞到抓狂，雖然很靈活，非強制鎖定，看來似乎不錯，但是多人協同作業，只要有人忘了步驟，程式就會莫名變來變去，原版已經寫完的東西，有時就會被蓋掉不見了 @@

最後我決定把版本控制和我在開發的環境錯開，免得一直重複重樣的問題。至於要怎麼把已經掛到Subversion匯出，其實還蠻簡單的，匯出時要先用滑鼠右鍵「拖曳」該目錄到本目錄或其他目錄，然後放開後才會出現 SVN Export to here 與 SVN Export all to here 功能，這兩個差別在於：
SVN Export to here: 將該目錄最新版本匯出
SVN Export all to here: 將該目錄中所有檔案匯出

另外還查到另一種作法，就是把Subversion的工作副本(Working Copy)目錄裡都會有隱藏的目錄 .svn 或 _svn，裡面儲存了關於此目錄中所有檔案的版本資訊與變更狀態等這些資訊全部刪除，網路流傳一段用註冊檔的方式來處理刪除的動作

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN]
@="Delete SVN Folders"

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN\command]
@="cmd.exe /k \"TITLE Removing SVN Folders in %1 && FOR /r \"%1\" %%f IN (.svn _svn) DO RD /s /q \"%%f\" \""

只要將上面語法儲存成.reg檔，點擊註冊完成後，以後就可以在想要刪除Subversion版本控制的目錄按右鍵，選擇Delete SVN Folders，就可以快速地將Subversion版本控制資訊全刪掉，只是越方便，風險就越高，不小心按到就爽了。

How to startup eclipse use specifing JVM

2014-12-12T09:53:00.001+08:00

討厭的Oracle java更新，每次更新後，都會在環境變數加上它的java目錄，這舉動就會造成我機器上的eclipse無法啟動會出現下面錯誤。

為了一勞永逸，只好在把之前用過的方式再拿出來使用，在eclipse 直接設定 vm。

-vm
c:\jre\bin\javaw.exe

How to Fix Missing TortoiseSVN File Status Icons in Windows

2014-12-11T16:10:00.002+08:00

同樣的軟體為什麼別人用都好好的，在我的機器上就是有一些小問題。
TortoiseSVN是蠻多人用來控制版本的軟體，當版本一致時，在檔案總管應該會有個綠色的打勾來顯示，簡單明瞭，BUT......
這綠色的打勾圖示就這樣上演失蹤記，千呼萬喚都不出現。
經過一番的搜尋後，原來問題點在於 windows 對於這種 Overlay Icons 的數目是有限制的，以前 32 bit 的最大數目為 15，現在 64 bit 最大數目為 11，但是像 SkyDriver, Dropbox..這類的程式都會新增屬於它們的 Overlay Icons，所以裝的軟體越多，ICON也就越多。
解決的方式就是打開 regedit.exe ，找到
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\explorer\ShellIconOverlayIdentifiers

然後把不想要的刪除，確保 TortoiseSVN 的項目能排到前11個裡面，修改完後記得重開機，開機完後，應該就可以在檔案總管內看到那個綠色的打勾圖示了。

[CentOS] CentOS 7 啟動服務方式的改變

2014-10-16T11:56:00.001+08:00

新裝完 CentOS 7 後，遇到了兩個新改變，一是以前啟動服務的方式已經無法使用，另一個是防火牆iptables不見了，似乎用了另外的方式來管理防火牆。
底下先說明啟動服務的方式異動。

舊的方法一：

/etc/init.d/servicename restart

舊的方法二：

serice servicename restart

新的方式要透過 systemctl
常用指令:

systemctl start|stop|restart|is-active|status|enable|disable servicename.service

start：啟動服務
stop：停止服務
restart：重啟服務
is-active：查看服務是否有效的
status：查看服務狀態
enable：將服務設定成系統啟動時自動啟動服務
disable：將服務設定成系統啟動時不啟動服務

另外以前的reboot, halt, poweroff似乎也變成

systemctl halt
systemctl reboot
systemctl poweroff

Fix ShellShock : bash vulnerabilities CVE-2014-6271 and CVE-2014-7169

2014-09-29T12:12:00.000+08:00

前兩天收到一個 bash 漏洞警示，提醒要趕快更新 bash ，來解決透過環境變數的代碼注入攻擊。新的 bash 版本，確保命令結束後面，無法再執行一個 bash 函數。

測試方式:

env x='() { :;}; echo vulnerable' bash -c "echo this is a test"

如果畫面上顯示
vulnerable
this is a test

這表示，您的作業系統需要更新 bash 。
更新方式:
1. CentOS, RedHat, Fedora

yum -y update bash

2. Debian, Ubuntu

sudo apt-get update && sudo apt-get install --only-upgrade bash

更新完後，請重新測試，如畫面顯示如下
bash: warning: x: ignoring function definition attempt
bash: error importing function definition for `x'
this is a test

即表示漏洞以修補完成。

參考來源： shellshocker.net

用 Window resizer 模擬不同解析度的視窗尺寸來調整網頁

2014-09-03T16:37:00.000+08:00

最近常常遇到，網頁排版在筆記型電腦上顯示是完整的，但是用投影機投射影像後，畫面就跑掉了，只好把筆記型電腦的解析度調低來排版，只是每次解析度調來調去也挺煩的，只好尋找有沒有解決的方式，意外發現Window Resizer這個Google Chrome的擴充套件，可以用來模擬各種不同解析度的視窗尺寸，就裝來試試看。

安裝:
1. Tools -> Extensions 進入擴充套件葉面

2. 直接搜尋 Window Resizer ，找到後，按 +Free ，直接安裝

3. 確認頁面，按 Add 繼續

4. 顯示安裝完成

5. 安裝完成後，瀏覽器的右上角會多個按鈕，後續就可以透過此按鈕來選擇不同解析度來模擬個視窗尺寸

試用後，感覺蠻方便的，唯一的缺點，解析度改變後，有可能會按不到頁面最下方的按鈕，此時只要切換回原尺寸即可，畢竟調整排版而已，功能各解析度都可以試。

How to automatically log console output with putty?

2014-09-02T15:31:00.000+08:00

You can set up like this:
1. start putty.exe
2. Go to Session -> Logging
3. Select "Printable output"
4. Choose the folder, where you want the log file to be placed
5. Append a file name like &H_&Y&M&D_&T.log (&H: host, &Y: year, &M: month, &D: day, &T: time)
6. Save the profile as default setting (Session -> Default Setting -> Save)

How to automatically login Putty with password?

2014-09-02T15:19:00.000+08:00

使用版本: Putty.exe version 0.63
測試成功的指令為:

putty.exe -ssh host -l user -pw password

NOTE:如果沒使用ssh，直接把-ssh拿掉就行了。

寫成windows bat file:

start putty.exe -ssh host -l user -pw password

NOTE: 沒加入 start ，會開啟一個 DOS 視窗，一個 PUTTY 視窗。

[blogger]利用 Google Code Prettify 顯示程式碼

2014-08-29T12:03:00.000+08:00

另一個在網頁顯示程式碼的方式，透過 Google Code Prettify ，程式碼顯示變成簡單又美觀。

主要參考官網的 Getting Started 這篇文章，只要載入必要的 CSS 和 javascript ，就會自動尋找 <pre>, <code>, <xmp> ，處理美化程式碼。

Blogger 透過[版面配置]/[新增小工具]/[Html/JavaScript]，加入底下程式碼。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js></script>

還可以指定參數加入 skin 或 lang (skin=sunburst&lang=js)，支援的外觀可以在 Gallery of themes for code prettify 找到。

NOTE：在 script 標籤中指定語言會套用到所有的網頁，因此 Google Code Prettify 也支援利用 class 屬性 lang-* 的方式，來指明程式語言。

<pre class="prettyprint lang-java">
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}
<pre>

或採用 html5 ，在 code 標籤以 language-* 的 class 屬性，指明程式語言。

<pre class="prettyprint"><code class="language-java">
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}
</code><pre>

如要顯示行號，要在 class 加上 linenums:no ，no表示要從第幾行開始，可不指定。

<pre class="prettyprint linenums:168">

和 CSS BLOCK 搭配

public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

[Blogger]在網頁用 CSS BLOCK 來顯示程式碼

2014-08-29T11:24:00.000+08:00

以前在 blogger 利用其修改範本的功能，針對顯示程式碼的部分，做了一些改進，後來都是顯示的蠻好的，不知道何時開始，改變的設定似乎無效了，造成顯示都會跑掉，只好搜尋有無新的改進方式，來改善這問題。

底下是新找到的方式，紀錄一下，免得忘記了。
1. 利用「新增小工具」的功能，選擇 HTML/JavaScript ，然後插入底下程式碼，就可以避免直接修改 HTML 範本

<style>
.post .mycode {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:800px;
line-height: 1.2em;
}
</style>

其中的 mycode 就是class name，用來搭配pre或div使用。
如下面這段程式

<pre class='mycode'>
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}
</pre>

顯示的效果為:

public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

NOTE:程式碼中有 < 或 > 會影響到網頁顯示，可透過 HTMLEncode 這網站來進行轉換。

[Html]How to display alt text for an image in chrome

2014-08-19T17:12:00.000+08:00

今天在寫文件和html簡單頁面時，發現在chrome的圖片有用alt來顯示訊息，卻顯示不出來，拜讀估狗大神，發現似乎是 webkit bug ，底下是我試出的解決方式，須新增3個attribute: height, width, title，這樣就可以正確顯示訊息。

原本:
<img src="xxx.png" alt="test" />

修改後:
<img height="90" width="90" src="xxx.png" alt="test" title="test" />

五色線金剛結手環

2014-07-06T01:57:00.001+08:00

好久沒編了，還好沒忘記。

[紙模]歐亞水獺

2014-07-06T01:39:00.000+08:00

I'm from Kinmen. 歐亞水獺保護棲地大作戰。

看到這紙模就馬上下載來做做看。有幾個小缺點，頭部那樣的黏貼邊不是很好黏，身體的底部設計過小，容易皺皺彎曲，且會變成頭重腳輕，很容易倒，所以我把尾吧稍微捲一下好站穩。
整體設計的蠻可愛的。

使用 NotePad++ 免安裝版本，並整合滑鼠右鍵選單

2014-04-29T13:26:00.001+08:00

相信很多人都有這困擾， Windows 自帶的記事本開些大檔案很慢很容易卡住，用 Ultraedit 又是一筆費用，於是就上網找免費又好用的替代軟體，本來在 PSPAD 和 Notepad++ 兩者中抉擇，最後選用了 Notepad++ 。

Notepad++ 此時最新的版本為 6.6.5 ，可至官網免費下載使用，我選擇的是 Notepad++ 7z package : Don't want to use installer? 7z format. 免安裝版本，解開即可使用，只是有個小缺點，用安裝的版本，預設有整合滑鼠右鍵選單(即點檔案按右鍵可點選"使用 Notepad++ 開啟"來打開檔案)，免安裝的版本就要自己增加這功能。

在官網討論區有提供相關說明及指令，底下是簡略的步驟:
1. 首先要下載 NppShell.dll(64位元用 NppShell64.dll)，可由此處下載。下載後，將檔案解開放置 Notepad++ 的目錄內(壓縮檔裡面有兩個檔案請放置到 Notepad++.exe 同一目錄內)。
2. 執行指令 regsvr32 /s /i NppShell.dll (OS如果是64位元請使用 NppShell64.dll)後，會顯示如下面畫面

請確認勾選[Add context menu item]，也可以在[Menu text]輸入自己喜歡的說明，最後按[OK]即可完成設定。

Characterset problem when inserting into mysql database from java

2014-04-03T10:45:00.001+08:00

哈，又是編碼問題。本來用 WebSphere 和 DB2 的環境，資料新增至資料庫中文都沒問題，怎麼一換到 tomcat 和 MySQL 這組合就中文新增到資料庫時就變成了問號。

最後試驗的結果，需在 connection string 加上 useUnicode=true&characterEncoding=utf8 這段設定，這樣中文新增到資料庫就會正常了，不會再是?字元。

JDBC use like

String conString = "jdbc:mysql://host/database?useUnicode=true&characterEncoding=utf8";

DataSource resource url like

url="jdbc:mysql://host/database?useUnicode=true&amp;characterEncoding=utf8"