爪哇小子: 2014/04

2014年4月29日星期二

【分享】Java反組譯工具(decompiler) - JD-GUI

Java Decompiler project主要目的在發展可以對Java 5以上版本的位元碼(byte code)進行反組譯(decompile)與分析的工具。

而我要分享的是從這裡發展出來的圖形化介面工具JD-GUI，它可以用來檢視.class檔案的原始碼。

它是限定於非商業使用的，意思是只要不要把它包在產品中去賣錢，在公司或家裡，都可以為個人使用。

先到這裡下載，他有提供三大主要作業系統的版本：

下載安裝後，開啟介面如下：

可以把要解譯的.jar檔或.class檔拖拉至圖示或開啟的視窗即可檢視原始碼：

如：

它也提供了把單一檔案(Save Source)或函式庫內(Save All Source)解譯後的原始碼存檔的功能：

2014年4月26日星期六

【分享】2014 Java Developer Day開始報名了

雖然有點「累格」，但還是要跟大家分享一下，2014 Java Developer Day開始報名了。

這我視為一年一度的大拜拜，當然是不會缺席的，在知道的第一時間，就完成報名和繳費了，今年想當然爾一樣精彩！

圖片來源：http://www.codedata.com.tw/event/javaday/2014/agenda.html

現在已經可以報名了，有興趣的朋友不能錯過囉！

2014 Java Developer Day

【分享】YUI Compressor - JavaScript與CSS的壓縮工具

你是否有曾經因為某些網頁載入時間太久，而跳離該網頁？所以在開發網頁時，網頁程式的輕量化是一個重點。

現在大部份的網頁，除了HTML文件本身外，都還會使用JavaScript和CSS來做網頁設計與版型編排，也都是使用引入的方式來使用，在網頁開啟的時候，也是要先下載到使用者的電腦中，再由瀏覽器執行與呈現，所以這兩者檔案大小，也是影響網頁呈現是否順暢的重要因素。

在這裡我要分享一個名為YUI Compressor這個JavaScript與CSS的壓縮工具，這裡所謂壓縮並非像7-zip或tar那種壓縮，而是把程式碼「最小化」的意思。

YUI Compressor是採BSD授權，先到這裡下載，下載回來後，可以得到一個yuicompressor-x.y.z.jar，前面的x、y、z表示它的版號，這裡使用2.4.8來做說明。

請注意，這是個Java應用程式，所以在執行這個jar檔之前，電腦中要先安裝Java。

再來我寫了一個test.js，內容如下：

var add = function(a, b){
        var c = a + b;
        return c;
};
var sub = function(a, b){
        var c = a - b;
        return c;
};
var multiply = function(a, b){
        var c = a * b;
        return c;
};
var divide = function(a, b){
        if(b === 0){
                return 0;
        }
        var c = a / b;
        return c;
}

將上列程式碼儲存後，它的檔案大小為260 byte：

-rw-r--r--  1 bioyang  staff     260  4 26 16:05 test.js

再來我使用YUI Compressor來進行壓縮：

java -jar yuicompressor-2.4.8.jar test.js -o test-min.js --charset utf-8 --type js

上列的指令中，-o表示要輸出的檔案名稱，--charset是指定壓縮的字元編碼格式，--type是用來告知輸入的檔案是.js或.css，它在輸入的檔案副檔名沒指定時才需要。

其它參數可以參考YUI Compressor文件。

壓縮之後可以看到檔案大小有明顯的減少：

-rw-r--r--  1 bioyang  staff     195  4 26 16:10 test-min.js

使用編輯器來打開test-min.js：

var add=function(e,d){var f=e+d;return f};var sub=function(e,d){var f=e-d;return f};var multiply=function(e,d){var f=e*d;return f};var divide=function(e,d){if(d===0){return 0}var f=e/d;return f};

可以看到除了壓縮大小處理之後，它也能對程式碼做些類似加密、混碼的動作，這對不想讓別人清楚看到程式碼結構的人，是一個非常方便的功能，但如果不要這個功能的話，可以在執行指令時，加上--nomunge這個參數。

當你的.js檔案愈大時，檔案大小減少的感覺會更明顯，比如我下載一個未壓縮的jQuery函式庫回來，還沒壓縮前的大小為：

-rw-r--r--@ 1 bioyang  staff  282944  4 26 16:20 jquery-1.11.0.js

我再用YUI Compressor來進行壓縮後，大小變成：

-rw-r--r--  1 bioyang  staff  108081  4 26 16:23 jquery-my-min.js

更有感！

當然像jQuery這種函式庫若要應用在正式產品上面時，通常還是下載他們壓縮後的版本回來使用，這裡只是用它來做個範例說明。

2014年4月25日星期五

【分享】使用Google的搜尋運算子(search operators)做進階搜尋

使用Google做搜尋時，可以使用「搜尋運算子」(search operations)來收斂搜尋結果，讓結果更加符合我的條件，是個很方便的功能。

除了使用搜尋運算子之外，也可以使用Google的進階搜尋達到同樣的目的：

下表整理一些我覺得好用的搜尋運算子：

限定搜尋結果必須包含某個字或句子 "search"	用兩個「"」(雙引號)把用於搜尋的字串或句子包起來，這在搜尋歌曲中的某段歌詞或找尋書本中的某些文字很有用，例如： "言師採藥去只在此山中" 搜尋結果就一定會包含上列字串
限定在某個網站或網域下 site:	可以搜尋結果網頁是在某一個網站或網域下，如：水龍頭延伸輔助器 site:www.pcstore.com.tw 就會列出某商店街網站中，有「水龍頭延伸輔助器」的結果
搜尋某種檔案格式 filetype:	把搜尋結果限定在某種檔案格式，如pdf，如: filetype:pdf 統計學結果就會含有「統計學」這幾個字，且為pdf
在兩個數字範圍內搜尋 ..	用「..」把兩個數字連起來，搜尋結果會包含介於兩個數字之間的數字，如： nba冠軍 1975..1980 上列條件會含有「nba冠軍」這幾個字，還有「1975」與「1980」之間的數字

若對其他運算子有興趣，可以參考Search operators。

參考來源

Search operators

2014年4月23日星期三

【筆記】MySQL判斷varchar型態欄位值是否為數字

在網路上搜尋了一下，在MySQL 中好像沒有內建的函式，可以用來判斷varchar型態的欄位中的字串是否含有「不是數字」的字元，後來找到有人使用正規表示式來做判斷，如下：

SELECT * 
FROM  `emp` 
WHERE phone NOT REGEXP ('(^[0-9]+$)')

結果：

從上列的結果可以得知，只要是欄位中的值有不是數字的字元，就會符合條件。

若要查詢只有數字的值的話，就把NOT拿掉。

在MySQL中，REGEXP是用來判斷要比對的字串，是否有符合定義的模式，若有符合會回傳1，若不符合則回傳0，如：

SELECT 'a' REGEXP '^[a-d]';
-- 結果為 1

詳細說明可以參考MySQL的Regular Expressions文件。

參考來源：

2014年4月22日星期二

【筆記】在HTML中使用ul、li來實現表格呈現

在網頁上以表格來呈現資料，初學者如我，都會使用table來實現，但使用table有一些較不便的地方，如比較難維護，載入時間較久等問題，後來才發現使用div、ul、li、dt、dl、dd等，才是進階(相對於我)的用法。

在本範例中，使用ul、li來做一個例子。

在body中放入下列程式碼：


        
                Microsoft helped develop technology that, based on GPS data, accurately predicts one's location up to multiple years beforehand.
        
        
        Target predicts customer pregnancy from shopping behavior, thus identifying prospects to contact with offers related to the needs of a newborn's parents.
        
        
Tesco (UK) annually issues 100 million personalized coupons at grocery cash registers across 13 countries. Predictive analytics increased redemption rates by a factor of 3.6.
        
        
Netflix sponsored a $1 million competition to predict which movies you will like in order to improve movie recommendations.
        
        
One top-five U.S. health insurance company predicts the likelihood an elderly insurance policy holder will die within 18 months in order to trigger end-of-life counseling.
        
        
Con Edison predicts energy distribution cable failure, updating risk levels that are displayed on operators' screens three times an hour in New York City.

然後在head中放入CSS如下：

ul.table{
        width:660px;
}
ul.table > li{
        width:200px;
        height:120px;
        color:#fff;
        background-color:#001aea;
        list-style-type:none;
        float:left;
        padding:10px;
        margin:2px;
}

效果就會像下面一樣：

Microsoft helped develop technology that, based on GPS data, accurately predicts one's location up to multiple years beforehand.
Target predicts customer pregnancy from shopping behavior, thus identifying prospects to contact with offers related to the needs of a newborn's parents.
Tesco (UK) annually issues 100 million personalized coupons at grocery cash registers across 13 countries. Predictive analytics increased redemption rates by a factor of 3.6.
Netflix sponsored a $1 million competition to predict which movies you will like in order to improve movie recommendations.
One top-five U.S. health insurance company predicts the likelihood an elderly insurance policy holder will die within 18 months in order to trigger end-of-life counseling.
Con Edison predicts energy distribution cable failure, updating risk levels that are displayed on operators' screens three times an hour in New York City.

【備忘】在Gmail中搜尋有附件的郵件

在使用網頁版的Gmail時，若要只是列有有附件的郵件，可以在上方的搜尋列中輸入「has:attachment」，就會顯示只有附件的郵件了，如：

這樣方便的方法，也可以在手機或平板電腦的Gmail APP版本上面使用哦！

【JS筆記】正規表示式(Regular Expression)中帶有星號(*)的比對模式

先來看一個帶有星號的比對模式：

var pattern = /ab*c/;

pattern.test('abc');  //結果為 true
pattern.test('ac');  //結果為 true
pattern.test('abbbbc');  //結果為 true

pattern.test('adc');  //結果為 false

pattern.test('zabbbbcx'); //結果為 true

由上面的程式碼可以知道，當在比對模式中有出現*時，表示在比對的字串中，在「星號前面的符號有出現0個或多個」的情況下，才能匹配成功。

所以要以/ab*c/這個模式比對成功的話，在比對的字串中，要出現a與c，且中間包著「0」到「多個」的b，才是匹配成功。

參考來源：

JavaScript RegExp * Quantifier

2014年4月18日星期五

【JS筆記】JavaScript格式化數字加上千分數逗點

在網頁呈現數字資料時，常會使用千分位符號來標示數字，幫助閱讀，在JavaScript，可以使用正規表示式來達成這樣的標示：

var thousandComma = function(number)
{
 var num = number.toString();
 var pattern = /(-?\d+)(\d{3})/;
 
 while(pattern.test(num))
 {
  num = num.replace(pattern, "$1,$2");
 
 }
 return num;

}
console.log(thousandComma(1234567.89));

在上例中，先定義一個正規表示式，如第4行，這個模式表示「一個字串中，如果未3碼為數字，且前面有一個或多個數字，就會和此模式匹配」。

在第6行中，第一次的while迴圈測試1234567.89這個字串是否與pattern匹配時，因為1234567這一片段符合，所以結果是true，跑到第8行時，對1234567.89這個字串使用replace函式時，會回傳1234,567.89，其中$1代表符合第一個(-?\d+)的部份，也是就1234，$2代表符合第二個(\d{3})的部份，就567。

在第二次的while迴圈測試時，1234這一片段仍然符合，會跑到第8行時，對1234567.89這個字串，使用replace函式時，1234,567.89中的1234會被替換成1,234，整個字串變成1,234,567.89。

在第三次的while迴圈測試時，因為已經沒有「未3碼為數字，且前面有一個或多個數字」的片段，此時就會回傳false離開while迴圈，上列的thousandComma(1234567.89)就會回傳1,234,567.89。

最後，要注意的是，上列第4行的第一個小括號中的+不能寫成*，不然會造成無窮迴圈喔！

2014年4月17日星期四

【備忘】Windows遠端桌面命令提示字元指令

先按Windows鍵 + R對啟執行對話窗。

在輸入框中輸入下列指令：

mstsc /v: [YOUR_ID][:port]

如：

上面若有帶參數，則會直接開啟遠端桌面，若沒有傳入參數，則會出現遠端桌面連線的小視窗來輸入相關資訊：

2014年4月12日星期六

【備忘】使用Mac終端機來更新軟體

在Mac中執行終端機，並輸入下列指令：

$ softwareupdate -l

下列顯示的結果，在這裡發現了Safari有新的更新：


Software Update Tool
Copyright 2002-2012 Apple Inc.

Finding available software
Software Update found the following new or updated software:
   * Safari7.0.3Mavericks-7.0.3
 Safari (7.0.3), 52446K [recommended]

再來可以在終端機輸入下列指令來安裝更新所有更新：

$ sudo softwareupdate -ia

若要上列指令更多資訊，可以在終端機輸入下列指令查詢：

$ softwareupdate -h

就會顯示下列說明它的用法。

【分享】在使用vim在編輯HTML時，開啟自動完成的功能

在使用vim來編輯HTML檔案時，是可以使用「自動完成」功能的，但vim預設是未啟動該功能，要開啟該功能，先要切換到指令模式(command mode)下，在指令模式中輸入：

:set omnifunc=htmlcomplete#CompleteTags

指令輸入後，切換回編輯模式中，先打出<!，按下Ctrl + X後，再按Ctrl + O，就會出現自動完成的選項：

但這只是暫時間的設定，關閉vim後，再次開啟編輯HTML檔案時，原先開啟的自動完成功能就會關閉。

若要vim在編輯.html檔案時，就預設開啟自動完成的功能，就需要編輯vimrc這個檔案(以Ubuntu為例)：

$ sudo vi /etc/vim/vimrc

在檔案的最下方加入下列指令：

autocmd FileType html set omnifunc=htmlcomplete#CompleteTags

下面是在Mac設定的方式。

若是在Mac(以我的電腦為例)，要先去編輯/usr/share/vim/下的vimrc檔案：

sudo vi /usr/share/vim/vimrc

在檔案的最下方加入下列指令後儲存：

syntax on

再來新增或編輯，家目錄下的vimrc

vim ~/.vimrc

在檔案的最下方加入下列指令：

autocmd FileType html set omnifunc=htmlcomplete#CompleteTags

上面是在Mac設定的方式。

儲存後，再以vim來編輯.html檔案時就能有自動完成的功能。

若想學好Vim，這本書不錯哦！

參考來源：

How to auto-complete HTML code in Vim

2014年4月11日星期五

【分享】在使用vim在編輯CSS時，開啟自動完成的功能

在使用vim來編輯CSS檔案時，是可以使用「自動完成」功能的，但vim預設是未啟動該功能，要開啟該功能，先要切換到指令模式(command mode)下，在指令模式中輸入：

:set omnifunc=csscomplete#CompleteCSS

指令輸入後，切換回編輯模式中，按下Ctrl + X後，再按Ctrl + O，就會出現自動完成的選項：

但這只是暫時間的設定，關閉vim後，再次開啟編輯CSS檔案時，原先開啟的自動完成功能就會關閉。

若要vim在編輯.css檔案時，就預設開啟自動完成的功能，就需要編輯vimrc這個檔案(以Ubuntu為例)：

$ sudo vi /etc/vim/vimrc

在檔案的最下方加入下列指令：

autocmd FileType css set omnifunc=csscomplete#CompleteCSS

下面是在Mac設定的方式。

若是在Mac(以我的電腦為例)，要先去編輯/usr/share/vim/下的vimrc檔案：

sudo vi /usr/share/vim/vimrc

在檔案的最下方加入下列指令後儲存：

syntax on

再來新增或編輯，家目錄下的vimrc

vim ~/.vimrc

在檔案的最下方加入下列指令：

autocmd FileType css set omnifunc=csscomplete#CompleteCSS

上面是在Mac設定的方式。

儲存後，再以vim來編輯.css檔案時就能有自動完成的功能。

參考來源：

How to auto-complete CSS syntax in Vim

【備忘】Vim常用指令整理

我在學習Vim時，大部份都是從鳥哥的「第十章、vim 程式編輯器」這篇去慢慢嘗試的，效果很好。

而我這邊要做備忘的是，自己比較常用的功能：

常用指令

按鍵	作用
vim -o FILE1 FILE2 ...	小寫的「o」，用上下的水平視窗視窗開啟多個檔案。
vim -O FILE1 FILE2 ...	大寫的「O」，用左右的垂直視窗視窗開啟多個檔案。
`vim -O *`	大寫的「O」，用左右相鄰的垂直視窗視窗開啟目前目錄下的所有檔案。
`vim -p *`	小寫的「p」，用多頁籤模式開啟目前目錄下的所有檔案。
`:qa`	關閉多視窗開啟的所有檔案，若不儲存關閉則用`!qa`。
:行數一,行數二d	刪除行數一與行數二間文字，包含行數一與行數二，如：`:11,19d`即刪除第11到19行的內容
:行數一,行數二y	複製行數一與行數二間文字，包含行數一與行數二，如：`:11,19y`指令將複製第11到19行的內容
`:new`	在目前所在的視窗下方新增檔案並開啟一個視窗做編輯，如：`:new ~/temp/test.js`，會在~/temp/下新增一個名為test.js的檔案，並開始編輯
`:sav`	另存新檔，如：`:sav /home/bio.young/temp/test.js`在打檔名時，搭配Tab使用，可以更快找到要儲存的路徑
`:vnew`	新增檔案並在右邊開啟一個新的視窗做編輯
`:vsp`	在多視窗模式開啟檔案，並在右邊開啟一個視窗做編輯，如：`:vsp /home/bio.young/temp/test.js`
Ctrl + w + w	在多視窗間做切換。
Ctrl + w + i/k/j/l	在多視窗間做上（i）、下（k）、左（j）、右（l）的切換。
`:tabe`	開啟一個新的頁籤。
`:tabe FILENAME`	在新的頁籤開啟檔案。
gt	跳到下個頁籤。
gT	跳到上個頁籤。
`:qa`	關閉多視窗開啟的所有檔案，若不儲存關閉則用`!qa`。
/	在游標以下的部份搜尋字串，如`/hello`，就是搜尋檔案中`hello`字串，若在要搜尋的字串前加上`\c`，則搜尋時不分大小寫，如：`/\cHello`，就是搜尋檔案中`hello`字串，則不分大小寫
d + N(數字鍵) + 空白鍵	於游標所在點起刪除N個字元
u	回復前一個動作，如貼上、刪除、修改
Ctrl鍵 + r	重做前一個動作，如刪除、修改
r + 字元	取代目前游標所在的字。

如果想再進一步學習Vim，這本書不錯哦！

參考資源

【分享】使用vim在編輯PHP時，開啟自動完成的功能

在使用vim來編輯PHP時，是可以使用「自動完成」功能的。

要開啟該功能，先要切換到指令模式下，在指令模式(command mode)中輸入：

:set omnifunc=phpcomplete#CompletePHP

指令輸入後，在編輯模式中，按下Ctrl + X後，再按Ctrl + O，就會出現自動完成的選項：

但這只是暫時間的設定，關閉vim，再次編輯PHP時的，自動完成功能就會關閉。

若要vim預設開啟.js檔案時就能有自動完成的功能，就需要編輯vimrc這個檔案(以Ubuntu為例)：

$ sudo vi /etc/vim/vimrc

在檔案的最下方加入下列指令：

autocmd FileType php set omnifunc=phpcomplete#CompletePHP

下面是在Mac設定的方式。

若是在Mac(以我的電腦為例)，要先去編輯/usr/share/vim/下的vimrc檔案：

sudo vi /usr/share/vim/vimrc

在檔案的最下方加入下列指令後儲存：

syntax on

再來新增或編輯，家目錄下的vimrc

vim ~/.vimrc

在檔案的最下方加入下列指令：

autocmd FileType php set omnifunc=phpcomplete#CompletePHP

上面是在Mac設定的方式。

儲存後，再以vim來編輯.php檔案時，就會預設開啟自動完成的功能。

參考來源：

How to auto-complete PHP code in Vim

2014年4月10日星期四

【分享】使用vim編輯JavaScript時，開啟自動完成的功能

在使用vim來編輯JavaScript時，是可以使用「自動完成」功能的，但vim預設是未啟動該功能，所以在編輯模式下，使用

Ctrl +
x

開啟x mode後：

再按

Ctrl +
o

預設是沒作用的：

要開啟該功能，先要切換到指令模式(command mode)下，在指令模式中輸入：

:set omnifunc=javascriptcomplete#CompleteJS

指令輸入後，切換回編輯模式中，按下Ctrl + X後，再按Ctrl + O，就會出現自動完成的選項：

但這只是暫時間的設定，關閉vim後，再次開啟編輯JavaScript時，自動完成功能就會關閉。

若要vim在編輯.js檔案時，就預設開啟自動完成的功能，就需要編輯vimrc這個檔案(以Ubuntu為例)：

$ sudo vi /etc/vim/vimrc

在檔案的最下方加入下列指令：

autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS

下面是在Mac設定的方式。

若是在Mac(以我的電腦為例)，要先去編輯/usr/share/vim/下的vimrc檔案：

sudo vi /usr/share/vim/vimrc

在檔案的最下方加入下列指令後儲存：

syntax on

再來新增或編輯，家目錄下的vimrc

vim ~/.vimrc

在檔案的最下方加入下列指令：

autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS

上面是在Mac設定的方式。

儲存後，再以vim來編輯.js檔案時就能有自動完成的功能。

若想學好，這本書不錯哦！

參考來源：

How to auto-complete JavaScript syntax in Vim

2014年4月8日星期二

【R筆記】在R中讀取CSV檔案

當在做統計運算時，有時資料可能是由檔案中讀取進來，再做後續的處理的，R提供了一些函式讓使用者可以讀取檔案，read.csv()這個函式就是其中一種。假設我在電腦中有一個檔案，名稱為dummy.csv，其內容為：

a,b,c,d,e
1,2,3,4,5
6,7,8,9,10
11,12,13,14,15
16,17,18,19,20

在R我可以使用下列函式來讀取它：

> data <- read.csv("/home/javakid/study/r/dummy.csv")
> data
   a  b  c  d  e
1  1  2  3  4  5
2  6  7  8  9 10
3 11 12 13 14 15
4 16 17 18 19 20

上列程式碼中，/home/javakid/study/r/dummy.csv是我存放CSV檔案的路徑。

要注意的是，若是在Windows環境中，若是使用反斜線\來指定路徑時，要打兩個反斜線\\，如D:\\stury\\r\\dummy.csv或是使用正斜線/來指定路徑，如D:/study/r/dummy.csv。

【分享】讓vim文字編輯器顯示行數

vi預設執行時是不會顯示行號的，若要顯示行號，可以在vi的指令模式中，使用指令變更編輯環境，指令如下：

:set nu

上列指令執行後，會在每一行的最前面顯示行號。若要取消顯示行號，則在vi的指令模示中執行下列指令：

:set nonu

上列的設定方式，在關閉檔案後，就會失效，若要預設顯示行號的話，則要去編輯/etc/vim下的vimrc這個檔案(以Ubuntu環境為例)，先開啟檔案來編輯：

$ sudo vi /etc/vim/vimrc

開啟後，在檔案的最下方，新增下列指令：

set nu

請注意，這裡是沒有:符號的！

按儲存離開後，在使用vi來編輯檔案時，預設就會顯示行號了。

【筆記】Ubuntu常用指令

動作	指令	備註
df -h	列出目前檔案系統使用狀況
find -type f	找出目前資料夾中，所有的檔案	使用`find --help`看更多用法
gnome-session-quit	登出	版本11.10以上
ps	查詢程序運作情況	參數： `-A`：所有的程序均顯示出來 `a`：不與終端機有關的所有程序 `-u`：有效使用者相關的程序 `x`：通常與`a`這個參數一起使用，可列出較完整資訊
sudo shutdown -h now	關機
wc	查看檔案的行數、字數等	使用`wc --help`看更多說明
wget	網頁資料的取得

參考資料

鳥哥的 Linux 私房菜 - 基礎學習篇

【筆記】Ubuntu使用wget下載檔案時指定儲存檔案名稱

有時我在Ubuntu使用終端機下載檔案時，下載後的檔案名稱，會跟直接用瀏覽下載的不一樣，如：

$ wget http://www.vim.org/scripts/download_script.php?src_id=8651

下載完成後，檢視檔案，結果檔名變成download_script.php?src_id=8651：

這時還要把它重新更改名字，才能做適當的處理。

這時，如果在下載檔案時，多加一個-O(大寫的O)，空一格後，再加上要儲存的檔名，就可以指定所要儲存的檔名：

$ wget http://www.vim.org/scripts/download_script.php?src_id=8651 
 -O php.tar.gz

下載完成後的檔名：

若需要更多資訊，可以使用下列指令查詢更多可以使用的參數：

$ wget --help

2014年4月3日星期四

【R筆記】在Ubuntu安裝R

在Ubuntu中要安裝R，可以使用下列命令：

$ sudo apt-get install r-base r-base-html r-doc-html

上列的指令中，r-base是安裝R，r-base-html和r-doc-html是安裝R的相關文件。

安裝完後，可以在美工繪圖的菜單下看到R：

會放在這裡，是因為R本身所具備可以用來繪製圖表的關係嗎？XD，點按開啟後，會開啟執行R的終端機：

另外，也可以在終端機開啟後，直接輸入命令執行：

$ R

2014年4月2日星期三

【筆記】用CSS漸層實作文字區塊的透明遮掩效果

一直好奇在亞馬遜網站中，有一種文字透明遮掩效果是怎麼做出來的，像這樣：

可以看到上列文字區塊的下方，有漸漸淡去的效果。

有天找了時間去研究，原來就是利用區塊漸層的效果，就能做得出來了。首先看一下CSS的部份：

.txtGradient {
   z-index: 2;
   position: relative;
   height: 50px; 
   margin-top: -50px;
   overflow: hidden;
   background: -moz-linear-gradient(
     bottom, 
     rgb(255, 255, 255) 15%,

     rgba(255, 255, 255, 0) 100%
   ); 
   background: -webkit-gradient(
     linear,
     bottom,
     top,
     color-stop(15%, rgb(255, 255, 255)),
     color-stop(100%, rgba(255, 255, 255, 0))
   );
   background: -webkit-linear-gradient(
     bottom,
     rgb(255,255,255) 15%,
     rgba(255, 255, 255, 0) 100%
   );
   background: -o-linear-gradient(
     bottom,
     rgb(255,255,255) 15%,
     rgba(255, 255, 255, 0) 100%
   );
   background: -ms-linear-gradient(
     bottom,
     rgb(255,255,255) 15%,
     rgba(255, 255, 255, 0) 100%
   );

   background: linear-gradient(
     bottom,
     rgb(255, 255, 255) 15%,
     rgba(255, 255, 255, 0) 100%
   );
}

上列主要對我們要用來遮掩的區塊設定漸層的效果，其中linear-gradient屬性的設定主要是由下往上用白色來做漸層，這樣就會讓被遮掩的區塊由上往下慢慢變透明的效果。

這個屬性的設定和參數，可以參考linear-gradient。

再來於HTML中加入文字區塊和要遮掩的區塊：



Duplicate the circle
Because the circle is now a clipping mask, it won’t be visible. 
We need something to be visible that the user can see. 
Let’s duplicate the circle. Now we have two circles ontop of each other, one is a clipping mask,
 the other is a circle with a green stroke.
 


see more

再來我用一點JavaScript來增加一點動畫效果：

做出來的效果就會像這樣：

點了See more之後：

上方文字區塊就有整個展開的感覺。

若你有興趣的話，上列程式碼可以在這裡下載。

【筆記】使用CSS做圓形數字牌子

今天在某個網頁中，看到了類似平常在電視上用來給分的顏色牌子，來做為分步驟的指示，覺得很有趣，就把它記下來，做一點改變如下：

10

它的HTML程式碼如下：

主要是利用CSS的border-radius屬性來做圓形的變化，如下列程式的第4、5、6行。

再利用padding屬性來調數字的位置，如下列程式的第13、14、15行：

span.circle{
 font-family:Courier, Arial;
 font-size: 36px;
 -webkit-border-radius: 40px;
 -moz-border-radius: 40px;
 border-radius: 40px;
 background-color: #0055d4;
 border: 3px solid #0055d4;
 color: #fff;
 display: block;
 float: left;
 height: 38px;
 padding: 7px 8px 13px 8px;
 text-align: center;
 vertical-align: top;
 width: 44px;
}

上列會分別設-webkit-border-radius、-moz-border-radius、border-radius是針對不同瀏覽器做的圓角設定，可以參考MDN的說明。

訂閱：文章 (Atom)

Amazon Ads

2014年4月29日 星期二

2014年4月26日 星期六

2014 Java Developer Day

2014年4月25日 星期五

2014年4月23日 星期三

2014年4月22日 星期二

2014年4月18日 星期五

2014年4月17日 星期四

2014年4月12日 星期六

2014年4月11日 星期五

常用指令

參考資源

2014年4月10日 星期四

2014年4月8日 星期二

2014年4月3日 星期四

2014年4月2日 星期三

2014年4月29日星期二

2014年4月26日星期六

2014年4月25日星期五

2014年4月23日星期三

2014年4月22日星期二

2014年4月18日星期五

2014年4月17日星期四

2014年4月12日星期六

2014年4月11日星期五

2014年4月10日星期四

2014年4月8日星期二

2014年4月3日星期四

2014年4月2日星期三