分類檔案： 軟體

TEST

Modify .hcacess on Apache Server to allow CORS for specified domains

發表於 由

Motivation

I purchased a .tech domain recently, and made it a alias domain to hollen9.com.
However, some src request are blocked due to CORS policy.
Typical symptoms are blank images, failure to load external fonts, scripts, etc. You can verify it by checking your dev console on the browser by pressing Shift+Ctrl / Command+i.

Solution

Locate your .htacess file of your website, for analog it is a config file just like web.config on IIS.
Open it with a text editor, insert the following:

<IfModule mod_headers.c>
    # Allow loading of alias domain resources
    # You should modify the domains to suit your need.
    SetEnvIf Origin "http(s)?://(www\.)?(holllen.tech|hollen9.com)$" AccessControlAllowOrigin=$0
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header merge Vary Origin
</IfModule>

Force reload your previous page by pressing Ctrl+F5 or Command+Shift+R, and viola! Now all images are visible!

References

TEST

簡易 rclone 快速備份至 Google Drive

發表於 由 
> NPC 出現了！
> 公司上司：勇者，請你在完成的過程不要耽擱其他工作！
─────────────────────────────────
=  [ 1  本機或區域網路複製貼上  ]                                                           =
=    2  硬碟對拷                                                                                      =
=    3  逃走                                                                                             =
=    4  魅惑上司                                                                                      =
─────────────────────────────────
> 勇者選擇了 1，windows 可以用 fastcopy 但是勇者覺得太花時間，所以不考慮選項 1。
─────────────────────────────────
=                                                                                                          =
=  [ 2  硬碟對拷  ]                                                                                  =
=    3  逃走                                                                                            =
=    4  魅惑上司                                                                                     =
─────────────────────────────────
> 勇者選擇了 2，這應該是速度最快的，但是目標硬碟也要額外做備份避免故障。剩下選項 3，和新的不知名選項。
─────────────────────────────────
=                                                      5   rclone?????????                           =
=                                                                                                          =
=  [ 3  逃走  ]                                                                                        =
=    4  魅惑上司                                                                                     =
─────────────────────────────────
> 勇者很想選擇 3，但內心告訴勇者不能逃！總也不能選 4，所以只好選選看 5
> ..?
> ..???
> ...!!
> rclone 以迅雷不及掩耳之姿，主動出擊解決了所有麻煩。

對於如此 87 的開場白，我很抱歉，接下來保證不廢話。

rclone 一行指令，備份硬碟所有檔案到 Google Drive 或其他空間。
而且設置非常容易！以下我示範最為簡單的方法，利用內建 GUI 設置 Config，然後輸入指令開始備份。

設置 Config 連上雲端

下載好 rclone，cd 到同一個資料夾後，輸入以下指令到 cmd / bash / zsh 等 Terminal。

rclone rcd --rc-web-gui

powershell 需要輸入

"./rclone.exe" rcd --rc-web-gui

此舉將開啟本地 webserver，讓你有簡易的操作介面。
進入 Config，去 Google Developer Console 開啟 Google Drive Api 後設置 OAuth，將 ID 和 Key 複製到對應欄位，下一步下一步就設置完成。

點選 Explorer，點路徑輸入框會自己跳出你方才設置好的 Config Name。點選之後，就可以猶如 Google Drive 網頁版般瀏覽雲端硬碟。我們建立好想要備份的目的地資料夾，複製當前路徑，例如這樣的格式：
MyGoogleDrive01:/MyBackupFolder/Laptop01/2022

我們就可以回到 Terminal，輸入 Ctrl + C 或 Command + C 關閉 webserver。

輸入以下指令，他就會開始備份 C: 所有東西到 Google Drive 啦！
--progress 是為了回傳上傳進度，沒有這個 arg 的話，Terminal 就只會一片空白，完全無從得知備份進度。

rclone copy "C:/" "MyGoogleDrive01:/MyBackupFolder/Laptop01/2022" --progress

複製失敗的檔案會跳過，例如系統佔用的檔案。

TEST

台灣 Windows 使用者向 M1, M2… macOS 清單

發表於 由


本篇是我自己的筆記，會持續更新。
適合習慣 Windows 的台灣人，讓使用 macOS on Apple Silicon 更舒適。
所有付費軟體會標注，沒標注就是免費。

  • Freemium - 基本功能免費
  • Premium - 買斷付費
  • Subscription - 付費訂閱制

簡易快速上手

中文注音輸入法

按一下或長按 Ctrl+　 或 Command + 　 切換輸入法

  • Yahoo! 奇摩注音 Fork 版 - 雖然過時，但我用過小麥、威注音都很崩潰...... 最後就決定是他了。使用習慣完全和 Windows 別無二致，除了英文輸入大小寫相反還是有點困掃。
  • 小麥注音 - 使用穩定，不太容易當掉。明顯缺點是標點符號要按 ｀ 以選字方式（數字）輸入逗號句號等全形符號。
  • 威注音 - 小麥注音的分支，最大優點是標點符號輸入方式和 Windows 相同。其他不同之處可以參考: 威注音和小麥注音有什麼不同？-gitee/vChewing-macOS
    我自己是很喜歡威注音，但偶爾會當掉還是得切回小麥注音備用。

視窗、工具列、dock 管理

  • Tile - 類似 Windows 7+ 的邊緣自動 Snapping 機制
  • uBar (Premium) - 類似 Windows 10 的工作列，取代原本的 Dock，自訂性高
  • System Preferences > Mission Controls > Hot Zones
    滑鼠移到左下角開啟 Launcherpad（應用程式選擇），
    滑鼠移到右下角顯示桌面。

鍵盤文本操作

  • Home, End 按鍵重新分配 - 將 Home, End 按鍵行為變成和 Windows 類似的文本導向功能。在 Terminal 或 iterm 2 執行以下：

    mkdir -p $HOME/Library/KeyBindings
echo '{
/* Remap Home / End keys to be correct */
"\UF729" = "moveToBeginningOfLine:"; /* Home */
"\UF72B" = "moveToEndOfLine:"; /* End */
"$\UF729" = "moveToBeginningOfLineAndModifySelection:"; /* Shift + Home */
"$\UF72B" = "moveToEndOfLineAndModifySelection:"; /* Shift + End */
"^\UF729" = "moveToBeginningOfDocument:"; /* Ctrl + Home */
"^\UF72B" = "moveToEndOfDocument:"; /* Ctrl + End */
"$^\UF729" = "moveToBeginningOfDocumentAndModifySelection:"; /* Shift + Ctrl + Home */
"$^\UF72B" = "moveToEndOfDocumentAndModifySelection:"; /* Shift + Ctrl + End */
}' > $HOME/Library/KeyBindings/DefaultKeyBinding.dict

  • Copy Less 2 (Freemium) - 類似 Windows 10, 11 的剪貼簿記錄

滑鼠、触控板輔助

  • ThreeFinger - 啟用三指輕觸或點擊觸發滑鼠中鍵，以快速操作分頁關閉、開新分頁。
  • exelban/stats - 免費又開源的選單列 CPU, RAM, 電池狀態監控。

跨平台螢幕無縫切換（軟體KVM）

我三螢幕的主螢幕 144hz 使用 macOS，旁邊次要螢幕則是 Windows 11。

  • Barrier - 使用起來非常便利，剪貼簿記錄也會同步。缺點是設定介面 GUI 生硬，一開始可能會有點不懂怎麼用。

下載軟體

  • 百度雲HD - Apple Silicon 版好處就是能直接安裝 iOS 版，比較不用擔心中國軟體的勒索問題。
  • Electorrent - 跨平台 BT 遙控軟體，讓你無痛下載瀏覽器的磁鏈。

解壓縮軟體

  • Bandizip (Premium) - 支援多國語言編碼的韓國 zip 壓縮軟體，支援 7z 等多種格式。

Office

商城下載的 Office 都是 365 訂閱至，如果你有教育版帳號可以用。大學去看一下有沒有給 OneDrive / Outlook 使用權。
沒有的話，你需要的是 LTSC 版本，網路上搜尋你就會發現根本比 Windows 上還容易繞過（懂得就懂）。

網路硬碟

  • WebDAV - Finder 連線的方式是 Go > Connect To Server

多媒體影音

  • Spotify - AppStore 沒有，請上 Spotify 官網下載。

Terminal (CMD, Bash)

  • iTerm - 自己把 Terminal 改成黑色之前，先試試這個更好的 Terminal 軟體吧。

網頁瀏覽相關

  • Adguard (Freemium) - 阻擋廣告軟體，三不五時就在家庭版特價，可以關注 PTT 省錢版。

電子信箱

  • Microsoft Outlook - 我覺得比內建的好用，支援 POP3, IMAP 所以 Gmail. 公司信箱、學校信箱都不是問題。

賦能 iOS 裝置使用免費商城

  • AltServer
TEST

Introduce: LangBranch Shortcode

發表於 由

View Plugin Page On WordPress.org

What is LangBranch

It's a simple plugin enable you to use a shortcode like below to display correspond language version of content based on get_locale().

［langbranch aio en_US="English version" en_GB="en_US" zh_TW="中文版本" ja_JP="日本語バージョン"］

［langbranch en_US］
Content here will only be displayed if get_locale() returns "en_US".
［/langbranch］
［langbranch en_US zh_TW］
Content here will only be displayed if get_locale() returns "en_US" or "zh_TW".
［/langbranch］

Motivation

I've been using TranslatePress to provide multi locale experience for visiters.
However, I had been suffering from losting translated content once I update original language's content, until I decided to create a simple shortcode to solve this problem.

Usages

AIO (1-liner) Mode

［langbranch aio en_US="English version" en_GB="en_US" zh_TW="中文版本" ja_JP="日本語バージョン"］

By appending aio after langbranch main tag, you can setup one specific paragraph in several languages, and if you decide that some locale user to share the same language, you can just type the locale code you want to refer to directly in content. For example, you can make UK version the same as US version.

However, if LangBranch go too deep (chain over 5 stacks) it will fail.
Don't do this:

--1---||---2---||---3---||---4---||---5---||---6---> Oh no!
en_US -> en_GB -> en_AU -> en_HK -> zh_TW -> ja_JP

Seperate Mode

［langbranch en_US］
Content here will only be displayed if get_locale() returns "en_US".
［/langbranch］［langbranch en_US zh_TW］
Content here will only be displayed if get_locale() returns "en_US" or "zh_TW".
這裡的內容，只有當 get_locale() 回傳 "en_US" 或 "zh_TW" 才會顯示。
［/langbranch］

Very straight forward, isn't?
But when using several shortcodes, I would suggest you don't put a linebreak between ［/langbranch］ and ［langbranch］, in order to prevent unwanted linebreak <br> being rendered.

Optional step

All contents enclosed by ［langbranch］ will be rendered enclosed by <div class="langbranch"></div>
So if you are using auto machine translating like TranslatePress offers, you may want to exclude all selector .langbranch.

Recaps

This plugin is at its early stage of developing, so you may encounter some issues while using it.
For the worst case, it breaks your site up.
If that happen, don't be panic! Just go to your wp-content/plugins directory and delete langbranch and you shall be fine.

TEST

Vantage Theme Issue: Sticky Nav doesn’t work on mobile view

發表於 由

Solution


Just simply comment out && !isMobileDevice, and it will work like a charm!

Github solved issue: #1

However, to do this directly on a theme However, to do this directly on a theme could be changed in any future updates is probably not a good idea.

Instead, we copy that .js file to our child theme js directory.
Then, we have to dequeue the original .js by inserting the commands to your child theme's functions.php:

function vantage_child_enqueue_parent_style() {

    wp_dequeue_script('vantage-main');
    wp_enqueue_script('vantage-main', get_stylesheet_directory_uri() . '/js/vantage-hollen-main.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'vantage_child_enqueue_parent_style', 8 );

In this way, any future minor update pushed by Vantage Dev Team won't clear your modified code, as long as there won't be any structural changes, like ids's and/or classes' renaming.

Reflection

It took me almost two hours at late night debugging (3 AM), and it almost got me: I thought it was caused due to the lack of support of $(body) and scrollTop() on mobile device. Tried so many solution to no avail, then I decided to go to sleep.
and you know what, I solved it in 30 minutes after having a lunch at noon.