收藏 / 列表

linyuyizhizou_678b9fdc436f1 頭像

小帆聊前端 - 前端設計模式深度解讀：從混沌到有序，寫出可維護的代碼

前端設計模式深度解讀：從混沌到有序，寫出可維護的代碼 前言：你是否也被這些代碼問題折磨過？ "這個彈窗組件改一處就崩三處，到底誰寫的？" "為什麼同樣的表單驗證邏輯，每個頁面都要複製粘貼？" "狀態管理越來越亂，新增功能要改五六個地方？" "接手的項目像一團亂麻，根本不敢動核心邏輯？" 前端開發中，"能跑就行" 的代碼在初期或許能快速交付，但隨着項目迭代，維護成本會指數級增長。設計模式不是銀彈，卻

設計模式 , 前端

ahmad-shadeed 頭像

Ahmad Shadeed - A Deep Dive Into object-fit And background-size In CSS

We’re not always able to load different-sized images for an HTML element. If we use a width and height that isn’t proportional to the image’s aspect ratio, the image might either be compressed or st

Techniques , Tools , Css , Browsers

gabriel-shoyombo 頭像

Gabriel Shoyombo - Solving Media Object Float Issues With CSS Block Formatting Contexts

Let’s imagine we’re making a small component. It can be anything, really, but let’s use a media object as an example. Nicole Sullivan had a solid definition of media objects from way back in 2010, a

Tutorials , Layouts , coding , Css

stephanie-eckles 頭像

Stephanie Eckles - Level Up Your CSS Skills With The :has() Selector

Using :has() gives us the ability to “look ahead” with CSS and style a parent or ancestor element. Then, we can broaden the selector to target one or more siblings or children. By considering elemen

workflow , Tools , Css , Browsers

u_16213657 頭像

mob64ca140a1f7c - 電調

我們來詳細解析AM32中 Minimum duty cycle, Percent（最小佔空比，百分比） 這個參數。這是一個非常基礎且關鍵的參數，它直接決定了電機能否順利啓動和低速平穩運行。 一、 核心概念：它是什麼？ 最小佔空比 定義了電調能夠輸出給電機的最低有效驅動功率。可以把它想象成發動機的怠速。 技術原理：電調通過PWM

參數設置 , 熱啓動 , 滑塊 , Css , 前端開發 , HTML

victor-ayomipo 頭像

Victor Ayomipo - Previewing Content Changes In Your Work With document.designMode

So, you just deployed a change to your website. Congrats! Everything went according to plan, but now that you look at your work in production, you start questioning your change. Perhaps that change

devtools , Tools , testing , debugging , Browsers

shuirongshui 頭像

水冗水孚 - 從一個動畫需求，來學習js中animation動畫事件的具體應用

本文通過一個具體的動畫需求，來講解一下js中animationend事件使用 在線演示效果一：https://ashuai.site/reactExamples/animationEvent 在線演示效果二：https://ashuai.work:8890/27 前言 平常，我們代碼中，會做一些事件的監聽 比如點擊事件、右鍵事件、滾動事件等 實際上，js中還提供了動畫事件的相關ap

animation , dom , Css , Javascript

cosima-mielke 頭像

Cosima Mielke - Blossoms, Flowers, And The Magic Of Spring (April 2025 Wallpapers Edition)

Starting the new month with a little inspiration boost — that’s the idea behind our monthly wallpapers series which has been going on for more than fourteen years already. Each month, the wallpapers

Wallpapers

cristian-diaz 頭像

Cristian Díaz - A Guide To Keyboard Accessibility: JavaScript (Part 2)

In the previous article, we talked about how to improve accessibility for keyboard users using HTML and CSS. Those languages can do the job most of the time, but certain design requirements and the

Guides , Accessibility , Css , HTML , Javascript

geoff-graham 頭像

Geoff Graham - Preparing For Interaction To Next Paint, A New Web Core Vital

This article has been kindly supported by our dear friends at DebugBear, who help optimize web performance to improve user experience. Thank you! There’s a change coming to the Core Web Vit

performance , Core Web Vitals , optimization

tuzixiansen_63d4d65909d62 頭像

兔子先森 - VueZone-H5開發模板的一些常用功能

官網：https://vue-zone.github.io/docs/ github：https://github.com/vue-zone/vue3-vant-mobile 這是一個開源的vue3+vite的H5模板，多端設備兼容方式為 px - vw 和 rem 已接入過項目，親測好用，沒有過多配置，拉代碼啓動就能用了。 你可以把它當成一個已經搭好的架子，你只需要往裏面

react , vue.js , HTML , 前端 , Javascript

michelle-barker 頭像

Michelle Barker - Building A Dynamic Header With Intersection Observer

The Intersection Observer API is a JavaScript API that enables us to observe an element and detect when it passes a specified point in a scrolling container — often (but not always) the viewport — t

performance , API , Javascript , ui

preethi-sam 頭像

Preethi Sam - How To Draw Radar Charts In Web

I got to work with a new type of chart for data visualization called a radar chart when a project asked for it. It was new to me, but the idea is that there is a circular, two-dimensional circle wit

Techniques , Css , Data Visualization

u_9849794 頭像

子丶不語 - 前端技巧：檢測到省略號文本自動顯示 Tooltip

在前端開發中，我們經常會遇到接口返回的文本內容過長，無法完全顯示的問題。為了處理這一問題，通常會設置固定的寬度並使用省略號樣式（text-overflow: ellipsis）來隱藏超出的文本。然而，有時產品需求還希望用户能夠通過懸停查看完整內容，這時就需要引入 Tooltip 進行展示。（沒被省略的時候不要顯示Tooltip） // tailwind的樣式單行省

自定義 , Css , 代碼實現 , 前端開發 , 省略號 , HTML