作者: tim

習慣好用的Firefox, 在 MAC 下也是, 原來試著用 Safari, 再來用一下 Google Chrome, 都還是沒有 Firefox 的方便好用, 但是可惜在 MAC 下的 Firefox 預設並沒有支援兩指手勢(pinch)縮放畫面功能, 雖然仍有支援上下一頁的 swipe, 還有兩指的上下捲動, 但少了這一味還是可惜了一點.

查找了一下, 有個 plugin 可以提供這樣的功能:

https://addons.mozilla.org/zh-TW/firefox/addon/pinch-to-zoom-firefox-osx/

這樣一來就可以讓在 MAC 上的 Firefox 也支援 pinch to zoom 的功能了.

標籤 Firefox, Gesture, mac, Pinch, Zoom

好用軟體

CloudFlare已開始在免費計畫中支援Websockets!

文章作者作者: tim
文章發佈日期 2016-09-08
在〈CloudFlare已開始在免費計畫中支援Websockets!〉中尚無留言

CloudFlare (https://www.cloudflare.com/)自之前開始支援免費的 SSL 後, 現在又一新增功能, 免費的 Websockets, 大家都知道之前在使用 CloudFlare 時, 若要使用 Websockets 服務, 必須到 Enterprise tier 的 Plan 才有支援, 費用上可能很可觀, 不過現在開始, 已經支援了, 而且在所有 Plan 都提供了, 也就是即使是免費計畫也包含了.

大家的 nodejs project , 有使用 websockets 的, 都可以透過這個支援而使用 CloudFlare 了, 是不是太棒了.

來看看他的說明吧:
https://support.cloudflare.com/hc/en-us/articles/200169466-Can-I-use-CloudFlare-with-WebSockets-

標籤 cloudflare, free plan, websocket

數學

[數學]證明A(a), B(b)的中點座標是(a+b)/2

設 A點座標為 a, B點座標為 b, 則 A, B 的中點座標為 (a+b)/2, 證明之.

這是國中數學一維數線上的問題, 兩點的中點為兩點座標和除以2, 如何證明呢? 其實中點就是到兩點距離相等, 所以證明的方式也就是算出 A 到中點, 與 B 到中點的距離一樣就可以了. (距離算法為兩點座標相減取絕對值)

設 C點座標為 (a+b)/2, 則 AC距離為

abs((a+b)/2 – a) = abs((b-a)/2)

另外 BC距離為

abs((a+b)/2 – b) = abs((a-b)/2)

abs((b-a)/2) = abs((a-b)/2) 所以距離相等, 故 C點為 AB的中點, 得證.

標籤 mathematics

好用軟體

中文的假文產生器

文章作者作者: tim
文章發佈日期 2016-07-27
在〈中文的假文產生器〉中尚無留言

通常在製作網頁設計時, 會需要一些假內容來進行排版的驗測, 當然, 找一些新聞網站也就可以有這些內容的填充物, 今天發現一個還蠻好玩的網站可以提供這樣的功能, “亂數假文產生器 Chinese Lorem Ipsum “: http://www.richyli.com/tool/loremipsum/

上面可以自選需要多約多少字的文章, 目前提供了 100, 200, 300, 400, 500, 1000 這幾種字數供應用, 下面還有個 “純標題版” 供排標題使用: http://www.richyli.com/tool/loremipsum/title.asp

這個功能很實用也很方便, 可以在設計網頁排版時, 有些假資料可用, 而且又是無意義的文章, 較不會影響排版的驗測.

另外還有這些工具也能達到相同的效果:
http://neocqd.appspot.com/textgen/
http://more.handlino.com/

標籤 chinese, Lorem Ipsum, tools

Javascript

將瀏覽器進入全螢幕的方法(requestFullscreen)

有時在一些網站看到可以將特定的內容進行全螢幕的檢視, 早期僅有 video 可以有這樣的功能, 現在也可以透過瀏覽器擴充方法來進行特定內容的全螢幕檢視.

程式碼如下:

function launchFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}

function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

其中 launchFullscreen 傳入指定的容器物件, 如 div 就可以利用擴充方法 requestFullscreen 來進行全螢幕檢視, 而 exitFullscreen 則不用傳入物件, 使用 document 的擴充方法 exitFullscreen 即可離開全螢幕檢視.

範例:
http://sample.diary.tw/40/index.htm

參考資料:
http://xuhong.github.io/2014/05/23/fullscreen/
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/device/fullscreen-api/

[2020/09/02 17:41]

由於 requestFullscreen() 是只針對特定 element , 所以在轉換網址時, 會恢復沒有全螢幕的狀況, 若是希望能持續有全螢幕效果, 可以使用 iframe 方式進行, 可以參考範例: https://codepen.io/timhuang/pen/KKzXWKa