[News] Google Maps, Like YouTube, Get Instantized

原文 From TechCrunch

From techCrunch

「Gmail Instant」也許真的很有用,但什麼是Google下一個目標?「Google Calendar Instant?」還是「Google Image Search Instant?」好吧,這些設計也許真的也很有用。事實上,這真的很難想像即使是即時化服務也不會讓Google從中獲得少許利益。

啟發於Google Instant的服務及 Feross Aboukhadijeh 這名工程師因為製作了「Youtube Instant」的實驗性質的網站而得到Youtbue工作機會的故事,美國阿拉巴馬州籍的開發者- Michael Hart 使用 Javascript Library – jQuery 及 Google Maps API 打造出了一個輕巧好用而且會更新全世界各地資料的「Google Maps Instant」。而就和故事中的Feross一樣,Hart也剛好也正在尋找工作:P。

依 Michael Hart 的說法,這個即時化的介面會即時地預測你想前往的地方並產生秀出即時搜尋結果,而他所設計的這個服務則是花了4小時及193次的改版才打造出來的(他目前也正努力和Google Maps 上的圖標有關的問題,及使用iPhone或Andorid手機瀏覽時的一些功能)但是雖然可以使用 Google Maps Instant 來查詢你正要去哪裡是一件很酷的事情,但是我不認為Google Maps Instant能夠和Youtube Instant有一樣的機緣就是了:P。

【評】

Instant這個想法其實並不新穎,也有很多實作的例子,最常看到的例子就是使用者在註冊時的密碼強度測試,如下圖:

所以這個東西實作並不困難,網路上都有許多的例子都可以用Ajax的方式來達到這個目標,那既然如此,到底是難在哪裡?難就難在他搜尋的資料量太大,而非同步互動的時間相對卻要縮短,而且秀出的結果還要依使用者們的習慣依序排出。要做到如此困難的事情除了在演算法要下大量的功夫之外,還需要許多方面的支援才做的到。

僅管如此,Instant在UI上是一個很重要的互動模式,能夠即時讓使用者了解到目前的Query是不是會產生預期的結果,雖然在背景下增加了一些Query的次數,不過對於具有強大財力背景的Google來說,如何讓使用者開心才是最重要的事吧:P

[CSS] How to determine ‘Specificity’ ?

有在寫web方面的朋友,特別是視覺設計人員應該對於這個詞並不陌生吧,每當我們有一大堆CSS(Cascading Style Sheet)設定檔的時候,那種交織在一起的感覺真的是讓人又愛又恨,對我來說,因為這部分的設定有很多部分都是為了Cross-Browsers而寫出來的雜亂Hacking,如果沒有註解,那久而久之根本就不知道當初是在設定什麼東西,也就無從改起。

所以我一直都覺得CSS在某種程度上和Regex算是平等的,都是Write-Only的一種表示法,只有在寫的當下你會知道是什麼意思,但是下次之後就絕對看不懂。你說我唬你?那你知道下面這是什麼鬼嗎:

http://gist.github.com/560472.js?file=gistfile1.js

哈哈,我也不知道,那是從RegExLib.com隨便抓的例子,好像是在做email驗証的吧,管他的,太噁心了,阿你CSS寫大了又切割成數個檔案,每個檔案都在夾縫中求生存,一邊+5px,一邊-2px,這不就是Regex的再版嗎…

因為自己時常有這種問題產生,所以從中會衍伸出一個問題就是CSS覆寫的priority,通常如果像我這樣蠢的人,一開始一定以為就和寫程式一樣,是以sequential的方式由上往下跑,那就最後的設定一定會蓋過最先的設定呀,這還要說嗎?阿如果真的是這麼容易就好了,其實是有規則的:

所以如果以後對於其樣式的優先順序有什麼不確定的地方的話,就愛用CSS specificity calculator吧,這個網站是我尋覓了一陣子才發現的,而且似乎也有一直在更新,不妨試試看吧。

[Bash] Fookies = Flash cookies (Local Shared Object)

最近公司剛好在研究Flash cookies的應用,我才開始對這個東西有了了解。其實從字面上的意思就可以得知它是一種廣為使用但卻少為人知Cookies。Local Shared Object(LSO)又被稱為Flash cookies,從WIki上面的資料可以發現在2005年的時候Slashdot就有寫相關的文章來介紹這個東西,但是我是一直到現在2010年的8月,才知道這個東西的存在…

所謂亡羊補牢,猶未晚也,一定還有一堆人不知道這個東西,所以就趁這個機會簡單的介紹一下。其實它就是Cookies,各種網站或是應用都大量地使用這個餅乾來記錄有關使用者的各種資訊,而我們的Browser也很貼心的為了保護使用者的隱私權,讓我們只要簡單的隨便按一兩個鍵就能把這些記錄清掉。但是,卻漏掉Fookies。

以下是我從wiki截錄的Fookies路徑:
http://gist.github.com/549144.js?file=gistfile1.txt
我們可以發現到Fookies都是被藏在一般使用者根本不會發現的地方,而Browser也不會很好心的幫你把他們清掉,所以只能自己靠自己手動去那些路徑把這些東西幹掉。 所以就寫了一小段的Bash Scripts,只要是Mac OS X或是Linux的User應該都可以在Terminal下利用這個Scripts把Web Applications的Fookies批次刪除。

http://gist.github.com/549126.js?file=gistfile1.sh
所以如果下次看到某個網站不知道為什麼在Cookies刪掉之後還是能夠把你之前的個人設定秀出來的話,快刪Fookies吧 😉

【評】
其實這個東西真的很髒,特別是愛逛特別網站(?)人,那些記錄早就被存在Fookies內了,所以下次除了手動刪Cookies、刪瀏覽記錄,別忘了還要刪Fookies呢,Yooooooooooooooooooooooooo。

δ 2010/08/31 新增了判斷Linux使用者的部分。

[News] How Twitter Can Help You Quit Smoking

原文 from TechCrunch

剛剛在看TechCrunch的時候發現了這一篇還蠻新的文章,就翻譯一下順便分享給大家。(內文會參雜部分個人意見

From TechCrunch

在星期六的紐約時報中,有一名記者Brian Stelter發表了一個他利用Twitter來當做減肥工具的小故事,並同時設立一個@briansteler25的帳號用來記錄他的減肥及飲食計畫。

我知道我沒辦法一個人減肥,所以我需要一個能夠支持、鼓勵我的小天地。 from Brian Stelter

結果?他減了75磅。這有點太扯了,不知道他是怎麼減的,經過高精度儀器計算,1磅 = 0.45359237公斤。幹,是我數學太好還是計算機壞了,「75 * 0.45359237 = 34.0194277 公斤!!」,以這個成績來看,有了Twitter,連媚登X都可以關門了,真扯。

先不論他花多久做到的,我們先繼續看。

在我的生日派對上,我覺得抽15年的菸已經夠多了,該是把菸丟了。一開始我還不太敢把這件事情推到Twitter上,主要是一開始因為尼古丁戒斷症候群讓我感到非常難過,但是到了第三天的時候,我已經集滿足夠的勇氣來讓我打倒它了。

結果在那天之後,我收到超多人的支持。我就像是Stelter,如果我就這樣拾起香菸而不是我的iPhone的話(因為作者都靠著一直Tweet來讓自己不要抽菸,就像我一直喝飲料一樣(?)),我就會讓那些支持我的人難過。

from TechCrunch

所以接下來當我進入了想要抽菸的紅色警界,例如和朋友去參加派對或是穿過機場的大門(?),我就會瘋狂Tweet或是使用尼古丁貼片來克制我抽菸的慾望,避免改變了我原本堅定的決心呀呀呀(Stuck to someone’s guns)。

我喜愛抽菸的程度就像是Stelter喜愛吃Dunkin’的甜甜圈一樣吧,但是當我看到Chris Sacca(下)和Troy Holden的推(上),就讓我在衝去買一包香菸前再次慎重的思考了一次,無論我現在是多麼的想抽呀呀呀。

from TechCrunch

我沒辦法一個人戒掉抽菸,我需要一個能夠激勵我的地方。

首先,為什麼人會暴食或是狂抽菸呢,依我個人的經驗呀(是作者不是我!!),是因為他們想要被注意或是被安撫。如果我們可以利用在Twitter上朋友給予支持的力量來取代那些不健康的行為所帶來的短暫快樂,那Twitter就是一個很棒的工具,可以讓你在有效的管控你對事物的「癮頭」。

雖然利用Twitter上的朋友來當作支持你堅持在某件事物上的這種想法,就像是Twitter這個網站本身一樣的新穎,但是我已經聽過許多無數利用Twitter來達到目標的例子,如一位叫Laura Fitton的女性朋友就用Twitter來確保她每天都有做瑜珈,還有另一位Paul Carr和它成功戒酒的故事。

【評】

其實社交網站可以說是兩面刀,一面是讓你可以很輕易的和人群黏在一起,但是相對的也會從中讓你受到許多的傷害。網路是沒有距離的,只要簡單的一個Click,每個人都可以變成好朋友,但是,比起那些在真實世界由自己打造出來的人脈,這種虛假的關係能帶給自己多少益處?

以我個人在做微網誌相關的專題時,我就有發現一個現象,其實這類型的網站隱藏著一種「多數暴力」的哲學,只要是知名或是交友廣闊的微網誌客,都能有很高的回覆率(在『噗浪玩出大生意』這本書中有講到好友、粉絲數與回覆率之間的關係,但是我忘記這個確切數字,我記得不到10%),但是相對於一些比較不善於交友的使用者來說,沒有任何人的回覆比考試零分還讓人傷痛

但相反來說,如果我們能像這篇文章中的那些故事人物善用這股力量,真的就會有推波助瀾的效用。因為一個人出門不一定會帶菸帶酒,但是一定會帶錢包、鎖匙和「手機」,如果能夠再搭上最近很紅的App Market及行動上網的優惠方案,那這種社交網站就能帶動你戒癮的決心,哪怕是在你快撐不下去的時候,你朋友也會打手機來罵你,好讓你支持下去。

所以如果有各種奇奇怪怪癮頭的朋友們,不要去上什麼戒斷班,那些太浪費時間也浪費錢了,還不如現在就走向離你家最近的電信業者辦個行動上網及一支智慧型手機吧,XD。

(默…我應該要去行銷部門才行)

[JS] jquery.zoomImg.js 1.0

原本我一直不認為Javascript是一個很特別的Script Language,但是直到最近因為工作的因素所以逼不得以要去維護相關的Javascript的程式,結果沒想到Javascript竟然是如此的博大精深,甚至目前的Desktop application或是 Mobile application都開始使用Javascript來做開發。

直到最近剛結束的Coscup,我想效法一些朋友對自由軟體的態度來激勵自己,一來可以為這個世界盡一份心力,二來也可以訓練自己的能力,就當打怪練功吧:P

這個jquery.zoomImg.js 1.0是因為想要先寫好放著,等之後要做Blog的Image特效時使用的XD,不過既然有這個想法,那就打鐵趁熱,先把基本的功能刻出來,以後再做整理並加強功能吧。

這個plugin是在jquery-1.4.2.min.js的環境下開發的,不過我並沒有用到1.4才特有的一些寫法,所以應該在1.3也還能夠使用。jquery.zoomImg.js In Github

[閒聊] Just changed the appearance

It’s being a while for me to change the appearance of my blog. Because I like minimalism themes, I keep finding anything about this kind of skin. Not only because I can train my ability to modify CSS but like it. Finally, I got a satisfying one called ‘The Journalist template’ made by Lucian E. Marin just now.

Now, it’s time for me to tune my blog :P~ But I need to sleep first because it’s almost 3 am now … See you guys next time :]

[JS] jQuery.css() problem when using Firefox

最近在公司開發JS的程式的時候,很多時候都會利用到快速又方便的jQuery Library,而這次就很剛好的遇到了Bug,花了很多時間才解出來,以下為測試環境(FF 3.59 , 3.6 ):

假設我現在有一個DOM的元素,是一個img,當我設定其CSS為「display:none;」時,在FF上就會沒辦法利用
「jQuery.css(‘left’) or jQuery.css(‘top’)」來把這個值取出。就算你已經設定好left或是top的值,都只會抓到0px。

範例程式碼:
http://gist.github.com/518809.js?file=gistfile1.html

所以為了要解決在元素被hidden時不能取值的問題,就只能用比較髒的手段來抓到這個值,就是利用「visibility」。

什麼是visibility?它和display不同的地方在於說,display:none會直接不顯示這個元素並不佔用空間;而visibilty:hidden則是不顯示這個元素但是卻仍存在並佔用空間。

所以這個很Tricky的方法可以參考下面:
http://gist.github.com/518819.js?file=gistfile1.html

這樣就可以成功的取到left的值(top亦同)而不會影響UI的部分了,算是這次遇到最無言的Bug吧。

下次見囉。

δ 2011/01/20: 又開始繼續維護這個專案,其實對 FF 3.6.8 來說(不確定其他版本是否也會有相同問題),就算是最新版本的 jQuery 1.4.* 都無法從 display:none 的元素中利用 .css() 來取得特定的屬性值,因此我利用 jsfiddle 寫了一組完整測試,包含 display:none 及 visibility:hidden 元素的各種可能,請自己用你的瀏覽器來測試一下吧。

[News] Hitcon 2010 !!

小弟這次有幸能夠當Hitcon 2010的工作人員,因此就趁這次難得的機會去體驗一下駭客的文化,雖然這次不是第一次去了。

在這次的活動中,我和人帥真好的Crboy及人正真好的Python GirlーMosky一起負責場務組的B門,也就是Wargame的小門。不過一直守門也無聊,Crboy就提議我們以B的名字來報隊玩Wargame(因為BTeam這個名字被人帥真好的BlueT他們取走了,可能是和剛上映的ATeam有關吧)。

不玩還好,一玩三個人就上癮了,開始瘋狂的無所不用其及的想要破關,不過因為我們都是第一次下去玩Wargame,所以能解的題目有限,但是還是讓我們解到第11名,雖然有一題海棉寶寶的圖題是BlueT提供想法去觸發我們解題的,不過我們還是靠我們三個有限的大腦解出了幾題!!

(先偷偷的放個圖做個紀念一下,點我看Wargame名人堂


題目中最讓我印象深刻的就是ISBN的那題,給我們Barcode及鍵盤被打擊的機率要我們找出書名,那題真的是超適合我們這組的,因為我們先查出Barcode藏了「HINT is 158XXXXXXXP」(好像是這樣),然後我就和小畢去推那個鍵盤的機率,算出最有可能出現的數字及其個數大概是多少個,然後再請Mosky用Python快速的寫出程式來跑出所有可能的情況,之後發現是36組ISBN的值是最有可能的。最後我就負責寫一段PHP code來查速查出anobii上所有ISBN代表的書名。

結果,我們就成功的找出第七組還是第八組ISBN代表的是這本Ans
,沒錯,書名就是這個,也就是這題最後的答案!!真是超開心的呀,這題30分耶!

之所以讓我印象深刻是因為這一題完美的結合了我們三個人的能力,而且快速又漂亮地解出來,也是最代表B的一題呀!!如果下次還有機會的話一定要再組一次隊和大家再去玩一次Wargame!

Hitcon 2011,我們下次見:D

後記,剛好HIT2010的照片出來了,把B的照片連過來做個紀念:
B

B

[閒聊] Magic RoR

真的是很奇怪,雖然心裡有千百個不願意,但是每當想到要「架站」這個動作的時候,腦海第一個閃過去的東西不是PHP反而是RoR,每次一想到它的scaffold還有人性化的generator,就有種讓要用它的衝動。

原來Ijs當初的那番話…我還太淺了XD,還有很多東西要和她學呢。