程式設計 Vue3中props定義的2種寫法 – 可延用Vue2定義
Vue3中，定義元件 (component) 的 props 時，為了讓已用習慣 Vue2 的開發者及專案移轉順利，Vue3保留了兩種寫法：Vue2寫法與Vue3寫法。為了一致性，建議全部統一成 Vue3 寫法較為一致。Vue2 Optio......
程式設計
程式設計 程式設計 [web] 如何使用 window.navigator.geolocation 取得使用者的現在位置
依照 MDN 的說明與 Web API 的規範，要在瀏覽器使用 geo Location 會有三個階段分別是「抓資料」，「開始監聽」，「停止」。checkGeolocation()startWatchingGeolocation()endW......
程式設計 指定web元件為 CSS height 100vh 在 iOS webkit 中被網址列擋住的問題如何解決 v2
在寫 web component 元件時，常常會有的 modal, list, alert 之類的實作會做 fullscreen 元件。如果此元件是 modal view 的話，它的 position 會是 fixed 或 absolute......
程式設計 Vue2 nextTick 遇到什麼問題，為何 Vue3 要改成 Ref reactivity響應式系統架構
在前面的文章我們提到，Vue 是用自已的 MVVM 架構配合 Virtual DOM 來更新真實的 HTML DOM 物件樹。 Vue 2 中的 nextTick 問題在於，因為是使用 Options API + Vue 自己的 Virtu......
程式設計 MacBook 安裝 Ubuntu 後 macOS 的分割磁區不見了怎麼辦？macOS partition lost on Ubuntu installed on MacBook
在「舊 MacBook Air 2012 安裝 Ubuntu」的文章中，我們分享了一步一步在 MacBook 上安裝 Ubuntu Linux 與驅動程式的方法。為了讓 Ubuntu 的使用空間多一點，我們在安裝雙系統之後於 macOS 中......
程式設計 ES6 Flat Map 平坦化蜂巢矩陣計算 Flatten Nested Array in several ways by ES6 JavaScript
JavaScript / TypeScript 中，假設我們有一個多層的蜂巢矩陣 users 要處理 (nested array), 希望能一次把所有子矩陣 placeIds:number[] 抓出來且不重覆。這時候有三種方式可以試著計算，......
程式設計 [HTML] 替 input 輸入框增加一個前置 icon 且不會阻檔 input focus
預設的 HTML input 是沒有前置 icon 的，而很多設計中會希望開發者可以加入如下的 UI。這時候可以用一個 wrapper 包住 icon, input 元件再利用 padding-left 或 text-indent 內縮 i......
程式設計 利用 JavaScript/TypeScript 的 ES6 語法 Set().has() 與 Map().get() 加速矩陣比對的計算速度
實務上常常有兩個矩陣的資料要比較的應用，通常我們會直觀地針對一個矩陣做 iteration 並使用 .find( ) 來尋找另一個矩陣中的 target 資料，利用 ES6 的 Map 與 Set 物件就可以加速演算比對，效率提高非常非常多......
程式設計 Vue3 Provide/Inject 何時使用如何使用？它解決了什麼問題？
情境：當你有一個父元件（App.vue），要把資料（例如使用者資訊）傳給子孫元件（GrandChild.vue），但利用 props 時每次都要一層層向下傳遞，超容易漏看搞混的。或著是有個props資料要傳給一個孫子與一個子女 (Child......
程式設計 Vue3 reactivity 的大地雷 – API 在背景偷偷送出新的資料
在介紹 Vue 的文章「開始使用 VueJS – MVVM 架構」中我們說明了 Vue 如何使用 Virtual DOM 架構自動追蹤資料的變化並更新 UI 頁面。這個機制與概念在 Vue3 中以新的實作方法 JavaScript Prox......
程式設計 於 Vue3 專案中以原生方法或利用 yup 與 vee-validate 實作Form表單的驗證
個人是不喜歡使用外掛或一堆套件來實作功能的，因為外掛通常有很多 wrapper, listener 與轉換，使用過頭會對效能有一定程度的影響。實作上也可能會造成太過依賴外掛而導致忘記基礎邏輯的寫法。而且使用外掛還會增加學習曲線，要另外花時間......
作業系統 Hammerspoon – 寫點小語法轉換 MacBook 滑鼠滾輪方向實作 MOS 讓觸控板與滑鼠可獨立設定捲動方向
在「MOS – 讓MacBook觸控板與滑鼠可獨立設定捲動方向的超棒 macOS app」的文章中，我們介紹了一個小巧的 macOS app，讓外接滑鼠的滾動方向可以與 Trackpad 觸控板相反；我們更在「Hammerspoon – 轉......
程式設計 JavaScript套件 – 切分日本地址住所的函式庫
作業時常常需要針對地址進行切分，每個國家都有自已的特殊格式。日本常用的函式庫之一「@toriyama/japanese-address-parser-nodejs」還蠻好用的，不用繁複的函式、只要一行就能達成。const { Parser ......
作業系統 Hammerspoon – 轉換映射 MacBook 鍵盤按鍵配置 Mapping MacBook JIS keyboard keys to another by Hammerspoon on macOS
如果大家有購買其他鍵盤配置的 MacBook 例如日文 JIS 鍵盤，一定很困擾它的排列與台灣用的 US 鍵盤有超多不一樣的地方尤其是符號，自已摸索的解法可以幾乎完美轉換，再自已置鍵盤貼紙即可無痛使用。第一步更改 macOS 的輸入法，第二步是使用 Hammerspoon 轉換特殊按鍵。
程式設計 使用 Vue3 部份讀取檔案並繪至頁面上避免UI卡頓 partially loading data and rendering on page
在做前端畫面時，常常會遇到資料量過多而造成卡頓，但問題其實不是資料量大而是渲染太多筆資料導致瀏覽器無法負荷。最常見的就是整個瀏覽器因此當機而必須重啟。🧠 問題核心是什麼？畫面卡頓問題: 其實不是因為「資料量太大」本身，而是「畫面上一次性渲染......
程式設計 TypeScript 定義型別時 file.d.ts 與 file.ts 的檔名有什麼差別？What’s the difference between file.d.ts and file.ts in TypeScript
先下個結論，使用 file.ts 與 file.d.ts 來定義 type 或 interface 時的差別是，不使用 import export 的前提下 file.ts 預設 scope 為 local，file.d.ts 預設則為 g......
程式設計 Vue3 defineExpose 如何使用及什麼情境下使用？How and when using Vue3 defineExpose
在 Vue3 的開發中常有 View 依賴子元件 (Child Component) 的情境，例如母元件的 VIew 有某個參數改變後，子元件中的資料要重新讀取。一般而言會用 props 屬性直接轉入子元件即可，但若專案有用到 vuex 等......
程式設計 AWS MySQL 為何不允許一次執行多個 SQL query 指令
DROP VIEW IF EXISTS my_view; CREATE VIEW my_view AS SELECT DISTINCT city FROM my_table;上述的SQL 語法本身是正確的也很常使用，但是有些 SQL ser......
程式設計 [HTML5] 強制 input 只能輸入數字、指定type=number 與 pattern=[0-9]是不足的 Specify input to accept number only, type=number is inefficient
在「 iOS Android 只顯示數字鍵盤的 input 輸入元件寫法」與「為何 e 可以輸入 input type=number 的標籤中?」我們提到 HTML5 中雖然已經有提供 <input type="number" patter......
程式設計 [後端開發] micro package 延長 API 等待時間
套件使用 micro packages"micro": "9.3.3","micro-cors": "^0.1.1","microrouter": "3.1.3",方式有些特殊的 API 因為回傳的檔案較大或是要等待檔案上傳等應用，用此方可......