programming

Something have to know about Bash programming

Last time I introduced some topics about web programming. This time, I am going to share some information for beginners ...
programming

Jest for Vue Mixins with TypeScript

Requirement packages jsdom-global@vue/test-utilsvuevue-jesttypescriptvue-typed-mixinsjestts-jest@types/jest Example requ...
programming

7 steps to understand web development

photo from w3-lab.com 概念的にWeb開発入門 Pioneering to JavaScriptSmall talk about TypeScriptNodeJSのパーウワーWeb フロントの変化 SPA or SSRV...
programming

Start to use VueJS

There are two ways to use the framework Vue.js. Import into your HTML files direclty <script src=""></script> Start usin...
programming

Small talk TypeScript

What is TypeScript TypeScript was first published at version 0.8 in 2012 by Microsoft, and made version 1.0 in 2014 with...
programming

Pioneer of JavaScript

JavaScript 1.0 The JavaScript 1.0 was made by Brendan Eich, Netscape company for a famous browser called Netscape in 199...
programming

HTML & Vue.js, a secrete you may not know about Vue

Vue.js and Native HTML5 - what is the difference Nowadays, there are many ways and frameworks to building up a web front...
programming

Understand Promise in 5 minutes (Javascript / Typescript)

Synchrounous and asynchrounous requests A process need to wait for another process got finished and then does something ...
Network

重置 macOS MySQL root 密碼

因為各個macOS或安裝的mysql版本不同、操作指令也有所不同,所以本篇利用分享最通用的方式來重置密碼 步驟 停止server 直接從 Setting Panel 中停止 進入安全模式 打開終端機 Terminal app sudo my...
OS

HTML開發避免 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 的原生管理系統制約...
OS

Flathub vs Snap 獨立APP的差別

GNU/Linux ,因為各種發行版本都可自由創立,軟體之間有各式各樣的套件與程式依賴。因此常常發生安裝新APP時,會因程式與所需的函式庫套件的依賴版本不同而無法安裝。或是升級APP時需要新的函式依賴A,而在某版本的OS中可以又要更新依賴B...
OS

Image 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...
OS

HTML開發避免 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' ...