鐵人賽 - Noob's Space

鐵人賽

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

總算是順利把第二次鐵人賽寫完了，今年寫得一團亂，差點就棄賽了。

鐵人賽, Chrome OS, Chromebook

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

Chrome OS 中的 Linux 虛擬機其實是用 LXC 容器技術來處理的。你可以開啟多個 Container，但要怎麼讓每一個都和 Chrome OS 相容呢？

鐵人賽, Linux, Chromebook, Chrome OS

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

今天打開 Chromebook 要寫東西，按下終端機之後就卡住了。有時候是一直轉轉轉，關掉重開有時候會跑出「正在啟動 Linux 容器......」的畫面。這個時候該怎麼解呢？

鐵人賽, PWA, HTML5, App, SEO

Lighthouse 和 PageSpeed，檢測網站該看哪個指標？

昨天提到 Lighthouse 可以用來看 PWA，但是長期有在做 SEO 和網站設計的朋友應該比較熟 PageSpeed，究竟這兩個評分網站有什麼不一樣？該看哪個東西比較好呢？

鐵人賽, PWA, Chrome, Chromebook, Chrome OS, HTML5

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

到今天應該已經可以順利寫出一個 PWA 了。不過為了避免釋出後使用者無法安裝的窘境，可以用 Lighthouse 來檢查是否達到 PWA 的標準。

鐵人賽, PWA, Chrome, HTML5

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

PWA 既然要在各種裝置上使用，又要在沒有網路也能用，肯定是要經過各種環境測試的。不過你不需要拿出手機或一直切網路，不管你是用 Chromebook 還是桌上型電腦，只要你有 Google Chrome 就可以測試螢幕大小和網路速度。

鐵人賽, PWA, App

PWA：用 Manifest 定義 App 的名稱

PWA 所以可以用來加到電腦和手機的桌面，並打造接近原生的使用者體驗，靠的就是 Manifest.json。究竟 Manifest.json 裡面記載了什麼呢？

鐵人賽, PWA

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

PWA 的重點就是這個 Service Worker 了，可以做到離線還能使用，主要都是靠它在幫忙。這個 Service Worker 到底有什麼厲害的呢？

鐵人賽, PWA, Chromebook, Chrome OS

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

PWA 要在跨裝置上都能有好的體驗，除了該有的介面 RWD，讓不同裝置都不會跑版以外，還有什麼是需要注意的呢？

鐵人賽, PWA, Chromebook, HTML5, App

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

在 PWA 應用程式中，你能打造一款讓手機、Chromebook、電腦都可以操作的應用程式，這就像是在寫網站時設計 RWD 網站一樣。設計 PWA 有什麼鋩角呢？

鐵人賽, PWA, Chromebook, Chrome OS, App

為什麼你會需要 PWA 應用程式，原生不好嗎？

原生（Native）應用程式和 Web 應用程式已經要怎麼選，這個議題已經好幾年了。或許 Hybrid App（用 Web 打包的應用程式）是個好選擇，但怎麼都沒人在用呢？最近為什麼也沒人在討論 Chatbot 了？

鐵人賽, Chromebook, Chrome OS

在 Chromebook 上玩 Steam 遊戲吧

在 Chromebook 上寫東西寫累了，能不能在上面跑遊戲呢？今天就實測怎麼在 Chromebook 上執行 Steam 遊戲。

鐵人賽, Chromebook

Chromebook 為什麼可以無風扇又低耗電？

Chromebook 的規格百百種，有些是較低階的 Intel Celeron、ARM，往上則有 Intel M3 甚至 i7 系列的 CPI，但為什麼 Chromebook 規格不差，無風扇又不太會過熱？

鐵人賽, tmux

Tmux 的使用情境：遠端訓練 AI 不停機、邊寫程式邊除錯

前幾天講了 tmux 的用法和套件，但為什麼非得使用 tmux 不可，而不直接使用 terminal 來操作呢？今天講幾個 tmux 的使用情境。

鐵人賽, tmux, vim

3 個 tmux 常用的套件

像 Vim 一樣，tmux 也可以裝很多套件，讓你的開發過程更便利。

鐵人賽, tmux

tpm：tmux 套件管理員

tmux 是個管理終端機 session 的神器，你可以在 Terminal 裡面分割視窗、切換分頁，而且這些動作只要使用鍵盤，就算你的 Putty 本身不支援分頁也可以使用。

鐵人賽, git, GitHub

GitHub Codespaces：有瀏覽器就可以操作的 IDE

如果對 Vim 還是覺得很難上手，或是對 Command Line 指令還是有點畏懼的話，像 GitHub Codespaces 這樣的線上編輯器可能是你的好夥伴！

鐵人賽, git, GitHub

GitHub CLI：用指令就能開 issue、發 PR

用 Vim 在終端機裡寫程式，寫完了要推到 GitHub 上發 PR，丟給其他人審查。這個時候非得打開瀏覽器不可嗎？你可以考慮使用 GitHub CLI。

鐵人賽, vim

emmet.vim：快速打出 HTML 語法，也支援 JSX 語法

emmet 是個讓你快速打出 HTML 語法的小工具，它使用了類似 CSS Selector 的語法，讓你快速打出你要的 HTML 語法。emmet.vim 則幫 Vim 編輯器加上了這個功能。

鐵人賽, vim

Vim-gitgutter：快速查看本次 commit 新增了什麼

你曾注意過 VS Code 左邊的顏色標記嗎？如果你有啟用 Git 追蹤的話，其實你新增、刪除或編輯某一行，都會有對應的顏色標記。Vim-gitgutter 可以讓你的 Vim 也有這個功能。

鐵人賽, vim

Syntastic：在 Vim 中檢查 JS 語法錯誤

寫程式就是不斷的 debug，要是有一些顯而易見的語法錯誤可以直接被編輯器抓出來就好了。現在 VS Code 等編輯器都會先幫你抓出一些簡單的語法問題，Vim 也可以透過 Syntastic 達到這個效果。

鐵人賽, vim

vim-airline：幫 Vim 新增一條狀態列

VS Code 的下方有一條狀態列，可以看到目前到在哪個 branch、在第幾行編輯等等。Vim 也可以透過安裝 vim-airline 來達到類似的效果。

鐵人賽, vim

Vundle：管理 vim 套件的工具

Vundle 是個可以管理 Vim 套件的工具。只需要輸入套件的名字、儲存，Vundle 就會自動安裝，可以很方便的管理。

鐵人賽, Chrome OS, Chromebook, vim

用 Vim 在 Chromebook 上開始工作吧

帶著 Chromebook 到外面寫 Code 應該用什麼樣的工具？這篇文章告訴你為什麼 Vim 戰勝雲端編輯器和 VS Code 編輯器。

鐵人賽, Chromebook, Chrome OS

Chromebook 可以安裝其他作業系統嗎？

Chromebook 內建 Powerwash 功能，可以一鍵回覆到原廠設定；就算你不慎把系統搞爛了，也可以到 Google 官網下載重灌用的 USB 隨身碟製作工具。那我可以在 Chromebook 上安裝 Windows 或其他作業系統嗎？