標籤: browser

分類
好用軟體

好用瀏覽器Arc Browser

這個 Arc Browser (https://arc.net/)創辦人邀請早期在 Netscape 後來在 Mozilla Firefox (我最愛用與常用的瀏覽器), 之後又在 Google 開發 Chrome 長達16年之久的前 Google 員工: Darin Fisher 加入. (參見: https://tw.news.yahoo.com/news/arc-%E4%B8%8D%E5%8F%AA%E6%98%AF-chrome-%E7%9A%84%E6%9B%BF%E4%BB%A3%E5%93%81-%E5%89%8D-101040110.html) 要打造一個好用的瀏覽器.

乍看之下, 是將頁籤放到左側, 並且直排, 實際上用起來還可以將瀏覽器部分再直排成為 side by side 的方式來瀏覽, 這樣的使用者體驗還蠻新奇有趣的, 再加上大多數的網站都已 RWD化了, 窄的瀏覽器來瀏覽網站效果也很不錯, 尤其是在讀文章時.

另外有個實用的多工作空間的設計, 就像是在 Mac 上的多個 Desktop 一樣, 在左邊的頁籤列表上, 可以用右下角的 + 號增加多個 Space, 例如工作用, 寫作用, 閱讀用等, 方面使用場景的切換, 更重要的是對於需要多個 session 的用戶來說, 可以利用這個 work spacec分別指派對應的 profile (在space 按右鍵, [Space Options][Profile][New Profile…]) 建立, 達成有各自的 login credential, 例如我有兩個 dropbox 空間, 分別為個人用(default)與工作用(work), 利用不同的 profile 將可以擁有各自的 login credential, 不用像以往需要利用兩個瀏覽器才能達成.

再加上還有 Note (文字筆記), Easel(白板) 好用的筆記工具與塗鴨工具, 建立後也可以分享, 十分便利. 如:

是不是想用看看了呢? 目前是僅支援 MacOS, 可以先在官網填寫你的 email 來等待邀請通知. 或是已有 Arc Browser 的朋友提供推薦連結也可以快速取得哦, 每個使用者目前都有 5個朋友的推薦名額, 有需要的朋友也歡迎使用我的推薦連結, 並留下留言告知, 避免後面第六人起無法使用哦, 另外也歡迎留下你的推薦碼, 分享給有興趣的朋友們吧.

我的推薦連結: https://diary.tw/s/arcbrowser 輸入 Email 後即可取得邀請信, 並建立帳號登入的開通使用. (目前僅支援 MacOS)

PS. 上面的推薦已更新過三次了, 也就是實際已發出了 15個, 若拿到新的會再隨時更新上去, 若使用了覺得不錯的朋友, 也歡迎可以把您的推薦連結放在留言區, 供更多人來使用囉!

[2023/7/26 15:18]

之後已經不用透過推薦連結就可以下載了:

https://releases.arc.net/release/Arc-latest.dmg

[2024/5/11]

謝謝網友餘燼資訊，現在 Arc Browser 已經有 Windows 11版本可以下載囉.

https://releases.arc.net/windows/ArcInstaller.exe

 

 

分類
Javascript

hls.js 應用於html video tag播放 HLS功能的外掛

同事介紹的這組 hls.js (https://github.com/video-dev/hls.js/)是應用於 video tag 中的播放 HLS (http live streaming) 的外掛, 可以讓原本的 video tag 增加播放 HLS 功能.

相較於之前介紹的 clappr player (https://diary.tw/archives/1811), 這組 hls.js 是直接使用 video tag 來進行(其實 clappr player 是在 div 下自建 video tag, 只是 hls.js 更直接).

hls.js 可以直接讓 browser 的 video tag 播放 hls 內容, 包含了 vod 與 live streming, 也提供了 web demo lab, 方便大家自行測試開發:

https://hls-js.netlify.app/demo/

(之前的 clappr demo 在這裡: http://clappr.io/demo/)

若需要公開測試的 hls 來源, 可以參考:

相信對於開發實作 hls video player 應用, 能有很大的幫忙.

 

分類
系統技術

再談URL長度上限

先來看一下之前寫的:

由 browser 的上限來看是 2083, 而由 apache / iis 來看則是 8190 / 4096 兩個等級.

不過無論如何, 這個 url 上限的討論是個很熱門的問題:

https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers

除了 RFC / Browser / Web Server 外, 還多提出了 CDN (其中的 status code 414 (414 URI Too Long, https://tools.ietf.org/html/rfc7231#section-6.5.12) 就是在描述這個:

這個很重要, 因為 CDN 是轉遞內容的重要功能, 不過看起來長度也都放得很寬.

再來看個別瀏覽器利用測試的方式來查看長度:

Browser Address bar document.location or anchor tag
Chrome 32779 >64k
Android 2192 >64k
Firefox >64k >64k
Safari >64k >64k
IE11 2047 5120
Edge 16 2047 1024

也都有相當的長度.

不過由以上來看, 還是得保守地使用約在 2000 bytes 長度的 url 較為保險.

 

分類
Javascript

[Javascript]實作表單送出後的換頁提醒

一般在表單送出後, 若非本頁更新的方式, 而是走 AJAX 方式送出時, 需要一定處理時間等待 server 回應的作業, 若是使用者未能完成執行完成, 而進行更換頁面時, 造成之前表單送出異常或失敗, 此時可以考慮使用這個功能來防止使用者不小心重載(reload), 或是離開頁面. 另一個狀況則是目前表單還未送出時, 但已修改, 如部落格文章編輯時, 已進行修改但未送出, 也是可以使用這個功能來達成.

這個功能是對 window 綁定一個 beforeunload 的事件(其實也就是 addEventListener 或是使用 onbeforeunload 皆可), 不過實測因各家瀏覽器工作方式不同, 無法成功設定自定訊息, 只能由瀏覽器的預設訊息提醒, 在一般狀況使用下, 沒太大問題. 使用方式如下:

// 有引用 jQuery 的狀況下
// 註冊
$(window).bind('beforeunload',function(){
  return '您確定離開此頁面嗎？請記得存檔！';
});

// 解除
$(window).unbind('beforeunload');

其中的訊息請忽略, 因為實際上會出現的訊息與各瀏覽器有關, 但特別要注意的地方是若是已知可以 reload 或送出成功後, 記得要取消, 才不會因為真的成功後, 要重導頁面時, 又出現需要使用者確認的訊息.

以下為在 codepen 的範例:
https://codepen.io/timhuang/pen/YLgvXJ

測試方式為, 先點 bind 後, 成功綁定事件, 再點下方 codepen 連結離開, 此時會出現確認訊息, 來防止或確認離開, unbind 則是在 bind 之後, 再 unbind 就不會觸發這個 beforeunload 確認.

繼續閱讀:

 

分類
Javascript

[jQuery]檢查HTML元素是否秀在畫面上

一般在操作與檢查瀏覽器畫面上的元件, 是否可以看得到, 使用 css, display 等方法進行檢查, 不過實際上只是檢查是否能在瀏覽器上出現, 但因為瀏覽器只能出現目前可視的區域, 所以實際上元素是否有捲到可以出現的地方是無法透過原本的檢查方法進行檢查, 需要做一些運算.

這個 jQuery plugin: jquery-visible 就是用來檢查這樣的狀況:

https://github.com/customd/jquery-visible/

引用了這個 jQuery Plugin 後, 就能利用 visible() 方法來檢查是否目前的畫面是看得到這個元素. 另外也可以透過 ‘partial’ 參數來檢查是否部分可以看到, 範例程式如:

https://codepen.io/timhuang/pen/rdKbyY

利用 $(“#xxx”).visible() 檢查是否全部可見或是使用 $(“#xxx”).visible(‘partial’) 檢查是否部分可見, 十分方便好用.

分類
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

分類
好用軟體

Mobizen好用Android投影與手機操作管理

這個 APP 是用來將 Android 手機畫面投到 PC/Mac 上使用的一個應用程式, 而 PC/Mac 只需要瀏覽器就可以操作了, 十分方便, 而且無需 Root.

官方網站: https://www.mobizen.com/

若是使用三星手機請下載: https://play.google.com/store/apps/details?id=com.rsupport.mobizen.sec

若是其他手機請下載: https://play.google.com/store/apps/details?id=com.rsupport.mvagent

開啟 APP 後註冊登入完成後, PC/Mac 端透過流覽器登入後, 即可使用, 除了可以投影出來外, 還可以錄影, 白板(在手機畫面上), 螢幕擷圖等, 也可以管理照片, 通訊錄, 等好用功能.

若有需要將手機投影出來的應用場合, 可以用這個方便好用的工具.

繼續閱讀:
http://www.playpcesor.com/2015/11/mobizen-usb-android-pc-mac.html

[2016/1/5 11:45]
更新一下, 之前常在用的 AirDroid 也已經有[螢幕截圖]這個功能的同步畫面了, 因為之前用都是 Capture 目前的畫面, 現在則是可以同步秀畫面了, 功能上也就和這個 Mobizen 一樣了, 在手機上裝 App, 然後從瀏覽器來看手機的畫面, 只是 AirDroid 的功能更多更方便呢.

網站連結: http://web.airdroid.com/
手機APP: https://play.google.com/store/apps/details?id=com.sand.airdroid

分類
好用軟體

好快又升級的Firefox6

現在 Firefox 拼了命的升級, 奇怪耶, 又沒有多大的功能改善, 主版本號一直往上跳, 這不是個好現象吧. 雖然說這是一個持續在前進的軟體專案, 不過這樣跳躍式的版本號大躍進, 似乎是想證明我們很積極地在改善及進步.

今天的 Firefox 5 提出了要升級到 Firefox 6 的升級通知, 於是就順手升級上來, 不過又是有一些 plugin 不能用了, 看看有沒有它宣稱的速度變快.

分類
好用軟體

Firefox5來了

是的, Firefox 5 來了, 記得沒多久前才 Firefox 4, 而且也就才 4.0.1 而已, Firefox 5 已經於之前更新的 Firefox 4.0.1 上提出新的版本更新提示, 於是又再更新到 Firefox 5, 目前的版本是 5.0

不知道為什麼更新的這麼快, 而且這次更新的主要功能似乎不多, 或許是希望能藉由更新版本數字來活絡一下這個社群持續的求新求快求變的特質吧.

但是這次更新, 有一些 plugin (或稱 extension) 又不能用了, 像是 google 的 toolbar 就是個列子, 不過這些小問題應該很快會獲得解決.

隨著瀏覽器版本的更新, developer 們與 designer 也就必須快速地來適應這個相容性的考驗, 不過也正因為如此, 也讓標準能更標準, 大家能依循著標準來開發及設計, 這樣也是件好事!

分類
Javascript

表單上傳檔案取得檔名問題

在前端網頁上, 若要上傳檔案, 是利用一個 <input type=file>的標籤來進行的, 這個 UI 看起來的長像在不同瀏覽器會有不同的結果, 也因為這樣, WEB DESIGNER 常常需要做一些設計來美化及一致化這個長相.

這篇文章不是在討論這個上傳檔案的長相, 而是要探討在前端程式碼取出上傳檔案的名稱, 這個也在不同的瀏覽器有不同的結果, 尤其新的瀏覽器又增加了一些特異功能. (如隱藏路徑)

這樣一來, 若是要對上傳檔案名稱欄位取出做一些判斷的話, 可要注意這些狀況的差異, 這裡寫了個小程式, 取出 <input type=file>的值, 在不同瀏覽器下可以測出不同的結果, 連結在這裡:

http://sample.diary.tw/25

我們以上傳 C:\test\1.txt 為例, 在不同瀏覽器下的結果如下:

IE9:
Firefox 4.01
Google Chrome 5:
Safari 5:
從上面畫面的結果來看, 發現 IE9 及 Google Chrome 會有含路徑的檔名, 但會隱藏路徑, 而 Firefox 4.01及 Safari 5則只會出現檔名而已, 不會有路徑, 而 IE6, IE7, IE8 的狀況則是 IE8 會像 IE9 一樣, 但 IE7, IE6 則是真實的檔案路徑, 如下:

IE6:
IE7:
IE8:
這樣就清楚啦!