Javascript 使用 atob() 解密 base64 字串遇到的問題

這裡記錄我在使用 js 的 base64 解密功能時，因為 UTF-8 編碼與 base64 格式，會遇到的問題

CSS / JS 的圖形矩陣處理

眾所周知，CSS 的 transform 或是 SVG 的 transform 可以使用 translateX、rotateX、scale……等 transform functions。而裡面最為複雜的就是 matrix

參閱 MDN 的說明， matrix 有 6 個參數：matrix(a, b, c, d, tx, ty) ，以投影座標（因為我常用的 GIMP 、我當初學的都是使用投影坐標（projective coordinates），我這篇也都使用投影座標來講）來表示的話，就是：

$\left(\begin{array}{ccc}\mathrm{a}& \mathrm{c}& \mathrm{tx}\\ \mathrm{b}& \mathrm{d}& \mathrm{ty}\\ 0& 0& 1\end{array}\right)$

如果今天我 CSS 是 translateX(100px)，那相當於matrix(1, 0, 0, 1, 100, 0)，即： $\left(\begin{array}{ccc}1& 0& 1\\ 0& 100& 0\\ 0& 0& 1\end{array}\right)$

Vue.js 狀況：onMount 更新變數後，畫面沒有進行變動

狀況

以下是我的 Vue code

<script setup>
let menuTabs = ref([
	{name: "會員", checked: false},
	{name: "客戶", checked: false},
	{name: "站點", checked: false},
])



let selectedMember = ref({name: null, id: null})
let selectedCustomer = ref({name: null, id: null})
let selectedStation = ref({name: null, id: null})

/** 根據當前選擇的 tab 來決定顯示的內容 */
let selectedData = computed(function(){
	if(menuTabs.value[0].checked){
		return selectedMember.value
	}
	if(menuTabs.value[1].checked){
		return selectedCustomer.value
	}
	if(menuTabs.value[2].checked){
		return selectedStation.value
	}
	return {name: null, id: null}
})

/** 切換 menu tab */
function changeMenuTab(index){
	for(let i = 0; i < menuTabs.value.length; i++){
		menuTabs.value[i].checked = i == index
	}
}

</script>
<template>
	<div class="tabs">
  		<div role="tablist" aria-label="Sample Tabs">
			<button v-for = "(tab, index) in menuTabs"
				role="tab"
				:aria-selected="tab.checked"
				:aria-controls="`panel-${index}`"
				:id="`tab-${index}`"
				:tabindex="tab.checked ? 0 : -1" 
				@click="changeMenuTab(index)"
				v-text="tab.name"/>
		</div>
	</div>


	<div class="tab-content">
		<div>
			{{selectedData.name}}
			<template v-if="!!selectedData.id">
				（{{selectedData.id}}）
			</template>
		</div>


		<div v-for = "(tab, index) in menuTabs"
			role="tabpanel"
			:aria-labelledby="`tab-${index}`"
			:id="`panel-${index}`"
			:aria-hidden="!tab.checked"
			:tabindex="0"
			:hidden="!tab.checked">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus, congue vel laoreet ac, dictum vitae odio.
		</div>
	</div>
</template>

使用 Intl.DateTimeFormat() constructor 將日期格式化成 ISO 8601 格式

如題，因為現在 JS 有 Intl.DateTimeFormat 了，使用 Intl.DateTimeFormat 來將日期以 ISO 8601 格式化

Vue.js：ref 對象更動後，要如何在 DOM 的變更結束後，執行 function

我這邊有段 vue code：

<script setup lang="ts">
interface CartItem {
	id: any;
	itemID: any;
	name: string;
	price: number;
	count: number;
}
let cartItem = ref<CartItem[]>([])


</script>
<template>
	<aside>
		<div class="cart-item" v-for="(item) in cartItem">
			<span v-text="item.name"/>
			<span v-text="'$' + item.price"/>
			<input type="number" v-model="item.count" />

		</div>
	</aside>
</template>

這段 code，每次 cartItem 新增一個項目後，就會自動建立一組 <div class="cart-item" />；反之，每刪除一個項目，就會刪掉一個<div class="cart-item" />。

我現在要的，是每新增或刪除完一個項目後，自動執行一段 function。

例如新增完畢後，自動 focus 到最新的 input 中。

Vue.js 的 ref 出現 null 錯誤

最近在寫 Vue.js 專案

使用 npm run build （或是 npx vite build）編譯成 production 程式後，執行會出錯

以下是我的程式碼：

<script setup lang="ts">
	let myDialog = ref<HTMLDialogElement>(null)
</script>
<template>
	<button @click="myDialog.showModal()">my btn</button>
	<dialog ref="myDialog"></dialog>
</template>

點下按鈕後，會出現以下兩種錯誤：

TypeError: Cannot read properties of undefined (reading 'refs')

TypeError: Cannot read properties of null (reading 'showModal')

如何用 npx 來使用不同版本的 npm

以下是一個簡單的 package.json

{
	"name": "Lorem ipsum dolor sit amet",
	"version": "1.0.0",
	"description": "Ac odio tempor orci dapibus.",
	"main": "index.js",
	"scripts": {
		"start": "webpack",
		"dev": "webpack-dev-server --open"
	},
	"engines": {
		"node": "v8.6.0"
	}
}

如果我的 Node.js 是最新版，那就無法執行該專案了。

藉由表單查詢，更新 jqGrid 的輸出結果

這是我使用 jQuery 的 jqGrid 遇到的坑。

jQuery select2 library 使用 AJAX

因為官網沒寫的很清楚，所以特此紀錄

Deno 如何保留 cookie

自己試著用 Deno 寫小機器人

不過不管試幾次，登入後去其他 request 都做不到

我的 code 大致如下

const account = "foo@example.com"
const password = "bar123456789"
const host = "http://localhost:8080"

let cookie = await fetch(`${host}/login`, {
	body: `account=${account}&password=${password}`,
	method: "POST",
	headers: {"Content-type": "application/x-www-form-urlencoded"}
})
	.then(function(resp){
		return resp.headers.get("Set-cookies") || "" 	// 不加上 || "" 的話，cookie 就會被視作 nullable 變數，在 deno 可能會說 warning 或 error
	})

fetch(`${host}/some-request`, {
	headers: {"Cookie": cookie}
})
	.then(function(resp){
		return resp.text()
	}).then(function(data){
		console.log(data)
	})

以上這段 code 最終會 redirect 到首頁而已

因為 cookie 取不到（換言之， cookie 變數一直都會是空字串）

Deno 執行本地的 WebAssembly 檔案

文字轉成「字元值參照」

即是把文字轉成 &#xxxx;的格式，例如「你好」轉為「你好」。

FullCalendar Library 自定不同 views 的 tab 名

使用版本為 FullCalendar v5.11.2

 

FullCalendar 本身支援多種 view，例如 Month view、DayGrid View、Timeline……等等

 

但 tab 的名稱只會顯示 month、list……之類的

筆記：javascript 中 fetch 與 ajax 的差異

引自以下 twitter

`fetch()` will be the same as XHR at the network level, but for things like decoding JSON, it can do that work off-thread because the API contract is promise-based up-front.

— Alex Russell (@slightlylate) October 18, 2019

這位 Alex Russell 曾是 Google Chrome 框架的工程師

紀錄一下在 JS 中各種中文排序

使用 jQuery Datatables plugin 時，出現 Bean 錯誤

這是最近在處理 spring MVC 專案時遇到的問題。

這個專案前端使用了 jQuery + Datatable plugin；

而在後端，則是這樣寫（FooBarSearch 是一個 Bean）

@RequestMapping(value="/search")
public @ResponseBody ForBarResultBean search(FooBarSearch search) 

GWT 中 JS 與 Java GWT code 互傳資料

因為最近在 GWT 遇到很多坑，所以在此紀錄一下

visibilitychange event

今天在搜尋某些資料時，發現到一個叫「程序猿甜品店」的網站。

這網站有個很有趣的效果：當你瀏覽器轉到其他分頁時，該網站的 tab 標題會變成「我失宠了」；如果回到該 tab，又會變成「我被宠了」（維持2秒，之後變回原本標題）。

Javascript 如何操作剪貼簿

參考自How do I copy to the clipboard in JavaScript?。

javascript 如何建立一個 function ，於多個 Response 的資料都取完後才執行

紀錄一下在 javascript 如何建立一個 function ，於多個 Response 的資料都取完後才執行。