初探 Filament compoent 設計

這篇文章是針對 Dan Harrin 在 laracasts 的影片進行的設計範例和理解筆記,其設計哲學貫穿整個 filament package,理解其原理可以為後續開發思路打下基礎。 Filament/livewire 設計概念是以 component 為基礎,透過對應設計達到 component based design,意思就是透過 component 完成功能。 設計 TextInput Component namespace App\Components; class TextInput { public function __construct( protected string $name ) { } // 透過靜態類別方法來創建實體,避免要寫 new TextInput() public static function make(string $name): self { // 由靜態類 new instance return new self($name); } // render view component public function render(): View { return view('components.text-input'); } 接下來創建其對應的 html component,components/text-input.blade.php: <input type="text" /> 在主要 layout 當中使用其組件,這邊我的主 layout 為 demo....

December 18, 2023 Â· Yish

The End of 2023 Review

At the close of 2023, I took the time to review the goals I set at the beginning of the year and assess my progress. Let’s dive into the review. Hard Skills In early 2023, I established a learning schedule, outlined below: Engage in a production project to grasp Go features. Utilize Python and Java for algorithmic tasks. Acquire proficiency in Solidity for smart contracts and delve into blockchain knowledge. I’ve diligently pursued these objectives, finding the process immensely enjoyable....

December 12, 2023 Â· Yish

Filamentphp Customize Theme

官網寫得有點模糊,這邊記錄一對應的流程: 根據不同的 panel 建立 theme: $ php artisan make:filament-theme $ php artisan make:filament-theme person 會生成兩個給指定 panel 用的 tailwind.config.js 和 theme.css: resources/css/filament/person/tailwind.config.js resources/css/filament/person/theme.css 以我這邊的例子來說要需要引入 tiptap 所需要用的 css 和需要注入 tailwind 的監聽檔案: tailwind.config.js import preset from '../../../../vendor/filament/filament/tailwind.config.preset' export default { presets: [preset], content: [ ... './vendor/awcodes/filament-tiptap-editor/resources/**/*.blade.php', ], } theme.css @import '/vendor/awcodes/filament-tiptap-editor/resources/css/plugin.css'; 接著 build file: $ npm run build 接下來要告訴 panel provider 呼叫對應的 vitetheme,也就是剛剛的 theme.css style: class PersonPanelProvider extends PanelProvider { public function panel(Panel $panel): Panel { return $panel ->brandName('Person') ->default() //....

December 2, 2023 Â· Yish

在 SUI Chain 上發行代幣(Token)

由於 SUI 的合約機制跟 EVM 所使用的技術概念和機制都不同,這篇文章將會介紹如何在 SUI Chain 上發行代幣。 關於 SUI 本身的技術與介紹可以參考 Messari深度報告:Sui 技術優勢在哪?撐出 L1 公鏈新天地 或是 SUI 的官網都有細節的技術介紹,比較特別的是在 SUI 上面都是以 object 作為一個單位與中心進行交互,文中有一段很簡單的介紹: 以物件為中心的資料模型 與其他分散式帳本相區別的關鍵特性是 Sui 的以物件為中心的資料模型。大多數智能合約平臺,如以太坊、Solana 和 Aptos,使用帳戶來追蹤區塊鏈的狀態,其中帳戶是儲存使用者餘額的資料結構。其他平臺如比特幣和 Cardano 使用未消費交易輸出(UTXO)來記錄區塊鏈的狀態,也就是說,UTXO 代表了在交易執行後剩餘的資產數量。 Sui 將這兩種方法結合成一種混合模型,其中其歷史儲存在具有全域性唯一 ID 的物件中。物件還包含元資料,用於確定不同物件的特性,如所有權和交易歷史(部分來源於物件隨機數值,也稱為版本號)。Sui 的以物件為中心資料模型意味著全域性狀態只是所有 Sui 物件的集合。從結構上講,這採用了有向無環圖(DAG)的形式,其中物件對應於頂點,交易對應於邊,稱為 「活動物件」 的物件對應於沒有出邊的頂點。 在 Sui 中,所有交易都將物件作為輸入,並生成新的或修改後的物件作為輸出。每個物件都包含產生它的最後一筆交易的hash值。可用作輸入的物件稱為 「活動」 物件。因此,通過觀察所有活動物件,可以確定全域性狀態。 官網 SUI explorer 技術實作 接下來將會介紹如何在 SUI Chain 上發行代幣(Token),Sui wallet 與如何透過 faucet 領取 SUI 這邊就不多作介紹。 https://docs.sui.io/build/install#prerequisites https://docs.sui.io/build/install#install-sui-binaries 這邊用 devnet 作為測試: $ cargo install --locked --git https://github.com/MystenLabs/sui.git --branch devnet sui VSCode 整合 https://docs....

November 3, 2023 Â· Yish

75. Sort Colors

75. Sort Colors Given an array nums with n objects colored red, white, or blue, sort them in-place so that objects of the same color are adjacent, with the colors in the order red, white, and blue. We will use the integers 0, 1, and 2 to represent the color red, white, and blue, respectively. You must solve this problem without using the library’s sort function. 規則 in-place algorithm (不可用其他資料結構,對原有數據做改變) 不可用原生 sort 函式 測試案例 Example 1: Input: nums = [2,0,2,1,1,0] Output: [0,0,1,1,2,2] Example 2: Input: nums = [2,0,1] Output: [0,1,2] 思路 用雙指針 遍歷 實作 class Solution: def sortColors(self, nums: List[int]) -> None: zero_index = 0 # 左指針 two_index = len(nums) - 1 # 右指針 index = 0 # 遍歷指針 # [2,0,2,1,1,0] # 0 <= 5 # [0, 0, 2, 1, 1, 2], two_index = 4, index = 0 # 1 <= 4 # [0, 0, 2, 1, 1, 2], zero_index = 1, index = 1 # [0, 0, 2, 1, 1, 2], zero_index = 1, index = 2 # [0, 0, 1, 1, 2, 2], two_index = 3, index = 2 # 2 <= 3 # [0, 0, 1, 1, 2, 2], zero_index = 2, index = 3 # 4 <= 3 # skip # return while index <= two_index: if nums[index] == 0: nums[index], nums[zero_index] = nums[zero_index], nums[index] # 交換 zero_index += 1 index += 1 elif nums[index] == 2: nums[index], nums[two_index] = nums[two_index], nums[index] # 交換 two_index -= 1 else: index += 1 return nums

October 17, 2023 Â· Yish

Selection Sort

思路 找出最小值並放入新陣列依序排列 n*n = O(n^2) 實作 def selectionSort(nums): result = [] # 結果陣列 while nums: smallest = self.helper(nums) result.append(nums.pop(smallest)) # 取出最小值並放入新陣列 return result def helper(self, nums): smallest_i = 0 smallest = nums[smallest_i] for i in range(1, len(nums)): if nums[i] < smallest: # 找出最小值 smallest = nums[i] # 更新最小值 smallest_i = i # 更新最小值索引 return smallest_i 也可以透過內建函式達到一樣效果,具體流程如下: min() 取出最小值 remove 在 nums 內的最小值 append 進入新陣列 def selectSort2(self, nums): result = [] while nums: smallest = min(nums) # 取出最小值 nums....

October 13, 2023 Â· Yish