デザインパターンSOLID Design Pattern – SRP
Single Responsibility Principle (SRP) SOLID Design Pattern – SRP ここの Single Responsibility は責任に翻訳されるんですが、多分対象、サービスさせる人に考...
デザインパターンプログラミングsession vs tokens
目標 認証について、session-basedとtokens-basedの差別はなんでしょうかって理解させます Before this Session の構成を発明された前にAはBにリソースをアクセスしたいと毎回 ID/ Passwordを...
プログラミングWeb フロントの変化
HTML file 送る HTML2.0以前の時代はWebはbrowserがサイトを表示するとサーバにアクセスして、サーバが対するresourcesを用意して本物のhtml fileを送りますっと言う構成です。毎回のURLの切り替えるとサー...
プログラミングVue Component Communication2
簡素化 親子のコンポーネントは基本的には毎回のinputとoutputです。とても面倒だから、VueJSは簡素化されたsyntaxをパップリシューして v-modelを利用できました。利用方法はこちらです。syntaxはとっても短くなってし...
プログラミングVue Component Communication
前編、VueのDOMを話してから、JavaScript Modulesと同じ概念でVueの方もmodules stylesを作られた。それはコンポーネントと言うものです。 DOM tree & Vue Virtual DOM tree 会話...
infraNodeJSのパーウワー
前編でNodeJSの概念とインストール方法を紹介しました、でも具体的にどうやって利用するかなっと言うことはこちらからご紹介致しあます。 NodeJSの発明は元々Browserに強く依頼してるJavaScriptが抜け出してterminalで...
Network重置 macOS MySQL root 密碼
因為各個macOS或安裝的mysql版本不同、操作指令也有所不同，所以本篇利用分享最通用的方式來重置密碼 步驟 停止server 直接從 Setting Panel 中停止 進入安全模式 打開終端機 Terminal app sudo my...
OSHTML開發避免 iOS Safari 網址列擋住內文
iOS Safari 從第一代開始的實作規格中，一項一直為人詬病的就是「阻擋式網址列與工具列」。這種設計會讓網頁內文會被網址列蓋住，要在頁面向上滑動時，網址列與工具列才會自動縮小隱藏。而這卻是 Apple 從 iPhone 3 開始的 iO...
OS使用 dd 指令建立 USB 開機碟
$ diskutil list$ diskutil unmountDisk disk2 ( 修改別的disk號碼 )$sudo dd if=~/Downloads/archlinux-2023.07.01-x86_64.iso of=/de...
OS在 Linux 使用 miracast 投影至 Amazon FireTV
前提條件 網卡支援 p2plinux systemd: >=221glib >= 2-2.38gstreamerwpa_supplicant~=check-0.9.11 安裝 miracast 下載 中利用 git 下載原始碼： git c...
OS舊版 Debian/Ubuntu 使用 Flatpak 安裝新App
前面的文章我們提到跨發行版套件管理系統：Flatpak, AppImage, Snap 的同異，其最大的好處就是可以在舊系統中安裝最新的 App 而不需要「被強迫」升級OS。而且跨發行版套件不會被各家 GNU/Linux 的原生管理系統制約...
OSFlathub vs Snap 獨立APP的差別
GNU/Linux ，因為各種發行版本都可自由創立，軟體之間有各式各樣的套件與程式依賴。因此常常發生安裝新APP時，會因程式與所需的函式庫套件的依賴版本不同而無法安裝。或是升級APP時需要新的函式依賴A，而在某版本的OS中可以又要更新依賴B...
OSImage Magick 常用功能
畫質壓縮 # 不縮小 convert DSC_0124.JPG -quality [0..100] img1.jpg # 縮小 convert DSC_0124.JPG -scale 20% -size 24% -quality [0..1...
OS電池實際容量與額定容量
「電池實際容量標示」 日文的寫法是「充電容量」。指未受其他因素影響，理想的電池容量。例如，未受放電倍率，轉換，溫度等物理影響 「電池額定容量」 日文的寫法是「定格容量」。指能量轉換後，固定的可用容量。簡易公式為「電池實際容量」×「電壓轉換」...
程式設計VueJS 使用 Ref 綁定元件
分享綁定元件後操作 HTML DOM 的方法 Vue 2 / Options API <div ref=someRefName>Hello World</div> const refVar = "someRefName" (this.$re...
OSHTML開發避免 iOS Safari 網址列擋住內文
iOS Safari 從第一代開始的實作規格中，一項一直為人詬病的就是「阻擋式網址列與工具列」。這種設計會讓網頁內文會被網址列蓋住，要在頁面向上滑動時，網址列與工具列才會自動縮小隱藏。而這卻是 Apple 從 iPhone 3 開始的 iO...
程式設計為何 e 可以輸入 input type=number 的標籤中?
學習 HTML 時，相信大家會有一個困惑，明明在 input tag 中指定類型為數字了，為何輸入時「字元"e"」還可以被輸入呢？真奇怪 <input type="number" value="123" /> e 的意義 乘以10的N次方 ...
程式設計用ES6 解構式使用 split 分割字串
例如常用的分割時間字串為「時」與「分」(HH:mm) 格式，直接用 這種寫法，直接將 String.split() 分割的字 assign 進變數中 // time = HH:mm export const extractHour = (t...
程式設計Vue 父子元件傳值
Hint 為了共用，子元件製作時儘可能做 loose coupling、才不會有多個子元件共同修改同一個值的問題loose coupling 的架構下，【父 ➞ 子】用 props 單向傳入、【子 ➞ 父】用 emits 單向傳出 不希望元...
程式設計Vue3 使用 CSSProperties 傳入 CSS
傳入CSS值 import type { CSSProperties } from "vue"; interface CheckboxProps { modelValue: boolean; checkboxStyle?: CSSPrope...
程式設計HTML5 Storage 儲存的差異
Local Storage vs IndexedDB LS: sync, IDB: asyncLS size < IDBLS: no transaction, IDB: support transactionIDB: support arr...
程式設計ES6 array sort 並建立新矩陣
Array 排序 Array.sort( ) 本身是不給予新的記憶體位置的，只是修改矩陣內的數值排列 const people = [ { name: "Alice", height: 165 }, { name: "Bob", heigh...
程式設計Nuxt3 如何引入環境變數
在 Vue2 或 Vue3 的專案中，我們常常會引入環境變數，例如 process.env.NODE_ENV === 'development'、process.env.NODE_ENV === 'production'，來區分不同工作環境...
程式設計Vue3 無法watch string型態的 prop
在子元件中，若想監看傳入的 props 有無變化時，我們會使用 watch( ) 。但是若 prop 是 primitive type 的時候，會出現下列的錯誤 (以 string為例) Argument of type 'string' ...