詳細見[資訊分享] 來路不明的連結網站domar.ru，簡單講一下要點
- 這是Spam Link，為的是吸Page View。上文說是無害，但不保證現在的也是 (尤其網站有大量廣告的話...)
- 常見於Blogger的流量統計
- 重要:「千萬不要去點擊你的Blogger流量統計的不明連結。」
- .ru的網址有必要格外留神 (.cn是另一個，原因是這些Domain被人惡搞太嚴重了)
- 同類的有postring.tk
上網要小心啊。
2011年12月29日 星期四
小心流量統計中的Traffic source domar.ru
在看Blogger的流量統計時(google analytics)的source時看到了一個奇怪的source "domar.ru"。基於本能 (.ru的source去連中文blog)先問一下google大神，果不然有問題... 以下是google.com.hk的結果:
詳細見[資訊分享] 來路不明的連結網站domar.ru，簡單講一下要點
詳細見[資訊分享] 來路不明的連結網站domar.ru，簡單講一下要點
2011年12月26日 星期一
Merry Christmas & Happy Boxing Day 之...有趣的聖誕網頁精選
ⓂⒺⓇⓇⓎ Ⓧ'ⓂⒶⓈ & ⒽⒶⓅⓅⓎ ⓃⒺⓌ ⓎⒺⒶⓇ
★┈┈┈┈☆┈┈┈┈┈┈┈☆┈
┈┈┈╱╲┈ⒸⒽⓇⒾⓈⓉⓂⒶⓈ
┈┈╱┈┈╲┈┈┈ⒺⓋⒺ┈┈┈
┈★╱┈┈╲┈┈┈┈┈┈☆┈┈
┈┈╱┃┃╲┈ⓅⓇⒶⓎ┈ⒻⓄⓇ
☆┈┈┃┃┈┈┈┈ⓅⒺⒶⒸⒺ┈
因為昨天太醉所以今天才寫~有趣的聖誕惡搞精選(Geek)
- CSS3 3D Rocks! "Oh DOM Tree, Oh DOM Tree! Thy leaves are all form elements! "
http://hakim.se/experiments/css/domtree/ by @hakimel (Song by @paulirish) - JS1K Style Merry Xmas by @cowboy
http://benalman.com/code/projects/js1k-organ1k-xmas/organ1k-xmas.html - Geek, Really Geek: How can we draw a Christmas tree with decorations, using TikZ? http://tex.stackexchange.com/questions/39149/how-can-we-draw-a-christmas-tree-with-decorations-using-tikz
- Let it snow in CSS3 animation: http://designshack.net/tutorialexamples/letitsnow/index.html
- Let it snow in JS, with unique snowflakes via glyhs ('+*×' or '❄❅❆')
http://zeptojs.com/let-it-snow/ - Christmas Decoration by @codepo8
http://jsfiddle.net/codepo8/xbVhh/
Merry Christmas and Happy New Years!
p.s.1 另外因為假期，星期天網語上星期及今星期休刊
p.s.2 今天是星期一
p.s.1 另外因為假期，星期天網語上星期及今星期休刊
p.s.2 今天是星期一
2011年12月23日 星期五
.net magazine: 2011 in review 系列精選
2011年12月18日 星期日
星期天網語: 初音ミク (HATSUNE MIKU) by KC
引言: 初音，全名初音ミク（初音未來)，是日本Yamaha「電子音樂製作語音合成軟件」－"Vocaloid"眾多電子歌手之一，以日語為主。作品常見於日本niconico*，但也有不少人將之轉載、配上字幕上傳到Youtube等平台之上。
* niconico，全名"NICONICO動畫"，日本一個和youtube相似但有更強的留言互動功能(彈幕留言)及live-streaming (生放送/現場直播)的影片上傳網站
然而何以初音可以在日本大流行至有自己的演唱會、遊戲、漫畫、模型、各式同人，甚至是在日本以外流行? 接下來由專業的初音FAN，KC (@kctsang) 為大家介紹－－
========
近日在網上見到有人轉貼一編有關初音ミク的簡介，雖然我有點奇怪為何在她推出了四年多後才寫這種簡介文，但作為一個Vocaloid曲愛好者，我還是點了進去看看…
OMG…這種就像「沒有[插入有名的Web 2.0產品]，Web 2.0的魅力也會遜色不少」，無視了其中原因，只取其中一個突出的的成功例子來以偏既全的說法，只能說是外行…
其實那文中也有提到Web 2.0，但偏偏只是輕輕帶過日本的動畫分享服務Niconico動畫是Web 2.0之一，反而忘記了Web 2.0的根本：User-generated Content的本質，才是初音熱潮的動力。
而從文中反而寫了119(插圖師)和supercell早期的誤會之類，這種根本微不足道的事(反而不提初音的人設KEI?)來看，我猜作者有參考了supercell的日文wiki條目 (中文)才寫文，但為甚麼又不參考一下初音ミク的條目 (中文) 呢？在年表那邊也寫了：
沒錯，這首《みくみくにしてあげる》才是初音流行的引爆點，Supercell說到底也只是火上加油。
- 早期的初音原創曲中的歌詞，大部份都是環繞初音的角度來看，例如描寫用家安裝初音的"みくみくにしてあげる"，寫初音試版試用期限的"Time Limit"，寫初音第一次唱歌時的"ハジメテノオト"；supercell的"メルト"是第一批沒了這種特性，單單只是「寫一首流行曲，然後用初音來作歌手」
- 歌和詞根本就不是寫給的初音用的(要知道寫得不好的曲很易突出初音的弱點，而supercell的曲大部份都有尖音，叫喊之類初音不在行的部份)
- 調教(指Vocaloid中對發音的調整)很隨便，只差不是沒調教直接使用(這點後期曲有改善)
- 到supercell打出名堂後，便完全脫離了Vocaloid界(除了後來為Sega遊戲寫的三兩首曲)
【貓箱註腳】: ryo是supercell的核心成員
Google Chrome: Hatsune Miku (初音ミク)
注意到這動畫的重點嗎？
第一是那不斷出現的"Upload"鍵、
第二是尾聲出現的那句"Everyone, Creator'。
就如上文提及，User-generated Content就是Web 2.0的本質；這點剛好將Vocaloid和一眾個人作曲家拉在一起了：
原本一位作曲家如果寫了一首歌想找歌手，必需找辦法找一位歌手，但有以下問題：
- 如何找歌手？身邊可能沒人唱得好；網上找也可能有聯絡上的問題
- 錄音環境和器材的問題
- 歌手歌聲和風格的問題
Vocaloid的定位，可說是「給作曲家用的歌手」，無需添購其它器材，只要有一台PC便可以為自己作的曲加上歌手；但為何要到初音ミク才爆發性地流行？當然不單是封面用上了萌系角色這麼簡單！
在這兒要說一點歷史：Vocaloid其實也有不同版本，初音ミク用的是Vocaloid2，而在她之前當然有Vocaloid 1，在日本最有名用了Vocaloid的音聲軟件是女聲的Meiko男聲的Kaito，但兩者都賣得不算好，因為Vocaloid人聲的效果不算好，就算直到現在調教已經很成熟的時代，也很難做出自然的歌聲，甚至可以說是頗差；直到Vocaloid 2出現，將歌唱聲音大為改善後，才可算是一般人也能用的歌手軟件。
再說回個人作曲家那邊，初音ミク的出現令他們可以以合理的價錢找到一個歌手，由作曲填詞到演唱全都可以不求人，大大降低了投搞的門檻。
但最早期的ミク除了官方的demo曲外，大部份人都只是用她來翻唱日文名曲來試驗她的性能；直到以下三曲出現，展現了初音在原創音樂上的可能性：
1. 中毒性高，同時發揚了民謠風格(和はちゅねミク以及初音=葱)，Otomania的《Ievan Polkka》^
VOCALOID2 初音ミクに「Ievan Polkka」を歌わせてみた
2. 秋葉系(或稱電波系)風格，ika的《みくみくにしてあげる♪》
(此曲再生數超過9,200,000，比兩個半月後出現的メルト再生高出超過1,400,000)
【初音ミク】みくみくにしてあげる♪【してやんよ】
3. 逆向思考，故意加重初音歌聲的電子感來減少其違和感，再配上電音J-POP風格，kz的《Packaged》
初音ミクがオリジナル曲を歌ってくれました「Packaged」 Full Ver.
由這些曲為起點，一眾創作者不斷以初音為中心，進行各種一次和二次創作，例如：
- 各式各樣歌曲，曲風由Pop到Trance，Techno，Eurobeat，Jazz，R&B，Rock，Hardcore，Metal，話劇式，民謠式…甚至連FamilyMart入店曲和般若心経各式風格remix
- 歌詞由情愛，動畫式歌詞，搞笑，舊曲新詞，到成人踏界，生與死，世界滅亡，甚至，家暴，自殺，婚外情，情慾等等，應有盡有
而創作方去也不限於歌曲方面，在各種媒體上也有其它發展
- 由MV至搞笑短片也做得出的簡易3D動畫製作軟件MikuMikuDance (MMD)
- 一眾Vocaloid成員的各種設定，例如Kaito喜歡吃Häagen-Dazs，鏡音姊弟坐的黃色壓路機#1
- 由一首歌發展至小說，舞台劇等多媒體發展的中世紀宮殿式故事《悪ノ娘》系列#2
從以上例子，可見就算不同界別的人的創作，就算是完全不同方向的東西，但卻有Vocaloid系列的角色作為一個中心點，吸引越來越多人加入，並圍繞著Vocaloid進行各種的創作(這點和東方系列的情況有點相似)，令各種User-generated Content帶種和而不同的味道，從中產生不斷的正回饋。
說了那麼多，其實也是想說明一點：在這個Web 2.0的時代，利用Web 2.0爆紅的東西，基本上不會是單一原因或人物而走紅，更不會說「沒有某某便失色不少」；Facebook，Twitter，Flickr不會沒了某用戶便失色，Youtube不會沒了Rickroll便失色，同樣地，就算不計Vocaloid系列，單指初音ミク，也絕不會說沒了某作曲家便失色。
能說的，只有「Vocaloid因為Everyone，才有現在的出色」。
後記：
原本打算介紹一些Vocaloid曲，但想到各人口味不同，所以還是作罷；但以下一曲無論如何也要介紹一下：
【初音ミクAppend】3 Years Back【オリジナル曲】
這是一首令我每次聽時都有點想哭，很平淡但帶種「往事一去不返的」感覺的歌。
===========【貓箱註腳】============
^ 《Ievan Polkka》，又名甩蔥歌，最初是波蘭民謠被歌手Loituma改篇翻唱之後再被4chan惡搞成《Loituma Girl》，及後再經Otomania改篇變成日文空耳版至成為另一首歌...算是半原創?
#1 Vocaloid每個成員都有自己的特色及代表物品－雖則都是同人惡搞出來的
#2 大多數Vocaloid的代表作都有中文字幕，youtube上面一堆。
* niconico，全名"NICONICO動畫"，日本一個和youtube相似但有更強的留言互動功能(彈幕留言)及live-streaming (生放送/現場直播)的影片上傳網站
然而何以初音可以在日本大流行至有自己的演唱會、遊戲、漫畫、模型、各式同人，甚至是在日本以外流行? 接下來由專業的初音FAN，KC (@kctsang) 為大家介紹－－
========
近日在網上見到有人轉貼一編有關初音ミク的簡介，雖然我有點奇怪為何在她推出了四年多後才寫這種簡介文，但作為一個Vocaloid曲愛好者，我還是點了進去看看…
『可以說沒有Niconico和初音未來就沒有今天的supercell…』「嗯沒錯…」
『…而沒有supercell，初音的魅力也會遜色不少』(噴)
OMG…這種就像「沒有[插入有名的Web 2.0產品]，Web 2.0的魅力也會遜色不少」，無視了其中原因，只取其中一個突出的的成功例子來以偏既全的說法，只能說是外行…
其實那文中也有提到Web 2.0，但偏偏只是輕輕帶過日本的動畫分享服務Niconico動畫是Web 2.0之一，反而忘記了Web 2.0的根本：User-generated Content的本質，才是初音熱潮的動力。
而從文中反而寫了119(插圖師)和supercell早期的誤會之類，這種根本微不足道的事(反而不提初音的人設KEI?)來看，我猜作者有參考了supercell的日文wiki條目 (中文)才寫文，但為甚麼又不參考一下初音ミク的條目 (中文) 呢？在年表那邊也寫了：
「9月20日 - ニコニコ動画に『みくみくにしてあげる♪【してやんよ】』投稿。大人気の楽曲に。」
(9月20日 - 『みくみくにしてあげる♪【してやんよ】』在Niconico動畫投稿。成為了很流行的樂曲。)
沒錯，這首《みくみくにしてあげる》才是初音流行的引爆點，Supercell說到底也只是火上加油。
ryo的成功=初音的成功？
在這邊容我說一句：我個人是很不屑supercell的做法。沒錯，他們成功了，也為Vocaloid的熱潮投下了大量燃料，但在我眼中，他們只不過是踏著初音的熱潮，讓自己跳得更高後一去不回頭，而不是走入Vocaloid圈內作出正回饋。為何小弟這麼說？- 早期的初音原創曲中的歌詞，大部份都是環繞初音的角度來看，例如描寫用家安裝初音的"みくみくにしてあげる"，寫初音試版試用期限的"Time Limit"，寫初音第一次唱歌時的"ハジメテノオト"；supercell的"メルト"是第一批沒了這種特性，單單只是「寫一首流行曲，然後用初音來作歌手」
- 歌和詞根本就不是寫給的初音用的(要知道寫得不好的曲很易突出初音的弱點，而supercell的曲大部份都有尖音，叫喊之類初音不在行的部份)
- 調教(指Vocaloid中對發音的調整)很隨便，只差不是沒調教直接使用(這點後期曲有改善)
- 到supercell打出名堂後，便完全脫離了Vocaloid界(除了後來為Sega遊戲寫的三兩首曲)
【貓箱註腳】: ryo是supercell的核心成員
初音為何流行？
在說這之前，我們先來看看，近來Google Chrome和初音合作的廣告：Google Chrome: Hatsune Miku (初音ミク)
注意到這動畫的重點嗎？
第一是那不斷出現的"Upload"鍵、
第二是尾聲出現的那句"Everyone, Creator'。
就如上文提及，User-generated Content就是Web 2.0的本質；這點剛好將Vocaloid和一眾個人作曲家拉在一起了：
原本一位作曲家如果寫了一首歌想找歌手，必需找辦法找一位歌手，但有以下問題：
- 如何找歌手？身邊可能沒人唱得好；網上找也可能有聯絡上的問題
- 錄音環境和器材的問題
- 歌手歌聲和風格的問題
Vocaloid的定位，可說是「給作曲家用的歌手」，無需添購其它器材，只要有一台PC便可以為自己作的曲加上歌手；但為何要到初音ミク才爆發性地流行？當然不單是封面用上了萌系角色這麼簡單！
在這兒要說一點歷史：Vocaloid其實也有不同版本，初音ミク用的是Vocaloid2，而在她之前當然有Vocaloid 1，在日本最有名用了Vocaloid的音聲軟件是女聲的Meiko男聲的Kaito，但兩者都賣得不算好，因為Vocaloid人聲的效果不算好，就算直到現在調教已經很成熟的時代，也很難做出自然的歌聲，甚至可以說是頗差；直到Vocaloid 2出現，將歌唱聲音大為改善後，才可算是一般人也能用的歌手軟件。
再說回個人作曲家那邊，初音ミク的出現令他們可以以合理的價錢找到一個歌手，由作曲填詞到演唱全都可以不求人，大大降低了投搞的門檻。
但最早期的ミク除了官方的demo曲外，大部份人都只是用她來翻唱日文名曲來試驗她的性能；直到以下三曲出現，展現了初音在原創音樂上的可能性：
1. 中毒性高，同時發揚了民謠風格(和はちゅねミク以及初音=葱)，Otomania的《Ievan Polkka》^
VOCALOID2 初音ミクに「Ievan Polkka」を歌わせてみた
2. 秋葉系(或稱電波系)風格，ika的《みくみくにしてあげる♪》
(此曲再生數超過9,200,000，比兩個半月後出現的メルト再生高出超過1,400,000)
【初音ミク】みくみくにしてあげる♪【してやんよ】
3. 逆向思考，故意加重初音歌聲的電子感來減少其違和感，再配上電音J-POP風格，kz的《Packaged》
初音ミクがオリジナル曲を歌ってくれました「Packaged」 Full Ver.
由這些曲為起點，一眾創作者不斷以初音為中心，進行各種一次和二次創作，例如：
- 各式各樣歌曲，曲風由Pop到Trance，Techno，Eurobeat，Jazz，R&B，Rock，Hardcore，Metal，話劇式，民謠式…甚至連FamilyMart入店曲和般若心経各式風格remix
- 歌詞由情愛，動畫式歌詞，搞笑，舊曲新詞，到成人踏界，生與死，世界滅亡，甚至，家暴，自殺，婚外情，情慾等等，應有盡有
而創作方去也不限於歌曲方面，在各種媒體上也有其它發展
- 由MV至搞笑短片也做得出的簡易3D動畫製作軟件MikuMikuDance (MMD)
- 一眾Vocaloid成員的各種設定，例如Kaito喜歡吃Häagen-Dazs，鏡音姊弟坐的黃色壓路機#1
- 由一首歌發展至小說，舞台劇等多媒體發展的中世紀宮殿式故事《悪ノ娘》系列#2
從以上例子，可見就算不同界別的人的創作，就算是完全不同方向的東西，但卻有Vocaloid系列的角色作為一個中心點，吸引越來越多人加入，並圍繞著Vocaloid進行各種的創作(這點和東方系列的情況有點相似)，令各種User-generated Content帶種和而不同的味道，從中產生不斷的正回饋。
說了那麼多，其實也是想說明一點：在這個Web 2.0的時代，利用Web 2.0爆紅的東西，基本上不會是單一原因或人物而走紅，更不會說「沒有某某便失色不少」；Facebook，Twitter，Flickr不會沒了某用戶便失色，Youtube不會沒了Rickroll便失色，同樣地，就算不計Vocaloid系列，單指初音ミク，也絕不會說沒了某作曲家便失色。
能說的，只有「Vocaloid因為Everyone，才有現在的出色」。
後記：
原本打算介紹一些Vocaloid曲，但想到各人口味不同，所以還是作罷；但以下一曲無論如何也要介紹一下：
【初音ミクAppend】3 Years Back【オリジナル曲】
這是一首令我每次聽時都有點想哭，很平淡但帶種「往事一去不返的」感覺的歌。
===========【貓箱註腳】============
^ 《Ievan Polkka》，又名甩蔥歌，最初是波蘭民謠被歌手Loituma改篇翻唱之後再被4chan惡搞成《Loituma Girl》，及後再經Otomania改篇變成日文空耳版至成為另一首歌...算是半原創?
#1 Vocaloid每個成員都有自己的特色及代表物品－雖則都是同人惡搞出來的
#2 大多數Vocaloid的代表作都有中文字幕，youtube上面一堆。
2011年12月16日 星期五
年未Browser戰報: IE 的黃昏 & "Finally they heard from us"
IE的黃昏
繼Chrome爬過FF後，上月尾 (W47)Chrome 15總算登上了皇者之座，成為全球最多人使用的瀏覽器版本
只是如果去看亞洲區的統計數字，東亞，尤其是大中華區還是IE當道orz
"Finally they heard from us" - The Christmas Gift From M$ to Developer
大概是他們自己也支援至怒羞，他們決定對不更新的IE用家們祭出了史上最大的地圖砲－－「透過Windows Update自動更新WinXP至Win7的IE至最高可支援版本。*」－－Exploring IE
* XP是IE8，Vista/Win7是IE9
這次的更新是Google Chrome式的背景更新 (就是說一般的正版用戶都會乖乖的更新了)，當然一如慣例那是可以封的，只是他們並不想你們這樣做 XD
不過不會更新的傢伙還是有的:
- 因盜版而廢了自動更新的用家
- 企業更新機制不容許 (系統有reborn卡或者權限不足的)
- 企業怕連鎖效應 (內部系統出現問題而要升級或支援服務)而下令廢了自動更新的
- 用家因要使用IE-only的特殊服務(網銀)而不能更新的 (中國或南韓多屬此例)
所以要IE6/7/8從地球上消失還是很遠 XD
*其實以前好像祭過出來，而且是不能阻止的，不過因為當時盜版橫行加上企業用戶一堆反彈所以大失敗...而且其實很久以前的IE 6是有Auto-patch的
2011年12月11日 星期日
星期天網語: 那些年，我們膝蓋中過的箭 (The Knee-arrow we took)
標題那個寫法是「膝蓋中箭體」的變種之一，最初版本如下
上片反映各城守衛都會說這句，可見膝蓋中箭是守城衛兵必經之路啊! (*此句出現條件通常是對話已完，其他stock line又用盡就會出這句，然後對話loop restart)
原版分別如下:
這句在國內外愈來愈火: 國外的請參考Knows Your Meme，國內/台灣/華語圈則是遊戲網站(含Komica)、微博、Twitter及百度貼吧在傳，經過炒作後演化至這個版本:
話說我本來不知道這梗的，直到我的膝蓋中了一箭。
Reference:
Knows Your Meme: I took an arrow in knee
成句/直到我的膝蓋中了一箭/Then I took an arrow in the knee.
後記:
還真有人去考究膝蓋中箭後能不能當衛兵這事。
如果是我們的世界、中世紀應該是不可能，只是Skyrim是個魔法世界，
「一個有治療藥水和治療魔法的時代」(By SunZZYY)
後記2:
後來kotaku訪問了始作俑者的那位Developer，Todd Howard (Bethesda's chief game developer):
後日談: How They Came Up With Skyrim’s ‘Arrow In The Knee’ Line
"這句的作者是 Emil Pagliarulo [Senior Bethesda game designer]，創作及加入遊戲的原意是想守衛們有多一點個性－不止是說你(玩家)的事，也說說自己的事"
…只是Todd沒想到會大紅。
然而為什麼Emil會寫出這句…很遺憾Kotaku這次找不到本人來問，也許這是另一個故事?
"I used to be _____ like you, then I took an arrow in the knee"一切都是來自The Elder Scrolls V: Skyrim (上古卷軸5：天際)的傳奇男子
「我以前和你一樣是個＿＿＿，直到我的膝蓋中了一箭…」
"傳說在上古捲軸5中有一個風一樣的男子，專門射人膝蓋，每個被射中膝蓋的人都成為了守城的衛兵。因為遊戲中玩家和守城衛兵對話之後幾乎都會吐槽出這句話：「我以前和你一樣是個冒險家，直到我的膝蓋中了一箭…」"以上上半部分為國內(內地)網友唬爛[微博專題]，下半部分是真的: 遊戲中每個守衛在對話完結時都會說這句 "I used to be ..."，是國內外網友一致認證的Skyrim城鎮守衛對話萬用卡－－
上片反映各城守衛都會說這句，可見膝蓋中箭是守城衛兵必經之路啊! (*此句出現條件通常是對話已完，其他stock line又用盡就會出這句，然後對話loop restart)
原版分別如下:
 |
| "I used to be an adventurer like you, then I took an arrow in the knee" |
 |
| 「我以前也是是個冒險者，直到我膝蓋中了一箭…」(正式翻譯) |
"(I)_______________, (then) (I) took an arrow in the knee"國內甚至有「射中膝蓋」的變體；國外則是多了個新字Knee-arrow...
「(我)＿＿＿＿＿＿＿＿＿＿，直到我(的)膝蓋中了一箭…」
話說我本來不知道這梗的，直到我的膝蓋中了一箭。
Reference:
Knows Your Meme: I took an arrow in knee
成句/直到我的膝蓋中了一箭/Then I took an arrow in the knee.
後記:
還真有人去考究膝蓋中箭後能不能當衛兵這事。
如果是我們的世界、中世紀應該是不可能，只是Skyrim是個魔法世界，
「一個有治療藥水和治療魔法的時代」(By SunZZYY)
後記2:
後來kotaku訪問了始作俑者的那位Developer，Todd Howard (Bethesda's chief game developer):
後日談: How They Came Up With Skyrim’s ‘Arrow In The Knee’ Line
"這句的作者是 Emil Pagliarulo [Senior Bethesda game designer]，創作及加入遊戲的原意是想守衛們有多一點個性－不止是說你(玩家)的事，也說說自己的事"
…只是Todd沒想到會大紅。
然而為什麼Emil會寫出這句…很遺憾Kotaku這次找不到本人來問，也許這是另一個故事?
2011年12月9日 星期五
Fireworks 5.1 輸出 Object CSS 的方法
Firework是很多Designer愛用的設計軟件－然而作為Developer此物如同仇敵，因為要把Object的CSS抽出來有•夠•麻•煩。
現在總算是有個方法可以把一些標準一點的CSS3屬性export出來...需要Fireworks 5.1和Fireworks CSS3 Mobile pack
之後在window→extension可以找到CSS Property一欄，在選取了Object的時候可以在這個window看到相應的css屬性及在window的底部看到全套css+html code可以copy
目前成功的有cross-browser的round corner和css gradient [video教學，有用的只有3:10~3:23]，未至於可以取代front-end切圖工序但算是輕鬆一點吧...(至少有個比較好的方法知道那個round-corner的設定了!)
現在總算是有個方法可以把一些標準一點的CSS3屬性export出來...需要Fireworks 5.1和Fireworks CSS3 Mobile pack
之後在window→extension可以找到CSS Property一欄，在選取了Object的時候可以在這個window看到相應的css屬性及在window的底部看到全套css+html code可以copy
目前成功的有cross-browser的round corner和css gradient [video教學，有用的只有3:10~3:23]，未至於可以取代front-end切圖工序但算是輕鬆一點吧...(至少有個比較好的方法知道那個round-corner的設定了!)
2011年12月3日 星期六
互聯網上的狂歡時刻:Black Friday, Cyber Monday & Advent Calendar
對於有在網上購物的人來說美國感恩節前後+整個12月是個破財時刻:
關於Black Friday和Cyber Monday可以參考 [英文] 黑色星期五 Black Friday 與 網路星期一 Cyber Monday。不過接下來的12月要怎樣破財?
那個讓你破財的東西叫Advent Calendar (問世日曆)，或者更直接的"Christmas Countdown"。
Advent Calendar是一個特殊日曆，標示著從12月1日到12月24日的每一天作聖誕倒數之用 [wikipedia]。 而現在一些網站用Advent Calendar推出每日限定優惠、giveaway、特別資源下載等等。
以下是一些Advent Calendar的範例:
基本上用Advent + Day在Twitter可以找到一堆英國為主的Advent Calendar (美國是感恩節最重要，然而英國可是聖誕－不過美國也有Advent Calendar只是少一點)。另外也有一些只在聖誕節一星期的短版Advent Calendar…當然聖誕前後一兩天也會有很多Special和Discount滿天飛，所以十二月是燒錢的啊…
- 感恩節是星期四，可是之前一星期左右網上商店 (e.g. AppStore)優惠就會陸續上架
- 感恩節翌日的那個星期五是Black Friday (黑色星期五)，是傳統商店的瘋狂減價，不過網上商店也會推出優惠
- 感恩節之後第一個星期一是Cyber Monday (網絡星期一)，是網上商店的瘋狂減價
關於Black Friday和Cyber Monday可以參考 [英文] 黑色星期五 Black Friday 與 網路星期一 Cyber Monday。不過接下來的12月要怎樣破財?
那個讓你破財的東西叫Advent Calendar (問世日曆)，或者更直接的"Christmas Countdown"。
Advent Calendar是一個特殊日曆，標示著從12月1日到12月24日的每一天作聖誕倒數之用 [wikipedia]。 而現在一些網站用Advent Calendar推出每日限定優惠、giveaway、特別資源下載等等。
以下是一些Advent Calendar的範例:
- Sitepoint Christmas Countdown: 每日Discount
- MDN Advent Calendar: 在12月1~24日每天出一篇今年的Web Development文章精選
- 24 Ways: 在12月1~24日每天出一篇Web Development/Web Design的文章－基本上是沒人寫過的新技術，作者都很有實力。
- Doctor Who (BBC): 用Advent Calendar玩Video Adventure Game...
- Sky Scanner: Advent x Twitter做抽獎
- Sherlockology (BBC): 資源類(Sidestory?)的Advent Calendar回饋Fans
- JLS: 抽獎和giveaway
- Angrybird: 從12月1日開始一日一篇漫畫
基本上用Advent + Day在Twitter可以找到一堆英國為主的Advent Calendar (美國是感恩節最重要，然而英國可是聖誕－不過美國也有Advent Calendar只是少一點)。另外也有一些只在聖誕節一星期的短版Advent Calendar…當然聖誕前後一兩天也會有很多Special和Discount滿天飛，所以十二月是燒錢的啊…
2011年11月28日 星期一
Tumblr的流量統計
其實tumblr是一如blogger有做流量統計(web stat)，不過用的是完全公開的quantcast (用*.quantserve.com做cdn)
http://www.quantcast.com/ [詳細說明]
在header輸入網址就可以看到該站的流量 (用的方法和google analytic相似)，基本上全部tumblr blog都有 (因為是theme以外的東西)
只是因為是US為重心+公開，所以可以看到的數據很有限...(詳細data要request access...)
希望將來tumblr在dashboard放多一點資料吧...
http://www.quantcast.com/ [詳細說明]
在header輸入網址就可以看到該站的流量 (用的方法和google analytic相似)，基本上全部tumblr blog都有 (因為是theme以外的東西)
只是因為是US為重心+公開，所以可以看到的數據很有限...(詳細data要request access...)
希望將來tumblr在dashboard放多一點資料吧...
Tumblr使用小心得
(在blogger上寫tumblr真是有點過份)
近月開了個tumblr blog，經過近月的使用後算是有點心得...
優點:
近月開了個tumblr blog，經過近月的使用後算是有點心得...
優點:
- 開設簡單，有給subdomain及domain parking (可以用自己的domain)
- 一堆theme可選，customize也給予很大自由度和用placeholder滿好作的 (我恨Blogger用xml!)
- 每篇文章自定網址，也有短網址
- 文章有分類，文字、貼link、加qoute、貼圖/video好方便 (也有不錯的mobile app)
- 可以用markdown
- 不錯的tagging interface
- 內置發推和轉貼到fb上的功能
- 有發問甚至是訪客發文的功能 (要自己開/關)
- 有Reblog來轉別的tumblr user的文/圖
- 還有follow和fav
- 功能太過依靠theme，theme沒有就要自己來... (很多都沒archive/description要自己來...)
- 免費theme的seo滿參差的，某些CSS Style也不佳
- 預設很多東西如comment和流量統計都沒有－而一換theme就要全部重加...
- comment用disqus其實還好，很多theme都有disqus shortname 欄位
- HTML editor是堪用，只是和blogger那隻比差的遠。(可是有markdown不錯)
- 除Image Post type以外的，文章內的圖片要另外找host
總結:
Tumblr快速寫點東西是好，太長大概會死...
2011年11月25日 星期五
那些我從github學到的事：更好的git workflow
[原文:Better git workflow - lesson learnt from github]
(反正弄的複雜都是沒人理時就別搞那麼多了)
如今Github已經做到了簡單: 簡單工具 + 更好的工序 = 超讚的產品
加上他們有著最好的管理風格: 「沒有會議，沒有死線，沒有經理」，「想工作時就工作」...而
THE ZONE™這個概念簡直是一流
Oh, I like this guy. [GLaDOS調]
Extra
1. Github有搞自己的emoji，你可以在github產品 (github, gist) 的comment位用: GitHub Emoji
2. 其實 How GitHub Uses GitHub to Build GitHub 最後一部分有很多github的小秘技
=============
貓咪定理: 如果有甚麼是我覺得很煩不想用這東西一定有甚麼問題－通常是太複雜。
「致世人: 簡化事物吧。如果你用簡單工具就可以有不錯+無痛的工序就用簡單工具Master是可以depoly的」(針對開depoly專用分支說的)
「如果你緊張就depoly到staging」(如果你為人謹慎或者是個會讓master
掛掉的笨蛋)
「讓分支(branch)簡單」(merge/rebase一點也不好玩，又難管)
「code review? 發個pull request，然後大家討論」(明顯比開branch做feature然後再在code上做review好)
「pull request超便宜(hell cheap)不用省」(新feature、實驗甚麼的用pull request討論或實作比branch/丟到issue tracker/fork好－不行的放在一邊就好)
「優先順序(Priority)是觀察所得，不是產生或指派出來的－不然這就是必要性(necessary)而非優先順序」(全部都重要就沒有東西是重要的)
「如果這真的很重要這早就完成了。」(所以issue tracker寫太多也是無謂－有人覺得這很重要就會接手處理)
- How GitHub Uses GitHub to Build GitHub (這組slide超讚，大推~)
(反正弄的複雜都是沒人理時就別搞那麼多了)
如今Github已經做到了簡單: 簡單工具 + 更好的工序 = 超讚的產品
加上他們有著最好的管理風格: 「沒有會議，沒有死線，沒有經理」，「想工作時就工作」...而
THE ZONE™這個概念簡直是一流
Oh, I like this guy. [GLaDOS調]
Extra
1. Github有搞自己的emoji，你可以在github產品 (github, gist) 的comment位用: GitHub Emoji
2. 其實 How GitHub Uses GitHub to Build GitHub 最後一部分有很多github的小秘技
=============
貓咪定理: 如果有甚麼是我覺得很煩不想用這東西一定有甚麼問題－通常是太複雜。
2011年11月21日 星期一
Flash: 瀏覽器plugin之死
Flash Player之死是從Adobe宣佈不再做Mobile版的Flash Player開始...
新聞稿
然後是Adobe把Flex放手給Apache基金會的消息
Adobe將Flex捐贈給Apache基金會
本文要說的是從geek/網頁開發者的角度去看的Flash Player (Plugin)之死。如果不熟Flash系列、需要名詞解說或想參考一下Flash開發者的意見可以看下文
Adobe放棄開發行動平台Flash Player之我見
利申: 我是網頁開發者，而且是HTML5+CSS3+jQuery為主，外加cross-browser及cross-platform (desktop+mobile) 。
==================
通常一個plugin會死都是離不開當年Java applet的死亡方式: 慢、browser crasher、安全問題多、有取代技術 (Flash)，儘管當時Applet是很強大但依然不得人心、難逃一死。
(其實applet某些功能是Flash仍然難以取代，所以其實只是衰落而非死亡－是少了很多人用，但某些特殊Applet仍是有的)
而今日的Flash Player面對的問題也是: 慢*、browser crasher、安全問題多、有取代技術 (HTML5)。
( 歷史是不斷重演的。(′_ゝ`) )
* IE是好一點有硬體加速，可是其他Browser都沒有....
然而真正替Flash Player釘蓋的是: 資源緊拙、多重解像度、沒有滑鼠鍵盤的手機和平板。
簡單來說就是: 在Mobile上是得Flash Player無所用。看影片燒電 (硬體支援不足只好去燒CPU)、一堆遊戲看到玩不到 (鍵盤操作的全滅)、網站是燒完頻寬後再加上一整個難用 (解像度問題)...所以就算Flash Player可以配合與其八字嚴重不合的Webkit engine，以desktop環境為主的Flash跟本是不配合，Flash開發者或是Flash Player要改成mobile friendly的方式也很困難。
所以Adobe的Flash派在Mobile Browser上如何努力也是玩不下去。(Apple和M$顯然是老早知道所以從來沒有在自家手機OS的Browser搞Flash支援)
在"Write Once, Run Everywhere"的理想和渴望消滅plugin的HTML5的夾擊之下，Flash在Browser應用上喪鐘已響: 網站這部分在HTML5日漸完善的世界，純Flash網站這種用家不能轉編碼、維護困難、SEO效果不良(架構、語意全滅)、Accessibility差的邪道應該被淘汰；Rich Media (Video & Audio)、傳統動畫應該可以再撐一會，在Video和Audio在戰格式、用CSS3/HTML5做動畫的IDE未完善之時可以作為過渡 (Sencha Animator、Hype、Radi、EDGE/MUSE等IDE離動畫師用的IDE太遠了)；作為Browser Game的前景則是未明－雖然為數極多的新Browser Game仍是Flash，但在Browser Game其中一大市場Facebook自己也在推HTML5時以及開發者把心力投向可以賺錢的Mobile Game的時候，Flash Game的存在價值也許是日漸下降 (儘管因為IE 6-8會死慢很多)。
是以Flash可能會是Browser Plugin橫行的時代的最後榮光: Flash作為IDE應該可以透過Air支援Desktop、LLVM轉原生App去支援Mobile、甚至是HTML支援全平台得以繼續存在，說Flash要死其實是不太正確。然而以Browser Plugin存在的Flash Player則劫數難逃－Mobile上的已死，Desktop的也難逃衰落至Applet般的命運－儘管這要數年的時間。
==================
後記:
其實本文是在barcamp當日在WebOS上惡搞一堆Flash Demo和日後再和動畫師聊天的成品。
後記之後記:
Adobe Flash Player的Developer, @mesh, 出來解畫，政治原因是有但有更多是技術上的原因: Clarifications on Flash Player for Mobile Browsers, the Flash Platform, and the Future of Flash
新聞稿
然後是Adobe把Flex放手給Apache基金會的消息
Adobe將Flex捐贈給Apache基金會
本文要說的是從geek/網頁開發者的角度去看的Flash Player (Plugin)之死。如果不熟Flash系列、需要名詞解說或想參考一下Flash開發者的意見可以看下文
Adobe放棄開發行動平台Flash Player之我見
利申: 我是網頁開發者，而且是HTML5+CSS3+jQuery為主，外加cross-browser及cross-platform (desktop+mobile) 。
==================
通常一個plugin會死都是離不開當年Java applet的死亡方式: 慢、browser crasher、安全問題多、有取代技術 (Flash)，儘管當時Applet是很強大但依然不得人心、難逃一死。
(其實applet某些功能是Flash仍然難以取代，所以其實只是衰落而非死亡－是少了很多人用，但某些特殊Applet仍是有的)
而今日的Flash Player面對的問題也是: 慢*、browser crasher、安全問題多、有取代技術 (HTML5)。
( 歷史是不斷重演的。(′_ゝ`) )
* IE是好一點有硬體加速，可是其他Browser都沒有....
然而真正替Flash Player釘蓋的是: 資源緊拙、多重解像度、沒有滑鼠鍵盤的手機和平板。
簡單來說就是: 在Mobile上是得Flash Player無所用。看影片燒電 (硬體支援不足只好去燒CPU)、一堆遊戲看到玩不到 (鍵盤操作的全滅)、網站是燒完頻寬後再加上一整個難用 (解像度問題)...所以就算Flash Player可以配合與其八字嚴重不合的Webkit engine，以desktop環境為主的Flash跟本是不配合，Flash開發者或是Flash Player要改成mobile friendly的方式也很困難。
所以Adobe的Flash派在Mobile Browser上如何努力也是玩不下去。(Apple和M$顯然是老早知道所以從來沒有在自家手機OS的Browser搞Flash支援)
在"Write Once, Run Everywhere"的理想和渴望消滅plugin的HTML5的夾擊之下，Flash在Browser應用上喪鐘已響: 網站這部分在HTML5日漸完善的世界，純Flash網站這種用家不能轉編碼、維護困難、SEO效果不良(架構、語意全滅)、Accessibility差的邪道應該被淘汰；Rich Media (Video & Audio)、傳統動畫應該可以再撐一會，在Video和Audio在戰格式、用CSS3/HTML5做動畫的IDE未完善之時可以作為過渡 (Sencha Animator、Hype、Radi、EDGE/MUSE等IDE離動畫師用的IDE太遠了)；作為Browser Game的前景則是未明－雖然為數極多的新Browser Game仍是Flash，但在Browser Game其中一大市場Facebook自己也在推HTML5時以及開發者把心力投向可以賺錢的Mobile Game的時候，Flash Game的存在價值也許是日漸下降 (儘管因為IE 6-8會死慢很多)。
是以Flash可能會是Browser Plugin橫行的時代的最後榮光: Flash作為IDE應該可以透過Air支援Desktop、LLVM轉原生App去支援Mobile、甚至是HTML支援全平台得以繼續存在，說Flash要死其實是不太正確。然而以Browser Plugin存在的Flash Player則劫數難逃－Mobile上的已死，Desktop的也難逃衰落至Applet般的命運－儘管這要數年的時間。
==================
後記:
其實本文是在barcamp當日在WebOS上惡搞一堆Flash Demo和日後再和動畫師聊天的成品。
後記之後記:
Adobe Flash Player的Developer, @mesh, 出來解畫，政治原因是有但有更多是技術上的原因: Clarifications on Flash Player for Mobile Browsers, the Flash Platform, and the Future of Flash
2011年11月17日 星期四
More Blog...
因為各種的原因所以把一些太技術的東西分拆－
貓箱•災難現場
把一些太技術的東西分到這邊，主要是做網頁開發的WTF...
CSS Monster
預定是Link集或技術短文，總之是要短。
Apple Walker
貴精不貴多的iOS App介紹或是心得文。Enjoy Apple Life~
至於這邊...大概是繼續惡搞吧?
(Blogging Continue)
貓箱•災難現場
把一些太技術的東西分到這邊，主要是做網頁開發的WTF...
CSS Monster
預定是Link集或技術短文，總之是要短。
Apple Walker
貴精不貴多的iOS App介紹或是心得文。Enjoy Apple Life~
至於這邊...大概是繼續惡搞吧?
(Blogging Continue)
2011年11月11日 星期五
2011/11/11 11:11:11
Catch－－－
━(ﾟ∀ﾟ)━(∀ﾟ )━(ﾟ )━( )━( )━( ﾟ)━( ﾟ∀)━(ﾟ∀ﾟ)━
[如果是說Blog有甚麼用就是可以發絕對精準的踩線文啊!]
━(ﾟ∀ﾟ)━(∀ﾟ )━(ﾟ )━( )━( )━( ﾟ)━( ﾟ∀)━(ﾟ∀ﾟ)━
[如果是說Blog有甚麼用就是可以發絕對精準的踩線文啊!]
2011年11月8日 星期二
2011年10月6日 星期四
RIP, Steve Jobs - Thank you for a better web & real HTML5
Dear Steve,
Thank you for your innovative iPad and bringing HTML5 into the real world.
Thank you for leading Apple to push a better, beautiful web standard (HTML5 & CSS3), and say no to Flash - it change the web again.
Thank you for making the best development machine I have. (iMac '09 / Snow Leopard)
Thank you for founding & leading the amazing Apple, Inc. Please Rest in Peace.
Best Regards,
Vinci (@vincicat)
=======================
要不是Apple推HTML5 & CSS3 + No Flash + iPad，大概沒有今天的Web: HTML5的興盛與Adobe & M$對HTML5的轉向以至今天的browser軍備競賽…
Steve，Thank you.
2011年9月22日 星期四
[Crazy CSS] Box/Text Shadow Magic
如果要說CSS3最偉大的地方，除了transition & animation就是陰影: box-shadow & text-shadow
CSS3 Box shadow和text-shadow優在可以一個element下N個shadow (次序/z-index同multiple background)，而且會一定程度上反映element變形過的效果*，加上有方向性(outset/inset)、xy offset及可變大及設定羽化範圍幾乎是有無限可能－修邊柔化的好工具。缺點是會拖慢rendering及有時會很buggy^...不過有了這兩個傢伙本來瘋狂的CSS又再更瘋狂了...
* 如border-radius...但不受transparent border影響
^ buggy的是text-shadow，而且是chrome在xp上的某些字型部分字會消失，十分靈異。(Update: Chrome 14+已修正 [source])
[Box shadow實戰]
[Text shadow實戰]
webkit這Engine真是令人又愛又恨啊。
CSS3 Box shadow和text-shadow優在可以一個element下N個shadow (次序/z-index同multiple background)，而且會一定程度上反映element變形過的效果*，加上有方向性(outset/inset)、xy offset及可變大及設定羽化範圍幾乎是有無限可能－修邊柔化的好工具。缺點是會拖慢rendering及有時會很buggy^...不過有了這兩個傢伙本來瘋狂的CSS又再更瘋狂了...
* 如border-radius...但不受transparent border影響
^ buggy的是text-shadow，而且是chrome在xp上的某些字型部分字會消失，十分靈異。(Update: Chrome 14+已修正 [source])
[Box shadow實戰]
- 高光
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); - 替下了 css transform的element修邊...
box-shadow: 0 0 1px transparent;(webkit限定) - 當然有3D..
3D Tower - 再威一點的是，實物化
3d-box-shadow photoframe (除了照片沒有別的圖了...) - box shadow+text shadow+gradient反光: 有炫光(glare)的3D button
Nothing Insightful • An effect that makes the Crikkket web app unique... - 當border用: Multiple Border (好像見過彩虹版的..)
Multiple Borders with CSS
(不過要注意的是，box-shadow是不包在Box-model內、預設大小也是用content box去算－origin好像是按照border-box...)
(off topic: 都是惡搞border的: Have Fun w/ Borders – Beveled, Pressed, & More!) - 繪圖
1DIV クマ吉 - Mask, 007 style
暗闇に浮かぶ文字
[Text shadow實戰]
- 3D Text
基本: How to Create 3D Text With CSS3 & 3d-text
animated: 3D Text Tower
再立體一點: css isometric text [blog post] - Len Flare 柔光
the new lens flare - Photoshop 靠邊站時間
Letterpress、double stroke
Neon、inset、fire、retro, etc
Blur - Antialias font: 替webfont修邊
Smooth font using CSS3 text-shadow property
webkit這Engine真是令人又愛又恨啊。
2011年9月20日 星期二
[Crazy JS] Terminal Tool in Browser
在SFD和人聊起就寫一下: 到底今天的browser可以有多少native app有的東西?
於是從cross-compiling聊到模擬器和各種porting...
[模擬器]
JSLinux
地上最強32 bit PC emulator in browser, Linux OS: 由bios到gcc compiler一應俱存還有boot機，不過又是一close tab東西就沒了? [wikipedia說明]
(至於HTML5 VNC/SSH Tool應該是一打，不贅）
(BBS的話一個gaaan就夠了...)
visual 6502
IC的東東，不會玩但光是看就很威。
JSNES
vNES的JS port，令人懷念的紅白機也可以在browser玩了
以上都是對系統有所要求的 (畢竟行模擬器要2x~4x原裝硬體的系統需求)，以下則是把native app重寫/重編譯至browser環境運行:
[terminal tool]
web vi
vi (not vim) in your browser....又一以canvas作為基礎的web IDE…自mozilla Bespin (已和Ace合併)以後大家都這樣作了? 邪道啊...
Lodis
Database也有: NOSQL Database, Redis, in browser (mongoDB印象中好像有...)
speak.js
將 eSpeak用Emscripten由C++重新編譯至JS...而且是除IE以外的browser都支援! (天殺的IE不吃data-uri wav...)
不過除了把一堆program塞進browser tool另外一種是把各種terminal tool用JS重新打造 (js port...不過更精確是npm port):
[js port]
https://github.com/danlucraft/git.js
用JS寫的git...有browser git repo viewer，但需要rake踢起 (有支援npm的計劃但看似未實行 XD)
看來因為node.js和強大的browser JSEngine可以預見再瘋狂的porting陸續有來 (笑)
於是從cross-compiling聊到模擬器和各種porting...
[模擬器]
JSLinux
地上最強32 bit PC emulator in browser, Linux OS: 由bios到gcc compiler一應俱存還有boot機，不過又是一close tab東西就沒了? [wikipedia說明]
(至於HTML5 VNC/SSH Tool應該是一打，不贅）
(BBS的話一個gaaan就夠了...)
visual 6502
IC的東東，不會玩但光是看就很威。
JSNES
vNES的JS port，令人懷念的紅白機也可以在browser玩了
以上都是對系統有所要求的 (畢竟行模擬器要2x~4x原裝硬體的系統需求)，以下則是把native app重寫/重編譯至browser環境運行:
[terminal tool]
web vi
vi (not vim) in your browser....又一以canvas作為基礎的web IDE…自mozilla Bespin (已和Ace合併)以後大家都這樣作了? 邪道啊...
Lodis
Database也有: NOSQL Database, Redis, in browser (mongoDB印象中好像有...)
speak.js
將 eSpeak用Emscripten由C++重新編譯至JS...而且是除IE以外的browser都支援! (天殺的IE不吃data-uri wav...)
不過除了把一堆program塞進browser tool另外一種是把各種terminal tool用JS重新打造 (js port...不過更精確是npm port):
[js port]
https://github.com/danlucraft/git.js
用JS寫的git...有browser git repo viewer，但需要rake踢起 (有支援npm的計劃但看似未實行 XD)
看來因為node.js和強大的browser JSEngine可以預見再瘋狂的porting陸續有來 (笑)
2011年8月31日 星期三
Browser Test Story: Multiple IE & IE9 on Mac/Linux/Window
在Mac/Linux機要找一個有足夠穩定的IE或是同一個window有多個IE測試一直是麻煩事－用winebottler(mac)/wine(linux)的IE或者是IETester都有穩定性差的問題，要做JS Debug是近乎不可能之事…
(Off topic: 只是看Layout有沒有問題用browser lab或是spoon就好了，不用這麼煩)
說到底，IE始終只能在windows上面run！
因為萬惡又黑暗的activeX及更多不明原因，與其追求不穩定的multiple IE/wine改裝，不如裝個Virtual Machine (VM，虛擬機器)或找台netbook試機 (反正顯示器再加大用家的畫面s也是在1024 x 768 / 1024 x 600打轉...)
而為求方便VM是不二之選，畢竟不同機沒copy & paste滿麻煩的(前提是要Ram夠多CPU不太差)...而當中一個超讚又不用錢又支援全平台的solution就是VirtualBox！
當然如果只是用所謂的開心版或叫你自掏錢包就不用寫文，M$總算有丁點良心給你不用錢的windows/ windows VM下載作測試用...
另外其實一隻IE 9可以摸擬IE 7、8已經很夠用 [Developer Tool內的DocumentMode的說明]，VM實在不用太多。
Good luck!
* `slgmr -rearm` 指令: 在以Adminstrator 權限執行的command prompt上執行 `slgmr -rearm` (沒有`) ，成功的話在reboot後過期提示會消失
* 傳說有IE4Mac可以在mac以原生方式運行IE6-9，不過最終好像還是沒了...
* 千萬不要在VM OS loading時按host key,會kernel panic....
(Off topic: 只是看Layout有沒有問題用browser lab或是spoon就好了，不用這麼煩)
說到底，IE始終只能在windows上面run！
因為萬惡又黑暗的activeX及更多不明原因，與其追求不穩定的multiple IE/wine改裝，不如裝個Virtual Machine (VM，虛擬機器)或找台netbook試機 (反正顯示器再加大用家的畫面s也是在1024 x 768 / 1024 x 600打轉...)
而為求方便VM是不二之選，畢竟不同機沒copy & paste滿麻煩的(前提是要Ram夠多CPU不太差)...而當中一個超讚又不用錢又支援全平台的solution就是VirtualBox！
當然如果只是用所謂的開心版或叫你自掏錢包就不用寫文，M$總算有丁點良心給你不用錢的windows/ windows VM下載作測試用...
- IE VHD
等了很久終於有人回報IE9 VHD可以在VirutalBox上跑了，不過下載為什麼不是一個iso/rar而是斬成7份啊?
安裝倒是簡單，開一個沒硬碟的VM就好了[詳細教學]
不過用4.1.2+新VHD居然掛點(BSoD)，有人說clone一次VHD to VDI就好*，真煩...
另外這個activate一次只有30天，不過是可以用`slgmr -rearm`指令renew一次...如果不用IE6，接下來的方法比較推薦
* 如果Mac之下跑不到可以有另一法: 試用ievms fix - Win 7 Enterprise 90-days Trial
官方正印的試用版, 可以免key安裝及在不入key下activate。預設安裝IE 8，可以升級IE 9－要IE 7的朋友可以改裝windows server 2008 R2。
這個版本安裝後十天內要activate，activate後有90天可用 (坊間流傳可用 `slgmr -rearm` 指令renew/extend 3次試用期*)。不過就算是trial過了也只是每小時關機一次，測試基本上沒差，反而是下載有夠煩:- 進入上面的網址，最下方有下載按鈕(32bit/64bit)，點擊進入
- 要用個window live ID登入
- 登入後填from，email沒必要和live ID的一樣
- 之後會有轉到一個頁面說有確認信，不過好像在這頁再填一次之前填過的email再按continue就可以下載...
- 下載完之後開一個全新VM連硬碟，之後進行一般的OS安裝
另外其實一隻IE 9可以摸擬IE 7、8已經很夠用 [Developer Tool內的DocumentMode的說明]，VM實在不用太多。
Good luck!
* `slgmr -rearm` 指令: 在以Adminstrator 權限執行的command prompt上執行 `slgmr -rearm` (沒有`) ，成功的話在reboot後過期提示會消失
* 傳說有IE4Mac可以在mac以原生方式運行IE6-9，不過最終好像還是沒了...
* 千萬不要在VM OS loading時按host key,會kernel panic....
2011年8月11日 星期四
HTML5 Game - Random Pick #1
有人在G+上問過HTML5遊戲到哪個程度剛好又有人把這個Blog丟出來，因為可以玩的例子真的滿多，所以就在這裡寫一下幾個比較經典的...
[2D]
HTML5做2D Game基本上是廣泛支援，下列的遊戲不論FF5還是Chrome 13也運行的不錯...(IE 9應該也可以，不過我沒有IE 9在手邊就算了)
Infinit Super Mario
我見過可玩性最高的版本，玩的人之多還令Server一度流量爆炸...
Sierra Adventure Game on iPad
將Sierra經典遊戲製成iPad的webapp重製版。Desktop browser的版本見此
The Legend of Zelda: Link’s Awakening
Gameboy版的移植，有Save & Load，操作見此
[3D]
其實現在也有一些用webGL製作的3D browser game，不過大多數只支援chrome:
ro.me : three dream of black
綞典的WebGL互動網站，訪客可以和3D世界互動－玩完之後更可以製作自己的Dream，超神...
FastKat
3D canvas + webGL，滑鼠閃避遊戲，只是判定太痛苦了...(畫面好花)
[2D]
HTML5做2D Game基本上是廣泛支援，下列的遊戲不論FF5還是Chrome 13也運行的不錯...(IE 9應該也可以，不過我沒有IE 9在手邊就算了)
Infinit Super Mario
我見過可玩性最高的版本，玩的人之多還令Server一度流量爆炸...
Sierra Adventure Game on iPad
將Sierra經典遊戲製成iPad的webapp重製版。Desktop browser的版本見此
The Legend of Zelda: Link’s Awakening
Gameboy版的移植，有Save & Load，操作見此
[3D]
其實現在也有一些用webGL製作的3D browser game，不過大多數只支援chrome:
ro.me : three dream of black
綞典的WebGL互動網站，訪客可以和3D世界互動－玩完之後更可以製作自己的Dream，超神...
FastKat
3D canvas + webGL，滑鼠閃避遊戲，只是判定太痛苦了...(畫面好花)
2011年7月18日 星期一
[懶人包] 唸你與電波歌的科學
本月如果說網上潮流真的不能不數《唸你》－在台灣終於出現可以和《嗶嗶嗶》、《尖尖尖》、《NyanCat》(Nyanyanyanyanyanyanya!) 等洗腦神曲並列的復古流行(?)音樂作品...
[嚴重警告: Read more內有強烈電波，會造成非自願的腦內loop，敬希垂注]
一切源於劉家昌老師的兒子劉子千推出新碟的主打曲－唸你在各大媒體強烈放送後得到一致劣評開始....
整首歌十分的復古，但因為唱的比技安還難聽而成為話題(wenli更提出了WTF4來吐糟....) ；但同時因為整首歌就只是在loop那幾個chord+某些不明原因，於是新的電波之王誕生了...
[嚴重警告: Read more內有強烈電波，會造成非自願的腦內loop，敬希垂注]
一切源於劉家昌老師的兒子劉子千推出新碟的主打曲－唸你在各大媒體強烈放送後得到一致劣評開始....
整首歌十分的復古，但因為唱的比技安還難聽而成為話題(wenli更提出了WTF4來吐糟....) ；但同時因為整首歌就只是在loop那幾個chord+某些不明原因，於是新的電波之王誕生了...
2011年7月14日 星期四
[香港] IT選民之路
要成為香港的功能組別的選民真的不是一般的麻煩，因為一來不是自動登記$，二來是自己登記也是不一般的麻煩...就IT界(資訊科技界)的情況來說，要成為選民真的不容易:
而且就著數(jetso)而言做IEEE/ACM的Student Member會多很多...
% 簡單來說只要是IT/CS/Telecom相關的Degree Holder就入到會...不然就要認工作經驗，可能會麻煩一點 (IEEE應該是最簡單，ACM其次)
$ 理論上IT界有自動登記能力的應該是HKIE (他們有認可的CS課程)，不過他們的入會資格/方式真的有夠複雜(那個收費表會嚇死人吧)，而且成本真的不便宜
- 要成為IT界選民，你必須是指定學會的正式或以上的級別的會員 [合資格的學會及會員級別一覽]%，如果有錢又要快的可選IEEE [攻略] / ACM，不然可以選BCS或iProA*
* 除非你真的很沒錢否則建議不要和iProA有關係...而且那是眾多學會最花時間申請的...
** IEEE要HK Section+Member (or above) Grade+指定分會(COMP,COM/CAS)，BCS則是HK+Member(MBCS)或Associate (AMBCS)。
*** 不過有人登記COM失敗，登記比較貴的COMP看似比較穩陣
**** BCS比IEEE慢而且要較多資料(可能要用fax的) - 成為會員後#就可以填ROI-41登記，組別只須填"Information Technology"，屬會，會員級別及會員號碼 [ e.g. IEEE (HK, COMP), Member Grade ] , 所屬公司登記名稱^
# 理論上有會員號碼已成為會員，不過就IEEE的情況來說大概要3-5個工作天香港才會查到
^ 如果公司不是IT公司選委會可能會致電查詢 - 郵寄或傳真14天後如果收不到選委會電話通知Reject請致電查詢熱線2891 1001確認有IT界別選民資格 (1 廣東話->2 選民登記資格)，hotline很快所以打電話還算方便(其實大概只要一星期就完成登記) [對，是沒有成功通知的－申請寄失和成功是分不到的=_=|||]
而且就著數(jetso)而言做IEEE/ACM的Student Member會多很多...
% 簡單來說只要是IT/CS/Telecom相關的Degree Holder就入到會...不然就要認工作經驗，可能會麻煩一點 (IEEE應該是最簡單，ACM其次)
$ 理論上IT界有自動登記能力的應該是HKIE (他們有認可的CS課程)，不過他們的入會資格/方式真的有夠複雜(那個收費表會嚇死人吧)，而且成本真的不便宜
2011年7月4日 星期一
5個Google+實戰心得: Circle、+Mention與其他
上文提及了一些Google+新手入門，本文再談一點使用上的注意事項
1. Circle
Circle和FB Friend是不同的東西，和Twitter/Plurk更是逆向操作－加A到Circle是送訊息給A而非看A的訊息，pingooo這張圖就說明了訊息的流動方向 [原文: 我在 Google+ 貼的文到底誰會看到？]:
不過會出現在主頁Stream就只有朋友的Post，圈外訊息都會在Incoming，可以無視。
而Circle另一個和Facebook差很大的就是Google+會不斷提醒用戶它的存在，你的Share是有指定受眾，有語境、Scope，有效避免有搞不清狀況的朋友留言(詳見Google+的圈圈)
2. +Mention
Circle的操作是和Twitter逆向的，可是+Mention的部分和Twitter的@Mention極相近。
所謂的+Mention是在post/comment打"+"或"@"可以和facebook、Twitter一樣叫出User list*，如果click or enter任一User則可mention (上下select)
被mention的會收到notification，然後看到整串對話－就算這個post對他而言是Invisible的也好... (By Ingram Chen)
這個據說會改，改成plurk那樣應該就會safe...
*User是自己全部Circle member + All Searchable User，所以list可以很長...不過似乎有一定的filtering 所以不會出現太不相干的人
3. Spark、Hubble、Privacy Settings
- Spark算是以Google+內的Share為基礎的"Interest" Search Engine (和Trends有點像?)
- Hubble是circle group chat，不過我找不到操作...
- Privacy Settings其實還有更多細項可設，都在Google+ Settings內
4. 文字輸入
Google+的文字輸入和GChat/Plurk那個很像，可以用_、*等符號把字mark起來加底線或是變粗體(mini-markdown?) :
5. Hack: 私人Bookmark/Notebook
開一個沒有人/只有分身的Circle，然後Note/Bookmark只Share給那個Circle就好了
這種做法的唯一問題是沒search、so
(原文為英文，By Arun Shroff )
其他小技巧可以參考這篇: 5個實用 Google+ 小貼士
如果還是不夠就可以看這篇: 24 個必學的 Google+ 小技巧 （超實用）
1. Circle
Circle和FB Friend是不同的東西，和Twitter/Plurk更是逆向操作－加A到Circle是送訊息給A而非看A的訊息，pingooo這張圖就說明了訊息的流動方向 [原文: 我在 Google+ 貼的文到底誰會看到？]:
而Circle另一個和Facebook差很大的就是Google+會不斷提醒用戶它的存在，你的Share是有指定受眾，有語境、Scope，有效避免有搞不清狀況的朋友留言(詳見Google+的圈圈)
2. +Mention
Circle的操作是和Twitter逆向的，可是+Mention的部分和Twitter的@Mention極相近。
所謂的+Mention是在post/comment打"+"或"@"可以和facebook、Twitter一樣叫出User list*，如果click or enter任一User則可mention (上下select)
被mention的會收到notification，然後看到整串對話－就算這個post對他而言是Invisible的也好... (By Ingram Chen)
這個據說會改，改成plurk那樣應該就會safe...
*User是自己全部Circle member + All Searchable User，所以list可以很長...不過似乎有一定的filtering 所以不會出現太不相干的人
3. Spark、Hubble、Privacy Settings
- Spark算是以Google+內的Share為基礎的"Interest" Search Engine (和Trends有點像?)
- Hubble是circle group chat，不過我找不到操作...
- Privacy Settings其實還有更多細項可設，都在Google+ Settings內
4. 文字輸入
Google+的文字輸入和GChat/Plurk那個很像，可以用_、*等符號把字mark起來加底線或是變粗體(mini-markdown?) :
按「J」、「K」可以上下移動，訊息焦點。－ Google+小技巧 by Andytn Tsai (範例有修正)
右上角通知按鍵盤左、右方向鍵可以切換上下則訊息。
@人名帳號或是+人名帳號，都可以連接帳號連結。
按鍵盤「Q」會跳到即時通訊搜尋欄。
粗體使用方法：文字前後加「*」，範例為 *粗體*
斜體使用方法：文字前後加「_」，範例為 _斜體_
刪除線使用方法：文字前後加「-」，範例為 -刪除線-
5. Hack: 私人Bookmark/Notebook
開一個沒有人/只有分身的Circle，然後Note/Bookmark只Share給那個Circle就好了
這種做法的唯一問題是沒search、so
(原文為英文，By Arun Shroff )
其他小技巧可以參考這篇: 5個實用 Google+ 小貼士
如果還是不夠就可以看這篇: 24 個必學的 Google+ 小技巧 （超實用）
2011年7月1日 星期五
[Browser戰報] IE 10 PR2、SilverLight和Flash之消失?
[IE]
IE 10 PR2已出 [MSDN Blog]
加了很多別人早就加了的Feature: web worker、css3 gradient、css3 multiple column、css3 flex box、html5 form ("initial")、Drag and Drop、sandboxing，外加file reader。唯獨是搶先在別的Browser前搶先implement CSS3 positioned float (float: center) & CSS3 Grid...是要和CSS3 Region打對台嗎?
至於WebGL應該是no luck? (倒是有人攪了個不用Admin Right的IE WebGL)
(有趣的是CSS3 Float和Region都有Adobe的人...自己人互片?)
(IE 10做了一堆排版spec+File Reader+Worker出來，其心可昭啊...)
[Chrome]
Non-Admin Chrome Frame，對付死不肯升級的大機構Browser...(如果有USB還可以裝Portable firefox，沒有就麻煩了)
這也是在Google+之前出的，明顯是解救世人 (aka. FB其中一個搶人的方法是繼續支援IE 7)
[Opera]
Opera 11.50 Release
升級一行文: "New design, new extensions, more HTML5 support, improved performance for CSS and SVG"
瀏覽功能和效能為主的更新[更多]，HTML5的部分主要是HTML5 Form補完、File API
另外他們在挑戰下載數衝成就的活動，詳情參閱Opera首頁 (過了Lady Gaga Twitter Followers數了...)
[Extra: Flash & Silverlight的消失]
因為有SWF2HTML5、Silverlight2HTML5的converter....
IE 10 PR2已出 [MSDN Blog]
加了很多別人早就加了的Feature: web worker、css3 gradient、css3 multiple column、css3 flex box、html5 form ("initial")、Drag and Drop、sandboxing，外加file reader。唯獨是搶先在別的Browser前搶先implement CSS3 positioned float (float: center) & CSS3 Grid...是要和CSS3 Region打對台嗎?
至於WebGL應該是no luck? (倒是有人攪了個不用Admin Right的IE WebGL)
(有趣的是CSS3 Float和Region都有Adobe的人...自己人互片?)
(IE 10做了一堆排版spec+File Reader+Worker出來，其心可昭啊...)
[Chrome]
Non-Admin Chrome Frame，對付死不肯升級的大機構Browser...(如果有USB還可以裝Portable firefox，沒有就麻煩了)
這也是在Google+之前出的，明顯是解救世人 (aka. FB其中一個搶人的方法是繼續支援IE 7)
[Opera]
Opera 11.50 Release
升級一行文: "New design, new extensions, more HTML5 support, improved performance for CSS and SVG"
瀏覽功能和效能為主的更新[更多]，HTML5的部分主要是HTML5 Form補完、File API
另外他們在挑戰下載數衝成就的活動，詳情參閱Opera首頁 (過了Lady Gaga Twitter Followers數了...)
[Extra: Flash & Silverlight的消失]
因為有SWF2HTML5、Silverlight2HTML5的converter....
2011年6月30日 星期四
Google+新手入門
[重要]
G+已開放給所有Google Account用戶啦~
沒有的快去G+官網開一個吧!
(Developer: 部分API已開放，不過好像沒人做出啥來...)
[定義]
Google+ / G+ / Google Circle其實就是「很像Facebook但不是Facebook」的社交服務...xkcd這篇漫畫完全是神吐糟:
p.s.1 因為中文的版面不好用我是用英文版...
p.s.2 Google+目前沒有invitation，不過有人說有密技 [密技需有已登入的Google Account及不斷Reload，詳細]
p.s.2.1 不知是系統超負載還是補起來，暫時沒人撞中(回報是被redirect了)...失敗的朋友請在沒那麼繁忙的時間再試
p.s.2.2 不過無論如何請先看完下面的注意事項...
p.s.3 現在只要login google account再上google+就可以開了~(4/7/2011) Invitation還是要的，不過是神出鬼沒地限時開放在Homepage右邊Column的最下方(14/7/2011)
[注意事項]
1. Google Profile內的一切會被預設為公開 (Everyone on the web)，敏感資料如地址電話請先移除
2. 如果要link Picasa (Google Photos)，某些權限會被Circle內的人看到，請先把任何形式的分享移除
(是可以不link，不過光是連結升級2048x2048以下的圖片不計使用空間就很吸引…[其他優惠及注意事項])
3. 未清好profile前最好不要設為可搜尋
4. Add/Invite基本上是依靠GMail contacts，如用新account玩請注意 (29/6/2011 8:00pm update: 好像如果有link twitter會去爬你的followings了)
5. 會有和Facebook/Buzz相像的notification email，如果不想再收到Google+的email可以 unsubscribe
[Browser]
需Google Profile支援的Browser－IE7出局。
如無Admin權限請改用Chrome Frame的Non-admin版本 [官方介紹]
[取得Google+]
正式公開了。進去官網開通就好。
還是要Invitation，見本文開頭。(17/7/2011)
現在不用邀請了，登入google account再上google+就可以開了~ (4/7/2011)
和Wave相似的是目前本服務是邀請制，不過一個人得到邀請後他的邀請量是無限制...所以Invitation是限時開放
HOWTO: 如果有Invitation開放，在Circle Tab Add friend的時候會有個 Footer提示Invite，那樣就可以Invite剛才選的朋友或是自己加contact
自己來: 去plus.google.com加入已登入的Google Account 到Invitation queue
***queue和發invitation目前關閉中，不過有人說有密技 :密技需有已登入的Google Account及不斷Reload，詳細在此－要Reload是因為Google+系統Loading太大...
[使用]
真的很Facebook...
Post方面和Facebook相近: link、geo location、photos、video
Link方面如果是圖檔會直接顯示，Youtube是embed video+description text (十分plurk...)
Share掣上可以決定post是public、公開給全部circle/extended circle (friend of friend)/某個circle/某個朋友/只有自己 (近乎是plurk的小圈圈)、 和要不要用email傳給沒google+的朋友
不過那一欄是可以塞email，而且是多於一個...可以當成隱密notification用?
p.s. 要入完拍enter或是click確認加入顯示範圍...(和delicious入tag很像的，不同的是沒入到不會顯示)
Post完之後可以決定要不要disable comment、reshare，delete edit
[Profile]
和Facebook十分像，click Edit之後再click各項可以inline edit和選私隱度－預設是"Everyone on the web"(公開給網上所有人)，必改
[Friend]
基本來源為GMail Contacts，所以Buzz的問題一樣有: 那張List會有不能Add Friend的人在...
不過Google+這次總算有解: 在Circle -> Add Friend那個tab內是有個"remove"可以把click起了的contact一次remove (可以multiple)
(29/6/2011 8:00pm update: 好像如果有profile link twitter會去爬你的followings了，如果對方也有加twitter到profile就會顯示)
另外也有人提供了FB搬家大法 (或Outlook或任何可以export CSV的mail client，統稱CSV搬家大法)
之後的就是把Friend加進Circle等對方加回等訊息相通(另文)
[Notification]
一樣有得控制，都在Google+ Settings內...不過Notification mail可以對post作各種操作，太煩的post可以直接mute/email追thread，比facebook的方便也不像buzz的失控－而且buzz的grouping功能照樣保留，十分方便 (只要是用GMail + client support grouping)
FB般的Notification menu可以在toolbar人名旁邊的紅色數字鍵找到
[未確認]
相的tagging, youtube link的處理方式
至於Game之類的G+ App(?)可在Game找到。不過API沒開放
[app]
Android: 有App，全球Market應該已可下載
iOS: 有App，不過沒有了Reshare Orz
[展望]
初步使用感想
Socialmedia - google+ and facebook (modern browser, pls)
如果想找個一般人無法進去的領地玩玩 Google+也許不錯...(用了三個月仍是這樣覺得)
p.s. +1會變成+N好讚...
G+已開放給所有Google Account用戶啦~
沒有的快去G+官網開一個吧!
(Developer: 部分API已開放，不過好像沒人做出啥來...)
[定義]
Google+ / G+ / Google Circle其實就是「很像Facebook但不是Facebook」的社交服務...xkcd這篇漫畫完全是神吐糟:
p.s.1 因為中文的版面不好用我是用英文版...
[注意事項]
1. Google Profile內的一切會被預設為公開 (Everyone on the web)，敏感資料如地址電話請先移除
2. 如果要link Picasa (Google Photos)，某些權限會被Circle內的人看到，請先把任何形式的分享移除
(是可以不link，不過光是連結升級2048x2048以下的圖片不計使用空間就很吸引…[其他優惠及注意事項])
3. 未清好profile前最好不要設為可搜尋
4. Add/Invite基本上是依靠GMail contacts，如用新account玩請注意 (29/6/2011 8:00pm update: 好像如果有link twitter會去爬你的followings了)
5. 會有和Facebook/Buzz相像的notification email，如果不想再收到Google+的email可以 unsubscribe
[Browser]
需Google Profile支援的Browser－IE7出局。
如無Admin權限請改用Chrome Frame的Non-admin版本 [官方介紹]
[取得Google+]
正式公開了。進去官網開通就好。
[使用]
真的很Facebook...
- Home: 也就是newsfeed，不過google+叫Stream...上面的post可以like (+1)、可以comment、可以Share (Reshare)，人名那行的箭頭有extended menu: report、mute、block ，Homepage也可以換circle(外加Incoming和notification)和看到friend suggestion，還有hangout (live cam)
- Photos: 看自己和他人的Picasa相簿
- Profile: 個人Profile
- Circle: Friend list及他們身在的Circle，預設四個;加人、踢人、block人也是在這裡綜合處理
- (新) Game: 關於Game的一切－遊戲列表及朋友的遊戲feed update也可在這裡看到，絕對不會被煩到。
Post方面和Facebook相近: link、geo location、photos、video
Link方面如果是圖檔會直接顯示，Youtube是embed video+description text (十分plurk...)
Share掣上可以決定post是public、公開給全部circle/extended circle (friend of friend)/某個circle/某個朋友/只有自己 (近乎是plurk的小圈圈)、 和要不要用email傳給沒google+的朋友
不過那一欄是可以塞email，而且是多於一個...可以當成隱密notification用?
p.s. 要入完拍enter或是click確認加入顯示範圍...(和delicious入tag很像的，不同的是沒入到不會顯示)
Post完之後可以決定要不要disable comment、reshare，delete edit
[Profile]
和Facebook十分像，click Edit之後再click各項可以inline edit和選私隱度－預設是"Everyone on the web"(公開給網上所有人)，必改
[Friend]
基本來源為GMail Contacts，所以Buzz的問題一樣有: 那張List會有不能Add Friend的人在...
不過Google+這次總算有解: 在Circle -> Add Friend那個tab內是有個"remove"可以把click起了的contact一次remove (可以multiple)
 |
| 有選人Remove就可以click |
另外也有人提供了FB搬家大法 (或Outlook或任何可以export CSV的mail client，統稱CSV搬家大法)
之後的就是把Friend加進Circle等對方加回等訊息相通(另文)
[Notification]
一樣有得控制，都在Google+ Settings內...不過Notification mail可以對post作各種操作，太煩的post可以直接mute/email追thread，比facebook的方便也不像buzz的失控－而且buzz的grouping功能照樣保留，十分方便 (只要是用GMail + client support grouping)
FB般的Notification menu可以在toolbar人名旁邊的紅色數字鍵找到
[未確認]
相的tagging, youtube link的處理方式
至於Game之類的G+ App(?)可在Game找到。不過API沒開放
[app]
Android: 有App，全球Market應該已可下載
iOS: 有App，不過沒有了Reshare Orz
[展望]
初步使用感想
Socialmedia - google+ and facebook (modern browser, pls)
如果想找個一般人無法進去的領地玩玩 Google+也許不錯...(用了三個月仍是這樣覺得)
p.s. +1會變成+N好讚...
2011年6月22日 星期三
[Browser戰報] Firefox 5 Release
在別的Browser在集氣的時候Firefox 5 Release了 (灑花)，自動更新可以抓到~
幾個重要的Change
碎碎念: FF4作為一個major release 真是有夠短命的...
幾個重要的Change
- CSS3 Animation - 簡單來說是Safari有甚麼他就有甚麼~不過3D Transformation還是沒有orz
- Memory - 大改善。Leak少了很多
- HTTP - 不再Send Keep-Alive，可能有某些東西會broken....
碎碎念: FF4作為一個major release 真是有夠短命的...
[Crazy JS/CSS] pdf.js, jsmad, HTML turntables
[前言]
Crazy JS/CSS是新系列，專門討論一些很瘋狂或很實用的JS/CSS App/Demo/Library/Polyfill/...
總之目的只有一個: "Blow your mind"
Here we go.
[正文]
今天和人討論順手撿出來寫一下以免自己失憶－
Mozilla的人做的免plugin HTML5 PDF Reader，目前開始了一個月－基本功能大概要3個月完成，現在的prototype只有一些圖片顯示。技術基本是HTML5 canvas為骨幹，所以SVG和text selection都會麻煩－不過圖片或不規則的東西會很好處理。
因為html5 audio作的太bug(電風扇那邊得來的經驗)或是mozilla死也不支援有patent的傢伙，所以在web播個mp3是有夠難的－因此有受不了的強者用Audio Data API+Web Audio API做了mp3 player (MAD)。目前只支援firefox或chrome，其他應該沒那麼快有，不過夠用了。
比較重CSS的東西，舊式唱盤桌重現還要有cover和Mixer，看完之後你會覺得很威很強大orz
Crazy JS/CSS是新系列，專門討論一些很瘋狂或很實用的JS/CSS App/Demo/Library/Polyfill/...
總之目的只有一個: "Blow your mind"
Here we go.
[正文]
今天和人討論順手撿出來寫一下以免自己失憶－
pdf.js
作者的Blog postMozilla的人做的免plugin HTML5 PDF Reader，目前開始了一個月－基本功能大概要3個月完成，現在的prototype只有一些圖片顯示。技術基本是HTML5 canvas為骨幹，所以SVG和text selection都會麻煩－不過圖片或不規則的東西會很好處理。
jsmad
Project Home(我都會以為是mad.js...)因為html5 audio作的太bug(電風扇那邊得來的經驗)或是mozilla死也不支援有patent的傢伙，所以在web播個mp3是有夠難的－因此有受不了的強者用Audio Data API+Web Audio API做了mp3 player (MAD)。目前只支援firefox或chrome，其他應該沒那麼快有，不過夠用了。
The Wheels Of Steel: An Ode To Turntables (in HTML)
作者的Blog post比較重CSS的東西，舊式唱盤桌重現還要有cover和Mixer，看完之後你會覺得很威很強大orz
2011年6月20日 星期一
Dogfan - HTML5+CSS3的「 お父さん扇風機 」
這是將日本軟銀廣告出現過的「 お父さん扇風機 」（爸爸風扇）用HTML5+CSS3再現的小玩意。
[連結]
DogFan @ heroku
玩法很簡單: 接電再按下面的control XD
基本功能有這些:
下一個會支援的是FF5，應該在FF 5 release前會完成。IE 9就別問我了，大方向是知道但沒library輔助會很痛苦...
[Source]
本Project有Opensource放在github上喔:DogFan的github
授權是MIT。自行轉host或改造前請讀Readme。
[技術細節]
本文的重點。
風扇組成 - absolute positioning + multiple background，因為是我自己切圖+@evenwu作的psd整理得非常不錯所以我是用了最懶的方法切－就是不做trimming只用show/hide去生png ￣▽￣，變成這部分沒甚麼特別的...
唯一要注意的是為了避免rotateZ block了插頭所以扇葉有加pointer-events:none去預防，不過android的chrome好像不太理會?
扇葉轉動 - CSS3 animation on CSS3 transformation。主要是用rotateZ+linear timing function去轉，所以是用animation duration去控制轉一圈的時間－duration愈短風扇轉的愈快...不過有趣的是就算是webkit轉速看起來也有微妙的不同
p.s.2 transform-origin不是50% 50%, 有一點offset...
p.s.3 我有懷疑過是floating point problem，因為我是只用三格keyframe就做完整個animation...
神秘的震動效果 - 條件請自行發掘 XD。那個只是同時更改兩個background的background-position (用common來分)，數字是亂填但效果很不錯 XD。和風扇一樣的是用duration控制速度，不過因為不配合風扇的轉速去變速不自然及震太快太傷眼所以用了一個mapping function+DOM style interface去設定duration
插頭接合 - jQuery+CSS3 Transition on background-position，jQuery做event handler去轉插頭(還有風扇)的state而trigger transition (最簡單是加class)。用transition做而非animation的主因是我要保留最後的background-position + 效果很簡單懶的用keyframe...compatibility並不在考慮之列 (FF4淚目)
插頭垂下 - 目前只有Desktop browser才會正確Play的CSS3 Animation，因為涉及keyframe轉換timing function加上一開始有改state而試了fill-mode，所以一堆mobile browser不是不會處理就是錯亂了 XD
話說做來是想看的人意識到那是可以點的東西，不過因為是一載入即Play+Playtime短所以不太看到而變成考驗browser能力的東西orz
お父さん - HTML5 Audio。HTML本身已有audio的tag和source，不過沒control和autoplay(和隱形沒兩樣)。聲音是用js播放，不過在iOS上似乎不出來...(可能因為聲音太短，有人提過此事)
Slider - 這個是用HTML5 的Range Input去做。因為一開始是在Desktop上做所以value會在mouse up的一剎那處理。另外為了配合上面的數字(slider左至右: 小至大，但和轉速相反)所以value得要做成負數、min/max的值要反轉放(但step要是正數)、handler也得要用Math.abs去處理value，不過event handler用.val()就可以拿到slider的值倒是很方便。(jQuery rocks!)
和Java port相比這個的技術其實很簡單...而且很好改(如果有用compass.app會更好)，時間其實用了去想animation和風扇行為要怎樣才自然－實作只用了3天，除了第一天外其餘都是工餘時間做的...(第一天還有一半時間去和heroku打交道，剩下的在切圖，風扇轉也只是用css去作)
[特別鳴謝]
－以及Twitter(以及plurk)上提供意見的各位 m(_ _)m
[連結]
DogFan @ heroku
玩法很簡單: 接電再按下面的control XD
基本功能有這些:
- 電力發動: 所以要接插頭開風扇 (點一下插頭就會接電、再點斷電)
- お父さん: 把風扇開起來就會聽到牠的叫聲喔～
- 三段變速: 可以改變風扇的速度，3最快1最慢。另有Slider可以細調
下一個會支援的是FF5，應該在FF 5 release前會完成。IE 9就別問我了，大方向是知道但沒library輔助會很痛苦...
[Source]
本Project有Opensource放在github上喔:DogFan的github
授權是MIT。自行轉host或改造前請讀Readme。
[技術細節]
本文的重點。
風扇組成 - absolute positioning + multiple background，因為是我自己切圖+@evenwu作的psd整理得非常不錯所以我是用了最懶的方法切－就是不做trimming只用show/hide去生png ￣▽￣，變成這部分沒甚麼特別的...
唯一要注意的是為了避免rotateZ block了插頭所以扇葉有加pointer-events:none去預防，不過android的chrome好像不太理會?
扇葉轉動 - CSS3 animation on CSS3 transformation。主要是用rotateZ+linear timing function去轉，所以是用animation duration去控制轉一圈的時間－duration愈短風扇轉的愈快...不過有趣的是就算是webkit轉速看起來也有微妙的不同
- Chrome 11 (Desktop/Mac) - 轉的比Desktop Safari 5快一點 (就是因為這樣才決定用Range Slider)
- Chrome (Flyer) - 轉的比Desktop Safari更快，快至我懷疑是有偷格...
- Chrome (G1) - 明顯有lag所以轉不動或是逆走orz
p.s.2 transform-origin不是50% 50%, 有一點offset...
p.s.3 我有懷疑過是floating point problem，因為我是只用三格keyframe就做完整個animation...
神秘的震動效果 - 條件請自行發掘 XD。那個只是同時更改兩個background的background-position (用common來分)，數字是亂填但效果很不錯 XD。和風扇一樣的是用duration控制速度，不過因為不配合風扇的轉速去變速不自然及震太快太傷眼所以用了一個mapping function+DOM style interface去設定duration
插頭接合 - jQuery+CSS3 Transition on background-position，jQuery做event handler去轉插頭(還有風扇)的state而trigger transition (最簡單是加class)。用transition做而非animation的主因是我要保留最後的background-position + 效果很簡單懶的用keyframe...compatibility並不在考慮之列 (FF4淚目)
插頭垂下 - 目前只有Desktop browser才會正確Play的CSS3 Animation，因為涉及keyframe轉換timing function加上一開始有改state而試了fill-mode，所以一堆mobile browser不是不會處理就是錯亂了 XD
話說做來是想看的人意識到那是可以點的東西，不過因為是一載入即Play+Playtime短所以不太看到而變成考驗browser能力的東西orz
お父さん - HTML5 Audio。HTML本身已有audio的tag和source，不過沒control和autoplay(和隱形沒兩樣)。聲音是用js播放，不過在iOS上似乎不出來...(可能因為聲音太短，有人提過此事)
Slider - 這個是用HTML5 的Range Input去做。因為一開始是在Desktop上做所以value會在mouse up的一剎那處理。另外為了配合上面的數字(slider左至右: 小至大，但和轉速相反)所以value得要做成負數、min/max的值要反轉放(但step要是正數)、handler也得要用Math.abs去處理value，不過event handler用.val()就可以拿到slider的值倒是很方便。(jQuery rocks!)
和Java port相比這個的技術其實很簡單...而且很好改(如果有用compass.app會更好)，時間其實用了去想animation和風扇行為要怎樣才自然－實作只用了3天，除了第一天外其餘都是工餘時間做的...(第一天還有一半時間去和heroku打交道，剩下的在切圖，風扇轉也只是用css去作)
[特別鳴謝]
－以及Twitter(以及plurk)上提供意見的各位 m(_ _)m
2011年6月10日 星期五
Google另一個歡樂的Doodle: Les Paul結他
這個Doodle本來是昨天紀念結他之父Les Paul 96歲生日而作的結他Doodle，因為可以用mouse和鍵盤彈而大受歡迎，於是和Google Doodle食鬼一樣有permalink，而且還加了錄音和play-by-link的功能~
[Link]
Google Doodle : Les Paul Guitar
* 用iGoogle的人要再按一下傳統首頁才看到 已經會redirect到下面的連結了
Google Doodle : Les Paul Guitar (Permalink)
真正的permalink
[結他教學]
How To Play Guitar On The Les Paul Google Doodle (LESSONS)
[關於錄音]
1. 打開上面的結他連結(任一)
2. 看到結他之後按中間的黑色鍵可以用鍵盤彈+開始錄chord (銀色的status bar會有Recording字樣，黑鍵上的紅燈會亮起)
3. 彈完再按一次黑鍵會停止錄音，之後小等一下銀色的status bar裡會有一個可以autoplay的短網址
4. 這個短網址可以給別人，進入這個網址結他自己就會autoplay剛才的錄音
Enjoy, happy Friday :D
(OT: 技術上這個是用canvas和png sprites做UI、flash做聲音操作的小玩意)
(13/6: 更新連結)
[Link]
Google Doodle : Les Paul Guitar
Google Doodle : Les Paul Guitar (Permalink)
真正的permalink
[結他教學]
How To Play Guitar On The Les Paul Google Doodle (LESSONS)
[關於錄音]
1. 打開上面的結他連結(任一)
2. 看到結他之後按中間的黑色鍵可以用鍵盤彈+開始錄chord (銀色的status bar會有Recording字樣，黑鍵上的紅燈會亮起)
3. 彈完再按一次黑鍵會停止錄音，之後小等一下銀色的status bar裡會有一個可以autoplay的短網址
4. 這個短網址可以給別人，進入這個網址結他自己就會autoplay剛才的錄音
Enjoy, happy Friday :D
(OT: 技術上這個是用canvas和png sprites做UI、flash做聲音操作的小玩意)
(13/6: 更新連結)
2011年6月7日 星期二
[Browser戰報] 全民狂奔
[IE]
前兩天的Computex 2011發佈會指出Win 8確認會以webapp為重心(還出了video)，MIX 11 Demo IE 10才爆出加了一堆東西:
- CSS3 gradient
- CSS3 multiple column
- CSS3 flexible box
- CSS3 Grid layout
- strict mode
(那個魚缸進化版真的很威...)
[Safari]
Lion即將在7月上市，Safari升級至5.1，已有Developer版可下載 - 可以跑WebGL quake
不過我最關心的是來不來的及加入CSS Region...
(看起來Safari好像走IE的舊路，不妙)
[Opera]
1. Opera 11.50 Beta
2. 他們做< input type="color" > (color picker)了啦...
3. Dragonfly有remote debugging console, webkit努力中，mozilla..好像沒有動作
[Firefox]
更新很多...(部分在Aurora 6...)
HTML5
- < progress >
- 3D youtube (w/Nvidia) , via WebM (official post)
- CSS Animations
- Canvas Update
- Javascript Memory
- Networking
- WebSocket and more
Browser
- Mozilla在兩周前出了Update，建議現有從Beta升級到FF 4的用戶升級Firefox 5 beta (Mac & Win也有)
- Firefox 出了新的dev channel: Aurora, version 6
- Mozilla的Nightly則是到了version 7
(Aurora和Nightly的分別看firefox channel官網就知道了: nightly > aurora > beta > release )
[Chrome]
- Google IO太多新API...比較觸目的是HTML5 WoW Demo過的強化File API和Web Audio
- Google dev的版號好像到了14
- Nightly: Developer Tool可以take JS memory snapshot了...[official post]
[小結]
除了Safari外幾乎是全部browser版號狂奔啊...不過大家不管那個platform都狂追Spec，好事?
前兩天的Computex 2011發佈會指出Win 8確認會以webapp為重心(還出了video)，MIX 11 Demo IE 10才爆出加了一堆東西:
- CSS3 gradient
- CSS3 multiple column
- CSS3 flexible box
- CSS3 Grid layout
- strict mode
(那個魚缸進化版真的很威...)
[Safari]
Lion即將在7月上市，Safari升級至5.1，已有Developer版可下載 - 可以跑WebGL quake
不過我最關心的是來不來的及加入CSS Region...
(看起來Safari好像走IE的舊路，不妙)
[Opera]
1. Opera 11.50 Beta
2. 他們做< input type="color" > (color picker)了啦...
3. Dragonfly有remote debugging console, webkit努力中，mozilla..好像沒有動作
[Firefox]
更新很多...(部分在Aurora 6...)
HTML5
- < progress >
- 3D youtube (w/Nvidia) , via WebM (official post)
- CSS Animations
- Canvas Update
- Javascript Memory
- Networking
- WebSocket and more
Browser
- Mozilla在兩周前出了Update，建議現有從Beta升級到FF 4的用戶升級Firefox 5 beta (Mac & Win也有)
- Firefox 出了新的dev channel: Aurora, version 6
- Mozilla的Nightly則是到了version 7
(Aurora和Nightly的分別看firefox channel官網就知道了: nightly > aurora > beta > release )
[Chrome]
- Google IO太多新API...比較觸目的是HTML5 WoW Demo過的強化File API和Web Audio
- Google dev的版號好像到了14
- Nightly: Developer Tool可以take JS memory snapshot了...[official post]
[小結]
除了Safari外幾乎是全部browser版號狂奔啊...不過大家不管那個platform都狂追Spec，好事?
2011年5月18日 星期三
[Game雜談] Portal 及簡易成就攻略
說最佳和多梗的動作解謎Puzzle實在是非Portal系列莫屬。因為出了Portal2也順便把Portal 1玩完再衝一下成就...
世界觀是Half Life為基礎加上架空科學研究所Aperture Science展開。遊戲內玩家的角色叫Chell，其他一切不詳。遊戲基本就是用Portal Gun開Portal來走到終點來完成電腦系統(Boss) GLaDoS指定的Test。不過門不那麼容易到、也不是那麼容易開(要按鍵或打開某些機關)，而主角也不是太能跑能跳，頂多只能捱一小會子彈－用Portal和物理就成為了解謎關鍵。
和Portal 2比起來Portal 1的梗*比較少、遊戲比較靜(但GLaDoS說的都很...=_=|||)，Puzzle動作精度要求比較高。這代沒有zoom也是比較難打的原因之一。不過要了解Portal 2的故事/梗要先玩完Portal 1 (而且會比較爽...)
* Portal 1就只有其他valve的Game的cross reference (因為世界觀是Half Life為基礎)
小知識:
世界觀是Half Life為基礎加上架空科學研究所Aperture Science展開。遊戲內玩家的角色叫Chell，其他一切不詳。遊戲基本就是用Portal Gun開Portal來走到終點來完成電腦系統(Boss) GLaDoS指定的Test。不過門不那麼容易到、也不是那麼容易開(要按鍵或打開某些機關)，而主角也不是太能跑能跳，頂多只能捱一小會子彈－用Portal和物理就成為了解謎關鍵。
和Portal 2比起來Portal 1的梗*比較少、遊戲比較靜(但GLaDoS說的都很...=_=|||)，Puzzle動作精度要求比較高。這代沒有zoom也是比較難打的原因之一。不過要了解Portal 2的故事/梗要先玩完Portal 1 (而且會比較爽...)
* Portal 1就只有其他valve的Game的cross reference (因為世界觀是Half Life為基礎)
小知識:
- Steam版預設可以Sync Save (Cloud Save)
- Test的內容Chamber的白牌有寫 (我愛死那堆pictogram了)
- 只有特定的牆都可以開Portal (多數是白色...不過也有不是白色而可以開的，或相反)
- Portal Gun可以穿透某些物質或鐵絲網
- Portal Gun可以抓住金屬物件(或表面有金屬的)
- 如果在Turret視線範圍(laser為中心一個扇形)會被攻擊，不過在後面or側面他們不會看到你
- Turret站不穩就會掛
- Turret是金屬，不過可以被抓起來 (他們有一點AI，還會掙扎)
- Turret是金屬，不過可以撞跌...
- Turret可以被laser、光球打爆
- Turret彈數理論上有限，不過遊戲中是無限的
- 基本上出場的Turret都可以被打爆
- Lab的玻璃是防彈玻璃，Turret可以透過玻璃看到你、開火、但打不到你
- 防彈玻璃不防火箭
- Cube是金屬，可以擋子彈、光球、laser
- 牆上的Camera可以打下－只限可以開Portal Surface的那些
- Chell不會遊泳、水也可能是Acid，所以有深度的水是Deadly Water =_=
- 不過Chell可以捱一小點子彈，短時間的laser，只要沒死過一會就會回復，不過被光球打中是會死的...
- 又雖然Chell跳不太高，不過跌是沒高度限制的...
- Chell在斜面也可以行走
- 多看牆、天花板和地板
- 有些地方要蹲下才可以進去
- 小心注意Aperture Science的Theme Music
- 有official cheats，不過cheats開啟時不計成就，要關了才會計的 (一開始時必須是Off，否則請關了再Quit & Load Save)
*所以有用cheats又要開成就我都是先確認Cheats關了，Save再Quit去Reload Map的...
2011年4月29日 星期五
「橫」掃網絡的少女們
一切的源起當然是昨天下午推上台灣網友議論紛紛的「仆街少女」－兩位台灣少女，她們靠著一系列「一動不動橫躺在街上」*的照片，橫掃了Twitter和plurk...
* 照片是完全符合「仆街」在廣東話的本義，而flickr的描述指她們的名稱也是取廣東話本義，是以本文由身為廣東話人的我寫十分那個…
「仆街少女」的照片可以到她們的Facebook專頁看。目前她們有兩位成員: 仆少女禁慾(台北)和仆少女karren (台中）。兩位的照片火速流傳主要原因是...實在太神太GJ，在台灣也可以拍出很有特色的照片
p.s. 另外karren另外有開仆街少女的flickr set各位不想用facebook的可以改道~
而這些少女們不禁令推友們想到來自東京的漂浮少女Natsumi Hayashi，不過這位的照片可是更高難度的跳躍漂浮shot。簡單介紹和照片選輯可以看這篇和這篇，照片甚至是拍攝方法(!)可以到她本人的Blog: yowayowa camera women diary看，Blog是英日對照，十分貼心，她也有一直更新yowayowa diary (photo blog)和news (拍攝技巧，作品集成)的部分
* 根據News她有個漂游Calendar App...厲害
然後這兩位引申出來的是來自布拉格的跌落少女－Zuzi (@Randylien)
和漂浮少女相同的是，照片都在她的Blog: Salad of my life，不同的是她的Blog連有製作花絮[1][2]也有，好專業...
於是一群打橫少女的照片就橫掃網絡了。不過她們的流行也許都是...
 |
| (來自仆街少女的Facebook相簿) |
* 照片是完全符合「仆街」在廣東話的本義，而flickr的描述指她們的名稱也是取廣東話本義，是以本文由身為廣東話人的我寫十分那個…
「仆街少女」的照片可以到她們的Facebook專頁看。目前她們有兩位成員: 仆少女禁慾(台北)和仆少女karren (台中）。兩位的照片火速流傳主要原因是...實在太神太GJ，在台灣也可以拍出很有特色的照片
p.s. 另外karren另外有開仆街少女的flickr set各位不想用facebook的可以改道~
而這些少女們不禁令推友們想到來自東京的漂浮少女Natsumi Hayashi，不過這位的照片可是更高難度的跳躍漂浮shot。簡單介紹和照片選輯可以看這篇和這篇，照片甚至是拍攝方法(!)可以到她本人的Blog: yowayowa camera women diary看，Blog是英日對照，十分貼心，她也有一直更新yowayowa diary (photo blog)和news (拍攝技巧，作品集成)的部分
 |
| 3月20日的浮遊照片 |
然後這兩位引申出來的是來自布拉格的跌落少女－Zuzi (@Randylien)
和漂浮少女相同的是，照片都在她的Blog: Salad of my life，不同的是她的Blog連有製作花絮[1][2]也有，好專業...
於是一群打橫少女的照片就橫掃網絡了。不過她們的流行也許都是...
＠msvanny: 只要是少女，什麼都好..........（嗯
2011年3月25日 星期五
Browser戰報: FF4 Release 、Chrome 11 Beta
[Firefox]
FF4 Release
終於不用Beta 99了orz
新版改很大，另文
不過對於一般輕量使用者來說FF 4 + 5~10個會吃的比較多Ram，但開至20個以上時會吃的比較少...
[Chrome]
Chrome 11 Beta
Web Browser Grand Prix 3
5大Browser，12項評測...請自行收看~(逃)
FF4 Release
終於不用Beta 99了orz
新版改很大，另文
不過對於一般輕量使用者來說FF 4 + 5~10個會吃的比較多Ram，但開至20個以上時會吃的比較少...
[Chrome]
Chrome 11 Beta
- 東西很少，但很震撼...
- HTML5 Speech Input API
- 有硬體加速的3D CSS (和iPad看齊)
- 換logo:
 |
| 不知該如何吐糟... [source] |
Web Browser Grand Prix 3
5大Browser，12項評測...請自行收看~(逃)
2011年3月19日 星期六
Browser戰報: FF4 RC2 、Chrome 10 Update、IE 9 Release
[IE]
IE9
正式版來了，各位Developer的惡夢來了...
注意: XP無法安裝
效能對決
1. IE9 64bit，大慘敗
2. FF4 RC1除了peacekeeper大敗外其他test都是樂勝
[Firefox]
FF4 RC2
一點的bug fix和新locale，正式版會是下星期: 3月22日!!
[Chrome]
Chrome 10 update
封了幾張SSL cert...
IE9
正式版來了，各位Developer的惡夢來了...
注意: XP無法安裝
效能對決
1. IE9 64bit，大慘敗
2. FF4 RC1除了peacekeeper大敗外其他test都是樂勝
[Firefox]
FF4 RC2
一點的bug fix和新locale，正式版會是下星期: 3月22日!!
[Chrome]
Chrome 10 update
封了幾張SSL cert...
2011年3月10日 星期四
Browser戰報: FF4 RC 、Chrome 10 Release、IE 9 RTM、iOS 4.3
[Firefox]
Firefox 4 RC現已可經update取得
更新的就只是minor bug fix。
之後FF的版號會轉為4.0 (其實應該是4.0 RC1，所以what's new一頁會404 XD)
[Release Note]
[Chrome 10]
Chrome 10 release了~
Firefox 4 RC現已可經update取得
更新的就只是minor bug fix。
之後FF的版號會轉為4.0 (其實應該是4.0 RC1，所以what's new一頁會404 XD)
[Release Note]
[Chrome 10]
Chrome 10 release了~
- 換了個v8 js engine
- window終於有做sandbox flash，flash終於不會把chrome打掛 (win 7 chrome應該受惠)
- setting(選項)會開在tab
- 加了一些硬體加速
- background webapp (?!)
- experimental webNavigation API
- Security fix/加強
而且會是在SXSW大會上公佈~(所以應該不會跳票)
[iOS 4.3]
今天推出，可經iTunes取得....已知是Mobile Safari JS效能暴升，其他的還在等@firt
[OT: 本日最GJ]
theie9countdown
分明是惡搞the ie6 countdown，不過對象是IE 9 XD
[iOS 4.3]
今天推出，可經iTunes取得....已知是Mobile Safari JS效能暴升，其他的還在等@firt
[OT: 本日最GJ]
theie9countdown
分明是惡搞the ie6 countdown，不過對象是IE 9 XD
2011年3月7日 星期一
Browser戰報: FF4 即將RC 、Chrome 10、M$要殺IE 6?!
[Firefox]
2月25日Firefox4 出了Beta 12，基本上UI已經變得比較可用(也就是十分Chrome...)，沒有Blocker而Roadmap也顯示下一版是RC...
另外有網友在mozilla FTP找到b13和RC的link，不過Release只到b12，看來是決定不了出RC還是b13?
(別再來beta 99這種事了，囧)
[Chrome]
Chrome 10 Beta了，至於加了甚麼....基本上是感覺不到 [Release Note]
[IE]
上個周未最爆的事: 連M$也叫大家別用IE6了 ，推出了IE 6 Countdown這個網站，希望全世界的IE6使用率在1%以下
(天音: M$終於自己也受夠了嗎...)
然而看圖就知道，大中華地區路途遙遠....
(甚麼時候IE 7和8也可以countdown呢...)
p.s. 1 另外有人弄了個Until IE6 is dead的網站來給IE6倒數...
p.s. 2 有人點中了M$死穴－真正的IE6 countdown不是升級IE 8，而是改用和核心獨立又有硬體加速的FF、Opera、Chrome，於是intranet繼續正常運作但Internet受惠大眾升級 [source]
2月25日Firefox4 出了Beta 12，基本上UI已經變得比較可用(也就是十分Chrome...)，沒有Blocker而Roadmap也顯示下一版是RC...
另外有網友在mozilla FTP找到b13和RC的link，不過Release只到b12，看來是決定不了出RC還是b13?
(別再來beta 99這種事了，囧)
[Chrome]
Chrome 10 Beta了，至於加了甚麼....基本上是感覺不到 [Release Note]
[IE]
上個周未最爆的事: 連M$也叫大家別用IE6了 ，推出了IE 6 Countdown這個網站，希望全世界的IE6使用率在1%以下
(天音: M$終於自己也受夠了嗎...)
然而看圖就知道，大中華地區路途遙遠....
(甚麼時候IE 7和8也可以countdown呢...)
p.s. 1 另外有人弄了個Until IE6 is dead的網站來給IE6倒數...
p.s. 2 有人點中了M$死穴－真正的IE6 countdown不是升級IE 8，而是改用和核心獨立又有硬體加速的FF、Opera、Chrome，於是intranet繼續正常運作但Internet受惠大眾升級 [source]
[遊記] 彩虹勇士號
[最近太忙結果卡了很久才出到這篇...]
之前在Twitter看到2月綠色和平的行動船彩虹勇士號訪港+公眾開放，而且會是這代船最後一次行程，於是2月20日就去了參觀
(本來只到20日，後來因為他們延遲一星期才走，有加場)
之前在Twitter看到2月綠色和平的行動船彩虹勇士號訪港+公眾開放，而且會是這代船最後一次行程，於是2月20日就去了參觀
(本來只到20日，後來因為他們延遲一星期才走，有加場)
 |
| 停在中環2號碼頭的彩虹勇士(2)號 |
2011年3月1日 星期二
[CSS3 Minefield] CSS3 Background and Border #1 - Multiple Background
寫完一些長文接下來會把一些本質上很零碎的spec分成幾個短篇寫-這次是已經是CR的CSS3 Background and Border [w3c spec]
今天的主題是當中最多人感興趣(也最雷)的Multiple Background
今天的主題是當中最多人感興趣(也最雷)的Multiple Background
2011年2月26日 星期六
2011年2月25日 星期五
[iOS/Mobile Safari] 用media query時很易中的: orientation 的 scaling bug
之前有遇過，總算有解了就寫一下
[症狀]
如果viewport有設width=device-width + initial zoom=1.0 → page scale在轉完orientation後不正確的見鬼事情
而事情會在有media query有orientation時十分明顯
而且是portrait(垂直/直向)轉landscape(水平/橫向)時發生的...
Demo
[圖解]
那麼先直後橫呢?
會變成 (2) → (3) → (2)
...也就是說從水平轉垂直是沒事的
為什麼只是和scaling有關呢?
沒media query和scaling的原版
只有scaling
只有media query
和Demo比較一下就清楚了...只有scaling就有事，沒scaling沒事 囧
補充
這個bug最見鬼的是－reload scale照出錯 (Mobile Safari把錯的viewport設定記下來+完全無視initial-scale)，要手動scale down回 1.0才正常orz
[原因?]
好像viewport在轉向那一刻鎖成直向(769px x *)+Safari選scale up而非scale down－1024/769=1.3，於是scale出錯...
Viewport是如何出錯的Demo
(照1、2、3的次序再做一次，每次檢查HTML width和Viewport width)
[解法]
1. 不設viewport meta tag: media query的width和height會可能失敗-預設viewport是980x* [Apple文件]
2. 禁止user-scaling:
3. 設一個scaling上限:
[症狀]
如果viewport有設width=device-width + initial zoom=1.0 → page scale在轉完orientation後不正確的見鬼事情
而事情會在有media query有orientation時十分明顯
而且是portrait(垂直/直向)轉landscape(水平/橫向)時發生的...
Demo
[圖解]
 |
| (1) 原本的橫向... |
 |
| (2) 轉一下直向 |
 |
| (3) 轉回橫向 - zoom level出錯了，大了很多 ( > 1.0) 囧 |
會變成 (2) → (3) → (2)
...也就是說從水平轉垂直是沒事的
為什麼只是和scaling有關呢?
沒media query和scaling的原版
只有scaling
只有media query
和Demo比較一下就清楚了...只有scaling就有事，沒scaling沒事 囧
補充
這個bug最見鬼的是－reload scale照出錯 (Mobile Safari把錯的viewport設定記下來+完全無視initial-scale)，要手動scale down回 1.0才正常orz
[原因?]
好像viewport在轉向那一刻鎖成直向(769px x *)+Safari選scale up而非scale down－1024/769=1.3，於是scale出錯...
Viewport是如何出錯的Demo
(照1、2、3的次序再做一次，每次檢查HTML width和Viewport width)
[解法]
1. 不設viewport meta tag: media query的width和height會可能失敗-預設viewport是980x* [Apple文件]
2. 禁止user-scaling:
user-scalable=no3. 設一個scaling上限:
maximum-scale=1
2011年2月17日 星期四
Browser戰報、番外篇: IE9 is NOT a modern browser
大戰源頭 - Mozilla 的 Prouget 造了一個網頁質疑IE9宣傳的”Modern Browser”: Is IE9 a modern browser? & IE9 vs FF4
雖然是預期以內，不過－－
就算他是用的很可能是Preview而非RC，FF 3.5 (兩年前)/3.6(一年前)也可以比IE9威...(遠目)
而且Prouget是用數據論證，這很難反擊。(頂多用RC再跑test)
當然M$的人也不是坐以待斃，有人有給回應－
M$的人無力的回應: A Modern Browser - Tim Sneath - Site Home - MSDN Blogs
(少給我廢話，Give me data!)
(番外篇，完)
雖然是預期以內，不過－－
就算他是用的很可能是Preview而非RC，FF 3.5 (兩年前)/3.6(一年前)也可以比IE9威...(遠目)
而且Prouget是用數據論證，這很難反擊。(頂多用RC再跑test)
當然M$的人也不是坐以待斃，有人有給回應－
M$的人無力的回應: A Modern Browser - Tim Sneath - Site Home - MSDN Blogs
(少給我廢話，Give me data!)
(番外篇，完)
2011年2月11日 星期五
Browser戰報: IE9 RC及FF4 beta 11
IE9 RC
M$這回沒跳票了，這一轉加的東西不多:
[Source]
完整的新功能見Internet Explorer 9 Guide for Developers
(*2D Transformation和WebM也有了，UI向FF/Chrome/Opera看齊...不過個人感覺是十分的Chrome...)
另外有人反映font-rendering有sub-pixel，會好看一點?
(CSS3 Multi-column、pushState沒影，history API只有onhashchange...)
[Download]
=========
問: 有甚麼是比同時支援 IE 6、7、8慘?
答 1: 同時支援 IE 6、7、8、9 !
答 2: 同時支援 IE n, ∀n∈R. (by @kelvw)
=========
FF4 beta 11
Bug Fix為主，不過Firebug和一堆addon在這一版掛了...[Release Note]
p.s. FF4有Paste & Go了，Yo!
M$這回沒跳票了，這一轉加的東西不多:
- Geolocation
- CSS3 Border-image
- Web Worker
- CSS3 text-shadow
- offline web app (appcache)
[Source]
完整的新功能見Internet Explorer 9 Guide for Developers
(*2D Transformation和WebM也有了，UI向FF/Chrome/Opera看齊...不過個人感覺是十分的Chrome...)
另外有人反映font-rendering有sub-pixel，會好看一點?
(CSS3 Multi-column、pushState沒影，history API只有onhashchange...)
[Download]
=========
問: 有甚麼是比同時支援 IE 6、7、8慘?
答 1: 同時支援 IE 6、7、8、9 !
答 2: 同時支援 IE n, ∀n∈R. (by @kelvw)
=========
FF4 beta 11
Bug Fix為主，不過Firebug和一堆addon在這一版掛了...[Release Note]
p.s. FF4有Paste & Go了，Yo!
[CSS3 Minefield] Multiple Columns
今天的是簡單一點的CSS3 Multiple columns (w3c: multi-column)。這是網頁排版的重要模組之一，可以排出報章雜誌常用的多欄文章:
[Source: Wikipedia, The Guardian Cover (Fair Use)]
2011年2月10日 星期四
[CSS3 Minefield] Media Queries
延續上回的CSS3火星系列，這次颯爽登場^的是Media Queries!
[前言]
當今世上的顯示平面實在太多－不同大小的手機、不同大小的顯示器、以至不同的媒介(media)，尺寸兩極，一個CSS難以滿足全部平台，於是讓特定的顯示平面+螢幕尺寸來切換CSS的media query應需要而生，在smartphone/iPad+CSS3橫行的年代獲廣泛應用。
Media Queries有兩個組成部分: 媒介種類(Media Type) & 特性(Media Feature)，以下逐一說明。
[前言]
當今世上的顯示平面實在太多－不同大小的手機、不同大小的顯示器、以至不同的媒介(media)，尺寸兩極，一個CSS難以滿足全部平台，於是讓特定的顯示平面+螢幕尺寸來切換CSS的media query應需要而生，在smartphone/iPad+CSS3橫行的年代獲廣泛應用。
Media Queries有兩個組成部分: 媒介種類(Media Type) & 特性(Media Feature)，以下逐一說明。
2011年2月9日 星期三
HTML5 Little thought: legacy template
Question came from the presentation of @codepo8:
using html5 sensibly
audio and video (video is 'coming soon')
His idea: How about moving IE < 9 fixes to server-side? Padding with DIVs with classes and no JS for IE?
If think with Responsive Web Design...
The Idea will be: make responsive web design more responsive with legacy web browser.
The reason: even JS patch works, still, legacy browsers are too problematics to developers. (e.g. the speed, DOM incompatibility, etc)
Idea is here but the implementation is problem...may be similar to mobile template (lets call it legacy template), with much more inaccuracy. Also it may be suffer from the problem of versioning again.
IE, please die. Old version of modern browsers, please rest.
using html5 sensibly
audio and video (video is 'coming soon')
His idea: How about moving IE < 9 fixes to server-side? Padding with DIVs with classes and no JS for IE?
If think with Responsive Web Design...
The Idea will be: make responsive web design more responsive with legacy web browser.
The reason: even JS patch works, still, legacy browsers are too problematics to developers. (e.g. the speed, DOM incompatibility, etc)
Idea is here but the implementation is problem...may be similar to mobile template (lets call it legacy template), with much more inaccuracy. Also it may be suffer from the problem of versioning again.
IE, please die. Old version of modern browsers, please rest.
[CSS3 Minefield] Animation
上次寫過CSS3 Transition這次就寫一下CSS3 Animation－比Transition複雜但可以做出精細特效的終極神器。 (尤其是你要的屬性變更是非線性或不連續的時候)
[前言]
和CSS3 Transition一樣的是，本文只適用於webkit系的Chrome和Safari。 [Browser Support]
本篇會比一篇更傾向解Spec－基本上只要有Flash/Shockwave底子原理不難懂，差的是動畫特性: 流程與機能等。
另外這次的排版也有點不一樣－方便為主，semantics不是不想理是Blogger的系統不給理...
Let's Start。
[前言]
和CSS3 Transition一樣的是，本文只適用於webkit系的Chrome和Safari。 [Browser Support]
本篇會比一篇更傾向解Spec－基本上只要有Flash/Shockwave底子原理不難懂，差的是動畫特性: 流程與機能等。
另外這次的排版也有點不一樣－方便為主，semantics不是不想理是Blogger的系統不給理...
Let's Start。
2011年2月8日 星期二
HTML5/Browser戰報: HTML沒版號及其他...
HTML5
HTML沒版號: Living-Standardize?
WHATWG:HTML is the new HTML5
2012後WAHTWG會把HTML轉Living Standard，下一版的HTML沒有版本號
HTML5 vs. HTML – Jeffrey Zeldman Presents The Daily Report
Standard大師，Jeffery Zeldman對此事的感想－至少CSS3分出來是好事...
<video>
HTML5 and Web Video: Questions for the Industry from the Community - IEBlog - Site Home - MSDN Blogs
M$出H.264 plugin給chrome，搞啥...?
隱憂1: webM開始有patent pool形成[1][2]，就算有FSF給背書也是官司連場...
隱憂2: H.264本身問題其實不少，有developer聲稱照足spec做仍是會fail
隱憂3: H.264授權是貴死人沒命賠的那種
video這片仍然有很多問題。不過已經有人做出一些很瘋狂的事出來了
WebForm
new form features in html5
Opera又加feature了: 這次連color-picker也搞出來了...
Accessibility
http://html5accessibility.com/
全軍覆沒，一如<audio>... [Spec]
(不過<audio>其實還算是可以用的...)
相關技術
WebGL
gl64k
和js1k相似的比賽，come on 3D programmer!
Exporting video from WebGL
把WebGL輸出video，不過仍需server (node.js + ffmpeg)
瀏覽器大戰
Firefox 4, 5, 6 and 7 to be released before the end of 2011
繼Chrome後FF加入版本號競賽，一年跳(票)三個版本...
微軟將在2月10號公布IE9最終預覽版
IE9 RC，2月10日。CSS人可以先看M$官方的CSS相容性列表...
Mobile browser shares 4/4
Mobile browser戰場系列: 常識(webkit天下)是管用，不過不管Opera明顯是個bad idea...
HTML沒版號: Living-Standardize?
WHATWG:HTML is the new HTML5
2012後WAHTWG會把HTML轉Living Standard，下一版的HTML沒有版本號
HTML5 vs. HTML – Jeffrey Zeldman Presents The Daily Report
Standard大師，Jeffery Zeldman對此事的感想－至少CSS3分出來是好事...
<video>
HTML5 and Web Video: Questions for the Industry from the Community - IEBlog - Site Home - MSDN Blogs
M$出H.264 plugin給chrome，搞啥...?
隱憂1: webM開始有patent pool形成[1][2]，就算有FSF給背書也是官司連場...
隱憂2: H.264本身問題其實不少，有developer聲稱照足spec做仍是會fail
隱憂3: H.264授權是貴死人沒命賠的那種
video這片仍然有很多問題。不過已經有人做出一些很瘋狂的事出來了
WebForm
new form features in html5
Opera又加feature了: 這次連color-picker也搞出來了...
Accessibility
http://html5accessibility.com/
全軍覆沒，一如<audio>... [Spec]
(不過<audio>其實還算是可以用的...)
相關技術
WebGL
gl64k
和js1k相似的比賽，come on 3D programmer!
Exporting video from WebGL
把WebGL輸出video，不過仍需server (node.js + ffmpeg)
瀏覽器大戰
Firefox 4, 5, 6 and 7 to be released before the end of 2011
繼Chrome後FF加入版本號競賽，一年跳(票)三個版本...
微軟將在2月10號公布IE9最終預覽版
IE9 RC，2月10日。CSS人可以先看M$官方的CSS相容性列表...
Mobile browser shares 4/4
Mobile browser戰場系列: 常識(webkit天下)是管用，不過不管Opera明顯是個bad idea...
2011年1月20日 星期四
[Internet] 吐糟惡搞網站精選 (01/2011或以前)
這年頭吐糟惡搞是一件可以用一頁HTML+一個domain去做的事，其中以吐糟Web Design和互聯網公司/服務最為落力。
[Web Design/Development]
w3fools.com
很多人在用的參考網站w3school (注意:沒有c)，其實是個充滿錯誤內容、更新不足、標示不清的網站，在不少人受不了大家受其散佈的錯誤資訊所害後終於出來踢爆－不看還真的不知道原來有這麼多黑幕...(至少這個網站和w3c無關)
Enterprise CSS, Enterprise HTML, Enterprise JavaScript
應該稱為Enterprise Web系列，內容是用力吐糟商業世界各處可見的爛Code (Bad Practice)，Reload一次換一個，很多都非常好笑又似曾相識－是要撫心自問自己有沒有做過的那種...
Do websites need to look exactly the same in every browser?
2011年了還有人以為是Yes，哀哉。
[互聯網]
Web 2.0 Summit: “Points Of Control” map in “Acquisition mode”
科網公司收購史、地圖戰略版
本吐糟惡搞網站系列會不定期更新，歡迎補充。
[Web Design/Development]
w3fools.com
很多人在用的參考網站w3school (注意:沒有c)，其實是個充滿錯誤內容、更新不足、標示不清的網站，在不少人受不了大家受其散佈的錯誤資訊所害後終於出來踢爆－不看還真的不知道原來有這麼多黑幕...(至少這個網站和w3c無關)
Enterprise CSS, Enterprise HTML, Enterprise JavaScript
應該稱為Enterprise Web系列，內容是用力吐糟商業世界各處可見的爛Code (Bad Practice)，Reload一次換一個，很多都非常好笑又似曾相識－是要撫心自問自己有沒有做過的那種...
Do websites need to look exactly the same in every browser?
2011年了還有人以為是Yes，哀哉。
[互聯網]
輕網誌服務Tumblr吐糟網站－這網站有甚麼不好的話就是太常掛了，而且愈來愈兇，終於有人忍不住弄了藉口生成器...
科網公司收購史、地圖戰略版
本吐糟惡搞網站系列會不定期更新，歡迎補充。
2011年1月19日 星期三
HTML5 戰報: HTML5 Logo 及...其惡搞 (還有一些雜七雜八的)
本日焦點: HTML5 LOGO
對，就是它啦～W3C在18日公佈了這個HTML5的專用LOGO，有用HTML5 doctype的website都可以掛。同時他們也推出了專屬網站HTML5 Logo，有Badge Builder玩、有T-shirt賣和有貼紙可供索取^~
^全世界的人也可以拿，只要用國際回郵信封(IRC)+足夠郵費即可，美國則用本土信封+郵費。信封則用No.10，不確認買3M出的一定OK
至於這個Logo和Badge的Icon也有故事，詳見製作特輯[Behind the Scene] 、W3C的訪談[W3C interview]
[惡搞物]
最GJ
[by @sinnick]
//我自己(及不少人)的第一印象確實是Transformer...
冒汗
//Twitter: Angry Rabbit
太強大
有人極速弄了個Chrome extension去highlight用html5 doctype的網站... [HTML5 Powered]
絕望
有人做了Flash版...HTML5 logo in Flash
看不見的世界 (Update)
盲人點字版...HTML5 logo in Braille
[小記]
至於我本人對這個logo的感想嘛...「W3C總算有沒有那麼Dry的Badge可以用了!」
雜七雜八的
^全世界的人也可以拿，只要用國際回郵信封(IRC)+足夠郵費即可，美國則用本土信封+郵費。信封則用No.10，不確認買3M出的一定OK
至於這個Logo和Badge的Icon也有故事，詳見製作特輯[Behind the Scene] 、W3C的訪談[W3C interview]
[惡搞物]
最GJ
[by @sinnick]//我自己(及不少人)的第一印象確實是Transformer...
冒汗
//Twitter: Angry Rabbit
太強大
有人極速弄了個Chrome extension去highlight用html5 doctype的網站... [HTML5 Powered]
絕望
有人做了Flash版...HTML5 logo in Flash
看不見的世界 (Update)
盲人點字版...HTML5 logo in Braille
[小記]
至於我本人對這個logo的感想嘛...「W3C總算有沒有那麼Dry的Badge可以用了!」
雜七雜八的
- CSS3 gradient 語法是mozilla獲勝，webkit的標準gradient會跟隨 [webkit's blog]
- FF4 beta 9，
Feature基本上已經不會改現實是還是要改(而且是改不少－有原生webM和IndexedDB) [mozilla hack]，UI還有一點微調 [T客邦] - IE9有流言是1月28日出RC [tom's hardware/twitter]
- Google會出IE和Safari的plugin 去支援WebM (開倒車?!) [Slashdot]
- Device API的實例 [W3C]
2011年1月13日 星期四
HTML5 戰報: 新API x 2、Chrome打算不再支援H.264
本週叫做有比較搶眼的事發生+我失眠，很快的寫一下:
-新的API有兩個: FullScreen和Navigation Timing。前者一如其名是網頁全畫面化的API，Mozilla在做，只是webkit也說要支援。後者是W3C Draft，用來做網頁Profiling(效能評估)所需的精確時間量度的API，IE和Chrome有做出來，現在Last Call。 [Source]
-這件事絕對叫人反白眼: Chrome打算不再支援H.264 (即.mp4，詳見 Google To Drop Support For H.264 In Chrome )，然後你再去看這個HTML5 video格式支援列表真的想去撞牆－5大Browser沒有共同格式，這是在玩content provider嗎? 再者，把opera mini無視掉幾乎全部webkit手機瀏覽器支援的就只有H.264啊...
而且Twitter上有人提過，H.264之優勢在有硬體支援(GPU或是專用晶片)，Chrome搞這套是叫用家走路嗎?
(OT: Chrome因為API限制是不太可能像FF一樣靠plugin/extension解決問題，超衰)
訂閱：
文章 (Atom)