Ethan's Box

安裝

加入 package repository 與 signing key

執行以下指令加入

1
2
3

wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb

安裝 SDK

1
2
3
4

sudo apt-get update; \
  sudo apt-get install -y apt-transport-https && \
  sudo apt-get update && \
  sudo apt-get install -y dotnet-sdk-6.0

安裝 runtime

ASP.NET Core Runtime 提供那些不包含 runtime 的 .NET 應用程式一個執行環境

如果有安裝 SDK 就不用安裝對應的 runtime

這次已安裝 SDK，不安裝 runtime，故不對安裝過程多做說明

檢查安裝成功

執行 dotnet --list-sdks 與 dotnet --list-runtimes 查看安裝版本

參考資料

• Install .NET on Ubuntu - .NET | Microsoft Docs
• Check installed .NET versions on Windows, Linux, and macOS - .NET | Microsoft Docs

起因

在製作文章或者溝通時，常常會有截圖需要，只知道可以透過 PrintScreen 的按鍵去擷取整個畫面，想要有擷取部份畫面的功能

解決方式

Gnome 內建就有指令，如果要方便使用，可以透過設定鍵盤快捷鍵的功能來啟動指令

1
2
3
4
5

# 在 Ubuntu 20.04 不起作用
gnome-screenshot -ac

# 將上述指令改為以下指令可以正常運作
sh -c "gnome-screenshot -acf /tmp/test && cat /tmp/test | xclip -i -selection clipboard -target image/png"

• a 代表區塊 (area) 擷取
• c 代表將擷取的圖片傳送到剪貼簿中

目前鍵盤快捷鍵設定與 garena 的截圖相同，使用 Ctrl + Alt + A 啟動指令

參考資料

• Ubuntu Shortcut for Partial Screenshot to Clipboard | by Destan Sarpkaya | Medium
• GNOME Screenshot can’t copy to clipboard in Ubuntu 18.04 - Ask Ubuntu

近日認識到 window.matchMedia 這個函式，方便在不同寬度下呼叫 callback，想到以往會使用 resize 事件來完成在特定寬度時觸發事件，想知道兩者在實際運用上有何不同

筆記

• resize 會在每次變更寬度時觸發，可能會造成效能問題。如果我們只想關注特定寬度事件，用 window.matchMedia 會是更好的選擇
• window.matchMedia 也可以不設定 eventListener 直接使用

參考資料

• Why you should use window.matchMedia when checking for window resizes in Javascript - Web dev etc - my software development blog
  • 幾乎說明了 resize 與 matchMedia 的差異，感覺我可以把他整篇文章翻譯就好XD
• css - What’s the most reliable way to integrate javascript with media queries? - Stack Overflow
  • 提到了使用 resize 要使用節流方案來避免防抖動，以前在使用 resize 時的確有遇到此情境

Todo

• 將敘述完整、讓看文章的人可以了解差異
• 加上程式範例
• 補上 matchMedia 可以使用的格式

起因

紀錄有關 Hexo 的操作方式，避免之後忘記。因為可能很久才會更新一次XD。

備忘

1. 新增文章，使用 hexo new "article title"，可以使用中文名稱，檔名也會是中文的

• 如果沒有全域安裝會有找不到 hexo 的狀況，可以加上 npx 執行

1. 初始化 Hexo 需要安裝全域的 hexo-cli，才可以使用例如 hexo new "article" 新增文章的指令，安裝腳本如下

   1	npm install -g hexo-cli

2. 目前的 Hexo 網站是以 Github + Travis CI 進行部屬

Hexo 透過 Asset Folders 設定添加圖檔

1. 開啟 _config.yml 檔案，找到 post_asset_folder 屬性，預設為 false，將屬性值改為 true 啟用 Asset Folders
2. 開啟設定後，透過 hexo new 的指令會自動建立一個與 post 名稱相同的資料夾，將圖檔擺放在其中就可以引用

• 如果是已經建立的 post 也可以透過建立同名的資料夾來使用圖片

1. 在 .md 檔案中透過 hexo 的特殊語法 {% asset_img %} 引用圖片

參考資料

• Asset Folders | Hexo
• Asset Folders | Hexo - Static Site Generator | Tutorial 9 - YouTube

在本地使用 hexo server 首頁出不來，訊息：WARN No layout: index.html?

• 原因是因為主題設定沒有設定好
• 此次是因為本地沒有拉取 next theme 的 repository，所以在執行時會找不到主題顯示，透過 git clone https://gitlab.com/hexo-theme-next/hexo-theme-next themes/next 取得相關的 code 以後便可正常顯示

Ubuntu 下安裝選擇透過 nvm 來安裝，可以提供多個 node 環境，方便開發環境不同進行切換。

安裝 nvm

參考 nvm github 網站 安裝方式

1. 使用 crul 或者 wget 取得安裝的 shell script，因為安裝的系統內建沒有 curl，選擇使用 wget 取得腳本並執行

   1	wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

2. 用 nvm -v 確定是否安裝完成，確認安裝完後便可以使用 nvm 了

安裝 nodejs

完成安裝 nvm 以後，只是安裝完了 node 環境的 管理器，實際上還沒安裝任何 node 環境，透過 nvm install <version> 的指令來安裝指定版本的 node 環境

1. 可以先使用 nvm list-remote 查看目前有哪些版本的 node 環境，目前我想要安裝的是最新版的 LTS 環境，是 v14.17.4

2. 透過 nvm 定義的 '--lts' 安裝最新版的 LTS node 環境

   1	nvm install '--lts'

3. 安裝完成後，透過 -v 可以查看當前安裝版本，確認是否安裝完成

   1

   node -v

參考資料

nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

安裝 Electron

1. npm 初始化

   1

   npm init

2. 安裝 Electron 做為開發工具

   1	npm install --save-dev electron

3. 加入 .gitignore，可以從 electron/.gitignore 上下載範本

參考資料

• Quick Start Guide | Electron

起因

想要藉由這個 Side Project 做技術練習，目前希望用 Tomato Timer 作為主題，練習像是 Electron, Chrome Extension, 以及 Windows APP 等應用是如何建立的，在更進一步想要用 Arduino 做一個實體控制的裝置，作為日常使用# 來做一個 Tomato Timer 吧 (使用 Electron)