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 認證服務。

Continue reading “Laravel 搭配 Google, Facebook, Twitter 第三方 OAuth 認證”

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
Continue reading “Amazon 推出無限儲存空間方案 一年只要 60 美元”

用 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

Continue reading “用 Google PageSpeed Insights 計算 Desktop 或 Mobile 網站分數”

認識現今 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 團隊目前也正在朝這方向努力邁進。

Continue reading “認識現今 Google 搜尋引擎”

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

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

Continue reading “html5-boilerplate 打算不支援 IE8 瀏覽器”

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 時,都會使用底下寫法
Continue reading “Youtube IFrame API Unable to post message Issue”

西聯匯款 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 是否有錯誤。 Continue reading “測試 Web Responsive Design Tool”