2022

年 (共 32 篇文章)

Directive composition API 初體驗

Angular v15 推出了新的 feature - directive composition API,可以方便我們更加容易組合出更複雜的 directive。

這篇文章就讓我們來快速體驗一下 directive composition API 使用起來是什麼感覺!

繼續閱讀
使用 C# 撰寫 ModbucTCP client

在之前的文章「簡介 Modbus TCP」我們簡單介紹了工業上常見且簡單的通訊方式,Modbus 以及 ModbucTCP,由於 ModbusTCP 本身非常簡單,因此就算不靠任何 library,只要懂得撰寫簡單的 TCP 程式就可以自己實作一個 ModbucTCP client,所以今天就以 C# 為例,實作一個簡單具有讀取功能的 ModbusTCP client。

繼續閱讀
簡介 Modbus TCP

Modbus 是在工業領域中廣泛使用的訊息交換規範,而 Modbus TCP 則是 Modbus 的一種實現,它使用 TCP/IP 作為傳輸層協定,因此可以透過網路傳輸。

最近在著手開發一個跟工業相關的專案,需要透過 Modbus TCP 協定來取得設備上的資訊,這篇文章會紀錄一下 Modbus TCP 的基本概念及協定規格。

繼續閱讀
Tauri 初體驗:前端打造桌面應用程式的小巧快速新選擇

Tauri 放在我的待研究項目裡面已經有好一段時間了,原本有研究了一小斷時間,但因為環境準備太過複雜而暫時停止。

最新忽然發現 Tauri 出到 v1.1,不再是 beta 版了,看了一下文件發現整體環境準備變得非常簡單,而且功能及文件也都非常完整了,就花了點時間研究一下,整理成以下筆記,也說說自己的體驗心得。

繼續閱讀
使用 Client Credentials 來取得具有 Azure REST API 權限的 Access Token

如果有在使用 Azure,一般會直接在 Azure Portal 上操作,或是透過 Azure CLI;但是如果要在程式中操作 Azure 資源,就需要透過 Azure REST API 來呼叫。

Azure 當然也提供了許多 SDK 讓我們不需要花太多時間去研究 REST API,不過背後原理都是透過 REST API 呼叫,如果遇到使用的語言沒有對應的 SDK,還是必須自己用 REST API 來呼叫,因此研究一下背後的 API 還是很有價值的。

這篇文章就來看一下如何透過 Client Credentials 的方式來呼叫 Azure REST API。

繼續閱讀
[Chrome DevTools] 透過開發者工具動態切換暗黑模式

Dark mode (暗黑模式) 已經逐漸成為現代網頁開發的主流,很多網站也都逐漸加入的對 dark mode 的支援,讓網站預設也可以跟著作業系統的深色或淺色模式自動切換

雖然顏色偏好讓使用者體驗更好,但也確實增加了網站開發時期的負擔,我們必須同時測試兩種顏色模式的顯示效果,如果每次測試都要主動切換系統的模式,也未免太辛苦了!還好 Chrome DevTools 內建了主題切換,讓我們可以直接在開發工具切換目前網頁的顯示模式,大幅度的節省時間,今天就來看看如何在深色和淺色模式之間自由的切換!

繼續閱讀
[Angular 大師之路] 透過 DI 容器修正第三方元件的 bug

最進公司內某個專案遇到了一個 bug 是因為第三方套件的已知 bug 導致,但又不可能等人家修好 bug 我們才能處理,於是來詢問我的想法;其實這並不是一個很難的問題,尤其是在 Angular 這種完整個框架下,透過 DI 容器就可以輕易的達成,只是不一定想得到而已,由於大多數我們會使用到 Angular 的 DI 機制常常都是再進行一些組態設定,難得有個案例是用來修 bug 的,就用這篇文章來記錄一下!

繼續閱讀
目前我在 VS Code 中使用的 Git 相關擴充功能 (2022 版)

分享一下目前我有在使用 Git 相關的 VS Code 擴充功能。

繼續閱讀
[NgRx 速成班] 用 Effects 讓元件持續保持單純

前幾天我們已經講 NgRx 狀態管理最重要的幾個核心角色 - Store、Selector、Action 和 Reducer 介紹過了;今天我們來講講 NgRx 另外一個很重要的角色 - Effects。

繼續閱讀
[NgRx 速成班] 更改狀態的基礎 Action & Reducer

上篇文章我們介紹了 NgRx 的 Store 和 Selector,這兩個角色主要是用來存放資料及讀取資料用的,接著我們來看看如何更新儲存的資料 - Action 和 Reducer。

一樣的,基本的程式骨架已經在「使用 NgRx Schematics 快速產生程式碼骨架」建立,接下來將會直接沿用產生出來的程式骨架,繼續調整程式碼。

繼續閱讀