Noob's Space - 所有的文章 - 共有 175 篇文章 搜尋時間 0.049 秒

二次鐵人完賽心得:明年想好再報

2020-10-06 14:46:30 by Noob's Space @ Noob's Space [引用來源]

總算是順利把第二次鐵人賽寫完了,今年寫得一團亂,差點就棄賽了。 今年其實沒有什麼想題目,中間有考慮過開放資料、前端撰寫、怎麼開架構、K8S 之類好幾個題目,但是怎麼想都想不到 30 天(大概都想到個位數個題目就想不下去了),但是因為今年是我找團,我還找了總共五個人,總不能最後團長說不報名?好吧,那就拿最近在用的 Chromebook 來寫文章好了。 但是,這題目有夠爛!不是 C...... [閱讀更多]

在 Chrome OS 中開啟並整合多個 Container

2020-10-05 18:01:15 by Noob's Space @ Noob's Space [引用來源]

Chrome OS 中的 Linux 虛擬機其實是用 LXC 容器技術來處理的。你可以開啟多個 Container,但要怎麼讓每一個都和 Chrome OS 相容呢? 昨天 有提到如何進到 Chrome OS 中的容器管理。用 Ctrl + Alt + T 打開 crosh 環境後,以 vmc start termina 指令,再使用 lxc list 就可以看到所有的容器。 ...... [閱讀更多]

Chrome OS 中的 Linux 環境壞掉怎麼辦?

2020-10-04 20:57:48 by Noob's Space @ Noob's Space [引用來源]

今天打開 Chromebook 要寫東西,按下終端機之後就卡住了。有時候是一直轉轉轉,關掉重開有時候會跑出「正在啟動 Linux 容器......」的畫面。這個時候該怎麼解呢? 先救出重要資料 Linux 終端機壞掉還是有方法可以進去的。按下 Ctrl + Alt + T,會用瀏覽器打開一個 Shell 畫面,但是這個不是我們熟悉的 Linux 環境,並沒辦法用你習慣的 ...... [閱讀更多]

Lighthouse 和 PageSpeed,檢測網站該看哪個指標?

2020-10-03 21:50:51 by Noob's Space @ Noob's Space [引用來源]

昨天提到 Lighthouse 可以用來看 PWA,但是長期有在做 SEO 和網站設計的朋友應該比較熟 PageSpeed,究竟這兩個評分網站有什麼不一樣?該看哪個東西比較好呢? 我們先將昨天拿來測試的網站也丟進 PageSpeed Insights 跑跑看結果。 結果長的就跟 Lighthouse 類似,一樣是有分數,下面有算出來的指標以及建議,你也可以捲到更下面查看已...... [閱讀更多]

透過 Lighthouse 檢查是否符合 PWA 標準

2020-10-02 22:43:58 by Noob's Space @ Noob's Space [引用來源]

到今天應該已經可以順利寫出一個 PWA 了。不過為了避免釋出後使用者無法安裝的窘境,可以用 Lighthouse 來檢查是否達到 PWA 的標準。 Lighthouse 是個開放原始碼的檢測工具,可以用來檢測效能、可用性、SEO、PWA 等指標。而且 Lighthouse 整合在 DevTools 中,不管是不是已發佈在公開的網域、IP 上,還是未發佈的測試網站,甚至是需要帳號密碼...... [閱讀更多]

PWA:用 DevTools 來檢查螢幕大小和網路速度

2020-10-01 22:42:36 by Noob's Space @ Noob's Space [引用來源]

PWA 既然要在各種裝置上使用,又要在沒有網路也能用,肯定是要經過各種環境測試的。不過你不需要拿出手機或一直切網路,不管你是用 Chromebook 還是桌上型電腦,只要你有 Google Chrome 就可以測試螢幕大小和網路速度。 DevTools 是 Chrome 的開發者工具,前天有提到它可以用來 檢查 Service Worker 的狀況,先前也提過它可以用來 檢查 AP...... [閱讀更多]

PWA:用 Manifest 定義 App 的名稱

2020-09-30 21:50:00 by Noob's Space @ Noob's Space [引用來源]

PWA 所以可以用來加到電腦和手機的桌面,並打造接近原生的使用者體驗,靠的就是 Manifest.json。究竟 Manifest.json 裡面記載了什麼呢? Manifest.json 記載了 App 的相關資訊,像是 App 名稱、描述、圖案、顏色、大小等。而且你只需要準備一個 json 檔,和相對應的圖示就可以了。 範例 Manifest 這邊取上一篇提到的範例,可...... [閱讀更多]

PWA:Service Worker 在網頁關掉之後還會繼續跑

2020-09-29 22:25:58 by Noob's Space @ Noob's Space [引用來源]

PWA 的重點就是這個 Service Worker 了,可以做到離線還能使用,主要都是靠它在幫忙。這個 Service Worker 到底有什麼厲害的呢? 雖然 Chrome OS 是個都在線上使用的作業系統,畢竟你上網站收 email、看影片都要有網路。不過雖然很少離線,但 Chrome OS 也不至於成為一塊廢鐵,還是有許多可以操作的 App,這個靠的就是 Android A...... [閱讀更多]

PWA 體驗設計:介面以外,看不到的還有更多

2020-09-28 00:08:06 by Noob's Space @ Noob's Space [引用來源]

PWA 要在跨裝置上都能有好的體驗,除了該有的介面 RWD,讓不同裝置都不會跑版以外,還有什麼是需要注意的呢? 昨天談到 PWA 的 P 代表 Progressive Enhancement,越強的裝置就要有越優質的體驗,除了不同介面以外更要有不同功能。例如,在電腦上可以有「Hover」的效果,在手機可是很難觸發這件事情;在電腦上可能只需要處理 click、mouseover 事件...... [閱讀更多]

PWA 介面設計:先認識 RWD 設計

2020-09-27 19:58:38 by Noob's Space @ Noob's Space [引用來源]

在 PWA 應用程式中,你能打造一款讓手機、Chromebook、電腦都可以操作的應用程式,這就像是在寫網站時設計 RWD 網站一樣。設計 PWA 有什麼鋩角呢? 鋩角(mê-kak),是指事物細小而緊要的部分,有秘訣的意思。 什麼是 RWD RWD(Responsive Web Design,響應式網頁設計),是一種網頁設計的方法,使得網站能在不同的裝置(包...... [閱讀更多]