博客 RSS 訂閱

smileZAZ 頭像

林恆 - 記錄---從零開始編寫 useWindowSize Hook

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 在 React 開發中，我們經常需要根據窗口大小來調整組件的行為。今天我們將從最簡單的實現開始，逐步優化，最終構建出一個高性能的useWindowSizeHook。 第一步：最簡單的實現 讓我們從最基礎的版本開始： import { useState, useEffect } from 'react' function useW

Css , HTML , 前端 , Web

收藏 評論

smileZAZ 頭像

林恆 - 記錄---啊！！！Blob 居然這麼強大！

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 啊！！！Blob 居然這麼強大！ 在前端開發的世界裏，我們每天都在和各種 API、對象和數據打交道。然而，有一個對象，常常被我們忽視，卻又在背後默默支撐着許多關鍵功能 —— 它就是 Blob。 Blob（Binary Large Object）聽起來像是一個“冷門”對象，但實際上，它幾乎無處不在：文件上傳、下載、視頻

Css , HTML , 前端 , Web

收藏 評論

smileZAZ 頭像

林恆 - 記錄---瀏覽器指紋-探究前端如何識別用户設備

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 什麼是瀏覽器指紋？ 瀏覽器指紋，是用來唯一標識你瀏覽器的一組“特徵值”。它不是我們理解中的那種真實指紋，而是通過收集瀏覽器、操作系統、設備分辨率、字體、插件等信息，組合成的一個獨特 ID。 和傳統的 Cookie 不同，瀏覽器指紋不需要在用户設備上存儲任何東西，完全是“讀取現有信息”來識別用户。 使用背景 在最近的項目

Css , HTML , 前端 , Web

收藏 評論

anjingdexiaoyanyao_ciaxxr 頭像

xcmd - 📥 x-cmd install | 使用 DDV 終端界面，瀏覽、搜索和更新 DynamoDB 數據

DynamoDB 是 AWS 提供的 NoSQL 數據庫服務，但有時在終端查看和管理數據會更加便捷。今天要介紹的是 DDV (Terminal DynamoDB Viewer)，一個基於終端用户界面 (TUI) 的 DynamoDB 查看器，讓你在終端就能輕鬆瀏覽、搜索、更新和刪除 DynamoDB 數據。 DDV 的亮點： 直觀的界面： DDV 提供了類似文件管理器的界面，方便瀏

命令行 , amazon , 運維 , 數據庫 , 管理

收藏 評論

anjingdexiaoyanyao_ciaxxr 頭像

xcmd - 🧩 x pacman(1) - 通過交互式包搜索和一鍵式鏡像切換,簡化你的 Arch Linux 工作流程

交互式搜索軟件工具 pacman 是 Arch Linux 及其衍生髮行版（如 Manjaro、EndeavourOS、ArcoLinux）的包管理器，用於安裝、升級和管理軟件包，支持二進制包和本地編譯的 AUR 包（配合 AUR 助手）。 為了提升軟件搜索和管理的效率，x pacman 提供了一個基於 fzf 的交互式 APP，用户可以在交互式 APP 中快速查找和查看各類軟件工具及其安裝信息。

archlinux , 命令行 , 包管理 , 運維 , 鏡像

收藏 評論

wdllmh 頭像

wdllmh - 上下margin無法生效的一種情況-行內元素

問題描述 在學udemy的htmlcss課的時候，challenge2有一部分是給超鏈接添加margin-top/bottom,添加後瀏覽器devtool的樣式中顯示margin已生效，但是在頁面中卻無法顯示。 解決過程 搜索margin不生效的幾個原因可以總結為 parent box 放不下 上下相鄰的塊產生margin摺疊 但是前者一般對parent中頭尾的child產生影

Css , HTML , 前端 , Web

收藏 評論

smileZAZ 頭像

林恆 - 記錄---基於uniapp，編寫一個自定義的日期組件

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 環境配置 系統：windows10 平台：HBuilderX4.76 語言：vue、javascript 庫：uni 概述 本文是基於uniapp，編寫的自定義日期選擇器組件，大致效果如下： 1、組件簡介 這是一個日期選擇器，即可以選擇年、月、日的組件，所以，組件的功能是很簡單的，組件的效果就是如上面的效果圖所

Css , HTML , 前端 , Web

收藏 評論

anjingdexiaoyanyao_ciaxxr 頭像

xcmd - 📥 x-cmd install | vtop - 在終端中實時掌握系統性能，讓監控更直觀！

還在用 top 命令查看 CPU 和內存使用情況？是時候升級你的監控體驗了！vtop 是一款強大的命令行工具和 TUI（文本用户界面），它使用 Unicode Braille 字符，在你的終端中繪製出 CPU 和內存使用率的實時圖表。告別枯燥的數字，迎接可視化的監控新時代！ 安裝 # 啓用 install 模塊的交互式 APP，install 可簡寫為 i x i 選定軟件後，按下回車鍵將展示

命令行 , 系統監控 , 運維 , 終端 , Javascript

收藏 評論

anjingdexiaoyanyao_ciaxxr 頭像

xcmd - 📥 x-cmd install | Yai - 讓你的終端擁有 AI 超能力！🚀

還在為記不住複雜的 Linux 命令而煩惱嗎？還在搜索引擎和終端之間來回切換，只為找到一個合適的命令嗎？現在，有了 Yai，這些都將成為過去式！ Yai 是一款 AI 驅動的終端助手，它將強大的 OpenAI ChatGPT 集成到你的命令行中，讓你用自然語言輕鬆駕馭終端。 安裝 # 啓用 install 模塊的交互式 APP，install 可簡寫為 i x i 選定軟件後，按下回車鍵將展示一

命令行 , 終端 , chatgpt , openai , 人工智能

收藏 評論

smileZAZ 頭像

林恆 - 記錄---前端微服務框架深度對比：無界（Momentum）與乾坤（Qiankun）實戰指南

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 一、引言：為何選擇微前端？ 在傳統單體前端架構中，隨着業務複雜度增加，代碼臃腫、協作困難、部署效率低等問題愈發突出。微前端通過將項目拆分為多個獨立自治的微應用，解決了這些問題： 技術棧無關：支持 Vue、React、Angular 等框架混合開發 獨立部署：各團隊可獨立開發、測試、發佈 漸進升級：允許逐步重構舊系統 動態加載

Css , HTML , 前端 , Web

收藏 評論

anjingdexiaoyanyao_ciaxxr 頭像

xcmd - x-cmd install | wut - AI 驅動的命令行解釋器，讓你的工作更順暢

命令行對於開發者來説是必不可少的工具，但有時命令的輸出結果卻讓人一頭霧水。錯誤信息、堆棧跟蹤、複雜的日誌……這些都可能讓你的工作停滯不前。今天，我要介紹一個神奇的工具——wut，它可以幫助你理解命令行的輸出，讓你的工作更加高效。 wut 是一個命令行工具，它利用大型語言模型 (LLM) 來解釋你最後一條命令的輸出。無論你是遇到了難以理解的錯誤信息，還是想要快速總結日誌內容，wut 都能幫到你。 w

命令行 , ai開發 , 開發者

收藏 評論

smileZAZ 頭像

林恆 - 記錄---window.close()失效 + Chrome瀏覽器調試線上代碼

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 情況説明 主系統單點登錄點擊觸發window.open()打開本系統。 是發佈生產後的新需求：要求退出登錄後直接關閉當前系統頁面。 本地運行增加了window.close()方法實現功能，點擊退出後頁面沒反應。 排查過程 官方解析中説明，window.close() 方法只能關閉由window.open()或者瀏覽器直接輸入

Css , HTML , 前端 , Web

收藏 評論

anjingdexiaoyanyao_ciaxxr 頭像

xcmd - x-cmd install | yr - 告別網頁！在終端輕鬆掌控天氣預報

還在為了查個天氣預報，打開瀏覽器，忍受廣告和繁瑣的頁面嗎？現在，有了 yr，一切都將改變！ yr 是一款強大的命令行天氣預報工具，讓你無需離開終端，就能輕鬆獲取精準的天氣信息。它基於挪威氣象研究所 (Meteorologisk institutt) 的權威數據，並結合 OpenStreetMap 的 Nominatim API，為你提供可靠、便捷的天氣查詢體驗。 核心功能，一觸即達 實時天氣

命令行 , 天氣預報api

收藏 評論

tangge 頭像

【唐】三三 - Scss 基礎

scss 轉 css 在線轉換 https://33tool.com/scss_to_css/ 變量 $primary-color: #000; .main1 { background-color: $primary-color; } 一、嵌套 1.1 父選擇器 (Referencing Parent Selectors: ) 在嵌套 CSS 規則時，有時也需要直接使用嵌套外層的父選

Css , HTML , 前端 , Web

收藏 評論

anjingdexiaoyanyao_ciaxxr 頭像

xcmd - x-cmd install | hevi - 告別枯燥，讓二進制世界煥發色彩！

還在用單調的 xxd 和 hexdump 查看二進制文件？是時候升級你的工具箱了！隆重推出 hevi，一款用 Zig 語言打造的輕量級、高性能十六進制查看器，讓你的二進制世界不再單調乏味。 hevi 不僅僅是一個簡單的十六進制查看器，它更是一個強大的分析利器，能幫助你更高效地理解和調試二進制數據。 核心優勢 語法高亮，洞悉文件結構： 告別對着一堆十六進制代碼發呆！hevi 內置了對 ELF

命令行 , 文件 , 二進制 , zig

收藏 評論

anjingdexiaoyanyao_ciaxxr 頭像

xcmd - x-cmd install | MoneyTerm - 在終端掌控你的財務，告別繁瑣記賬！

還在為複雜的記賬軟件頭疼？想隨時隨地掌握自己的財務狀況？ MoneyTerm 來了！這是一款基於終端的強大 TUI 財務管理工具，讓你在命令行界面也能輕鬆管理個人財務，告別繁瑣的圖形界面操作。 核心功能 QFX/OFX 導入： 直接導入銀行導出的 QFX/OFX 文件，告別手動錄入，省時省力。 交易記錄表格視圖： 清晰的表格展示所有交易記錄，賬户、年份、月份篩選，快速定位所需信息。 自動

命令行 , 賬單 , 財務軟件 , 終端 , Python

收藏 評論

tangge 頭像

【唐】三三 - CSS - transition 粗淺記憶

在 CSS 中，transition 是用於實現元素樣式平滑過渡的屬性，能讓元素從一種樣式狀態（如顏色、尺寸、位置等）逐漸變化到另一種狀態，避免樣式突變帶來的生硬感。它是實現基礎動畫效果的核心工具，廣泛用於 hover 交互、狀態切換等場景。 一、transition 核心語法 transition 是一個複合屬性，可以同時定義過渡的多個參數，語法如下： css transition: [過渡屬性

Css , HTML , 前端 , Web

收藏 評論

anjingdexiaoyanyao_ciaxxr 頭像

xcmd - x-cmd install | Tinboard - 在終端玩轉 Pinboard，打造你的專屬知識庫！

你是否是 Pinboard 的重度用户？是否厭倦了在瀏覽器和終端之間頻繁切換？現在，Tinboard 來了！它是一款基於終端的 Pinboard 客户端，讓你在命令行也能輕鬆管理和搜索你的書籤，打造你的專屬知識庫。 核心功能 書籤管理： 添加、編輯、刪除書籤，一切操作都在終端完成，告別繁瑣的網頁操作。 標籤建議： 智能標籤建議，讓你的書籤井井有條，方便快速查找。 強大搜索： 快速搜索書籤

命令行 , 書籤 , 終端 , Python

收藏 評論

smileZAZ 頭像

林恆 - 記錄---圖文並茂講解nginx中http升級https（部署SSL證書）知識點總結

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 為何網站要升級為https 原因有以下幾點: 1. 避免瀏覽器的不安全的警告 瀏覽器對於http的網站會在地址欄明確標記【不安全】字樣 這樣直接降低用户對網站的信任度 造成用户流失 甚至可能被用户誤認為是釣魚網站 如下圖，是筆者的網站沒有升級https證書的時候的樣子 升級後的 2. 加密傳輸數據，防止數據泄露

Css , HTML , 前端 , Web

收藏 評論

anjingdexiaoyanyao_ciaxxr 頭像

xcmd - x-cmd install | sttr - 你的終端字符串變形金剛，效率神器！

還在為各種字符串處理煩惱？sttr (string transform) 來了！這是一款命令行/TUI工具，能幫你快速完成30多種字符串轉換，讓你的終端操作效率飛起！ sttr 就像一個字符串變形金剛，集成了各種常用的字符串處理功能，無需再找各種在線工具或編寫複雜腳本。 核心功能 編碼/解碼： Base64、URL、HTML、Morse碼...各種編碼格式隨心轉換。 哈希： MD5、SHA

命令行 , 終端 , 字符串處理

收藏 評論

coulthard 頭像

coulthard - 8個有趣的Linux提示與技巧！

我們時不時給你帶來關於Linux的提示與技巧。和這個系列保持一致，這裏有8個我們從讀者收到最有趣的提示和技巧。我們希望你喜歡它。請繼續讀下去。。。 以它們的大小列出文件 如果你想要一個基於它們大小排序的文件列表，你可以使用下面的命令。 它會以遞減順序排列文件。 # ls -l | grep ^- | sort -nr -k 5 | more 如果你想要遞歸地做相同的事，你可以使用下面的第二個命令

命令行 , Linux , 系統管理

收藏 評論

anjingdexiaoyanyao_ciaxxr 頭像

xcmd - x-cmd install | cpufetch - 輕量強大的高顏值 CPU 信息工具，型號/架構/頻率一目瞭然！

想知道你的電腦 CPU 到底是什麼型號？性能如何？架構如何？還在用複雜的命令苦苦查詢嗎？現在，有了 cpufetch，一切都變得簡單而優雅！ 告別繁瑣，一鍵獲取 CPU 核心信息 cpufetch 是一款命令行 CPU 信息獲取工具，它能以簡潔美觀的方式，在終端中展示你的 CPU 架構信息。無論你是技術大牛還是電腦小白，都能輕鬆上手，快速瞭解你的 CPU： 核心參數，一目瞭然： CPU 型號

性能監控 , 命令行 , 終端 , cpu

收藏 評論

da_miao_zi 頭像

da_miao_zi - ”新建文件”只是早期Unix上touch命令的副作用？程序別掛掉就行

在西斯廷教堂的天頂上，米開朗基羅留下了人類藝術史上最具張力的名作——《創造亞當》。畫面中，上帝在天使的簇擁中俯身而下，手指即將觸碰到大地之上的亞當。這一指尖交會的瞬間，凝結了“以神之手創造人類”的想象，也象徵着生命、自由意志、甚至靈魂的誕生。 看到這幅畫的時候，我腦中突然冒出一個念頭：*nix系統裏的touch命令，會不會也是受此啓發？在操作系統的世界裏，用户就是數字造物主，只需手指一點，“to

命令行 , 歷史 , unix , Linux

收藏 評論

smileZAZ 頭像

林恆 - CSS3 超實用屬性:pointer-events (可穿透圖層的鼠標事件)

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 CSS3pointer-events屬性：實現可穿透圖層的鼠標事件 在網頁開發中，我們通常會遇到多個元素重疊的情況。在這種情況下，如何使得被遮擋的元素仍然能夠響應鼠標事件呢？CSS3 引入了pointer-events屬性，允許開發者控制元素是否能夠接收鼠標事件。通過合理使用pointer-events，可以使得圖層下的元素“穿透”上

前端

收藏 評論