聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

六月 12, 2014

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» 用 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

此工具是透過 gpagespeed 完成,如果你有用 GruntJS 可以直接參考 grunt-pagespeed。使用 psi command line 非常簡單,透過底下指令就可以正確產生出上面報表

$ npm install -g psi
$ psi http://www.google.com

如果有用 GulpJS 可以寫成兩個 Task 來跑

var gulp = require('gulp');
var psi = require('psi');
var site = 'http://www.html5rocks.com';
var key = '';

// Please feel free to use the `nokey` option to try out PageSpeed
// Insights as part of your build process. For more frequent use,
// we recommend registering for your own API key. For more info:
// https://developers.google.com/speed/docs/insights/v1/getting_started

gulp.task('mobile', function (cb) {
  psi({
    // key: key
    nokey: 'true',
    url: site,
    strategy: 'mobile'
  }, cb);
});

gulp.task('desktop', function (cb) {
  psi({
    nokey: 'true',
    // key: key,
    url: site,
    strategy: 'desktop'
  }, cb);
});

上面程式碼來自 psi-gulp-sample,psi 有提供 callback function

function(err, data){
  console.log(data.score);
  console.log(data.responseCode);
  console.log(data.id );
}

上面的 Task 可以改成

gulp.task('desktop', function (cb) {
  psi({
    nokey: 'true',
    // key: key,
    url: site,
    strategy: 'desktop'
  }, function(err, data){
    console.log(data.score);
    console.log(data.responseCode);
    console.log(data.id );
    cb();
  });
});

用此工具來紀錄每次網站更新後的測試數據,對於調整 Web Performance 來說是一個可以參考的指標。如果 API 使用量很大,請記得申請 Google API Key。

五月 25, 2014

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

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

傳統的網頁,Google 根本不需要在乎 JavaScript 或 CSS,直接從 Http Response 拿到 Body 內的資料進行分析,然而 JavaScript 的盛行,已經改變了此作法,Google 再也不能從 Body 內準確的拿到資料,原因就是現今的網頁,都已經由 JavaScript 透過 AJAX 方式跟後端存取資料,這樣對於 Google 搜尋引擎是非常不好的結果。

Google 為了改善此問題,現階段也開始著手改善爬蟲,讓爬蟲可以正確執行 JavaScript,當然也要根據 Client 端是否有打開 JavaScript。由於現在大多數的網站已經漸漸變成 SPA 方式,看到如今盛行的 JavaScript Framework 像是 Backbone.jsAngularJS 等。Google Webmaster 也開始正視這問題。

為了能讓 Google 可以正確取得網頁資料,底下有些資訊可以提供給開發者,可以對 Google 爬蟲更友善

  • 請不要將 JavaScript 或 CSS 寫入 robots.txt,這樣只是讓 Google 無法正確拿到 JavaScript 檔案
  • 注意 Server 不要拒絕 crawl requests,也就是要有能力承受 crawl 讀取 XD
  • 讓網頁可以支援舊版瀏覽器或尚未實做 JavaScript 的搜尋引擎,一樣可以正確取得網頁內容
  • JavaScript 寫的太複雜,導致 Google crawl 無法正確執行
  • 使用 JavaScript 移除 content 遠大於新增 content,避免影響 Google 做 index

現在 Google Webmaster Tools 也著手進行後台開發,讓開發者可以正確看到 Google crawl 行為。

此篇文章參考 Understanding web pages betterIt took Google’s Web crawlers 15 years to come to terms with JavaScript

三月 28, 2014

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

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

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

討論列也有人提到,是否可以跟 [Google 一樣直接捨棄 IE8 及 IE9],可以看到

As previously announced, Internet Explorer 11 launched on October 17, 2013, and as a result, we’ve discontinued support for Internet Explorer 9.

Google 的做法相當棒

At Google, we’re committed to developing web applications that go beyond the limits of traditional software. Our engineering teams make use of new capabilities available in modern, up-to-date browsers. That’s why we made the decision last year to support only modern browsers, which also provide improved security and performance.

十一月 29, 2013

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» 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 時,都會使用底下寫法

<script>
      var tag = document.createElement('script');
      tag.src = "//www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>


也就是你的網站只支援 http:// 時,就會去讀取 http://www.youtube.com/iframe_api,但是透過 YT.Player 物件來產生多個 Youtube 影音時,就會出現底下錯誤訊息,導致 Javascript API 無法控制 Youtube 影片

Unable to post message to http://www.youtube.com Recipient has origin: https://www.youtube.com/

這問題在 Stackoverflow 被提出來多次,我自己針對 Youtube API 產生下面的解法,只要按照底下方式操作,就不會產生任何錯誤訊息了

1. load iframe api https://www.youtube.com/player_api
2. load iframe src path: https://www.youtube.com/embed/0GN2kpBoFs4?rel=0

如果有使用 YT.Player 動態產生 Youtube 元件,請務必檢查 src 的 protocol

setTimeout(function(){
    var url = $('#iframe_youtube').prop('src');
    if (url.match('^http://') {
        $('#iframe_youtube').prop('src', url.replace(/^http:\/\//i, 'https://'));
    }
}, 500);

如果確定都是透過 https:// 來跟 Youtube 溝通,那就不會產生 postMessage 無法收到的問題,這解法我也有更新在 Google 論壇上,另外原發問者也有將我提供的解法,轉到 Stackoverflow 解答區,大致上是這樣。

十一月 15, 2013

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» 西聯匯款 Google Adsense 取款步驟

GoogleAdsense

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

* 收件人 first name 及 last name (您的英文名字)
* 匯款人 first name 及 last name (Google Inc)
* 匯款人城市及國家 US-United States 美國
* 匯款處理編號 (MTCN) Money Transfer Control Number (請由後台觀看)
* 款項金額
* 身份證

以上是櫃台小姐會請你提供,另外也會詢問你這筆費用的作用是?就回答廣告費即可,最後會依照當天的匯率轉換成美金給你。步驟相當簡單,給需要的朋友們參考看看。

五月 3, 2013

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» 測試 Web Responsive Design Tool

responsive-website-design-tipsresponsive-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 是否有錯誤。

另外一套 Tool 比較強大,那就是 Google Extension: Responsive Inspector (beta) released!,不過就是限制在 Google Chrome 瀏覽器才可以安裝,此擴充工具,還可以直接對應到 CSS Media Queries 位置,以及將自訂大小畫面存成圖檔並且上傳到 Server。底下是介紹影片

三月 21, 2012

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» 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 收費了,想省錢的朋友們,可以儘快設定。

Related View

二月 17, 2011

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» PHP CodeIgniter Google URL Shortener API Library

CodeIgniter

原由

由於 bbs 的盛行,從最早的 0rz.tw 短網址出現,陸陸續續出來很多更好用的網址: tinyurl.com, bit.ly,後來 Google 也推出 goo.gl 服務,讓大家可以使用,提供了 Google URL Shortener API 讓程式開發者可以順利使用此 API,當然在使用 API 之前一定要跟 Google 申請一組 API Key,先到 Google API Console 申請,Shortener API 的規定每天可以存取 1,000,000 次(100萬),我想這樣也足夠個人或者是公司使用了,除非真的比這個大量,可以跟 Google 再提出額外申請。

系統需求

下載檔案

我已經將檔案都放在 github 上面,為了保持程式最新版本,請大家到底下連結進行下載

CodeIgniter-Google-URL-Shortener-API

系統文件

安裝

此安裝檔案共有三個:

  • application/config/google_url_api.php
  • application/controllers/google_url.php
  • application/libraries/Google_url_api.php

請將檔案放入到相對應的 application 目錄即可

設定

打開 application/config/google_url_api.php 檔案,將申請好的 API Key 填入即可

第一次執行

請在網址列打入 http://your_host/index.php/google_url/ 即可,如果有任何問題,可以在 Controller 部份將 debug mode 打開

$this->google_url_api->enable_debug(TRUE);

English Version

Requirements

Download

In order to keep the latest and greatest version of this library online, I’ve now migrated my code to github.

You can download the latest version of the library on the github project page:

CodeIgniter-Google-URL-Shortener-API

Documentation

Installation

The package comes with 3 main files:

  • application/config/google_url_api.php
  • application/controllers/google_url.php
  • application/libraries/Google_url_api.php

Move the files to their corresponding places within your codeigniter application directory

Configure

Open application/config/google_url_api.php file and enter your Google API Key. You can register you api key from Google API Console Register Page

First Run

Visit: http://your_host/google_url/ as you would a normal controller (using your correct URL of course).
If you’re having problems, then enable debugging in your controller code:

$this->google_url_api->enable_debug(TRUE);

Related View

二月 3, 2010

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» 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 喔。這樣大家就不用再看圖片還要一張一張慢慢點,只要負責按換頁就可以了 ^^。

來測試看看,隨便找一本無名相簿:馬甲‧小葵 ,畫面:點我觀看

Related View

一月 29, 2010

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» Google Chrome 推出 4.0 穩定版 & Mozilla 推出 FireFox 3.6

Mozilla 在上禮拜 (2010.01.22) 推出了 FireFox 3.6,大家可以下載測試效能如何,也可以 follow 狐耳摩莎的 Plurk 來收到 MozTW 的最新資訊,這篇重點不是在 FireFox,而是 Google 正式推出 Windows 版本 new Chrome 4.0 stable release,4.0 版本已經可以正式使用 Google Extensions,之前在3.0版本,只能安裝 Chrome Beta 版本才可以使用 extension,現在只要將 Windows Google Chrome 升級成 Stable 版本,就可以全面使用 Extensions,可以使用手動升級,或者是在下禮拜就會自動 update 到最新版本。

Google Chrome 4.0 (by appleboy46)

最後可以參考 ericsk 大大所寫的從開發者角度看 Chrome 4 的推出

Reference:
Extensibility + new HTML and JavaScript APIs for Google Chrome
More Resources for Developers

Related View

一月 17, 2010

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» How to install Google Web Toolkit with Eclipse

Google Web Toolkit (簡稱:GWT)是先以 Java 語言編寫 AJAX 應用程式網頁,然後在編譯成最佳化 Javascript,不但幫助了剛入門 Javascrit,然後又需要撰寫 AJAX 應用程式的工程師很大的幫助,不僅如此,Google App Engine 也提供了 Java 跟 Python 環境,整合了 GWT,讓您可以上傳到 GAE 的空間進行測試,GWT 目的是產生具有高效能性的 Web 應用程式,您不需要是 Javascript 專家也可以做到,GWT 用在 Google 相當多的服務,例如 Google Wave, 新版的 Google AdWords 可以參考這裡更多實際範例。它是開放姓原始碼(open source),完全免費,您也可以參與 GWT 的開發。

Google Plugin for Eclipse 支援 Google Web Toolkit 跟 Google App Engine 開發,我們可以直接安裝此 Plugin 就可以開始上手 GWT,當製作完成之後,就可以上傳到 GAE,直接打開提供的網址就可以看到成果了。

首先安裝 Google Plugin for Eclipse,先去下載 Eclipse 3.5 (Galileo) 最新版,打開 Eclipse

1. 選擇 Help -> Install New Software
Google Web Toolkit (by appleboy46)
2. 在 Work With: 填入 http://dl.google.com/eclipse/plugin/3.5
Google Web Toolkit (by appleboy46)
3. 將 Plugin 跟 SDKS 全部選取,接下來按下一步就可以完成

Related View

六月 6, 2009

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» [Gmail] 最近發布的功能:進階搜尋,預覽收件夾,郵件內容語言轉換

最近在 Gmail Lab 看到發布了許多新功能,都蠻好用的,加速搜尋郵件內容,收件者,寄件者,郵件內容語言轉換,匯入其他郵件的通訊名單…等,進階搜尋是這之前就開發好得功能,可以在 search operators 這篇裡面找到相關的用法,簡單來說底下有個例子:

  • to:me is:starred” 搜尋寄信給您所標記的郵件
  • is:chat from:heather” 搜尋與heather使用者對話的內容
  • is:starred -in:inbox” 搜尋所有信件夾內未標記郵件
  • from:elliot filename:pdf” 搜尋 elliot 寄來信件附件檔帶有 pdf 檔案

上面例子看了很複雜吧,因為你還要記的很多相關的語法,才可以正確搜尋到,所以 google 很貼心的設計了 Search Autocomplete,之前我有寫一篇:New in Labs:Gmail search autocomplete 快速找尋使用者 email 跟附件檔案,造福了使用 Gmail 的大眾。

預覽收件夾這功能可以參考:New in Labs: Inbox preview,這功能用在當開啟 gmail 網頁時,會有 loading 的畫面,那針對速度慢得使用者,可以預先看到新的郵件標題,而不需要整個載入之後才看的到,目前還沒有遇到這種狀況,不過大家可以試試看。

郵件內容語言轉換(New in Labs: Automatic message translation),這功能相當不錯,可以利用 google translate tool 進行轉換您所想要的語言,如下圖:
Gmail (by appleboy46)

蠻多好玩的功能,都可以去 Gmail Lab 去開起來喔,大家試試看吧

Related View

四月 5, 2009

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» New in Labs:Gmail search autocomplete 快速找尋使用者 email 跟附件檔案

Gmail 又推出一個 Lab 功能了,這個功能我想是大家所期待許久的,可以直接對於搜尋使用者跟附件有相當大的幫助,可以針對附件,郵件裡面的 vedio,圖片副檔名 .jpg、.png、.doc 下去做搜尋的動作,很方便的,也可以針對郵件的 email 或者是姓名搜尋,提供了 autocomplete 的作用,您只需要打入兩個關鍵字,就會出現相關的使用者姓名或者是 email 喔,方便的,可以參考:New in Labs: Gmail search made easier (and lazier)

使用方法只要去 Settings -> Labs 把功能打開即可
Google_01 (by appleboy46)

在 search 欄位輸入 at 兩個字,就會出現搜尋附件檔案的動作:
Google_02 (by appleboy46)
也可以輸入中文姓名,就會幫忙找到相關的部份了:
Google_03 (by appleboy46)

Related View

support:

一頁

A Django site.