分類
好用軟體

好用的HostAdmin插件-Firefox

在開發網站的過程中, 往往會需要快速地切換主機標題(即網址中的主機)對應開發環境或是測試環境的IP, 一般來說都是利用修改 %windir%/system32/drivers/etc/hosts 這個檔案內容, 並重新起動瀏覽器才能生效, 尤其像是在還未生效的 DNS 或是 SSL 等狀況下, 就顯得十分麻煩.

現在有個好用的工具 HostAdmin (link) for Firefox, 這個工具的工作原理一樣是修改 hosts 檔案, 不過在修改後, 會自動 refresh 本機 DNS, 瀏覽器也不用重新起動就馬上生效了, 而且是在狀態列就可以直接操作設定, 十分方便, 畫面如下:

可以在自行訪問的網域主機上去設定指向的 IP, 便可以快速地達到切換的目的, 而最上面的 Hosts Editor, 會叫出內建的編輯器, 直接修改 hosts 內容, 也十分方便. 多重 IP 選擇的原理就是利用 hosts 中的 # 號, 也就是註解符號, 以上圖為例, 就是在 hosts 有如下設置:

192.168.12.21 www.test.com
#192.168.12.31 www.test.com

當你訪問 www.test.com 時, 點一下右下角的 HostAdmin 插件功能, 就會出現上圖畫面, 方便你直接作切換.

另外有需要注意一點, 在 windows vista/7 時, hosts 檔案的權限修改時會失敗, 是因為權限有調整為管理員才能修改, 可以參考該插件的官方資料來調整該檔案的權限, 如下:

http://code.google.com/p/fire-hostadmin/wiki/GAIN_HOSTS_WRITE_PERM

建議的兩種方式都必須由本機管理員下達修改檔案權限的指令, 一為調整為 user group 有寫入權限, 指令如下:
cacls %windir%/system32/drivers/etc/hosts /E /G Users:W

一為調整為某單一USER帳號有寫入權限, 指令如下:
cacls %windir%/system32/drivers/etc/hosts /E /G “User Account Name”:W

記得都要以管理員來執行, 若不會操作, 簡單說明如下:

  1. 點下[開始] [所有程式] [附屬應用程式]
  2. 看到[命令提示字元] 對該項目按下右鍵, 選取[以系統管理員身份執行]
  3. 出現一個 console 畫面, 並有輸入提示符號, 鍵如上面兩個指令其中一項皆可, 記得第二項的 User Account Name 是指某單一 user 的帳號, 通常是目前自己這個帳號.
  4. 系統會回應已處理檔案 C:\Windows\system32\drivers\etc\hosts 這樣就成功了.

相信對於常在修改調整 hosts 的開發者朋友們會有很大的幫助!

該插件的官方網址: https://addons.mozilla.org/zh-tw/firefox/addon/hostadmin/

分類
好用軟體

產生任意大小的圖片-fakeimg

一般在做網頁時, 若一時需要一個區塊的圖片, 指定大小, 來做出一個 mockup, 可以利用之前介紹的產生任意大小的貓圖片 (link) 外, 還有剛從朋友網站 (link) 看來的 fackimg: http://fakeimg.pl/

用法還蠻單純的, 官方網站上有幾個 sample 如下:

<img src="http://fakeimg.pl/300/">
<img src="http://fakeimg.pl/250x100/">
<img src="http://fakeimg.pl/250x100/ff0000/">
<img src="http://fakeimg.pl/350x200/ff0000/000">
<img src="http://fakeimg.pl/350x200/?text=Hello">
<img src="http://fakeimg.pl/350x200/?text=World&font=lobster">

就會有以下功能的圖片:

真的還蠻方便好用的呢!

 

[2016/6/14 12:12]

這個也十分好用, 可以參考看看: http://lorempixel.com/
內容可以指定尺寸外, 還有各式分類, 可以有更具像的圖片效果.

 

[2022/5/5 8:44]

Lorem Picsum 排版假圖產生器, 可以產生隨機、指定、灰階、模糊等指定尺寸的圖片, 並且有 API可供應用, 也請參考看看:

https://picsum.photos/

如: https://picsum.photos/300/200 (此為隨機)

指定圖片, 如: https://picsum.photos/id/237/300/200

 

 

分類
好用軟體

Youtube下載影片插件-Firefox

這個工具是Firefox 的插件, 可以方便地下載 youtube 上的影片, 而且會列出所有可供下載的解析度及格式, 插件名稱為 Easy YouTube Downloader

英文安裝下載頁: https://addons.mozilla.org/en-us/firefox/addon/easy-youtube-video-downl-10137/
中文安裝下載頁: https://addons.mozilla.org/zh-tw/firefox/addon/easy-youtube-video-downl-10137/

安裝好之後, 在瀏覽 youtube 的影片時, 會在下方多出現一個下載, 點擊後會出現所有可用的下載點, 以這頁為例: http://www.youtube.com/watch?v=tub3x22YNbk

下方下載點擷圖如下:
就有純音樂的 M4A, AAC, MP3-128k, MP3-64k, 影片的 MP4 1080p, 720p, 360p, FLV的 480p, 360p, 240p 還有一個預覽圖及說明連結, 點擊後即可下載影片, 方便使用, 真是一個好用工具啊!

分類
好用軟體

線上製作HTML5動畫-iAnimator

之前介紹過這個類似功能的網站: Mugeda (參考之前文章: https://diary.tw/archives/1170 ), 今天發現又有一個這樣功能的網站: http://ianimator.kundy.net/ , 一樣是透過線上製作的方式來進行操作, 把動畫製作出來.

試用了一下, 發現 Firefox 不太支援, 換用 Google Chrome 後就正常許多, 不知是否是還未完整.

繼續閱讀: http://www.qianduan.net/ianimator-css3-animation-tool.html

分類
好用軟體

Gmail線上輸入法

這個是 Gmail 的新功能, 可以在寫信時”線上輸入”多國語言, 簡單地說, 就是把輸入法建在 web 介面上, 直接做輸入工具, 方便在沒有對應語言輸入工具的環境下, 可以輸入對應的語言.

如何啟用呢? 登入 Gmail 後, 從[設定](就是右上的齒輸符號), [設定], [一般設定], 最上面的[語言], 後面有個”顯示所有語言選項”, 然後將”啟用輸入工具”打勾, 再自行選取要使用的工具即可, 記得要儲存設定, 再來到撰寫信件時, 會看到右上的齒輸旁邊出現了輸入法的功能區, 如下:

接下來就是使用它囉, 更詳細的介面可以參考官方網頁: http://gmailblog.blogspot.tw/2012/10/communicate-more-easily-across.html

真的還蠻有意思的, Google 在 Gmail 裡很貼心的設定了這個功能, 在沒有安裝輸入法的狀況下, 使用線上輸入法, 還真的很方便!

分類
好用軟體

Google的Page Speed網站效能調校建議

網站上線後, 需要做效能調校評估及建議, 可以使用這個 Google 的 Page Speed 效能調校建議工具:

https://developers.google.com/pagespeed/

將網址輸入後, 等待一會兒就會有資料出來, 以及許多建議讓您了解網頁效能的瓶頸所在及如何調整會更好.

測試結果如下:
分為紅色的 High priority, 黃色的 Medium priority, 藍色的 Low priority, 另外還會有灰色的 Experimental rules, 這些讓你來進行網頁的優化調整. 當然你已經做到的他是用綠色的 Already done! 來顯示.

這樣的工具其實還不少, 像是這個 Pingdom Tools 有相當視覺化的呈現方式, 把頁面上每個元素的下載狀況都秀出來, 方便找出頁面上的效能問題, 和 Google Page Speed 來比的話, 前者是細部下載狀況, 找出效能瓶頸, 而後者是全面性的, 給出調整建議, 交叉使用可以更容易地將網頁效能調整好.

繼續閱讀:
http://www.smashingapps.com/2012/02/14/15-excellent-tools-for-profiling-your-websites-speed.html

分類
好用軟體

TCPView工具新增功能查詢流量

新版 Windows SystInternal 工具 TCPView (3.05) , 除了原來的 process 對應的 connection status 外, 右側多增加了 4個欄位的資訊, Sent Packets, Sent Bytes, Rcvd Packets, Rcvd Bytes.

畫面如下:

如此一來, 對於在查詢 prcoess / connection / 流量上, 就有更完整的資訊可以取得了.

官方網址: http://technet.microsoft.com/en-us/sysinternals/bb897437
官方下載: http://download.sysinternals.com/Files/TCPView.zip

分類
好用軟體

PowerPoint Viewer

power point 是很常用的一個簡報檔案格式, 雖然說大部份的電腦都可能有安裝 office 軟體可以用來編輯和播放 power point 檔案, 但若是臨時需要播放, 而電腦又沒有安裝 power point 時, 這個 power pointer viewer 就可以幫上忙了, 而且完成免費.

官方下載網址: http://www.microsoft.com/downloads/zh-tw/details.aspx?familyid=cb9bf144-1076-4615-9951-294eeb832823&displaylang=zh-tw

可以播放目前最新的 power point 檔, 也有對應的播放特效功能.

若不想安裝, 可以連線上網的狀況下, 也可以使用微軟的線上文件服務來進行播放:
https://skydrive.live.com/

或是 google 的線上文件播放: https://docs.google.com/

不過都是需要先上傳到這些文件服務上才能進行播放!

分類
好用軟體

線上製作html5動畫-Mugeda

隨著 html5 的發展, 這個可以在線上製作 html5 的動畫工具, 可以讓大家在製作簡單動畫上有更容易的方式, 網址: https://www.mugeda.com/

這個 Mugeda 網站, 利用線上編輯的方式, 讓大家可以直接製作動畫, 並且可以直接嵌入網站(使用方式為 iframe), 而編輯介面也是像 flash 等軟體一樣, 利用影格編輯的方式來操作:

這裡有在 mugeda 製作的熱門動畫, 可以參考看看: https://www.mugeda.com/popular

繼續閱讀:
http://briian.com/?p=7915

分類
好用軟體

蠻方便的Print Friendly

從狂人那裡看來的: http://briian.com/?p=6278

這個 Print Friendly 網頁工具, 利用 bookmarklet 的方式, 分析網頁結構後, 讓原本列印網頁, 會將許多不必要的區域, 像是廣告或是與文章內容無關的地方刪去, 節省列印的耗材及增進容易閱讀的功能, 這真是個方便好用的網頁服務.

網址在: http://www.printfriendly.com/

可以直接將它提供的 bookmarklet 拖拉到書籤, 在瀏覽網頁時, 點擊即可產生整理好要列印的版本, 或是在上面的網頁上貼上想列印的網頁的網址也可以. (前者更為方便好用)

大部分的新聞網站其實都有提供列印按鈕, 少數的沒有, 即使沒有也沒關係, 只要有這個 PrintFriendly 的 bookmarklet 也可以很容易地達到這個功能.

另外它也提供給網站發佈者一個 widget 的功能, 可以自訂列印網頁的按鈕, 方便給網頁發佈者放在網站上, 給來訪的訪客列印之用, 真的還蠻不錯的呢. (從這裡進入: http://www.printfriendly.com/button )

另外也有轉出 pdf 及 email 的功能, 真是好用!