鐵人賽

A collection of 60 posts
二次鐵人完賽心得:明年想好再報
鐵人賽

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

總算是順利把第二次鐵人賽寫完了,今年寫得一團亂,差點就棄賽了。
5 min read
在 Chrome OS 中開啟並整合多個 Container
鐵人賽Chrome OSChromebook

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

Chrome OS 中的 Linux 虛擬機其實是用 LXC 容器技術來處理的。你可以開啟多個 Container,但要怎麼讓每一個都和 Chrome OS 相容呢?
2 min read
Chrome OS 中的 Linux 環境壞掉怎麼辦?
鐵人賽LinuxChromebookChrome OS

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

今天打開 Chromebook 要寫東西,按下終端機之後就卡住了。有時候是一直轉轉轉,關掉重開有時候會跑出「正在啟動 Linux 容器......」的畫面。這個時候該怎麼解呢?
3 min read
Lighthouse 和 PageSpeed,檢測網站該看哪個指標?
鐵人賽PWAHTML5AppSEO

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

昨天提到 Lighthouse 可以用來看 PWA,但是長期有在做 SEO 和網站設計的朋友應該比較熟 PageSpeed,究竟這兩個評分網站有什麼不一樣?該看哪個東西比較好呢?
5 min read
透過 Lighthouse 檢查是否符合 PWA 標準
鐵人賽PWAChromeChromebookChrome OSHTML5

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

到今天應該已經可以順利寫出一個 PWA 了。不過為了避免釋出後使用者無法安裝的窘境,可以用 Lighthouse 來檢查是否達到 PWA 的標準。
3 min read
PWA:用 DevTools 來檢查螢幕大小和網路速度
鐵人賽PWAChromeHTML5

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

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

PWA:用 Manifest 定義 App 的名稱

PWA 所以可以用來加到電腦和手機的桌面,並打造接近原生的使用者體驗,靠的就是 Manifest.json。究竟 Manifest.json 裡面記載了什麼呢?
2 min read
PWA:Service Worker 在網頁關掉之後還會繼續跑
鐵人賽PWA

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

PWA 的重點就是這個 Service Worker 了,可以做到離線還能使用,主要都是靠它在幫忙。這個 Service Worker 到底有什麼厲害的呢?
5 min read
PWA 體驗設計:介面以外,看不到的還有更多
鐵人賽PWAChromebookChrome OS

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

PWA 要在跨裝置上都能有好的體驗,除了該有的介面 RWD,讓不同裝置都不會跑版以外,還有什麼是需要注意的呢?
4 min read
PWA 介面設計:先認識 RWD 設計
鐵人賽PWAChromebookHTML5App

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

在 PWA 應用程式中,你能打造一款讓手機、Chromebook、電腦都可以操作的應用程式,這就像是在寫網站時設計 RWD 網站一樣。設計 PWA 有什麼鋩角呢?
6 min read
為什麼你會需要 PWA 應用程式,原生不好嗎?
鐵人賽PWAChromebookChrome OSApp

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

原生(Native)應用程式和 Web 應用程式已經要怎麼選,這個議題已經好幾年了。或許 Hybrid App(用 Web 打包的應用程式)是個好選擇,但怎麼都沒人在用呢?最近為什麼也沒人在討論 Chatbot 了?
4 min read
在 Chromebook 上玩 Steam 遊戲吧
鐵人賽ChromebookChrome OS

在 Chromebook 上玩 Steam 遊戲吧

在 Chromebook 上寫東西寫累了,能不能在上面跑遊戲呢?今天就實測怎麼在 Chromebook 上執行 Steam 遊戲。
3 min read
Chromebook 為什麼可以無風扇又低耗電?
鐵人賽Chromebook

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

Chromebook 的規格百百種,有些是較低階的 Intel Celeron、ARM,往上則有 Intel M3 甚至 i7 系列的 CPI,但為什麼 Chromebook 規格不差,無風扇又不太會過熱?
2 min read
Tmux 的使用情境:遠端訓練 AI 不停機、邊寫程式邊除錯
鐵人賽tmux

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

前幾天講了 tmux 的用法和套件,但為什麼非得使用 tmux 不可,而不直接使用 terminal 來操作呢?今天講幾個 tmux 的使用情境。
3 min read
3 個 tmux 常用的套件
鐵人賽tmuxvim

3 個 tmux 常用的套件

像 Vim 一樣,tmux 也可以裝很多套件,讓你的開發過程更便利。
2 min read
tpm:tmux 套件管理員
鐵人賽tmux

tpm:tmux 套件管理員

tmux 是個管理終端機 session 的神器,你可以在 Terminal 裡面分割視窗、切換分頁,而且這些動作只要使用鍵盤,就算你的 Putty 本身不支援分頁也可以使用。
2 min read
GitHub Codespaces:有瀏覽器就可以操作的 IDE
鐵人賽gitGitHub

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

如果對 Vim 還是覺得很難上手,或是對 Command Line 指令還是有點畏懼的話,像 GitHub Codespaces 這樣的線上編輯器可能是你的好夥伴!
3 min read
GitHub CLI:用指令就能開 issue、發 PR
鐵人賽gitGitHub

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

用 Vim 在終端機裡寫程式,寫完了要推到 GitHub 上發 PR,丟給其他人審查。這個時候非得打開瀏覽器不可嗎?你可以考慮使用 GitHub CLI。
3 min read
emmet.vim:快速打出 HTML 語法,也支援 JSX 語法
鐵人賽vim

emmet.vim:快速打出 HTML 語法,也支援 JSX 語法

emmet 是個讓你快速打出 HTML 語法的小工具,它使用了類似 CSS Selector 的語法,讓你快速打出你要的 HTML 語法。emmet.vim 則幫 Vim 編輯器加上了這個功能。
2 min read
Vim-gitgutter:快速查看本次 commit 新增了什麼
鐵人賽vim

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

你曾注意過 VS Code 左邊的顏色標記嗎?如果你有啟用 Git 追蹤的話,其實你新增、刪除或編輯某一行,都會有對應的顏色標記。Vim-gitgutter 可以讓你的 Vim 也有這個功能。
2 min read
Syntastic:在 Vim 中檢查 JS 語法錯誤
鐵人賽vim

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

寫程式就是不斷的 debug,要是有一些顯而易見的語法錯誤可以直接被編輯器抓出來就好了。現在 VS Code 等編輯器都會先幫你抓出一些簡單的語法問題,Vim 也可以透過 Syntastic 達到這個效果。
4 min read
vim-airline:幫 Vim 新增一條狀態列
鐵人賽vim

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

VS Code 的下方有一條狀態列,可以看到目前到在哪個 branch、在第幾行編輯等等。Vim 也可以透過安裝 vim-airline 來達到類似的效果。
2 min read
Vundle:管理 vim 套件的工具
鐵人賽vim

Vundle:管理 vim 套件的工具

Vundle 是個可以管理 Vim 套件的工具。只需要輸入套件的名字、儲存,Vundle 就會自動安裝,可以很方便的管理。
3 min read
用 Vim 在 Chromebook 上開始工作吧
鐵人賽Chrome OSChromebookvim

用 Vim 在 Chromebook 上開始工作吧

帶著 Chromebook 到外面寫 Code 應該用什麼樣的工具?這篇文章告訴你為什麼 Vim 戰勝雲端編輯器和 VS Code 編輯器。
4 min read
Chromebook 可以安裝其他作業系統嗎?
鐵人賽ChromebookChrome OS

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

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