Forem: Kueiapp

MOS – A great macOS app allowing MacBook trackpad and mouse to independently set scroll directions

Kueiapp — Thu, 09 Oct 2025 03:59:04 +0000

If you often use a MacBook with an external mouse, you may have noticed that by default, macOS applies the same scroll direction setting to both the trackpad and the mouse. That means if you change the scroll direction on the trackpad, it also applies to the mouse, and vice versa. Sometimes, users prefer to have different scroll directions for each device—for example, natural scroll on the trackpad but traditional scroll on the mouse. Unfortunately, macOS does not provide an official way to configure this independently.

Original post: https://blog.kueiapp.com/en/os-en/mos-a-great-macos-app-allowing-macbook-trackpad-and-mouse-to-independently-set-scroll-directions/

sshuttle cannot transfer data via ssh to remote server in macOS

Kueiapp — Mon, 04 Aug 2025 07:51:16 +0000

What is sshuttle? sshuttle is a transparent proxy that forwards all your IP traffic over an SSH connection — like a VPN without needing root access on the server. It works by: Listening locally and routing selectively through a remote host; Redirecting IP traffic (not just browser traffic); Using firewall/NAT rules (like iptables on Linux or pf on macOS).

Tip

sshuttle relies on macOS’s pf firewall to insert NAT and redirection rules.
If pf is not already enabled and correctly initialized, sshuttle can fail silently or incompletely.

Read detail in original post: https://blog.kueiapp.com/en/infra/sshuttle-cannot-transfer-data-via-ssh-to-remote-server/

[HTML5] iOS Android 只顯示數字鍵盤的 input 輸入元件寫法

Kueiapp — Wed, 09 Jul 2025 02:24:07 +0000

在「[HTML5] 強制 input 只能輸入數字、指定type=number 與 pattern=[0–9]是不足的」的文章中我們針對 PC 實作了客制化的 sanitize 方法讓 input 輸入欄只能接收數字。而對於行動裝置我們也知道了只使用 HTML type="number” 是不夠的，需要再加上 inputmode="numeric", pattern="[0-9]*" 才能 100% 的讓所有 iOS, Android 裝置正確地顯示數字鍵盤，否則部份的手機裝置仍會顯示「字母+數字」的鍵盤並且會接受文字的輸入。

原文出處：[HTML5] iOS Android 只顯示數字鍵盤的 input 輸入元件寫法

TypeScript 定義型別時 file.d.ts 與 file.ts 的檔名有什麼差別？What’s the difference between file.d.ts and file.ts in TypeScript

Kueiapp — Wed, 09 Jul 2025 01:33:03 +0000

先下個結論，使用 file.ts 與 file.d.ts 來定義 type 或 interface 時的差別是，不使用 import export 的前提下 file.ts 預設 scope 為 local，file.d.ts 預設則為 global 。整個專案目錄裡可以不用 import MyType 就可以直接使用 MyType 這個型別，且 .d.ts 的檔案在編譯時不會被轉成 JavaScript 檔案。

原文出處：TypeScript 定義型別時 file.d.ts 與 file.ts 的檔名有什麼差別？What’s the difference between file.d.ts and file.ts in TypeScript

使用 Vue3 部份讀取檔案並繪至頁面上避免UI卡頓 partially loading data and rendering on page

Kueiapp — Wed, 09 Jul 2025 01:30:45 +0000

在做前端畫面時，常常會遇到資料量過多而造成卡頓，但問題其實不是資料量大而是渲染太多筆資料導致瀏覽器無法負荷。最常見的就是整個瀏覽器因此當機而必須重啟。

🧠 問題核心是什麼？
畫面卡頓問題: 其實不是因為「資料量太大」本身，而是「畫面上一次性渲染太多筆資料」

✅ 例如一次顯示超過 1000 筆, 造成 DOM tree 上有過多的 Nodes 佔據 main thread 所以瀏覽器沒有辦法負苛

原文出處：使用 Vue3 部份讀取檔案並繪至頁面上避免UI卡頓 partially loading data and rendering on page

Vue3 reactivity 的大地雷 – API 在背景偷偷送出新的資料

Kueiapp — Wed, 09 Jul 2025 01:01:30 +0000

在介紹 Vue 的文章「開始使用 VueJS – MVVM 架構」中我們說明了 Vue 如何使用 Virtual DOM 架構自動追蹤資料的變化並更新 UI 頁面。這個機制與概念在 Vue3 中以新的實作方法 JavaScript Proxy 做了出來並產生一個新的 Reactivity 追蹤機制 reactive 與 ref。使用起來非常方便但也有意想不到的大地雷，甚至有API偷傳送的問題。

原文出處：Vue3 reactivity 的大地雷 – API 在背景偷偷送出新的資料

Hammerspoon – 轉換映射 MacBook 鍵盤按鍵配置 Mapping MacBook JIS keyboard keys to another by Hammerspoon on macOS

Kueiapp — Tue, 10 Jun 2025 06:21:08 +0000

如果大家有購買其他鍵盤配置的 MacBook 例如日文 JIS 鍵盤，一定很困擾它的排列與台灣用的 US 鍵盤有超多不一樣的地方尤其是符號，自已摸索的解法可以幾乎完美轉換，再自已置鍵盤貼紙即可無痛使用。第一步更改 macOS 的輸入法，第二步是使用 Hammerspoon 轉換特殊按鍵。

文章出處：https://blog.kueiapp.com/programming-tw/mapping-macbook-jis-keyboard-keys-to-another-by-hammerspoon-on-macos/

Hammerspoon – 寫點小語法轉換 MacBook 滑鼠滾輪方向實作 MOS 讓觸控板與滑鼠可獨立設定捲動方向

Kueiapp — Tue, 10 Jun 2025 06:14:02 +0000

在「MOS – 讓MacBook觸控板與滑鼠可獨立設定捲動方向的超棒 macOS app」的文章中，我們介紹了一個小巧的 macOS app，讓外接滑鼠的滾動方向可以與 Trackpad 觸控板相反；我們更在「Hammerspoon – 轉換映射 MacBook 鍵盤按鍵配置」的文章中介紹如何寫個小 scripts 語法轉換映射鍵盤按鈕。這篇文章我們就來介紹不用 MOS，用 Hammerspoon 也可以達到改變外接滑鼠的滾動方向

原文出處：Hammerspoon – 寫點小語法轉換 MacBook 滑鼠滾輪方向實作 MOS 讓觸控板與滑鼠可獨立設定捲動方向

Vue3 defineExpose 如何使用及什麼情境下使用？How and when using Vue3 defineExpose

Kueiapp — Mon, 19 May 2025 01:51:24 +0000

在 Vue3 的開發中常有 View 依賴子元件 (Child Component) 的情境，例如母元件的 VIew 有某個參數改變後，子元件中的資料要重新讀取。一般而言會用 props 屬性直接轉入子元件即可，但若專案有用到 vuex 等 global states 管理外掛的話，或許就可以使用 defineExpose 將子元件中的函數公開讓上層父元件可以直接操作，父元件則用 ref() 參照來運作。

原文出處：Vue3 defineExpose 如何使用及什麼情境下使用？How and when using Vue3 defineExpose

VueJS MVVM 模型與 Pure HTML5 的比較

Kueiapp — Wed, 21 Aug 2024 02:02:11 +0000

原始文章：http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-模型與-Pure-HTML5-的比較/

Vue.js 與 Native HTML5 的不同點

現在有很多方法和框架可以建立網頁前端系統，例如 React、AngularJS、Vue.js 等等。使用原生的 HTML5 與 JavaScript 絕對可以建立一個系統，但通常使用一個好的框架可以在結構與安全性上以較好的設計模式來實現系統。

一個工具或架構被創造出來通常是因為開發人員在遇到了某些困難。舉例來說，jQuery 的發明目的是為了在支援不同標準的瀏覽器上使用 JavaScript ，而且它是第一個能夠使用 CSS 選擇器來控制 DOM (Document Object Modal) 的函式庫。而 HTML5 querySelector 則複製了這個很酷的功能讓 HTML可以更簡單地操作 DOM。

為何需要 VueJS

使用 Pure HTML5 JavaScript 存取 DOM 以從 HTML 樹抓取資料時，有許多工作需要完成，例如針對元素、新增監聽器以偵測使用者在 UI 上的互動，或在目標動作被擷取時回傳資料，其實很吃資源。



<html>
  <body>
    <h1>Checkbox with pure HTML5 syntax</h1>
    <label>
      <input type="checkbox" name="group1" value="check1" />
      checkbox 1
    </label>
    <label>
      <input type="checkbox" name="group1" value="check2" />
      checkbox 2
    </label>
  </body>
</html>
<script>
window.onload = ()=>{
  const group1: NodeListOf<HTMLInputElement> | undefined =
      document.querySelectorAll("input[name=group1]");
    if (!group1) return;
    group1.forEach((checkbox) => {
      checkbox.addEventListener("change", (e: Event) => {
        if (!e.target) return;
        const targetValue = (e.target as HTMLInputElement).value.toString();
        const checked = (e.target as HTMLInputElement).checked;
        if (!checked) {
          this.selected = this.selected.filter(
            (select) => select !== targetValue
          );
        } else {
          this.selected = [...this.selected, targetValue];
        }
      });
  });
});

相較於原生 HTML5 JavaScript (或 jQuery) 直接操作 DOM，Vue.js 有自己的 MVVM 模型可以在取得新資料模型的同時修改 DOM。換句話說，我們可以專注於資料結構而不是設計我們自己的模型來直接操作 DOM。

這兩種方式都適用於不同的情境，但 Vue.js 實際上提供了更簡單的路徑來建立網頁前端。

使用 Vue.js



<div>


      <label>

        check 1

        <input type="checkbox" v-model="checkboxList" value="1" />

      </label>

      <label>

        check 2

        <input type="checkbox" v-model="checkboxList" value="2" />

      </label>

</div>

export default Vue.extend({

  data: () => ({

    checkboxList: [],

  }),

});

範例

https://github.com/kueiapp/vue-typescript-tutorial/blob/main/src/App.vue

原始文章：http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-模型與-Pure-HTML5-的比較/

JavaScript - 的先鋒者們Netscape Nodejs

Kueiapp — Sun, 11 Aug 2024 08:29:42 +0000

Ref: http://blog.kueiapp.com/programming-tw/javascript-的先鋒者們-netscape-nodejs/

JavaScript 1.0

JavaScript 1.0 是由 Netscape 公司的 Brendan Eich 在 1995 年時為著名的瀏覽器 Netscape 所發明的。Java 是那個時代非常流行的語言，所以 Netscape 當時也想像它一樣酷因此將它命名為 JavaScript。然而，他們完全沒有關係。

微軟則在 1996 年發表了兩種可以在瀏覽器上執行的語言，VBScript 和 JScript。JScript 其實是 JavaScript 的複製品，用於 Internet Explorer 3。

為了制定 JavaScript 的標準，Netscape 於 1996 年向 ECMA International 提出第一個全球標準化架構，並於 1997 年完成第一個發佈版本（ES1)。他們稱之為 ECMAScript，也就是 JavaScript 的全球標準。從第一版至今的 2022 年，最流行的版本是 ECMAScript 2015（也稱為 ES6），有最多的瀏覽器支援。

不同版本的 JavaScript 會有不同的語法、功能、函式庫或模組系統。要檢查我們的環境是否可以執行它，caniuse.com 是一個非常好的網頁資訊網站。

ESMAScript（JavaScript）候選名單

5th edition: ES5
ES6 — ECMAScript 2015
ES7 — ECMAScript 2016
ES8 — ECMAScript 2017
ES9 — ECMAScript 2018
NodeJS

2008 年，Google 發表了 Chrome 瀏覽器，其 JavaScript 的 V8 渲染引擎為網路世界投下了一枚震撼彈。由於 V8 的「開放原始碼」特性讓 NodeJS 團隊修改了這個引擎，讓它可以輕鬆地處理 Web 應用程式並建立伺服器於後端應用。

JavaScript module

由於 NodeJS 的出現，JavaScript 的應用不只限於瀏覽器，伺服器端的服務提供者也可以使用 JavaScript。程式碼風格也不受限於網頁格式，許多 NodeJS 應用程式將模組程式設計的概念也帶進 JavaScript 世界。

有別於函式庫 Library，當談到模組 Module 時，它通常包含一個類別或一組函式，用來達到某個目的。此外，由於 JavaScript 世界是一個自由且開放的平台，因此 JavaScript 中的 Module 有多種樣式。

CommonJS
UMD — Universal Module Definition
AMD
Require.js
ES6 module

隨著時間的推移，使用 JavaScript Module 時可採用 import 和 require 兩種主流模式。

require

CommonJS 風格，是最早產生模組概念的寫作方式。

// a.js
const module = require('module');
module.hello()
// module.js
function hello(){ console.log('hello') }
module.exports = { hello }

import

在最新的 ES6 標準中，模組可以寫成 import 和 export，似乎看起來更容易理解。

// a.js
import module from "module"
module.hello()
// or
import { hello } from "module|
// module.js
export function hello(){ console.log('hello') }
// or
export { hello }

使用 NodeJS

NodeJS 是一個獨立的執行環境，安裝後我們就可以使用 node 指令在終端機執行 JavaScript 程式碼而無需瀏覽器。

從 nodejs.org 下載安裝
從套件管理系統安裝，例如 macOS 的 HomeBrew brew install node

node hello.js
// or omit the extension
node hello

Ref: http://blog.kueiapp.com/programming-tw/javascript-的先鋒者們-netscape-nodejs/

iOS18, iPadOS18, macOS15 developer beta 下載方法分享

Kueiapp — Mon, 17 Jun 2024 09:53:01 +0000

http://blog.kueiapp.com/os-zh/ios18-ipados18-macos15-%e4%b8%8b%e8%bc%89%e6%96%b9%e6%b3%95%e5%88%86%e4%ba%ab/

2024年 Apple 終於發表 AI 的相關應用，近期很多人詢問如何搶先下載 iOS/iPadOS 18, macOS 15 先睹為快，卻不知道為何自已的手機都沒出現 OS 18 的選項，主因是 WWDC 2024 發表會後只開放 "Developer Beta" 版本，預計秋季才有第一個 "Public Beta"。很多網站稱之為 beta 版是有些不精準的。以下是我們的快速安裝分享

前提

成為 Apple Developer。請至 Apple Developer Program 網站註冊登錄成為開發者 (免費)
註冊的帳號需和平常使用 Apple 裝置的 Apple ID 是同一個
成功之後就能在作業系統的 Setting App 中看得到 "iOS 18 Developer Beta"的選項

步驟

開啟設定App (Setting App)
選擇一般 (General)
選擇軟體更新 (Software Update)
選擇Beta Updates

1	2	3	4

Reference

http://blog.kueiapp.com/os-zh/ios18-ipados18-macos15-%e4%b8%8b%e8%bc%89%e6%96%b9%e6%b3%95%e5%88%86%e4%ba%ab/