[遊記] 紐約中央公園 Central Park

紐約中央公園當然是必玩景點,我們是在週末去的,週末的中央公園人山人海,除了遊客之外,也有很多紐約人攜家帶眷前來。中央公園位於曼哈頓島的中央地帶,幅員遼闊,因為人潮實在太多了,原本我計畫想去看的幾個電影景點,以及約翰藍儂的草苺園就不去了,改為搭三輪車逛中央公園。

在中央公園南邊的入口處常見遊客排隊等候三輪車和馬車。載我們的三輪車伕是個捷克的中年大叔,他在紐約賺的錢要供捷克的小孩讀大學。騎三輪車全靠人力,不僅要應付上坡路段,還不能騎太慢,因為多騎一趟就多賺一趟的錢,問他會不會辛苦,他說反正就當運動練身體。在曼哈頓大蘋果工作的外地人,都有著一段不為人知的故事。


這是中央公園的馬車





分類: ,

Google Web Font

Google的網頁字型,提供非常多樣且免費的字型,讓工程師使用。

步驟

例如,我想找一個素描的字型,只要輸入關鍵字"Sketch",我們可以從搜尋結果中挑選喜歡的字型,然後按下「Add to Collection」按鈕。

在網頁下方會多出Collection的區塊,按下最右邊的「Use」按鈕。

Google很貼心的預估使用這個字型時的網頁Page Load時間

網頁往下捲,將第三和第四步驟的程式碼貼到你的網頁上,就大功告成了。

範例程式 

在CSS檔中,匯入Google webfont的CSS檔,然後在要修改的樣式中,指定字型名稱(如第四行)

實例展示

切換上方Tab可檢視程式和結果








分類:

[Android] 使用Parse Push Notification推播服務

為何使用推播服務

會想要研究推播服務(Push Notification),是因為前陣子颱風天,大家都只關心放假的訊息,很多人沒注意到那天台北市不收垃圾,跑去等垃圾車(其中一個是馮光遠),如果可以把這個訊息主動發送給用戶,也許是個不錯的想法,於是我試著把推播服務加入到「台北倒垃圾」

推播服務可作為訊息通知的用途,將重要的訊息主動傳遞給用戶。善用推播服務可以讓你的應用加分,增加應用的使用率,可是濫發推播服務的話,對於用戶反而是一種騷擾,開發者應謹慎使用。

為何選擇Parse平台發送推播服務

Android或iOS都內建有推播服務,但需要整合Google Cloud Message (GCM) 和APNS,幫我們已經整合這兩個平台了,開發者只要使用Parse函式庫,就可以輕易在APP使用推播服務。而且Parse的免費版本,一個月可發送一百萬次的Push Notification。

基本設定

關於Parse Push Notification的設定,網路上有很多版本。我想是因為Parse SDK時常改版,最正確的版本,可以參照Parse官網上的步驟逐步設定:
https://www.parse.com/apps/quickstart#parse_push/android/native/existing

依照官網教學設定完成之後,基本的推播服務就已經可以使用了。

發送推播服務

在測試Parse推播服務之前,Android模擬器要事先安裝Google Apps(如何安裝可參考Genymotion安裝 Google Play的方法一文)。

測試裝置安裝有Parse推播服務的APP之後,回到Parse Dashboard,在「Installation」可以看到已安裝Push Notification Service的裝置,這裡的裝置數僅供參考,因為移除APP之後,這裡的數字不會減少。



要發送測試訊息,可以到「Push」按下「Send a Push」按鈕。

這裡可以選擇發送給所有用戶(Everyone),或是部分用戶(Segment),如果選擇只發送給部分用戶,可以下條件篩選特定對象。


推播訊息可以立即發送,或者設定在特定時間發送,也可以設定訊息的過期時間。

這裡可以撰寫要發送的訊息,訊息格式可以是純文字或 JSON,如果是JSON,格式可以自訂,不過開發者需自行從Custom ParsePushBroadcastReceiver定義接收的訊息,以及這些訊息後續如何應用在APP上。

最後預覽結果,按下「Send now」按鈕,推播訊息就會發送出去。

這是在手機收到的訊息。若覺得樣式不好看,都可以在程式中另行定義。

自訂ParsePushBroadcastReceiver

我們可以新增一個自訂的ParsePushBroadcastReceiver class,並複寫onReceive方法,自行修改在收到推播訊息後,要做哪些處理。

  • 第7~10行是從Push Notification傳回的JSON字串中取出我們需要的資料 
  • 第12~13行是定義點選點選Notification之後的行為,是要開啟MainActivity,並將訊息透過Extra傳遞過去 
  • 第24行是在重新定義Notification的樣式


然後在MainActivity取出extras裡的值
當然,別忘了要將CustomParseBroadcastReceiver註冊到AndroidManifest.xml

分類: ,

善用RawGit存取GitHub Raw File

GitHub不只可以用來做版本控管,事實上如果網站有檔案存取的需求 (例如JavaScript、CSS、JSON檔案),也可以從GitHub提供的Raw File來存取。不管檔案放在GitHub的Repository或者GIST都可以存取RAW File。

GitHub Repository

一個常使用的場景是,某些JavaScript函式庫沒有提供CDN存放位置,但有放在GitHub上,那麼我們的網頁若要引用這個函式庫,可以直接存取該專案放置在GitHub Repository的Raw File。

例如我們的網頁若要引用JQuery-QRCode這個函式庫,而這個函式庫有原始碼放在GitHub上。

從專案中找到需要的檔案Jquery.qrcode.min.js,按下右邊的「Raw」按鈕

瀏覽器會彈出另一個視窗,路徑為https://raw.githubusercontent.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js

如果直接將這個網址引用在我們的網頁中,會出現以下的錯誤:
Refused to execute script from ... because its MIME type (text/plain) is not executable, and strict MIME type checking is enabled.
這是因為該網址的MIME type純文字,要解決這個問題,只要將網址的網域名稱(raw.githubusercontent.com)改成rawgit.comcdn.rawgit.com。以下是兩個網域名稱的差異:
Source: http://rawgit.com

  • rawgit.com用於開發或測試環境,檔案更新(Push)後幾分鐘內會生效
  • cdn.rawgit.com用於正式環境,它走的是全球的CDN,沒有流量限制,可是檔案第一次存取之後就會被"永久Cache"

GIST

GIST是一般是用來紀錄程式碼片段,不過也可以拿來當作臨時檔案的Hosting之用(一般比較常放的是JSON檔)
將檔案上傳或直接貼上GIST,變更檔名之後,按下右邊的「Raw」按鈕

瀏覽器會彈出另一個視窗,路徑為https://gist.githubusercontent.com/ccjeng/ab7aaf1752f579c27aa4/raw/72115d144b327d182f64ad21466dae39aa170e3b/syntaxhighlighter_3.0.83.css

這個路徑直接引用在網頁上,一樣會遇到上述MIME Type的問題,要解決這個問題,只要將網址的網域名稱(gist.githubusercontent.com)改成rawgit.comcdn.rawgit.com。上面已經說明過這兩個網域名稱的差異,就不再重述了。

要提醒一下,Rawgit不是GitHub的服務,這個服務是由GitHub使用者Ryan Grove自發性提供的,因此不保證SLA,詳見FAQ

感謝您有耐心讀到文章最後,報個好康的給您,知名前端框架Polymer在GitHub上的專案,有一個資料夾專門用來存放許多前端的函式庫,如果要使用的函式庫沒有提供CDN,可以到那裡找,找到source檔之後,再依照前述的方式取得RawGit Link。



分類: ,

[自製工具] 短網址產生器 URL Shortener

因為最近常使用短址服務,就自己寫了一個工具,可以縮網址,並產生QR Code。
支援的短址服務包括:

  • Goo.gl
  • TinyURL
  • Bit.ly
  • is.gd
  • v.gd
產生的短網址還可以貼到剪貼簿(這是用Flash做的,所以不支援行動裝置版本)


連結:


分類:

[遊記] 紐約自由女神像 Statue of Liberty

自由女神像在自由島上,要登上自由島,必須到砲台公園(Battery Park)搭船

搭船之前要做安全檢查,安檢規格比照機場辦理,非常嚴格

砲台公園內有售票處,販售Statue Cruises的船票,從官網事先訂票會比較便宜。

往返砲台公園與自由島之間的渡輪Statue Cruises

自由女神像基座入口處,展示自由女神的火炬一比一模型


從自由島回看曼哈頓天際線


砲台公園

自由女神像

分類: ,

[遊記] 紐約中央車站 Grand Central Terminal

紐約中央車站是美國電影時常出現的場景,它是紐約市的交通樞紐,地鐵和火車共構,地位就類似於台北的台北車站一樣。



911之後才掛上的美國國旗

有百年歷史的大廳屋頂星空圖繪於1912年,所繪的天空是反向的,據說這是因為從上帝的視角去看。




四面鐘是車站內最顯著的地標,其盤面用貓眼石製作,價值約1千多萬美元

紐約中央車站 Grand Central Terminal
89 E 42nd St New York, NY 10017





分類: ,

負面思考的必要性

大家都在提倡正面思考,好像正面思考的好處多多,但我想提一個不同的觀點。

有一本書叫做《失控的正向思考》,整本書都在反駁正面思考的優點,書中兩個重要的觀點:
  • 人類與生俱來是負面思考的動物:在史前時代,前方草叢有動靜,如果是正面思考的原始人,會以為草叢裡藏了一隻兔子,二話不說就往草叢衝過去,那些人通常活不久,因為草叢裡面常常是獅子老虎之類的猛獸。負面思考的原始人會先觀察一下,如有異狀就先逃跑,只有這種人才能存活下來。

分類:

[教學] 如何啟用Google兩步驟驗證

常常有人的帳號被盜用,都是因為密碼被竊取的關係,現在駭客手法日新月異,不管你的密碼再怎麼複雜,或者時常更換密碼,都防不甚防。開啟兩步驟驗證(Two-factor authentication),才能有效防止帳號被盜用。

這裡以Google為例,說明如何啟用Google兩步驟驗證

啟動Google兩步驟驗證

首先到https://myaccount.google.com,進入「登入和安全性」

點選右方「兩步驟驗證」

點選「開始設定」按鈕



接著,Google會將驗證碼以簡訊方式傳送到你的手機



手機簡訊會收到六位數的驗證碼


輸入驗證碼後,按下「Verify」按鈕

勾選「Trust this computer」,信任這台電腦

最後按下「Confirm」按鈕,完成兩階段驗證的設定

再回到我的帳戶,此時顯示兩階段驗證已經啟用


Google Authenticator

Google預設以手機簡訊作為第二種驗證方式,可是簡訊有時會因為電信商的問題而延遲收到,因此建議安裝Google Authenticator這個手機APP。安裝之後,可以從Google網頁掃描QRCode來驗證Google Authenticator,並設定作為接收驗證碼的主要方式,如果日後需要輸入驗證碼,可以直接用手機上Google Authenticator隨機產生的驗證碼來登入。

首先,手機要先安裝Google Authenticator,可以到這裡下載:
安裝完畢後,從上圖我的帳戶,點選右方「兩階段驗證」,進入到以下畫面,點選下方「改用應用程式」按鈕

網頁上會出現QR Code

開啟手機上的Google Authenticator應用程式,從右上角的選單「設定帳戶」,可以進入這個畫面,點選「掃描條碼」,然後用手機掃描上個畫面的QR Code,就完成設定

當Facebook開啟兩步驟驗證之後,也可以使用Google Authenticator來產生Facebook的驗證碼。

啟用Google兩步驟驗證之後,手機和平板的驗證只需要設定一次,不必每次都驗證,除非換手機。電腦部分則是可以設定為信任這台電腦。驗證完成之後,不會每次登入都要求輸入驗證碼,操作行為幾乎沒有改變。以下分別是電腦瀏覽器和手機上輸入驗證碼的畫面。



備用碼

兩步驟驗證會綁定手機,為了防止萬一手機遺失,因此Google產生十組的救命備用碼。Google建議把這十組備用碼列印出來,以備不時之需。備用碼非常重要,請妥善保管,如果被別人拿到,他可以用這些備用碼登入你的帳號,而如果手機遺失,又沒有事先保存備用碼,那就永遠無法登入Google了。
事實上不只Google,包括Facebook、Yahoo、Twitter、Github等許多網站都支援兩步驟驗證,設定的程序非常類似,幾分鐘就可以設定完成。在帳號被盜用頻繁的時候,建議您花點時間啟用兩步驟驗證。






分類: ,

Copyright © Andy Cheng

Distributed By My Blogger Themes | Blogger Theme By NewBloggerThemes Up ↑