分類
好用軟體

Tamper Data-好用的Firefox Debug工具

在 Firefox 中, 之前已經介紹過許多好用的工具(對開發及除錯應用), 像是

Firebug – https://diary.tw/archives/245, https://diary.tw/archives/485

Web Developer – https://diary.tw/archives/227

LiveHTTPHeaders – https://diary.tw/archives/565

Fiddler – https://diary.tw/archives/287

User Agent Switcher – https://diary.tw/archives/926

這裡要介紹的是除了可以觀察每個 http 連線狀況外, 還能修改傳送資料的功能, 這個 AddOn 稱之為 Tamper Data, 光看字面上就很清楚是一個改資料的 AddOn, 但是是在執行網頁訪問的狀況下可以用插入式的方式操作, 這對於在沒有開發工具下, 要快速地進行傳送資料的調整(header, postdata), 如此一來, 可以容易地進行除錯及測試驗證.

先安裝 tamper data 這個 Firefox 的 AddOn – https://addons.mozilla.org/en-us/firefox/addon/tamper-data/

接下來可以在 Tools (工具) 選單下出來一個 Tamper Data 選項, 點選出來後, 就會出現 Tamper Data 視窗, 接下來, 就可以正常訪問一般的網站, 例如 yahoo, 會看到畫面上有一堆 request 及 response time 的 list, 如下:

這樣對於訪問 yahoo 的結果可以一目暸然, 對任一筆資料按下右鍵, 選 [Graph All] 會出現一個有時間序的清單並圖象化, 如下:

如何對遠端web主機取出部分文字內容

這篇文章很單純的一個應用需求, 就是要取遠端文字檔內容, 但該文字檔內容是個 log file, 會隨時間愈來愈大, 如何能只取出部分最後的內容呢? 否則隨時間愈長, 每次取回來都會愈久, 而且其實需要的內容只有最後一部分, 也就是要像 tail 的功能.

若不在遠端主機上寫程式, 就得思考一下 http header 方式如何設定 request, 馬上想到一個續傳的應用, 也就是指定 Range header 的方式來對遠端的 web 主機下達只取出某個部分, 可以參考這裡對 Range header 的說明:

http://www.aslibra.com/blog/post/http_header_detail.php

若依這次的需求, 可以指定只要最後的 50k 的話, 可以利用 Range: bytes=-51200 若用 asp 程式實作可以這樣寫:

 

Set xmlhttp = Server.CreateObject("MSXML2.ServerXMLHTTP")
xmlhttp.Open "GET", "http://webserver/data.log", False
xmlhttp.setRequestHeader "Range", "bytes=-51200"
xmlhttp.Send
xmlData = xmlhttp.ResponseTEXT
Set xmlhttp = Nothing
Response.Write xmlData

這樣一樣可以不用在遠端的 web server 上實作程式, 又能快速地取出最後 50k 的資料內容, 實在非常方便, 又能節能減碳, 利用 Request Header 來解決, 真是快速啊!

分類
好用軟體

利用YQL對flickr單一相片取出對應網址

這個是繼之前 flickrset 取出整本相簿工具後的另一個小小的 flickr 應用.

一般利用 flickr 來當 blog 圖床應用很多, 不過常常看到圖, 但想要找出來在原來 flickr 的哪裡, 所屬哪個 user 或哪個相簿的查找不是很容易, 利用 YQL 的 flickr.photos.info 這個 table 可以查找出來 photo_id 對應的 url, 進而找出來圖片的來源, 及原來所屬的上傳者, 例如:

http://farm4.static.flickr.com/3542/35450735270_82b8e9945c_z.jpg

這張相片, 上面的 photo_id 為 35450735270, 帶入 YQL 利用這個查詢指令:

select urls from flickr.photos.info where photo_id=’3545073570′

後, 可以查出以下結果:

http://developer.yahoo.com/yql/console/#h=select%20urls%20from%20flickr.photos.info%20where%20photo_id%3D%273545073570%27

<span style="font-family: monospace;">
<?xml version="1.0" encoding="UTF-8"?>
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
    yahoo:count="1" yahoo:created="2011-03-07T13:55:56Z" yahoo:lang="en-US">
    <results>
        <photo>
            <urls>
                <url type="photopage">http://www.flickr.com/photos/okilyt/3545073570/</url>
            </urls>
        </photo>
    </results>
</query>
</span>

其中的 http://www.flickr.com/photos/okilyt/3545073570/ 就是原來的相片在 flickr 內的 url 了, 連回去看, 就能找出上傳者及對應相簿了, 方便大家使用.

已實作好的工具 url 在這裡: http://sample.diary.tw/flickrphoto/ , 只需要填入圖片連結, 無論是大圖小圖縮圖都可以, 程式自動會判定 photo_id, 並帶入 YQL 後查詢出來在 flickr 內的連結, 大家可以試看看.

[2011/10/6 15:00]已改為使用 flickr api 了, 因為 YQL 直接提供資料輸出, 請參考這篇: https://diary.tw/archives/1134

分類
好用軟體

產生任意大小的貓圖片

從這裡看來的: 產生任意大小的貓圖片…

有意思的這個網站: http://placekitten.com/ 提供了任意尺寸的貓圖片可供臨時要一些不同尺寸的圖片用來排版時, 方便隨時取用, 用來做網站排版的”佔位”.

例如:

http://placekitten.com/320/240

 

http://placekitten.com/g/352/288

看出來了嗎? 其中的 http://placekitten.com/寬/高, 而外多一個 g 的就是用灰階的方式呈現, 不過每一個 size 的圖片似乎不會改變, 也就是都是一個圖案, 雖然如此, 在不同的尺寸應用上還是很方便啦, 可以讓 developer 很容易地預覽一些網站上的初步設計使用.