Fold All / Expand All

2010年5月30日 星期日

網頁字型與配色

不專業文…

最近常聽到說不要把color和background-color配成#000, #FFF,對比太強不適合閱讀,所以就找了幾個網站來看一下,究竟人家都是怎麼配的呢?

[BBC]
#464646, #FFFFFF
13px
verdana,helvetica,arial,sans-serif

[CNN]
#000000, #FFFFFF
14px
line-height: 19px
arial

[NY Times]
#000000, #FFFFFF
1.5em
georgia,"times new roman",times,serif

[FOX News]
#111111, #FFFFFF
13px
arial, sans-serif

[NHK]
14.4px; 20.15px;
sans-serif
#000000, #FFFFFF

上面這幾個新聞頁面,除了BBC把color調成#464646,基本上還是以#000, #FFF為主(FOX是#111)。

[Intel]
http://www.intel.com/consumer/products/processors/corei5.htm
11.05px; 15.3px
Verdana,Helvetica,Arial,Sans-Serif
#707070, #FFFFFF

[Microsoft]
http://www.microsoft.com/upgrade/
12.8px; 19.2px;
Verdana
#000000, #FFFFFF
http://windows.microsoft.com/en-US/windows7/help
13.2833px; 17px;
segoe ui,verdana,arial,sans-serif
#333333, #FFFFFF

[Apple]
http://store.apple.com/us/browse/campaigns/back_to_school?aid=www-naus-bts2010-00053
13px; 18px;
"Lucida Grande",Helvetica,Arial,Verdana,sans-serif
#333333, #FFFFFF

[Adobe]
http://www.adobe.com/products/acrobat/
13px; 19px;
Arial,Helvetica,sans-serif
#333333; #FFFFFF

Intel調成#707070,不過我覺得實在是太淡了;Microsoft的不同頁面會不同,有#333的,也有#484848的;Apple的文字大多是#333,而header會調成#000加bold;Adobe主要也是用#333。

結論是…新聞類,也就是使用者真的會去讀這些文字的,仍然是以#000, #FFF,而描述性質,也就是使用者可能只是描一下,不會認真看的,就調稍微淡一點,#333還蠻多的,但底色仍然是#FFF。不過很少整個網頁的底色都是#FFF,可能會在最上方有banner,或者是搭一張漸層的圖,在header的部分可能會是#f0f0f0左右,到文字就是#FFF。

話說那個豆沙綠,有人說比較柔和對眼睛好,又也有人說對比太弱,閱讀起來反而吃力,どっち?

2010年5月27日 星期四

2010年5月20日 星期四

[歌詞] Mariah Carey feat. Ne-Yo - Angels Cry


[Mariah]
I shouldn't have walked away
I would've stayed if you said
We could've made everything OK
But we just
Threw the blame back and forth
We treated love like a sport
The final blow hit so low
I'm still on the ground

I couldn't have prepared myself for this fall
Shattered in pieces curled on the floor
Super natural love conquers all
'Member we used to touch the sky
And

Lightning don't strike
The same place twice
When you and I said goodbye
I felt the angels cry
True love's a gift
But we let it drift
In a storm
Every night
I feel the angels cry

C'mon babe can't our love be revived
Bring it back and we gon' make it right
I'm on the edge just tryin' to survive
As the angels cry

[Ne-Yo]
I thought we'd be forever and always
You were serenity
You took away the bad days
Didn't always treat you right
But it was OK
I do somethin' stupid
And you still stay with me

But you can only go for so long
Doing the one you claim to love wrong
Before too much is enough
You look up
Find your love gone
And

We were so good together
How come we could not weather
This storm and just do better
Why did we say goodbye

'Cause lightning don't strike
The same place twice
When you and I said goodbye
I felt the angels cry
True love's a gift
We let it drift

In a storm
Now every night
I feel the angels cry

[Mariah & Ne-Yo]
C'mon babe can't our love be revived
Bring it back and we gon' make it right
I'm on the edge just tryin' to survive
As the angels cry

Baby I'm missin' you
Don't allow love to lose
We gotta ride it through
I'm reaching for you

Baby I'm missin' you
Don't allow love to lose
We gotta ride it through
I'm reaching for you

Lightning don't strike
The same place twice
When you and I said goodbye
I felt the angels cry
True love's a gift
But we let it slip
In a storm
Every night
I feel the angels cry

Oh babe, don't let the angels cry

2010年5月19日 星期三

Create fast resume data for rtorrent

Adding fast resume data to torrent files
有人寫了一個perl script,可以產生fast resume data。
rtorrent_fast_resume.pl

看起來是塞
libtorrent_resume: {
bitfield: $chunks,
files: [{
priority: 2,
mtime: $mtime
}, {
priority: 2,
mtime: $mtime
}]
}


rTorrent內部的code是在rtorrent/src/core/download_store.cc和libtorrent/src/torrent/resume.cc,似乎是塞比較多東西。

補個tool
BEncode Editor,可以拿來改torrent

2010年5月16日 星期日

荒川UB ED1 TV rip & 大振OP1 TV rip

荒川アンダー ザ ブリッジ ED 1
スネオヘアー - 逆様ブリッジ (rip from TV)


おおきく振りかぶって~夏の大会編~ OP 1
Galileo Galilei - 夏空 (rip from TV)


順便測一下HTML5 Audio Tag

スネオヘアー - 逆様ブリッジ (rip from TV)


Galileo Galilei - 夏空 (rip from TV)

[Uta-Net先行歌詞] Galileo Galilei - 夏空

夏空

歌手:Galileo Galilei
作詞:尾崎雄貴
作曲:尾崎雄貴


僕らが一つ一つの夢を守りぬけるなら
夏空にした約束は100年後でも破れない
それを君は笑って嬉しそうに話してよ
時間をもがくその手を僕は決して放さないからさ

朝日を待つよ明日は嫌いだけど
友達と話すよ人は苦手だけど
難しい歌を聴き始めたよ
ワタシの人生は思うほど簡単には出来てないから
捨てきれない自分大人になったふり
周りを見回しても大人の顔ばかり

好きだった歌が響かなくなったな
誰のせいでもない僕のせいでもないんだろう

僕らが不安の中で道を選び抜けるなら
横道の途中で顔だして何度でも君に会えるよ
グッドラック 手描きの地図が滲んで読めなくなっても
迷いのないこの気持ちがいつでも振り返る勇気くれる

あの日夏の青い空首筋の汗と
吐き捨てた不満や不安とそして希望の数々
街に吹く乾いた風大好きな風景
こじ開けた心の奥にぎゅうぎゅうにつめこんで

進んでく君の姿を見失わないように
何度でも空を仰いで確かめたって構わない

僕らがちぎって飛ばした気持ちが街に消えてく
ビル風が髪を揺らしてぐしょぬれの心乾いたら
振り返る君は笑って夏の終わりを告げてさ
気づいたら手を握ってた見届けるまで離さないよ

諦めと決めつけで色褪せた時代を
目の覚めるような青い色で塗りつぶすように
地図を描く消されても僕らは迷わない

空を駆ける渡り鳥が僕らに自由を歌ってる
震える君の掌を確かめるように握りなおす
グッドラック 僕らの果てはけだるい世界の向こうで
綺麗事なしの約束雲一つない空に放とう

在Windows 7錄下電腦的音樂

在Windows上,有時候網頁聽到音樂,或是影片的音樂想錄下來,找不到原檔,或是原檔的格式要把音軌拆開來一時找不到工具。這時候最簡單的方法,就是把電腦播出來的聲音,原封不動地錄下來。

在Windows XP的時候,只要把錄音裝置設為Stereo Mix就可以做到,但是在Windows 7,錄音裝置打開來,卻只有看到實體的麥克風、線路輸入,Stereo Mix去哪了呢?

其實Stereo Mix還是在的,只是預設被隱藏起來了。打開「錄音裝置」後,按右鍵把「顯示已停用的裝置」打勾,就會看到Stereo Mix了(中文是「立體聲混音」)。如果把「顯示已停用的裝置」打勾後,仍然沒有出現的話,請先安裝音效卡驅動程式,咦……Windows 7不用安裝音效卡驅動程式就可以放音樂啦,沒錯!Windows 7因為是後來出的作業系統,所以在它之前出的硬體的驅動程式大多內建了,不用另外安裝,但是要讓「立體聲混音」出現就要安裝喔,像我也是不用安裝就可以播音樂,但是已停用裝置裡就沒有立體聲混音,把Realtek的音效卡驅動程式裝起來,才出現。

大多音效卡都是主機板內建,用主機板附的CD安裝驅動程式即可,如果CD找不到了,也可以到該主機板官網去下載。

以下是圖:

從右下角開啟「錄音裝置」


預設是沒有「立體聲混音」的


按右鍵,把「顯示已停用的裝置」打勾


右鍵點「立體聲混音」,把它啟用


然後就ok啦,再來就看要用什麼程式來錄。

以下是用Audacity來錄音

開啟Audacity之後,先到「編輯」→「偏好設定」


錄製裝置選「立體聲混音」


按下確定後,就可以用Audacity錄電腦上的聲音啦

2012-0907更新

Audacity 2的介面請參考下方


TIOBE Programming Community Index for May 2010

TIOBE Programming Community Index for December 2006
TIOBE Programming Community Index for February 2007

隔了幾年再來看就很有趣


  1. C
  2. Java
  3. C++
  4. PHP
  5. (Visual) Basic
  6. C#
  7. Python
  8. Perl
  9. Delphi
  10. Objective-C
  11. Ruby
  12. JavaScript
  13. PL/SQL
  14. SAS
  15. Pascal
  16. Lisp/Scheme/Clojure
  17. ABAP
  18. Go
  19. MATLAB
  20. Lua
和前幾年比較,C以些微的差距,重新登上王座,VB和C#走勢一下一上,Python終於領先Perl,JavaScript和Ruby則離開前十,Delphi一直在十名上下徘徊,前十最亮眼就是有iPhone加持的Objective-C,前二十則是有Google名聲的Go,似乎Scripting language的流行已經退燒。

大同電鍋煮紅豆薏仁湯

相關連結:
大同電鍋與綠豆薏仁湯

這次沒有圖XD。

材料:
o 紅豆薏仁 一杯(量米杯)
o 貳號砂糖 半杯(量米杯)

作法:
1. 快洗紅豆薏仁,用熱水泡約4小時
2. 泡好的水倒掉,外鍋2杯水、內鍋2杯水
3. 第一次跳起來,約10分鐘後,外鍋倒2杯水、內鍋1杯半水
4. 第二次跳起來,加入半杯貳號砂糖就完成了

這次煮完,還內鍋水仍有一些,所以上述的2杯、1杯半應該可以稍微減少

2010年5月15日 星期六

HTML5 Audio Tag Support Format

html5-audio-format-support

由於IE8不支援HTML 5 Audio tag,所以就不列入測試。

上圖的測試平台為Windows 7,瀏覽器由左往右分別是:
Firefox 3.6.3
Google Chrome 6.0.401.1 (呃…Chrome又偷偷更新了)
Opera 10.53
Safari 4.0.4

測試格式分別為:mp3, m4a (AAC), m4a (ALAC), ogg (Vorbis), wav, au, aiff

結果:
mp3: Chrome, Safari
m4a(AAC): Chrome, Safari
m4a(ALAC): Safari
ogg: Firefox, Chrome, Opera
wav: Fierfox, Opera, Safari; Chrome (*1)
au: Safari
aiff: Safari

這次測試了7種格式,Safari就支援了6種,但是唯獨其他三家都支援的ogg(Vorbis)不能播,看起來就是iTunes支援的格式。

* 流通度最高的mp3,卻只有Chrome和Safari支援。
* Firefox和Opera都只支援ogg(Vorbis)和wav。
* Chrome的wav雖然顯示為可以播放,但是按下去卻只有一聲雜音就停了,可能是版本問題,不知道4.0或5.0是否也這樣。

結論:沒mp3就沒搞頭啦,這audio tag的實用度還早。

2010年5月13日 星期四

利用 livedoor ねとらじ 來架電台

沒有大水管架電台,那就來livedoor ねとらじ吧。

先來ladio網站看現在哪個server比較空

圖上推薦server為: std2.ladio.net, port用8140。密碼是「ladio」

DJ軟體可以用edcast搭配winamp,用edcast要送mp3的話,記得把lame_enc.dll丟到winamp資料夾下才可以喔。

edcast設定頁面

encoder:MP3 Lame, bitrate, samplerate基本上是隨意啦,用64kbps會比較順,但是128kbps的音質比較好。
Server type:Icecast2
Mountpoint:取一個相關又不重覆的mountpoint吧,這和stream url相關

設定好,確認connect成功(connected),在winamp上播的歌,就會stream到ladio上啦。

而radio stream url就是http://[server]:[ip]/[mountpoint].m3u。如上圖的edcast設定的話,url就會是「http://std2.ladio.net:8160/franks543.m3u」

可以跑到多少人沒測過,看節目表上人數排行前面有很多300人左右,不過bitrate最高只設到64kbps。

[Ext JS] Adjust scrollOffset of GridPanel dynamically

demo page of "Adjust scrollOffset of GridPanel dynamically"

Ext JS在3.x的GridPanel,會固定留一個空間給scrollbar,當grid內容不需要scrollbar的時候,header的空白看起來就有點怪怪的。

之前Ext論壇有看到動態調整的方法,稍微改一下後,就是demo page的結果。

調整該Window的高度,讓grid的scrollbar需要或不需要出現,而header的空間會跟著調整。

demo的code很亂,其實重點只有一個,就是在GridPanel的viewConfig實作onLayout。藉由比較clientWidth和offsetWidth來得到是否需要留scrollbar空間。
var onLayout = function() {
var els = this.el.select('.x-grid3-scroller', this);
var scroller = els.elements[0];

if (scroller.clientWidth === scroller.offsetWidth) {
// no scroller
this.scrollOffset = 2;
} else {
// scroller
this.scrollOffset = undefined;
}
this.fitColumns(false);
};

2010年5月12日 星期三

[Ext JS] Fix TriggerField in Toolbar, trigger height is not correct in webkit-based browser

標題真是長的亂七八糟…

在Webkit-based browser (Google Chrome, Safari),當doctype是設成strict mode,TriggerField (or ComboBox)在Toolbar裡面的時候,trigger的高度就會不正確。

解法很簡單,只要用以下的css override掉即可
.ext-webkit .x-small-editor .x-form-text {
padding-top: 1px;
}


demo page

2010年5月7日 星期五

SyntaxHighlighter mod for new Blogger post

Blogger Template更新文章才剛發完,就遇到問題@@

第一個是Blogger draft的post editor出去的文章,和之前不一樣啊…。在有開「Convert line breaks」的時候,之前會把newline換成br,但是現在的是把newline前面加上br!

而SyntaxHighlighter的bloggerMode是把br換成newline,在Blogger draft的文章就會變成兩個newline,原本上下行的code,中間就會多出一行空白行。

目前的解法,是把SyntaxHighlighter的bloggerMode替換的regular expression改成,看到br或是br newline時,換成newline,為了相容新舊。

不過在IE8,還是會有問題,因為code的white-space是設pre,看起來像是timing的問題,IE8在replace br newline之後,會因為white-space: pre而又多出newline,然後就會多空白行……目前還沒找到解法。

2010年5月6日 星期四

Blogger Template更新

Blogger draft現在有Tempalte Designer,不免俗要來趕一下流行,就變成現在這樣。
記錄一下,除了套template之外,還改了xml哪裡。

在Template Designer改好style後,首先就是把SyntaxHighlighter套上去,基本上就是把之前upgrade 1.5 to 2.0的東西放到xml裡,不同的地方在於,之前直接去連SyntaxHighlighter官網的css, js,而且是一個syntax就一個檔,似乎影響了page loading速度。所以這次把需要的js, css用YUI Compressor壓成單一檔,丟到Google Site。

記錄一下用來壓檔案的Python script
import os

JAVA = 'java'
JAR_FILE = 'external/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar'

def concateCSS(output, items):
# concate files
temp = '%s.temp.css' % (output, )
out = open(temp, 'wb')

for item in items:
out.write('/* file [%s] begin */\n' % (item, ))
out.write(open(item, 'rb').read())
out.write('\n/* file [%s] end */\n' % (item, ))
out.close()

return temp

def concateJS(output, items):
# concate files
temp = '%s.temp.js' % (output, )
out = open(temp, 'wb')

for item in items:
out.write('// file [%s] begin\n' % (item, ))
out.write(open(item, 'rb').read())
out.write('\n// file [%s] end\n' % (item, ))
out.close()

return temp

def runYUICompressor(output, temp):
options = '--verbose'
cmd = '%s -jar %s %s -o %s %s' % (JAVA, JAR_FILE, options, output, temp)

fd = os.popen(cmd, 'r')
print(fd.read())

print('compress %s to %s' % (temp, output))

def doCompress(dict):
for output in dict:
items = dict[output]

splits = output.rsplit('.', 1)
if len(splits) != 2:
continue

temp = ''
if splits[1].lower() == 'js':
temp = concateJS(output, items)
elif splits[1].lower() == 'css':
temp = concateCSS(output, items)
else:
continue

runYUICompressor(output, temp)

if __name__ == '__main__':
SH_ROOT = 'external/syntaxhighlighter_2.1.364'
SH_SCRIPT = '%s/scripts' % (SH_ROOT, )
SH_STYLES = '%s/styles' % (SH_ROOT, )

dict = {
'compressed.syntaxhighlighter.js': [
'%s/src/shCore.js' % (SH_ROOT, ),
'%s/shBrushCpp.js' % (SH_SCRIPT, ),
'%s/shBrushCss.js' % (SH_SCRIPT, ),
'%s/shBrushJScript.js' % (SH_SCRIPT, ),
'%s/shBrushPhp.js' % (SH_SCRIPT, ),
'%s/shBrushPython.js' % (SH_SCRIPT, ),
'self.shBrushDiff.js',
'self.shConfig.js',
],

'compressed.syntaxhighlighter.css': [
'%s/shCore.css' % (SH_STYLES, ),
'%s/shThemeDefault.css' % (SH_STYLES, ),
'self.shStyle.css',
],

'compressed.folding.js': [
'self.folding.js'
],
'compressed.folding.css': [
'self.folding.css'
],
}

doCompress(dict)


處理完SyntaxHighlighter後,就是把Google Analytics加上去,到Google Analytics的編輯頁面,把js code貼到前面即可。

最後是加上folding功能,這回不用之前自己寫的 dom query function,直接用Google CDN host的Ext Core,在xml插入folding marker和fold/expand all的span後,js用20行就解決掉了,而且單post的hide還有特效呢
Ext.onReady(function() {
var bodys = Ext.select('div.post-body');
bodys.setVisibilityMode(Ext.Element.DISPLAY);

// add click handler on each title folding span
var els = Ext.select('span.folding');
els.each(function(elem, self, index) {
elem.on('click', function(evt, el, obj) {
var postBody = Ext.fly(el.id).parent('h3').next('div.post-body');
postBody.setVisible(!postBody.isVisible(), true);
});
});

// add click handler to fold/expand all
Ext.fly('fold_all_span').on('click', function() {
bodys.hide();
});
Ext.fly('expand_all_span').on('click', function() {
bodys.show();
});
});