Laravel 搭配 Google, Facebook, Twitter 第三方 OAuth 認證

laravel

Laravel 提供了 Socialite 套件讓開發者可以快速整合 Facebook, Twitter, Google, LinkedIn, GitHub and Bitbucket 等第三方服務的登入認證,我挑了大家最常使用的 Facebook, Twitter, Google 來整合,用 Google 跟 Twitter 需要注意一些小細節,首先是 Google 部分,如果大家去 Developer console 把 Oauth Callback 寫完,注意的是,這樣是不夠的,要去把 Contacts APIGoogle+ API 啟用,才可以真正使用 Google OAuth 認證服務。

[Read More]

Amazon 推出無限儲存空間方案 一年只要 60 美元

Wird 網站上看到這篇 Amazon’s New Unlimited Cloud Storage Is Absurdly Cheap,也就是說 Amazon 正式加入儲存空間競爭者,在儲存空間方案來說 Amazon 推出一年只要 $60 美金就可以無限制儲存任何檔案,這消息實在是太驚豔了,過去各大公司不曾有這樣的服務啊,像是 Google 每年 $120 美金只有 1 TB 儲存空間,Dropbox 一年 $100 也是只有 1 TB 封頂,而 iCloud 也是需要 $240 美金,從來都沒有人推過一年只要 $60 美金然後無限制空間啊,這真的是好殺啊,底下來看看 Amazon 推出的這兩個方案

Amazon Cloud Drive
[Read More]

用 Google PageSpeed Insights 計算 Desktop 或 Mobile 網站分數

new-google-logo-knockoff

相信工程師在調整網站效能一定會使用 Google PageSpeed Insights 來得到測試效能數據報表,但是這僅限於使用 Chrome 或 Firefox 瀏覽器。每次跑 PageSpeed 時候,Chrome 就會出現哀號,並且吃下許多記憶體。有沒有 command line 可以直接用 Google PageSpeed Insights 測試 Desktop 或 Mobile 的分數。Google 工程師 @addyosmani 寫了一套 PageSpeed Insights for Node - with reporting 稱作 PSI,可以直接透過 Node 來產生基本 report,這 report 真的算很基本,跟 Chrome 的 extension 跑起來的 report 是不一樣的。這工具可以用來紀錄每次 deploy 網站時的一些數據變化。底下附上 Google 網站報告

google_psi_report

[Read More]

認識現今 Google 搜尋引擎

感謝 @Ly Cheng 針對第三點補充

new-google-logo-knockoff

1995 年 JavaScript 第1版出現,到了 1998 年 Google 推出第一代搜尋引擎,當時的 Google 根本不用在乎網頁如何使用 CSS 或 JavaScript,而當時的網頁也顯少使用 JavaScript 及 CSS。轉眼間到現在 2014 年,如今現在的 Web,已經離不開 JavaScript 及 CSS 了,而目前 SPA (Single Page Application) 的流行,也造成 Google 搜尋引擎讀取資料的困擾,所以 Google 團隊目前也正在朝這方向努力邁進。

[Read More]

html5-boilerplate 打算不支援 IE8 瀏覽器

html5 boilerplate 是一套免費前端 Html5 模板,裡面支援 Normalize.cssjQuery (透過 Google CDN 或本地端讀取) 及 Modernizr,目前支援 IE 8 以上瀏覽器,但是最近看到官方正在討論是否該拿掉 IE 8 支援,原因是 Microsoft 今年宣佈 2014 年 4 月 8 日以後將不再支援 Windows XP,討論中也提到目前 IE 8 的市占率,其實還不小,雖然大部分使用者可能來自亞洲

[Read More]

Youtube IFrame API Unable to post message Issue

Solid_color_You_Tube_logo

YouTube IFrame Player API 提供了簡單的介面及方法,讓網站可以快速整合 Youtube 影片,但是不得不說 Google 針對 Youtube API 時常改版,所以就會常常碰道友時候可以動,有時後不可以動。Youtube 在 2011 公告開始支援 https protocol,所以現在很多網站存取 Youtube API 時,都會使用底下寫法


[Read More]

西聯匯款 Google Adsense 取款步驟

GoogleAdsense
如果有在用

Google Adsense 服務朋友們,相信在台灣的取款方式都是透過西聯匯款,以前支援西聯匯款服務的銀行還蠻多的,但是這次取款發現只剩下兩間銀行大眾銀行京城銀行,所以大家不要再跑去其他銀行了,取款之前請先到西聯匯款查詢家裡附近有哪些銀行可取款,出發前,你只要準備好底下資料即可。

* 收件人 first name 及 last name (您的英文名字) * 匯款人 first name 及 last name (Google Inc) * 匯款人城市及國家 US-United States 美國 * 匯款處理編號 (MTCN) Money Transfer Control Number (請由後台觀看) * 款項金額 * 身份證 以上是櫃台小姐會請你提供,另外也會詢問你這筆費用的作用是?就回答廣告費即可,最後會依照當天的匯率轉換成美金給你。步驟相當簡單,給需要的朋友們參考看看。

測試 Web Responsive Design Tool

responsive-website-design-tips

Web CSS Programer 在撰寫 Responsive CSS Style 時,手邊一定會有一堆 Device,來測試當畫面小於 480 px 或大於 768 px 時,呈現的版面是否有亂掉,公司也花費許多成本來測試,現在不需要這樣了,我們可以透過線上 Tool 或者是 Plugin 來測試 Responsive Web Page,首先來介紹

Viewport resizer,此工具用法很簡單,進入官網後,將官網 Javascript 連結加入到我的最愛或 bookmarks,之後打開您的測試網站,再點選該 bookmark,你會發現網站上面多了一條 tool bar,可以自訂或調整 view size,預設也給了平板手機等多種畫面調整,讓您測試 Media Queries 是否有錯誤。

[Read More]

Google App Engine 收費機制 Frontend Instance Hours

最近把一個簡易的 Web 丟到

Google App Engine 測試,但是發現每天都會因為 Frontend Instance Hours 不夠用,而造成網站被關閉 (Quota 爆漿),上網找一下解決方法,發現了這篇: Frontend Instance Hours 的問題,只要透過底下方式就可以暫時解決這問題,如果是網站流量很大的話,那可能要考慮開啟付費機制。

解決方式 先進入

App engine 後台,點選您的 Application 之後可以看到左邊選單 Application Settings,進入後找到 Max Idle Instances 還有 Min Pending Latency 這兩項設定,我們必須將 Max Idle Instances 設定為**1**,以及 Min Pending Latency 設定為 **15s**,但是 Max Idle Instances 預設是不給修改,而是跑 default value “Automatic”,這時候,我們必須把 **inbound_services** 設定為 warmup 才可以動態調整 **Max Idle Instances**。

設定 inbound_services 請打開網站根目錄底下的

app.yaml,在上面加入

inbound_services:
- warmup
之後將設定上傳後,回到剛剛

Application Settings 將兩個數值調整為上面描述的設定,這樣就可以不用被 Google 收費了,想省錢的朋友們,可以儘快設定。

Google Chrome 支援超過 40,000 Extensions! with Greasemonkey

看到 Google Chrome Blog 發表的Google Chrome 支援超過 40,000 Extensions!,當 Google Chrome 瀏覽器剛出來的時候,造成 Web Developer 一些震撼,因為 Chrome 強調的是擁有快速的 Javascript 引擎,以及快速的啟動,Fast start-up、Fast loading、Fast search,也因此讓很多設計網站的工程師必須把 Chrome 的支援性考慮進去,但是由於剛推出的瀏覽器,沒有任何外掛功能,我本身用 FireFox 瀏覽器很多年了,FireFox 的附加元件讓許多程式設計師投入開發,也製造出很多方便的附加元件來讓大家使用,例如:FireBugGmail ManagerGreasemonkey…,然而 FireFox 最方便的就是 Greasemonkey 此附加元件,使用者可以撰寫簡單 Javascript 語言來跟指定網站進行元件控制,現在 Google 工程師聽到我們的聲音了,Google Chrome 4 加入 Greasemonkey user scripts 功能,大家可以到 userscripts.org 下載超過 40,000 script 安裝到 Chrome 瀏覽器。您可以在 blogger 使用 emoticons,大家可以去參考看看。 由於 Chrome 支援了 Greasemonkey,所以趕快把 FireFox 所安裝的 script,也安裝到 Chrome,可是我發現之前 DarkKiller 大神寫的 Wretch Album Expander 已經不能用了,所以我將它實做到 Chrome,可以從這裡下載安裝:Wretch Album Expander for Google Chrome or FireFox,平時自己偶而會看看無名小站,所以也是方便自己觀看照片,此 script 也可以安裝在 FireFox 喔。這樣大家就不用再看圖片還要一張一張慢慢點,只要負責按換頁就可以了 ^^。 來測試看看,隨便找一本無名相簿:馬甲‧小葵 ,畫面:點我觀看