收藏 / 列表

wanzuqiudeshangba 頭像

玩足球的傷疤 - 細説Flexbox 佈局

在響應式設計中，Flexbox 是一種理想的佈局工具。它使得元素能夠根據容器的尺寸自動調整，靈活地填充可用空間。因此，無論是在桌面端還是移動端，Flexbox 都能夠確保佈局自適應、整潔且易於維護。 示例：響應式導航欄 假設我們需要創建一個具有可調節寬度的導航欄，項之間應均勻分佈，並且在小屏幕上時，導航項能夠堆疊在一起： nav class="navbar" a href="#"Home/a

flexbox , typescript , 後端 , 前端 , Javascript

fengliudeshanghen 頭像

風流倜儻的傷痕 - 如何在FastAPI中玩轉全鏈路追蹤，讓分佈式系統故障無處遁形？

url: /posts/30e1d2fbf1ad8123eaf0e1e0dbe7c675/ title: 全鏈路追蹤如何讓FastAPI微服務架構的每個請求都無所遁形？ date: 2025-08-28T23:40:47+08:00 lastmod: 2025-08-28T23:40:47+08:00 author: cmdragon summary: 全鏈路追蹤是

flask , django , fastapi , 後端 , Python

laughingzhu 頭像

LaughingZhu - DevNow x Notion

前言 Notion 應該是目前用户量比較大的一個在線筆記軟件，它的文檔系統也非常完善，支持多種文檔格式，如 Markdown、富文本、表格、公式等。 早期我也用過一段時間，後來有點不習慣，就換到了 Obsidian ，但是身邊人用的還是很多的，隨着 Astro 5.0 的發佈，在內容集成上也提供了更多的方向，這期就來聊聊 DevNow 對 Notion 的支持。 1.Notion 設置 1.1 創

astro , 博客 , 前端

sihaihande 頭像

漢得數字平台 - H-ZERO導出組件支持智能分片、異步導出、動態配置等高級特性，讓“一鍵導出”成為現實！

01 引言 H-ZERO 平台團隊始終專注於開發高效的前端工具組件，通過不斷優化交互設計和功能體驗，為企業用户提供更流暢、更符合業務需求的數據導出能力。 為了應對企業日益複雜的數據導出場景，H-ZERO 導出組件突破了普通導出組件功能單一、性能受限的瓶頸，支持多格式動態生成、異步分片導出和智能閾值管控等核心功能，使海量數據導出變得簡單易行。用户無需關注技術細節即可快速完成從配置到下載的全過程，大

開發工具 , 前端設計 , 前端

yourena_c 頭像

友人A - threejs的transformControls拖拽結束的異常

transformControls拖拽結束以後會以結束點的射線拾取重新選中新的模型，這裏發現是監聽事件的問題 // 創建 TransformControls const transformControls = new TransformControls(camera, renderer.domElement); const transformControlsHelp

three.js , 前端 , Javascript

yinguangyao 頭像

尹光耀 - underscore數組遍歷函數分析（一）

這是underscore源碼剖析系列第三篇文章，主要介紹underscore中each、map、filter、every、reduce等我們常用的一些遍歷數組的方法。 each 在underscore中我們最常用的就是each和map兩個方法了，這兩個方法一般接收三個參數，分別是數組/對象、函數、上下文。 // iteratee函數有三個參數，分別是item、index、array或者value、

underscore , 前端 , Javascript

xingfudenaozhong 頭像

幸福的鬧鐘 - 我們都被困在系統裏的…程序員

前言 2020年外賣最火熱的時候，有一篇文章《外賣騎手，困在系統裏》。 作為一個互聯網從業人員，我之前從未有機會體會到，當每一個工作都要被時間和算法壓榨時，我會是一種怎樣的感受。 而最近的一段經歷，我感覺也被困在系統裏了。 起因 如果你是一個研發人員，免不了要值班、處理線上問題。當然這都很正常，每個系統都有bug或者諮詢類的問題。 由於我們面臨的客户比較多，加上系統有一些易用性的問題或bu

react-native , JAVA , 程序員 , 後端 , 前端

daishuyunshuzhanqianduan 頭像

袋鼠雲數棧UED - redux vs redux-toolkit 及源碼實現

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霜序 前言 為何講這個內容？以為後續大家會使用 redux-toolkit，資產上週做了 redux-toolkit 的升級順便了解了相關內容，產出了這篇文章。 另外補齊一下在 React 數據流這個知識板塊的完整性。 React 中的數據流管理

react , redux-toolkit , redux , 前端

wuyagege 頭像

雲綺棠兮 - element-UI組件工具中button的原生代碼

實現的效果圖 實現代碼 !-- * @Author: [you name] * @Date: 2021-10-13 14:27:18 * @LastEditors: [you name] * @LastEditTime: 2021-10-14 16:21:38 * @Description: -- !DOCTYPE html html lang="en" head met

component , element-ui

jsliang 頭像

jsliang - CSS 實例系列 - 02 - 2023 兔年祝福

Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 新年新氣象，讓我們耍一個兔飛猛進的祝福吧： 這個是一個完整的線上小實例，小夥伴們可以填寫數據，服務器會用 Node.js 定期讀取數據： 填寫數據：https://kdocs.cn/l/cbmawranzvNL 效果查看：https://liangjunrong.github.io/ 例如你填的用户名稱是：

puppeteer , node.js , css3動畫 , html5 , Javascript

changlina 頭像

長林啊 - Next.js Font 組件怎麼玩？最佳實踐分享

大家好，我是長林啊！一個愛好 JavaScript、Go、Rust 的全棧開發者和 AI 探索者；致力於終生學習和技術分享。 本文首發在我的微信公眾號【長林啊】，歡迎大家關注、分享、點贊！ 前面的文章介紹了 Script 組件和 Link 組件，今天我們來看看 Font 組件。在 Web 開發中，字體是一個常常被忽視但至關重要的元素。它不僅影響網站的可讀性和用户體驗，還體現了品牌的個性和風格。選擇

react , next.js , 前端

linong 頭像

linong - 通過 AST 實現組件庫替換升級

年初接到一個任務將 semi-ui 替換到 antd，但是能人力預算不太夠，所以基於工作量和效率選擇了基於 AST 的替換方案。 項目技術棧是 React + tsx 為什麼要使用 AST？ AST（Abstract Syntax Tree，抽象語法樹）是一種在計算機科學中表示源代碼語法結構的樹狀數據結構。 通過 AST，可以理解代碼的結構和含義，實現代碼分析、轉換和操作。 基於 AS

ast , typescript , babel , 前端 , Javascript

htvlz 頭像

海豚V靚仔 - HTML 顏色

顏色在網頁設計和數字藝術中扮演着至關重要的角色。正如您所提到的，顏色可以通過紅色、綠色和藍色的混合（RGB）來定義，這種混合方式允許我們創建出數百萬種不同的顏色。每種顏色的強度（或稱為亮度）可以從0（最暗，表示為#00）到255（最亮，表示為#FF）變化。 在HTML和CSS中，顏色可以通過十六進制顏色代碼（如#FF0000表示紅色）、RGB函數（如rgb(255, 0, 0)也表示紅色）或者顏色

前端 , html5

aresn 頭像

Aresn - View Design 物料市場項目已全部適配 Vue.js 3

目前，物料市場中的所有內容均已完成 Vue.js 3 的適配，View Design 付費用户可以免費下載使用。 https://www.iviewui.com/store 新增的物料有： 深色主題 - Admin Plus 深色主題 - View UI Plus 黑金主題 - Admin Plus 其他適配 Vue.js 3 的物料 社交佈局 地圖佈局 工作桌面佈局 局部打

vue.js , iview , 前端 , html5 , Javascript

zxl20070701 頭像

zxl20070701 - H5輸入區域光標控制

什麼是光標? 頁面上輸入區域（比如input和textarea）中閃爍的光標其實是一個選區，也就是選區的左邊界和右邊界直接形成的選區。 非IE瀏覽器 輸入框結點input=document.getElementById('#input')有兩個屬性： selectionStart、selectionEnd，分別代表選區開始位置，選區結束位置。 通過修改這兩個值就可以形成選區，寬度為0也就實現了光標

input , textarea , 光標 , HTML , 前端

nulidexiaocongmang 頭像

MangoGoing - 如何從 create-react-app 遷移到 Vite？

在不斷髮展的 Web 開發領域，對於任何希望提高性能和可維護性的開發人員來説，掌握高效的工具和流程都至關重要。對於許多希望構建現代單頁 React 應用程序的人來説，Vite 已成為 Create React App (CRA) 的自然繼任者。在本綜合指南中，我們將逐步介紹將您的項目從 CRA 遷移到 Vite 的步驟，重點是實用性和易用性。 距離 Vite 推出已經有4年時間，Vite 5.0

react , vite , create-react-app , 前端

skychx 頭像

鹵代烴 - 🪢 [網絡協議] 淺談 HTTP 優先級算法的演進

如果你喜歡我的文章，希望點贊👍 收藏 📁 評論 💬 三連支持一下，謝謝你，這對我真的很重要！ 前兩天在「即刻」上一時興起寫了一段 HTTP 優先級的發展歷程，這兩天覺得當時寫的還是太倉促了，所以準備寫個 Blog 擴寫一下，就「優先級」這個概念縱向分析，看看這些基礎協議的發展和進化。 正式講之前先列個時間線，這樣的話對以下內容的理解會有個更直觀的認識： 1997 年，經過前幾年幾

http3 , http-2 , HTTP , 網絡傳輸協議 , 前端

limingcan562 頭像

limingcan - 帶着這種思想，我快速高效的學會了webpack“開發環境配置”

前言 我們在使用webpack時，經常會看到類似以下結構： build ├── webpack.common.js └── webpack.dev.js └── webpack.prod.js 很多時候，webpack的配置我們基本複製粘貼過來的，沒有想過為什麼我們要把配置文件拆解成這麼多。因此，當我們自己去學習配置webpack時，我們經常會出現以下等問題： 開發環境構建速度慢 打包後頁面

構建工具 , webpack5 , 架構 , webpack , 前端

yangyaya 頭像

陽呀呀 - “寒冬”三年經驗前端面試總結（含頭條、百度、餓了麼、滴滴等）之手寫題（promise篇）

前言 不論是寒冬還是暖冬，找工作之前都需要做好充足的準備，面試的時候才能做到遊刃有餘。此文是把我最近找工作準備的以及筆試面試中涉及到的手寫題做一個總結。給自己，也給需要的同學。 手寫題是比較好準備的一個環節，大部分公司考察的題也就那麼多，大都不會超出範圍。 本篇主要涉及promise相關的題目。 往期： "寒冬"三年經驗前端面試總結（含頭條、百度、餓了麼、滴滴等） "寒冬"三年經驗前

面試 , 筆試 , 前端 , Javascript

huobaodejianpan 頭像

火爆的鍵盤 - 詳解 QUIC 與 TCP 對比：為何 QUIC 更勝一籌？

引言 在過去的三十年裏，HTTP（超文本傳輸協議）一直是互聯網的支柱。我們可以通過 HTTP 瀏覽網頁、下載文件、流式傳輸電影等。這一協議隨着時間的推移已經得到了重大改進。 HTTP 協議是一個應用層協議，它基於 TCP（傳輸控制協議）工作。TCP 協議有若干限制，導致 Web 應用響應較慢。 谷歌開發了一種名為 QUIC 的顛覆性傳輸協議，以克服 TCP 的缺點。QUIC 幾年前被標準化，並加入

quic , tcp , 網絡性能 , 網站開發 , 程序員

webinfoq 頭像

破曉L - HTTP 緩存最佳實踐和 max-age 帶來的陷阱

正確使用緩存可以帶來巨大的性能優勢，節省寬帶，並降低服務器成本，但許多網站並不重視緩存，造成競爭條件，導致相互依賴的資源不同步。 絕大多數最佳實踐緩存屬於以下兩種模式之一： 模式一：不可變（immutable）內容 + 長 max-age 模式二：可變（mutable）內容，始終由服務器驗證 模式一：不可變內容 + 長 max-age Cache-Control：max-age=31536

http緩存 , Css , 瀏覽器緩存 , 前端 , Javascript

huashenjianlingshouhuni 頭像

zhanle_huang - highchart的(column)柱狀圖修改圖例

(highchart的(column)柱狀圖修改圖例) 情況説明 柱狀圖的圖例默認是圓點的，如圖 要修改成方形，可以採用如下形式 plotOptions: { column: { tooltip: { pointFormat: `span style="color:{point.color}"\u25A0/span {series.n

vue.js , highcharts , 前端 , Javascript

hai2007 頭像

你好2007 - v-solt 插槽（基礎使用、具名插槽、作用域插槽等）

基本使用 組件通過slot預留位置，使用組件的時候，可以通過傳遞具體的內容去替換slot佔用的地方，這就是插槽。 比如現在定義了一個組件： !-- simple-use.vue -- template div slot/slot /div /template 組件slot/slot佔用的位置具體內容不確定，需要使用的時候傳遞進來，我們就可以這樣使用： simple-use em

vue.js , htm , template.js , 前端 , Javascript

hellotech 頭像

哈囉技術 - 基於定位的出發地異常問題治理

前言 哈囉作為一家出行互聯網公司，定位這種基礎能力是深度融入在各業務的核心鏈路中的，筆者所在的地圖團隊經常會收到定位相關的badcase，但苦於定位的複雜與較難回收出價值，一直沒有針對性去解決此類問題，那在各大互聯網廠商都在做下沉市場注重用户體驗的今天，我們重新撿起了這個話題。 問題梳理 無位置 由於APP啓動時未獲取到位置，會給用户提示並阻塞發單，用户需要使用POI搜索或拖動地圖的方式選擇出發地

地圖 , 前端