林恆 -
總結 Next.js 中的 Server Actions
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
我們知道，Next.js 最核心的特性便是 支持靜態生成（SSG）和服務端渲染（SSG），這也就意味着我們可以以部署 Node 服務的方式，將其部署在服務器上，用請求後端接口類似的形式來請求頁面文件。換句話説，我們其實可以直接把 Next.js 看成一個特殊的 Node 後端服務。
既然是在服務端進行運行，那麼它在數據庫
前端
林恆 -
使用自定義API接入OpenAI CodeX配置教程
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
Codex 是OpenAI 推出的一系列人工智能編碼工具，通過將任務委託給強大的雲端和本地編碼代理，幫助開發人員提升工作效率。支持原生終端、vscode插件、cursor插件等場景使用。
官網網站openai.com/codex/
系統要求
步驟一：安裝Codex CLI
選擇一種安裝方式即可。
npm（通用）
npm i
前端
林恆 -
VUE3大屏自適應佈局
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
1. 視口單位佈局 (Viewport Units)
使用vw和vh單位來實現響應式佈局：
.full-screen {
width: vw(1920);
height: vh(1080);
padding: vh(5) vw(5) vh(5) vw(5);
}
.header-title {
font-size
前端
林恆 -
uni-app 無法實現全局 Toast？這個方法做到了！
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
大家好，我是不如摸魚去，wot-ui的主要維護者，歡迎來到我的 uni-app 分享專欄。
在 uni-app 開發中，我們經常遇到需要在任何地方（如網絡請求攔截器、路由守衞等）顯示 Toast 提示的需求。然而，uni-app 的組件化架構使得全局 Toast 的實現變得複雜。本文將介紹一套完整的解決方案，讓你輕鬆實現
前端
林恆 -
為什麼你的JavaScript代碼總是出bug？這5個隱藏陷阱太坑了！
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
你是不是經常遇到這樣的情況：明明代碼看起來沒問題，一運行就各種報錯？或者測試時好好的，上線後用户反饋bug不斷？更氣人的是，有時候改了一個小問題，結果引出了三個新問題……
別擔心，這絕對不是你的能力問題。經過多年的觀察，我發現大多數JavaScript開發者都會掉進同樣的陷阱裏。今天我就來幫你揪出這些隱藏的bug製造機，讓你的代
前端
林恆 -
JavaScript性能優化：我從50ms降到5ms的7個關鍵技巧
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
引言
在現代Web開發中，性能優化是一個永恆的話題。隨着前端應用的複雜度不斷提升，JavaScript的執行效率直接影響用户體驗。我曾面臨一個關鍵功能的性能瓶頸——初始實現需要50ms完成的任務，通過一系列優化手段成功降至5ms。本文將分享這7個關鍵技巧，涵蓋從代碼層面到運行時優化的全方位實踐。
主體
1. 減少DOM操作：批量
前端
林恆 -
鴻蒙應用開發---語音轉文本
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
一、工具
二、開發步驟
將一段中文音頻轉換為文本
1.在使用語音識別時，將實現語音識別相關的類添加至工程。
import { speechRecognizer } from '@kit.CoreSpeechKit';
import { BusinessError } from '@kit.BasicServicesKit';
harmonyos
林恆 -
記錄---瀏覽器多窗口通信有效實踐總結
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
如何跨越不同窗口通信
在現代 Web 開發中，多個窗口或標籤頁之間的通信成為了越來越常見的需求，尤其是在應用需要同步數據、共享狀態或進行實時更新的場景中。不同窗口間的通信方式有很多種，選擇合適的方式可以大大提高開發效率和用户體驗。本文將詳細介紹幾種常見的瀏覽器多窗口通信技術，並結合實際代碼示例，分析它們的優缺點及兼容性。
前端
,
html5
林恆 -
如何跨標籤頁通信
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
開篇小劇場：為什麼標籤頁要"聊天"？
想象你在網上商城：
標籤1：瀏覽商品頁
標籤2：開着購物車
當你在標籤1點擊"加入購物車"，標籤2的購物車數字應該立即+1！這就是標籤頁通信的魔力啦！✨
🎨 方案1：BroadCast Channel（對講機頻道）
🛠️ 方案2：Service Worker（隱形郵差）
📦 方案3
前端
,
html5
林恆 -
B站首頁的 Banner 這麼好看，我讓你直接用到你的項目！
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
寫在前面
我最開始是用 Angular 去實現了B站的 Banner ，那時候還沒有人做這東西，可以看到下面那一長串 Bannet 圖片的第一個圖是好幾年以前的了。然後隨着逐步完善，在這幾年偶爾也看到有人發過這東西的實現方法。
但我為什麼要寫這篇文章？因為我打算用原生 JS 和三大框架都去實現一遍，以滿足所有人的需求
前端
,
html5
林恆 -
如何進行頁面前端監控
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
前端監控主要分三個方向
前端性能（用户體驗優化）
異常監控
業務指標跟
下面我來分別介紹三類指標如何獲取
1）前端性能指標：
一、用户體驗相關的：
頁面加載時間（Page Load Time） ：
定義：從用户請求頁面到頁面完全加載的時間。
前端
,
html5
林恆 -
記錄---讓網頁像現實世界一樣“拿起來，放進去”
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
引言
2025年，我們早已習慣用手指滑動屏幕、拖動文件。而這一切流暢體驗的背後，HTML5 的拖拽（Drag and Drop）功能功不可沒。它讓網頁不再只是“點一點”，而是可以“拖一拖、放一放”，大大提升了交互的直觀性和用户體驗。
為什麼拖拽如此重要？
回想一下 iPad 為何能迅速風靡全球？一個重要原因就是它的操作“傻
前端
,
html5
林恆 -
記錄--JavaScript 中有趣的 9 個常用編碼套路
這裏給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
1️⃣ set對象：數組快速去重
常規情況下，我們想要篩選唯一值，一般會想到遍歷數組然後逐個對比，或者使用成熟的庫比如lodash之類的。
不過，ES6帶來了一個新玩意兒！它引入了一個全新的對象類型：Set！而且，如果結合上...展開運算符，我們可以超級快速地創建一個已經去重的全新數組！😎
const arr = [
jquery
,
前端
林恆 -
如何判斷一個元素是否在可視區域中？
一、用途
可視區域即我們瀏覽網頁的設備肉眼可見的區域，如下圖
在日常開發中，我們經常需要判斷目標元素是否在視窗之內或者和視窗的距離小於一個值（例如 100 px），從而實現一些常用的功能，例如：
圖片的懶加載
列表的無限滾動
計算廣告元素的曝光情況
可點擊鏈接的預加載
二、實現方式
判斷一個元素是否在可視區域，我們常用的有三種辦法：
offsetTop、scrollTop
jquery
,
前端
林恆 -
記錄：瀑布流最佳實現方案
傳統實現方式
當前文章的gif文件較大，加載的時長可能較久
這裏我拿小紅書的首頁作為分析演示
可以看到他們的實現方式是傳統做法，把每個元素通過獲取尺寸，然後算出left、top的排版位置，最後在每個元素上設置偏移值，思路沒什麼好説的，就是算元素座標。那麼這種做法有什麼缺點？請看下面這張圖的操作
容器尺寸每發生一次變化，容器內部所有節點都需要更新一次樣式設置，當頁面元素
jquery
,
前端
林恆 -
記錄---前端實現倒計時為什麼會存在誤差呢
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
1. 前端倒計時為何不準？
1.1 JavaScript的“單線程陷阱”
JavaScript是單線程語言，所有任務（包括定時器回調）都在同一個線程中排隊執行。當主線程被耗時任務（如複雜計算、網絡請求）阻塞時，定時器回調只能“望隊興嘆”，導致實際執行時間遠晚於預期時間。就像一家只有一個收銀台的超市，即使定時
前端
,
Javascript
林恆 -
記錄---一篇文了解qiankun的代碼隔離原理
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
隨着前端業務的快速發展，微前端架構已經被廣泛採用，其中qiankun作為主流解決方案也越來越受到關注。前幾天面試時，我就被問到了一個高頻問題：qiankun 是如何實現 JS 和 CSS 隔離的？
qiankun 的JS 沙箱
qiankun 的微前端場景是：主應用加載多個子應用，不同子應用可能依賴不同版本的庫、全
前端
,
Javascript
林恆 -
記錄---啊！！！Blob 居然這麼強大！
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
啊！！！Blob 居然這麼強大！
在前端開發的世界裏，我們每天都在和各種 API、對象和數據打交道。然而，有一個對象，常常被我們忽視，卻又在背後默默支撐着許多關鍵功能 —— 它就是 Blob。
Blob（Binary Large Object）聽起來像是一個“冷門”對象，但實際上，它幾乎無處不在：文件上傳、下載、視頻
Css
,
HTML
,
前端
,
Web
林恆 -
記錄---瀏覽器指紋-探究前端如何識別用户設備
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
什麼是瀏覽器指紋？
瀏覽器指紋，是用來唯一標識你瀏覽器的一組“特徵值”。它不是我們理解中的那種真實指紋，而是通過收集瀏覽器、操作系統、設備分辨率、字體、插件等信息，組合成的一個獨特 ID。
和傳統的 Cookie 不同，瀏覽器指紋不需要在用户設備上存儲任何東西，完全是“讀取現有信息”來識別用户。
使用背景
在最近的項目
Css
,
HTML
,
前端
,
Web
林恆 -
記錄---基於uniapp，編寫一個自定義的日期組件
🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
環境配置
系統：windows10
平台：HBuilderX4.76
語言：vue、javascript
庫：uni
概述
本文是基於uniapp，編寫的自定義日期選擇器組件，大致效果如下：
1、組件簡介
這是一個日期選擇器，即可以選擇年、月、日的組件，所以，組件的功能是很簡單的，組件的效果就是如上面的效果圖所
Css
,
HTML
,
前端
,
Web
