原创 如何製作 Storybook Day 網頁上的 3D 效果？

Storybook 剛剛達到了一個重要的里程牌：7.0 版本！爲了慶祝，該團隊舉辦了他們的第一次用戶大會 - Storybook Day。爲了更特別，在活動頁面中添加了一個視覺上令人驚歎的 3D 插圖。 原文：How we built t

2023-06-05 13:03:33

原创 使用 React Three Fiber 和 GSAP 實現 WebGL 輪播動畫

參考：Building a WebGL Carousel with React Three Fiber and GSAP 在線 demo github 源碼 效果來源於由 Eum Ray 創建的網站 alcre.co.kr，具有迷人的視

2023-05-22 13:11:35

原创 深淺拷貝，溫故知新

1、深拷貝 1.1、概念 對象的深拷貝是指其屬性與其拷貝的源對象的屬性不共享相同的引用（指向相同的底層值）的副本。 因此，當你更改源或副本時，可以確保不會導致其他對象也發生更改；也就是說，你不會無意中對源或副本造成意料之外的更改。 在深拷貝

2023-05-11 13:03:38

原创 好奇心驅使下試驗了 chatGPT 的 js 代碼的能力

手邊的項目中有個函數，主要實現圖片分片裁剪功能。可以優化一下。 也想看看 chatGPT 的代碼理解能力，優化能力，實現能力，用例能力。 於是有了這篇文章。 實驗結果總結： chatGPT 確實強大，提供的答案可以借鑑，但不能完全依賴

2023-04-13 13:03:32

原创 最新 umi4-max 如何使用 webpack5 聯邦模塊

新項目用 umi4-max 搭建，部分功能想要使用其他項目的功能，不想重新開發，想到了使用 webpack5 的聯邦模塊，可以直接引用其他項目代碼來實現共享代碼。 理想很美好，現實很殘酷。直接按照 webpack5 聯邦模塊的使用方法，並不

2023-03-20 13:03:38

原创 重構：banner 中 logo 聚合分散動畫

1. 效果展示 在線查看 2. 開始前說明 效果實現參考源碼：Logo 聚集與散開 原效果代碼基於 react jsx 類組件實現。依賴舊，代碼冗餘。 我將基於此進行重構，重構目標： 基於最新依賴包，用 ts + hook 實現效果

2023-03-16 13:04:30

原创 TS進階之infer

收錄一下，方便需要的時候查詢。 參考：TS進階之infer 主要內容：介紹下非常實用的infer的使用方法 使用介紹 條件類型的基本語法是: T extends U ? X : Y; 如果佔位符類型 U 是一個可以被分解成幾個部分的

2022-11-16 13:03:36

原创 css 實現字體三連 (鏤空、漸變、背景)

美化字體，鏤空字是個不錯的選擇。 參考：中秋佳節之際, 一起來欣賞 9 個冷門的css屬性 鏤空字 p { font-size: 150px; color: white; -webkit-text-stro

2022-09-17 13:14:33 5

原创 gojs 實用高級用法

大家，新年好！ 歷史文章： 數據可視化 gojs 簡單使用介紹 gojs 如何實現虛線(螞蟻線)動畫？ 本文介紹的是在使用 gojs 製作圖的過程中，你可能會碰到的問題的一些解決方案。 gojs 是一個非常強大的可視化關係的js庫。

2022-01-11 13:04:38

原创 vue-cli3 vue2 保留 webpack 支持 vite 成功實踐

大家好！ 文本是爲了提升開發效率及體驗實踐誕生的。 項目背景： 腳手架：vue-cli3，具體爲 "@vue/cli-service": "^3.4.1" 庫：vue2，具體爲："vue": "2.6.12" 備註：沒有 typesc

2021-12-19 14:14:15 1

原创 react18 來了，我 get 到...

大家好！ 本文主要是關於即將發佈的 react 18 的新特性。那麼 react18 帶來了什麼呢？ 詳情可以關注 github React 18 工作組倉庫 1. automatic batching：自動批處理。 batching

2021-12-13 14:19:57 1

原创 antd 組件 RangePicker 擴展，支持預選範圍回填選中

最近在做和時間段範圍相關的，預設常用的日期範圍可以提高用戶體驗。可以說 antd 的組件是很不錯的，但是美中不足的是，不支持預設範圍回填選中，怎麼辦？ 在此基礎上封裝一下好了。 先來看下效果圖： 未選中： 選中回填： 看了下渲染出來

2021-06-27 14:14:05 6

原创 typescript 中的 infer 關鍵字的理解

infer 這個關鍵字，整理記錄一下，避免後面忘記了。有點難以理解呢。 infer infer 是在 typescript 2.8中新增的關鍵字。 infer 可以在 extends 條件類型的字句中，在真實分支中引用此推斷類型變量，推

2021-06-27 14:14:05

原创 ”控制反轉Ioc,依賴注入DI“如何實現的？

牛頓曾說：如果說我看得比別人更遠些，那是因爲我站在巨人的肩膀上。 閱讀優質框架庫的源碼，能學到不少，更有甚者基於此創造了更優秀的，大致就是如此。 midwayjs 已經忘了是怎麼認識它的了。印象中是個 nodejs 的優質框架，看了介紹

2021-05-17 14:14:39

原创 新的顏色對比度算法-感知對比度算法APCA

目錄對比度在控制檯查看插件或網站感知對比度算法（APCA）APCA Math 原理js 實現的 SAPC最後 靈感的源泉來源於不斷的接受新鮮事物。 Chrome 89 新功能一覽，性能提升明顯，大量 DevTools 新特性！ 文章中的

2021-03-23 14:22:03