Noob's Space

Linux,  備份

dd 指令教學：製作空檔案、備份硬碟的好工具

dd 是個在 Linux、macOS 系統上能使用的工具，由於它可以對檔案進行 byte-level 的操作，因此很適合用來備份映像檔或製作空檔案。

CSS 長度單位：px, em, rem, vw, vh 該怎麼用？

常見的 CSS 寬度，除了 px 和 % 以外，你其實還可以使用其他不同的單位來做寬度或高度。這篇文章會介紹常用的 CSS 單位，並告訴你通常這些單位該用在哪裡。

程式,  http,  Linux,  tmux

cht.sh：在指令介面就查到程式該怎麼寫

身為一個工程師，就是一天到晚在看不同的程式語言、不同的環境，偶爾這個專案用這個語言、那個專案用那個套件，常常會需要上網查該怎麼做才好。這次介紹的 cheatsheet，讓你可以不用離開 terminal 就查到想找的說明。

軟體

Movavi Video Converter 2022：直覺的影片轉檔軟體

Movavi Video Converter 支援 180 種影片格式，有 Windows 和 Mac 兩種版本，除了簡單的影片轉檔外，這軟體也支援外掛字幕到影片中，更支援 AI 無損放大功能！

程式,  JavaScript,  API,  開放資料

TDX：運輸資料流通服務，以 JS 串接公車等待時間為例

TDX運輸資料流通服務平臺，是交通部為落實智慧運輸政策而制定的資料整合服務平臺。平臺上可以取得「公共運輸整合資訊」，包含公車、火車、自行車等等資訊，也可以取得「即時路況與停車資訊」，例如高速公路路況、高速公路看板上的資訊、各縣市停車場剩餘車位數等等。TDX 平臺也提供了路段編碼、圖資定位等服務，例如輸入經緯度得到這個地點的路名、輸入地址取得經緯度服務等等，基本上所有跟交通有關的 API 服務都整合起來了。

軟體

Movavi Video Edtior Plus：直覺又不缺專業功能的影片編輯軟體

Movavi Video Editor Plus 是一款新的影片剪輯軟體，不管你只是想要單純的影片剪接、上字幕，還是加上影片特效、濾鏡、綠幕去背，都可以使用這款軟體來製作影片。

程式,  演算法

WebAuthn：網頁上使用指紋、安全金鑰來認證

現在安全性越來越講究了，很多網站都開放使用二步驟驗證，甚至可以使用實體的安全金鑰；而手機端許多也支援指紋認證，不需要一直輸入密碼就能安全登入。這篇文章會來討論這些東西大概是怎麼做的。

演算法,  密碼學

非對稱加密？到底是什麼鎖可以有兩把鑰匙，用簡單數學解釋給你聽

常聽到非對稱加密是用兩把鑰匙來做，但兩把鑰匙可以用一把來加密一把來解密，到底是什麼鎖可以做到這件事情？這篇文用簡單數學來告訴你這什麼邏輯。

IoT,  Raspberry Pi,  Python

讓 Raspberry Pi 不接螢幕也能用 Pygame 讀取搖桿的值

Pygame 是個 Python 套件，除了可以用來做遊戲以外，還可以用來讀取搖桿的值。但是在樹莓派上沒接螢幕卻無法使用這個套件，這篇文章會說明怎麼解決。

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 也可以裝很多套件，讓你的開發過程更便利。