收藏 / 列表

Amejimaobari Ollornwi - Building An Offline-Friendly Image Upload System

So, you’re filling out an online form, and it asks you to upload a file. You click the input, select a file from your desktop, and are good to go. But something happens. The network drops, the file

User Experience , serverless , Javascript

前端路引 - Web前端入門第 90 問:JavaScript 也能無中生有的創建音頻

網頁播放音樂這個常識應該都知道,畢竟百度 MP3 搜索可是風靡一時! 但使用瀏覽器無中生有的創建音頻,在 HTML5 規範落地之前可是一片空白。 AudioContext 的體量與 Canvas 差不了多少,一個針對圖形圖像,一個用於音頻,兩者結合起來就把 flash 給拉下了神壇~~ 本文源之於一次技術研究,曾經有一個需求要用 H5 搞一個網頁 K 歌,技術難點在於要將原唱、伴唱、錄音的音頻數

前端

後山人 - 穿越週期:堅持使用 PHP 的感悟與選擇的哲學

穿越週期:堅持使用 PHP 的感悟與選擇的哲學 摘要 在技術世界,PHP 似乎每年都要經歷一次“死亡”的預言,但它始終以驚人的韌性存活並持續進化。對於那些選擇堅持使用 PHP 的開發者而言,這不僅僅是一種技術選擇,更是一種對務實、效率與持續進化的深刻理解。 本文將分享堅持使用 PHP 的三大感悟,並結合 鋭智後台(RaiseAdmin)快速開發平台 的實踐,闡述 PHP 如何在現代化浪潮中,憑藉其

vue.js , MySQL , 小程序 , php , 教程

微芒不朽 - CSS Flex 佈局比 float 更值得學

在現代 Web 開發中,佈局是構建用户界面的核心環節。長期以來,CSS 的 float 屬性曾是實現多列布局的主要手段,但隨着 CSS 技術的發展,Flexbox(彈性盒子佈局)已成為更強大、更直觀、更可靠的佈局方案。本文將從多個維度對比 float 與 Flex 佈局,並闡明為何 Flex 佈局更值得投入時間學習和使用。 1. 歷史背景:從 float 到 Flexbox float 最初設計用

前端

beckyyyy - 可視化學習:使用極座標參數方程和SDF繪製有趣的圖案

前言 本文將介紹如何使用極座標參數方程和上一篇文章提到的距離場SDF來繪製有趣的圖案。 説到曲線和幾何圖形的繪製,我們知道圖形系統默認支持的是通過直角座標繪製,但是有些曲線呢,不太容易使用直角座標系來表示,卻可以很方便地使用極座標來表示,這個時候我們可以選擇通過極座標和直角座標的相互轉換,來實現圖形的繪製。 下面我就用玫瑰線、花瓣線等曲線作為例子來進行演示。 在開始演示之前,我先簡單介紹下極座標和

webgl , canvas , 可視化 , 前端

DiracKeeko - [前端] webpack + craco項目遷移Rsbuild

對一個非rsbuild的既有項目,遷移到rsbuild,有兩種途徑;其一是用rsbuild官方工具新建空殼項目,將舊項目的代碼文件搬到新的殼項目中,並安裝項目需要的依賴項,編寫rsbuild.config.ts配置;其二是修改舊項目的依賴項,刪除無關依賴和無關配置,安裝rsbuild項目所用的依賴項,編寫rsbuild.config.ts配置。 pnpm i @rsbuild/core @r

webpack , 前端

Apifox - JavaScript 閉包是什麼:深入瞭解

閉包是指在一個函數內部創建另一個函數,並且內部函數可以訪問外部函數的變量、參數以及其他內部函數,即使外部函數已經執行完畢。這種機制使得內部函數保留了對外部作用域的引用,即使外部作用域已經不再活躍。 為什麼閉包重要? 閉包在 JavaScript 中具有重要的用途和價值。它們可以用於創建私有變量、封裝邏輯、避免全局污染等方面。另外,閉包還允許你在函數之外操作局部變量,從而為代碼提供更大的靈活性和可

編程 , 閉包 , 後端 , 前端 , Javascript

銀之夏雪 - 深入剖析為什麼順序調用對 React Hooks 很重要?

在享受 React Hooks 帶來的便捷性的同時,我們必須嚴格遵循順序調用的規則,這一規則的重要性遠超我們的想象。本文將深入探討順序調用對 React Hooks 的重要性,並結合常見的缺陷,通過具體的代碼案例進行詳細闡述,揭示其背後深層次的原理。 一、React Hooks 工作原理 理解 React Hooks 的工作原理是掌握順序調用重要性的關鍵。React 內部維護着一個 Hooks 鏈

react , react-hooks , 前端 , Javascript

linong - 前端培訓-中級階段(10)- 同源策略(2019-08-15期)

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本着提升技術水平,打牢基礎知識的中心思想,我們開課啦(每週四)。 同源策略是什麼? 同源策略是瀏覽器的一個安全功能,不同源的數據禁止訪問。 所以 lilnong.top 下的 ajax 訪問 51vv.com 數據是會報

script , xmlhttprequest , 同源策略 , Ajax , Javascript

若川 - Taro 源碼揭秘:9. Taro 是如何生成 webpack 配置進行構建小程序的?

1. 前言 大家好,我是若川,歡迎關注我的公眾號:若川視野。從 2021 年 8 月起,我持續組織了好幾年的每週大家一起學習 200 行左右的源碼共讀活動,感興趣的可以點此掃碼加我微信 ruochuan02 參與。另外,想學源碼,極力推薦關注我寫的專欄《學習源碼整體架構系列》,目前是掘金關注人數(6k+人)第一的專欄,寫有幾十篇源碼文章。 截至目前(2024-11-22),目前最新是 4.0.7,

react , 小程序 , webpack , 前端 , Javascript

懟懟 - 【css】塊格式化上下文(BFC)

定位方式 BFC 1 定位方式 普通流/文檔流 浮動 絕對定位 1.1 普通流/文檔流 規則 元素按照其在HTML中的先後位置自上而下佈局 行內元素水平排列,直到當行被佔滿然後換行,塊級元素則會被渲染為完整的一個新行 所有元素默認都是普通流定位 1.2 浮動 規則 元素先按照普通流的位置出現,然後根據浮動的方向儘可能向左或向右偏移 平移到容器邊框,或者碰到另外一個

bfc , float , Css

zsirfs - 深入一點 - JS 函數為什麼可以這樣操作

原文: https://zswfx.com/articles/5dc8f64a9cf7c17b240e5c6c 我們經常在函數參數裏面使用如下操作 Array.prototype.slice.call(arguments, 1), 這樣的操作,類似還有 Object.prototype.toString.apply(o)這種操作,為什麼可以這樣玩呢? 前言 我們經常通過數組的方法去操作類數組,還會

javascript專題系列 , Javascript

你好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

追風的苦咖啡 - 教育網站加密標杆:國密 SSL 證書在部級教育系統的落地經驗

國密 SSL 證書在部級教育系統的落地實踐,通過國產算法自主可控、雙證書兼容架構、全生態適配整合三大核心策略,構建起 “合規、安全、易用” 的加密防護體系。以下以中國教育經濟信息網(教育部直屬部級系統)等標杆案例為基礎,解析其落地經驗與技術路徑: 一、政策驅動下的技術選型:從合規剛需到戰略佈局 1.政策法規的剛性約束 根據《密碼法》《網絡安全法》及等保 2.0 三級要求,部級教育系統需對用户數據

ssl證書 , joyent , 安全防護 , HTTPS , Javascript

李遊Leo - 深入理解 ECMAScript 2024 新特性:Map.groupBy() 分組操作

ECMAScript 2024 (ES15) 引入了一個極具潛力的新特性:Map.groupBy(),它大大簡化了數據分組的操作。無論是在處理數組、對象,還是更復雜的業務邏輯中,分組操作都是開發中常見的需求。本文將通過詳細的技術案例和代碼展示,為你剖析 Map.groupBy() 的強大之處。 什麼是 Map.groupBy()? Map.groupBy() 是 JavaScript 新增的靜態

ecmascript , 前端 , Javascript

南城FE - CSS技巧:從高度0過渡到自動高度

本文翻譯自 CSS trick: transition from height 0 to auto!,作者:Francesco Vetere, 略有刪改。 如果你在CSS上花了足夠長的時間,很可能你曾嘗試過從height:0到auto的平滑過渡。。。卻發現它不起作用!😢 ️幸運的是現在有一個解決這個問題的方法:使用CSS Grid佈局可以解決這個問題,而且代碼簡單,運行的很完美。 讓我們從一個實

css3 , 動畫 , Css , 前端

麒寧 - Ant Design 常見用法與坑點總結(一)

前言 Ant Design 是螞蟻出品的出色優秀的 React 組件庫,相信使用 React 進行管理系統開發的小夥伴們或多或少都接觸過 Ant Design。很多公司基於 React 開發的管理端系統也都是使用 Ant Design 的組件庫。 因此,瞭解 Ant Design 的常見用法與坑點還是有必要的。 本系列文章針對 Ant Design 一些官方文檔雖有提及,但是容易被忽略的,又比較重

form , 表單驗證 , antd , 前端 , Javascript

雲魚 - JavaScript中各種源碼實現

前言 能夠手撕各種JavaScript原生函數,可以説是進大廠必備!同時對JavaScript源碼的學習和實現也能幫助我們快速紮實地提升自己的前端編程能力。 最近很多人和我一樣在積極地準備前端面試筆試,所以就整理了一些前端面試筆試中非常容易被問到的原生函數實現和各種前端原理實現,其中部分源碼戳這裏。 實現一個new操作符 我們首先知道new做了什麼: 創建一個空的簡單JavaScript對象

面試 , 源碼 , 筆試 , 前端 , Javascript

轉角處的湯姆 - 前端 JavaScript 數組扁平化處理:方法與技巧

在前端開發中,數組扁平化(Flattening an Array)是一個常見的操作,特別是在處理嵌套數組時。數組扁平化的過程就是將多維數組轉化為一維數組。這在許多場景下都非常有用,例如處理API返回的數據、操作複雜的列表、或是優化數據結構。 本文將深入探討如何在 JavaScript 中實現數組扁平化,並展示幾種常見的扁平化方法,幫助你更好地處理嵌套數組。 目錄

數組 , 扁平化 , 嵌套 , 前端開發 , Javascript

月恆 - ChromeOS 133 版本更新

ChromeOS 133 版本更新 1. 增強託管用户的 Office 文件處理功能 從 ChromeOS 133 開始,託管用户 現在可以 無縫打開和編輯 Microsoft Office 文件(Word、PowerPoint、Excel),無論他們使用的是 Microsoft 365(Office for the web) 還是 Google Workspace。 1.1. 對不同用户的優化

chrome , 瀏覽器 , 前端

前端小巷子 - Vue 2深入 keep-alive

Vue 2深入 keep-alive keep-alive 是 Vue 2 運行時裏最常被提及卻最少被深究的內置組件。它看上去只是“把頁面緩存起來”,背後卻涉及實例生命週期劫持、LRU 緩存策略、VNode 複用以及內存管理。 一、設計動機 單頁應用裏常見的“標籤頁”“麪包屑”“分步表單”等交互模式,都要求用户在多個路由或狀態之間來回切換。默認情況下,每一次切換都會觸發舊組件

生命週期 , 緩存 , 複用 , 前端開發 , Javascript

Grewer - 淺析微前端沙箱

前言 在大型項目中,微前端是一種常見的優化手段,本文就微前端中沙箱的機制及原理,作一下講解。 首先什麼是微前端 Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends

iframe , qiankun , 微前端 , 前端 , Javascript